style: legend text and icon alignment

Author: afonsojramos

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(() => {

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:"

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();
+  });
+});

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>
+  );
+};

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(() => {

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:"

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;

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(() => {

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"