From 24d4cc0b4e6553ab3fef0e55f7c43b2ca7a8916f Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 8 Jul 2024 11:06:00 -0700
Subject: [PATCH 1/2] feat: add header icon

---
 src/components/Header.test.tsx                |  9 ++++--
 src/components/Header.tsx                     | 15 +++++----
 .../__snapshots__/Header.test.tsx.snap        | 32 +++++++++++++++++--
 src/routes/Accounts.tsx                       |  2 +-
 src/routes/Filters.tsx                        |  5 ++-
 src/routes/LoginWithOAuthApp.tsx              |  5 +--
 src/routes/LoginWithPersonalAccessToken.tsx   |  5 +--
 src/routes/Settings.tsx                       |  5 ++-
 .../__snapshots__/Accounts.test.tsx.snap      | 16 +++++++++-
 .../__snapshots__/Filters.test.tsx.snap       | 16 +++++++++-
 .../LoginWithOAuthApp.test.tsx.snap           | 12 +++----
 ...LoginWithPersonalAccessToken.test.tsx.snap | 12 +++----
 .../__snapshots__/Settings.test.tsx.snap      | 16 +++++++++-
 13 files changed, 112 insertions(+), 38 deletions(-)

diff --git a/src/components/Header.test.tsx b/src/components/Header.test.tsx
index a381c8be8..7633858c7 100644
--- a/src/components/Header.test.tsx
+++ b/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>,
     );
 
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 98698d861..c5e3c274c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import { ArrowLeftIcon } from '@primer/octicons-react';
+import { ArrowLeftIcon, type Icon } from '@primer/octicons-react';
 import { type FC, type ReactNode, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { AppContext } from '../context/App';
@@ -6,13 +6,11 @@ import { Size } from '../types';
 
 interface IHeader {
   children: ReactNode;
+  icon?: Icon;
   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 +23,7 @@ export const Header: FC<IHeader> = ({
         title="Go Back"
         onClick={() => {
           navigate(-1);
-          if (fetchOnBack) {
+          if (props.fetchOnBack) {
             fetchNotifications();
           }
         }}
@@ -37,7 +35,10 @@ export const Header: FC<IHeader> = ({
         />
       </button>
 
-      <h3 className="text-lg font-semibold">{children}</h3>
+      <h3 className="text-lg font-semibold flex items-center">
+        <props.icon className="mr-2" />
+        {props.children}
+      </h3>
     </div>
   );
 };
diff --git a/src/components/__snapshots__/Header.test.tsx.snap b/src/components/__snapshots__/Header.test.tsx.snap
index 98717155d..7907956c9 100644
--- a/src/components/__snapshots__/Header.test.tsx.snap
+++ b/src/components/__snapshots__/Header.test.tsx.snap
@@ -30,8 +30,22 @@ exports[`components/Header.tsx should render itself & its children 1`] = `
           </svg>
         </button>
         <h3
-          class="text-lg font-semibold"
+          class="text-lg font-semibold flex items-center"
         >
+          <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="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+            />
+          </svg>
           Test Header
         </h3>
       </div>
@@ -63,8 +77,22 @@ exports[`components/Header.tsx should render itself & its children 1`] = `
         </svg>
       </button>
       <h3
-        class="text-lg font-semibold"
+        class="text-lg font-semibold flex items-center"
       >
+        <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="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+          />
+        </svg>
         Test Header
       </h3>
     </div>
diff --git a/src/routes/Accounts.tsx b/src/routes/Accounts.tsx
index 41a859ffa..60e77c572 100644
--- a/src/routes/Accounts.tsx
+++ b/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) => (
diff --git a/src/routes/Filters.tsx b/src/routes/Filters.tsx
index 295044fd9..8e44789ee 100644
--- a/src/routes/Filters.tsx
+++ b/src/routes/Filters.tsx
@@ -1,5 +1,6 @@
 import {
   FeedPersonIcon,
+  FilterIcon,
   FilterRemoveIcon,
   NoteIcon,
 } from '@primer/octicons-react';
@@ -33,7 +34,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 id="notifications" className="mb-1 mt-2 font-semibold">
diff --git a/src/routes/LoginWithOAuthApp.tsx b/src/routes/LoginWithOAuthApp.tsx
index bd3b26573..9d0e7df3e 100644
--- a/src/routes/LoginWithOAuthApp.tsx
+++ b/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={{
diff --git a/src/routes/LoginWithPersonalAccessToken.tsx b/src/routes/LoginWithPersonalAccessToken.tsx
index b5d6d6e82..e792ef12b 100644
--- a/src/routes/LoginWithPersonalAccessToken.tsx
+++ b/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
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index 1149199ec..8a84c1172 100644
--- a/src/routes/Settings.tsx
+++ b/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 />
diff --git a/src/routes/__snapshots__/Accounts.test.tsx.snap b/src/routes/__snapshots__/Accounts.test.tsx.snap
index 30e6212d1..b8baa14c9 100644
--- a/src/routes/__snapshots__/Accounts.test.tsx.snap
+++ b/src/routes/__snapshots__/Accounts.test.tsx.snap
@@ -30,8 +30,22 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
       </svg>
     </button>
     <h3
-      class="text-lg font-semibold"
+      class="text-lg font-semibold flex items-center"
     >
+      <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="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+        />
+      </svg>
       Accounts
     </h3>
   </div>
diff --git a/src/routes/__snapshots__/Filters.test.tsx.snap b/src/routes/__snapshots__/Filters.test.tsx.snap
index fc2c4fbae..fb33a5346 100644
--- a/src/routes/__snapshots__/Filters.test.tsx.snap
+++ b/src/routes/__snapshots__/Filters.test.tsx.snap
@@ -30,8 +30,22 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
       </svg>
     </button>
     <h3
-      class="text-lg font-semibold"
+      class="text-lg font-semibold flex items-center"
     >
+      <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="M.75 3h14.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1 0-1.5ZM3 7.75A.75.75 0 0 1 3.75 7h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 3 7.75Zm3 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"
+        />
+      </svg>
       Filters
     </h3>
   </div>
diff --git a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
index 582a63540..e404eb709 100644
--- a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
@@ -31,17 +31,17 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             </svg>
           </button>
           <h3
-            class="text-lg font-semibold"
+            class="text-lg font-semibold flex items-center"
           >
             <svg
               aria-hidden="true"
               class="mr-2"
               fill="currentColor"
               focusable="false"
-              height="20"
+              height="16"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
               viewBox="0 0 16 16"
-              width="20"
+              width="16"
             >
               <path
                 d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
@@ -229,17 +229,17 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
           </svg>
         </button>
         <h3
-          class="text-lg font-semibold"
+          class="text-lg font-semibold flex items-center"
         >
           <svg
             aria-hidden="true"
             class="mr-2"
             fill="currentColor"
             focusable="false"
-            height="20"
+            height="16"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="20"
+            width="16"
           >
             <path
               d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
diff --git a/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
index b0aa2dc5e..5d6372968 100644
--- a/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
@@ -30,17 +30,17 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
           </svg>
         </button>
         <h3
-          class="text-lg font-semibold"
+          class="text-lg font-semibold flex items-center"
         >
           <svg
             aria-hidden="true"
             class="mr-2"
             fill="currentColor"
             focusable="false"
-            height="18"
+            height="16"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="18"
+            width="16"
           >
             <path
               d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
@@ -215,17 +215,17 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
         </svg>
       </button>
       <h3
-        class="text-lg font-semibold"
+        class="text-lg font-semibold flex items-center"
       >
         <svg
           aria-hidden="true"
           class="mr-2"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 0e2fa07a7..187aa11a1 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -30,8 +30,22 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
       </svg>
     </button>
     <h3
-      class="text-lg font-semibold"
+      class="text-lg font-semibold flex items-center"
     >
+      <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="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"
+        />
+      </svg>
       Settings
     </h3>
   </div>

From 89e4575bbd38030b60d19a254d72e86d2c566879 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 8 Jul 2024 11:08:45 -0700
Subject: [PATCH 2/2] feat: add header icon

---
 src/components/Header.tsx                     | 10 +--
 .../__snapshots__/Header.test.tsx.snap        | 66 +++++++++++--------
 .../__snapshots__/Accounts.test.tsx.snap      | 33 ++++++----
 .../__snapshots__/Filters.test.tsx.snap       | 33 ++++++----
 .../LoginWithOAuthApp.test.tsx.snap           | 66 +++++++++++--------
 ...LoginWithPersonalAccessToken.test.tsx.snap | 66 +++++++++++--------
 .../__snapshots__/Settings.test.tsx.snap      | 33 ++++++----
 7 files changed, 176 insertions(+), 131 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c5e3c274c..3ecddb9e4 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,12 +1,13 @@
 import { ArrowLeftIcon, type Icon } from '@primer/octicons-react';
-import { type FC, type ReactNode, useContext } from '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;
+  icon: Icon;
+  children: string;
   fetchOnBack?: boolean;
 }
 
@@ -36,8 +37,7 @@ export const Header: FC<IHeader> = (props: IHeader) => {
       </button>
 
       <h3 className="text-lg font-semibold flex items-center">
-        <props.icon className="mr-2" />
-        {props.children}
+        <Legend icon={props.icon}>{props.children}</Legend>
       </h3>
     </div>
   );
diff --git a/src/components/__snapshots__/Header.test.tsx.snap b/src/components/__snapshots__/Header.test.tsx.snap
index 7907956c9..b5bf11c58 100644
--- a/src/components/__snapshots__/Header.test.tsx.snap
+++ b/src/components/__snapshots__/Header.test.tsx.snap
@@ -32,21 +32,26 @@ exports[`components/Header.tsx should render itself & its children 1`] = `
         <h3
           class="text-lg font-semibold flex items-center"
         >
-          <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"
+          <legend
+            class="mb-1 mt-2 font-semibold flex items-center"
+            id="test-header"
           >
-            <path
-              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-            />
-          </svg>
-          Test Header
+            <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="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+              />
+            </svg>
+            Test Header
+          </legend>
         </h3>
       </div>
     </div>
@@ -79,21 +84,26 @@ exports[`components/Header.tsx should render itself & its children 1`] = `
       <h3
         class="text-lg font-semibold flex items-center"
       >
-        <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"
+        <legend
+          class="mb-1 mt-2 font-semibold flex items-center"
+          id="test-header"
         >
-          <path
-            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-          />
-        </svg>
-        Test Header
+          <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="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+            />
+          </svg>
+          Test Header
+        </legend>
       </h3>
     </div>
   </div>,
diff --git a/src/routes/__snapshots__/Accounts.test.tsx.snap b/src/routes/__snapshots__/Accounts.test.tsx.snap
index b8baa14c9..da96fff28 100644
--- a/src/routes/__snapshots__/Accounts.test.tsx.snap
+++ b/src/routes/__snapshots__/Accounts.test.tsx.snap
@@ -32,21 +32,26 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
     <h3
       class="text-lg font-semibold flex items-center"
     >
-      <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"
+      <legend
+        class="mb-1 mt-2 font-semibold flex items-center"
+        id="accounts"
       >
-        <path
-          d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
-        />
-      </svg>
-      Accounts
+        <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="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+          />
+        </svg>
+        Accounts
+      </legend>
     </h3>
   </div>
   <div
diff --git a/src/routes/__snapshots__/Filters.test.tsx.snap b/src/routes/__snapshots__/Filters.test.tsx.snap
index fb33a5346..bd6b18e30 100644
--- a/src/routes/__snapshots__/Filters.test.tsx.snap
+++ b/src/routes/__snapshots__/Filters.test.tsx.snap
@@ -32,21 +32,26 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
     <h3
       class="text-lg font-semibold flex items-center"
     >
-      <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"
+      <legend
+        class="mb-1 mt-2 font-semibold flex items-center"
+        id="filters"
       >
-        <path
-          d="M.75 3h14.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1 0-1.5ZM3 7.75A.75.75 0 0 1 3.75 7h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 3 7.75Zm3 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"
-        />
-      </svg>
-      Filters
+        <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="M.75 3h14.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1 0-1.5ZM3 7.75A.75.75 0 0 1 3.75 7h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 3 7.75Zm3 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"
+          />
+        </svg>
+        Filters
+      </legend>
     </h3>
   </div>
   <div
diff --git a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
index e404eb709..5d4c7ad11 100644
--- a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
@@ -33,21 +33,26 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
           <h3
             class="text-lg font-semibold flex items-center"
           >
-            <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"
+            <legend
+              class="mb-1 mt-2 font-semibold flex items-center"
+              id="login-with oauth app"
             >
-              <path
-                d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
-              />
-            </svg>
-            Login with OAuth App
+              <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="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+                />
+              </svg>
+              Login with OAuth App
+            </legend>
           </h3>
         </div>
         <div
@@ -231,21 +236,26 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
         <h3
           class="text-lg font-semibold flex items-center"
         >
-          <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"
+          <legend
+            class="mb-1 mt-2 font-semibold flex items-center"
+            id="login-with oauth app"
           >
-            <path
-              d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
-            />
-          </svg>
-          Login with OAuth App
+            <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="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+              />
+            </svg>
+            Login with OAuth App
+          </legend>
         </h3>
       </div>
       <div
diff --git a/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
index 5d6372968..dd3492692 100644
--- a/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
@@ -32,21 +32,26 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
         <h3
           class="text-lg font-semibold flex items-center"
         >
-          <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"
+          <legend
+            class="mb-1 mt-2 font-semibold flex items-center"
+            id="login-with personal access token"
           >
-            <path
-              d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
-            />
-          </svg>
-          Login with Personal Access Token
+            <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="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+              />
+            </svg>
+            Login with Personal Access Token
+          </legend>
         </h3>
       </div>
       <div
@@ -217,21 +222,26 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
       <h3
         class="text-lg font-semibold flex items-center"
       >
-        <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"
+        <legend
+          class="mb-1 mt-2 font-semibold flex items-center"
+          id="login-with personal access token"
         >
-          <path
-            d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
-          />
-        </svg>
-        Login with Personal Access Token
+          <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="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+            />
+          </svg>
+          Login with Personal Access Token
+        </legend>
       </h3>
     </div>
     <div
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 187aa11a1..2ad235e9d 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -32,21 +32,26 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
     <h3
       class="text-lg font-semibold flex items-center"
     >
-      <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"
+      <legend
+        class="mb-1 mt-2 font-semibold flex items-center"
+        id="settings"
       >
-        <path
-          d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"
-        />
-      </svg>
-      Settings
+        <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="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"
+          />
+        </svg>
+        Settings
+      </legend>
     </h3>
   </div>
   <div