Repository: gitify-app/gitify
Pull request #1340 (2024-07-08 17:17:44)

style: legend text and icon alignment
I was going crazy with the misalignment 🤪


Patch:
diff --git a/src/components/settings/AppearanceSettings.tsx b/src/components/settings/AppearanceSettings.tsx
index fb3bc1ca..1d0da8e5 100644
--- a/src/components/settings/AppearanceSettings.tsx
+++ b/src/components/settings/AppearanceSettings.tsx
@@ -13,6 +13,7 @@ import { Size, Theme } from '../../types';
 import { setTheme } from '../../utils/theme';
 import { Checkbox } from '../fields/Checkbox';
 import { RadioGroup } from '../fields/RadioGroup';
+import { Legend } from './Legend';
 
 export const AppearanceSettings: FC = () => {
   const { settings, updateSetting } = useContext(AppContext);
@@ -27,10 +28,7 @@ export const AppearanceSettings: FC = () => {
 
   return (
     <fieldset>
-      <legend id="appearance" className="mb-1 mt-2 font-semibold">
-        <PaintbrushIcon className="mr-2" />
-        Appearance
-      </legend>
+      <Legend icon={PaintbrushIcon}>Appearance</Legend>
       <RadioGroup
         name="theme"
         label="Theme:"
diff --git a/src/components/settings/Legend.tsx b/src/components/settings/Legend.tsx
new file mode 100644
index 00000000..b3eecc49
--- /dev/null
+++ b/src/components/settings/Legend.tsx
@@ -0,0 +1,19 @@
+import type { Icon } from '@primer/octicons-react';
+import type { FC } from 'react';
+
+interface ILegend {
+  icon: Icon;
+  children: string;
+}
+
+export const Legend: FC<ILegend> = (props) => {
+  return (
+    <legend
+      id={props.children.toLowerCase().replace(' ', '-')}
+      className="mb-1 mt-2 font-semibold flex items-center"
+    >
+      <props.icon className="mr-2" />
+      {props.children}
+    </legend>
+  );
+};
diff --git a/src/components/settings/NotificationSettings.tsx b/src/components/settings/NotificationSettings.tsx
index 003dacf0..f9fac93e 100644
--- a/src/components/settings/NotificationSettings.tsx
+++ b/src/components/settings/NotificationSettings.tsx
@@ -5,16 +5,14 @@ import { GroupBy } from '../../types';
 import { openGitHubParticipatingDocs } from '../../utils/links';
 import { Checkbox } from '../fields/Checkbox';
 import { RadioGroup } from '../fields/RadioGroup';
+import { Legend } from './Legend';
 
 export const NotificationSettings: FC = () => {
   const { settings, updateSetting } = useContext(AppContext);
 
   return (
     <fieldset>
-      <legend id="notifications" className="mb-1 mt-2 font-semibold">
-        <BellIcon className="mr-2" />
-        Notifications
-      </legend>
+      <Legend icon={BellIcon}>Notifications</Legend>
       <RadioGroup
         name="groupBy"
         label="Group by:"
diff --git a/src/components/settings/SystemSettings.tsx b/src/components/settings/SystemSettings.tsx
index 40364bc5..a29edf05 100644
--- a/src/components/settings/SystemSettings.tsx
+++ b/src/components/settings/SystemSettings.tsx
@@ -4,16 +4,14 @@ import { AppContext } from '../../context/App';
 import Constants from '../../utils/constants';
 import { isLinux, isMacOS } from '../../utils/platform';
 import { Checkbox } from '../fields/Checkbox';
+import { Legend } from './Legend';
 
 export const SystemSettings: FC = () => {
   const { settings, updateSetting } = useContext(AppContext);
 
   return (
     <fieldset>
-      <legend id="system" className="mb-1 mt-2 font-semibold">
-        <DeviceDesktopIcon className="mr-2" />
-        System
-      </legend>
+      <Legend icon={DeviceDesktopIcon}>System</Legend>
       <Checkbox
         name="kbdShortcutEnabled"
         label="Enable keyboard shortcut"


Test patch:
diff --git a/src/components/settings/AppearanceSettings.test.tsx b/src/components/settings/AppearanceSettings.test.tsx
index 96cae84b..dcf8a6d0 100644
--- a/src/components/settings/AppearanceSettings.test.tsx
+++ b/src/components/settings/AppearanceSettings.test.tsx
@@ -4,7 +4,7 @@ import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';
 import { AppearanceSettings } from './AppearanceSettings';
 
-describe('routes/components/AppearanceSettings.tsx', () => {
+describe('routes/components/settings/AppearanceSettings.tsx', () => {
   const updateSetting = jest.fn();
 
   afterEach(() => {
diff --git a/src/components/settings/Legend.test.tsx b/src/components/settings/Legend.test.tsx
new file mode 100644
index 00000000..1dad159e
--- /dev/null
+++ b/src/components/settings/Legend.test.tsx
@@ -0,0 +1,11 @@
+import { PersonFillIcon } from '@primer/octicons-react';
+import { render } from '@testing-library/react';
+import { Legend } from './Legend';
+
+describe('routes/components/settings/Legend.tsx', () => {
+  it('should render the legend', async () => {
+    const { container } = render(<Legend icon={PersonFillIcon}>Legend</Legend>);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/settings/NotificationSettings.test.tsx b/src/components/settings/NotificationSettings.test.tsx
index ab335f22..f1ac7ea6 100644
--- a/src/components/settings/NotificationSettings.test.tsx
+++ b/src/components/settings/NotificationSettings.test.tsx
@@ -5,7 +5,7 @@ import { AppContext } from '../../context/App';
 import * as comms from '../../utils/comms';
 import { NotificationSettings } from './NotificationSettings';
 
-describe('routes/components/NotificationSettings.tsx', () => {
+describe('routes/components/settings/NotificationSettings.tsx', () => {
   const updateSetting = jest.fn();
 
   afterEach(() => {
diff --git a/src/components/settings/SettingsFooter.test.tsx b/src/components/settings/SettingsFooter.test.tsx
index 6074d770..c4ea9aca 100644
--- a/src/components/settings/SettingsFooter.test.tsx
+++ b/src/components/settings/SettingsFooter.test.tsx
@@ -11,7 +11,7 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockNavigate,
 }));
 
-describe('routes/components/SettingsFooter.tsx', () => {
+describe('routes/components/settings/SettingsFooter.tsx', () => {
   afterEach(() => {
     jest.clearAllMocks();
     process.env = originalEnv;
diff --git a/src/components/settings/SystemSettings.test.tsx b/src/components/settings/SystemSettings.test.tsx
index 3ca7c6df..3a192f48 100644
--- a/src/components/settings/SystemSettings.test.tsx
+++ b/src/components/settings/SystemSettings.test.tsx
@@ -4,7 +4,7 @@ import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';
 import { SystemSettings } from './SystemSettings';
 
-describe('routes/components/SystemSettings.tsx', () => {
+describe('routes/components/settings/SystemSettings.tsx', () => {
   const updateSetting = jest.fn();
 
   afterEach(() => {
diff --git a/src/components/settings/__snapshots__/Legend.test.tsx.snap b/src/components/settings/__snapshots__/Legend.test.tsx.snap
new file mode 100644
index 00000000..4dc6b771
--- /dev/null
+++ b/src/components/settings/__snapshots__/Legend.test.tsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`routes/components/settings/Legend.tsx should render the legend 1`] = `
+<div>
+  <legend
+    class="mb-1 mt-2 font-semibold flex items-center"
+    id="legend"
+  >
+    <svg
+      aria-hidden="true"
+      class="mr-2"
+      fill="currentColor"
+      focusable="false"
+      height="16"
+      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+      viewBox="0 0 16 16"
+      width="16"
+    >
+      <path
+        d="M4.243 4.757a3.757 3.757 0 1 1 5.851 3.119 6.006 6.006 0 0 1 3.9 5.339.75.75 0 0 1-.715.784H2.721a.75.75 0 0 1-.714-.784 6.006 6.006 0 0 1 3.9-5.34 3.753 3.753 0 0 1-1.664-3.118Z"
+      />
+    </svg>
+    Legend
+  </legend>
+</div>
+`;
diff --git a/src/components/settings/__snapshots__/SettingsFooter.test.tsx.snap b/src/components/settings/__snapshots__/SettingsFooter.test.tsx.snap
index 75e06fc2..ade8eef0 100644
--- a/src/components/settings/__snapshots__/SettingsFooter.test.tsx.snap
+++ b/src/components/settings/__snapshots__/SettingsFooter.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`routes/components/SettingsFooter.tsx app version should show development app version 1`] = `
+exports[`routes/components/settings/SettingsFooter.tsx app version should show development app version 1`] = `
 <span
   title="app-version"
 >
@@ -9,7 +9,7 @@ exports[`routes/components/SettingsFooter.tsx app version should show developmen
 </span>
 `;
 
-exports[`routes/components/SettingsFooter.tsx app version should show production app version 1`] = `
+exports[`routes/components/settings/SettingsFooter.tsx app version should show production app version 1`] = `
 <span
   title="app-version"
 >
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 8ad34cfc..6745da86 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
   >
     <fieldset>
       <legend
-        class="mb-1 mt-2 font-semibold"
+        class="mb-1 mt-2 font-semibold flex items-center"
         id="appearance"
       >
         <svg
@@ -261,7 +261,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
     </fieldset>
     <fieldset>
       <legend
-        class="mb-1 mt-2 font-semibold"
+        class="mb-1 mt-2 font-semibold flex items-center"
         id="notifications"
       >
         <svg
@@ -463,7 +463,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
     </fieldset>
     <fieldset>
       <legend
-        class="mb-1 mt-2 font-semibold"
+        class="mb-1 mt-2 font-semibold flex items-center"
         id="system"
       >
         <svg