feat: settings header icon (#1343)

src/components/Header.test.tsx

@@ -1,3 +1,4 @@
+import { MarkGithubIcon } from '@primer/octicons-react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { AppContext } from '../context/App';
 import { Header } from './Header';
@@ -16,13 +17,13 @@ describe('components/Header.tsx', () => {
   });
 
   it('should render itself & its children', () => {
-    const tree = render(<Header>Test Header</Header>);
+    const tree = render(<Header icon={MarkGithubIcon}>Test Header</Header>);
 
     expect(tree).toMatchSnapshot();
   });
 
   it('should navigate back', () => {
-    render(<Header>Test Header</Header>);
+    render(<Header icon={MarkGithubIcon}>Test Header</Header>);
 
     fireEvent.click(screen.getByLabelText('Go Back'));
 
@@ -36,7 +37,9 @@ describe('components/Header.tsx', () => {
           fetchNotifications,
         }}
       >
-        <Header fetchOnBack={true}>Test Header</Header>
+        <Header fetchOnBack={true} icon={MarkGithubIcon}>
+          Test Header
+        </Header>
       </AppContext.Provider>,
     );
 

src/components/Header.tsx

@@ -1,18 +1,17 @@
-import { ArrowLeftIcon } from '@primer/octicons-react';
-import { type FC, type ReactNode, useContext } from 'react';
+import { ArrowLeftIcon, type Icon } from '@primer/octicons-react';
+import { type FC, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { AppContext } from '../context/App';
 import { Size } from '../types';
+import { Legend } from './settings/Legend';
 
 interface IHeader {
-  children: ReactNode;
+  icon: Icon;
+  children: string;
   fetchOnBack?: boolean;
 }
 
-export const Header: FC<IHeader> = ({
-  children,
-  fetchOnBack = false,
-}: IHeader) => {
+export const Header: FC<IHeader> = (props: IHeader) => {
   const navigate = useNavigate();
 
   const { fetchNotifications } = useContext(AppContext);
@@ -25,7 +24,7 @@ export const Header: FC<IHeader> = ({
         title="Go Back"
         onClick={() => {
           navigate(-1);
-          if (fetchOnBack) {
+          if (props.fetchOnBack) {
             fetchNotifications();
           }
         }}
@@ -37,7 +36,9 @@ export const Header: FC<IHeader> = ({
         />
       </button>
 
-      <h3 className="text-lg font-semibold">{children}</h3>
+      <h3 className="text-lg font-semibold flex items-center">
+        <Legend icon={props.icon}>{props.children}</Legend>
+      </h3>
     </div>
   );
 };

src/routes/Accounts.tsx

@@ -45,7 +45,7 @@ export const AccountsRoute: FC = () => {
 
   return (
     <div className="flex h-screen flex-col" data-testid="accounts">
-      <Header>Accounts</Header>
+      <Header icon={PersonIcon}>Accounts</Header>
       <div className="flex-grow overflow-x-auto px-8">
         <div className="mt-4 flex flex-col text-sm">
           {auth.accounts.map((account) => (

src/routes/Filters.tsx

@@ -1,5 +1,6 @@
 import {
   FeedPersonIcon,
+  FilterIcon,
   FilterRemoveIcon,
   NoteIcon,
 } from '@primer/octicons-react';
@@ -34,7 +35,9 @@ export const FiltersRoute: FC = () => {
 
   return (
     <div className="flex h-screen flex-col" data-testid="filters">
-      <Header fetchOnBack={true}>Filters</Header>
+      <Header fetchOnBack={true} icon={FilterIcon}>
+        Filters
+      </Header>
       <div className="flex-grow overflow-x-auto px-8">
         <fieldset className="mb-3">
           <Legend icon={FeedPersonIcon}>Users</Legend>

src/routes/LoginWithOAuthApp.tsx

@@ -128,10 +128,7 @@ export const LoginWithOAuthApp: FC = () => {
 
   return (
     <div>
-      <Header>
-        <PersonIcon size={Size.XLARGE} className="mr-2" />
-        Login with OAuth App
-      </Header>
+      <Header icon={PersonIcon}>Login with OAuth App</Header>
       <div className="px-8">
         <Form
           initialValues={{

src/routes/LoginWithPersonalAccessToken.tsx

@@ -133,10 +133,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
 
   return (
     <>
-      <Header>
-        <KeyIcon size={Size.LARGE} className="mr-2" />
-        Login with Personal Access Token
-      </Header>
+      <Header icon={KeyIcon}>Login with Personal Access Token</Header>
 
       <div className="px-8">
         <Form

src/routes/Settings.tsx

@@ -1,3 +1,4 @@
+import { GearIcon } from '@primer/octicons-react';
 import { type FC, useContext } from 'react';
 import { Header } from '../components/Header';
 import { AppearanceSettings } from '../components/settings/AppearanceSettings';
@@ -10,7 +11,9 @@ export const SettingsRoute: FC = () => {
   const { resetSettings } = useContext(AppContext);
   return (
     <div className="flex h-screen flex-col" data-testid="settings">
-      <Header fetchOnBack>Settings</Header>
+      <Header fetchOnBack icon={GearIcon}>
+        Settings
+      </Header>
 
       <div className="flex flex-col flex-grow overflow-x-auto px-8 gap-3">
         <AppearanceSettings />