From 44e91a392fce957d8a687cd01744fe721d1a862b Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 3 Jul 2024 18:00:05 -0800
Subject: [PATCH] feat: add icons to header sections

---
 .../settings/AppearanceSettings.tsx           |  2 +
 .../settings/NotificationSettings.tsx         |  2 +
 src/components/settings/SystemSettings.tsx    |  2 +
 src/routes/Filters.tsx                        |  8 +++-
 .../__snapshots__/Filters.test.tsx.snap       | 28 +++++++++++++
 .../__snapshots__/Settings.test.tsx.snap      | 42 +++++++++++++++++++
 6 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/src/components/settings/AppearanceSettings.tsx b/src/components/settings/AppearanceSettings.tsx
index 4efd91340..4a31ac201 100644
--- a/src/components/settings/AppearanceSettings.tsx
+++ b/src/components/settings/AppearanceSettings.tsx
@@ -3,6 +3,7 @@ import {
   CommentIcon,
   IssueClosedIcon,
   MilestoneIcon,
+  PaintbrushIcon,
   TagIcon,
 } from '@primer/octicons-react';
 import { ipcRenderer } from 'electron';
@@ -27,6 +28,7 @@ export const AppearanceSettings: FC = () => {
   return (
     <fieldset className="mb-3">
       <legend id="appearance" className="mb-1 mt-2 font-semibold">
+        <PaintbrushIcon className="mr-2" />
         Appearance
       </legend>
       <RadioGroup
diff --git a/src/components/settings/NotificationSettings.tsx b/src/components/settings/NotificationSettings.tsx
index c0880c223..a1a654e3f 100644
--- a/src/components/settings/NotificationSettings.tsx
+++ b/src/components/settings/NotificationSettings.tsx
@@ -1,3 +1,4 @@
+import { BellIcon } from '@primer/octicons-react';
 import { type FC, type MouseEvent, useContext } from 'react';
 import { AppContext } from '../../context/App';
 import { GroupBy } from '../../types';
@@ -11,6 +12,7 @@ export const NotificationSettings: FC = () => {
   return (
     <fieldset className="mb-3">
       <legend id="notifications" className="mb-1 mt-2 font-semibold">
+        <BellIcon className="mr-2" />
         Notifications
       </legend>
       <RadioGroup
diff --git a/src/components/settings/SystemSettings.tsx b/src/components/settings/SystemSettings.tsx
index 44e7a9363..fd5efb880 100644
--- a/src/components/settings/SystemSettings.tsx
+++ b/src/components/settings/SystemSettings.tsx
@@ -1,3 +1,4 @@
+import { DeviceDesktopIcon } from '@primer/octicons-react';
 import { type FC, useContext } from 'react';
 import { AppContext } from '../../context/App';
 import Constants from '../../utils/constants';
@@ -10,6 +11,7 @@ export const SystemSettings: FC = () => {
   return (
     <fieldset className="mb-3">
       <legend id="system" className="mb-1 mt-2 font-semibold">
+        <DeviceDesktopIcon className="mr-2" />
         System
       </legend>
       <Checkbox
diff --git a/src/routes/Filters.tsx b/src/routes/Filters.tsx
index 4f46f863b..295044fd9 100644
--- a/src/routes/Filters.tsx
+++ b/src/routes/Filters.tsx
@@ -1,4 +1,8 @@
-import { FilterRemoveIcon } from '@primer/octicons-react';
+import {
+  FeedPersonIcon,
+  FilterRemoveIcon,
+  NoteIcon,
+} from '@primer/octicons-react';
 import { type FC, useContext } from 'react';
 import { Header } from '../components/Header';
 import { Checkbox } from '../components/fields/Checkbox';
@@ -33,6 +37,7 @@ export const FiltersRoute: FC = () => {
       <div className="flex-grow overflow-x-auto px-8">
         <fieldset className="mb-3">
           <legend id="notifications" className="mb-1 mt-2 font-semibold">
+            <FeedPersonIcon className="mr-2" />
             Users
           </legend>
           <Checkbox
@@ -61,6 +66,7 @@ export const FiltersRoute: FC = () => {
 
         <fieldset className="mb-3">
           <legend id="appearance" className="mb-1 mt-2 font-semibold">
+            <NoteIcon className="mr-2" />
             Reason
           </legend>
           <span className="text-xs italic">
diff --git a/src/routes/__snapshots__/Filters.test.tsx.snap b/src/routes/__snapshots__/Filters.test.tsx.snap
index 4bbea5a2c..fc2c4fbae 100644
--- a/src/routes/__snapshots__/Filters.test.tsx.snap
+++ b/src/routes/__snapshots__/Filters.test.tsx.snap
@@ -45,6 +45,20 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         class="mb-1 mt-2 font-semibold"
         id="notifications"
       >
+        <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 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+          />
+        </svg>
         Users
       </legend>
       <div
@@ -102,6 +116,20 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         class="mb-1 mt-2 font-semibold"
         id="appearance"
       >
+        <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="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25Zm1.75-.25a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25ZM3.5 6.25a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75Zm.75 2.25h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1 0-1.5Z"
+          />
+        </svg>
         Reason
       </legend>
       <span
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 83afa9748..92f273a7d 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -45,6 +45,20 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         class="mb-1 mt-2 font-semibold"
         id="appearance"
       >
+        <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="M11.134 1.535c.7-.509 1.416-.942 2.076-1.155.649-.21 1.463-.267 2.069.34.603.601.568 1.411.368 2.07-.202.668-.624 1.39-1.125 2.096-1.011 1.424-2.496 2.987-3.775 4.249-1.098 1.084-2.132 1.839-3.04 2.3a3.744 3.744 0 0 1-1.055 3.217c-.431.431-1.065.691-1.657.861-.614.177-1.294.287-1.914.357A21.151 21.151 0 0 1 .797 16H.743l.007-.75H.749L.742 16a.75.75 0 0 1-.743-.742l.743-.008-.742.007v-.054a21.25 21.25 0 0 1 .13-2.284c.067-.647.187-1.287.358-1.914.17-.591.43-1.226.86-1.657a3.746 3.746 0 0 1 3.227-1.054c.466-.893 1.225-1.907 2.314-2.982 1.271-1.255 2.833-2.75 4.245-3.777ZM1.62 13.089c-.051.464-.086.929-.104 1.395.466-.018.932-.053 1.396-.104a10.511 10.511 0 0 0 1.668-.309c.526-.151.856-.325 1.011-.48a2.25 2.25 0 1 0-3.182-3.182c-.155.155-.329.485-.48 1.01a10.515 10.515 0 0 0-.309 1.67Zm10.396-10.34c-1.224.89-2.605 2.189-3.822 3.384l1.718 1.718c1.21-1.205 2.51-2.597 3.387-3.833.47-.662.78-1.227.912-1.662.134-.444.032-.551.009-.575h-.001V1.78c-.014-.014-.113-.113-.548.027-.432.14-.995.462-1.655.942Zm-4.832 7.266-.001.001a9.859 9.859 0 0 0 1.63-1.142L7.155 7.216a9.7 9.7 0 0 0-1.161 1.607c.482.302.889.71 1.19 1.192Z"
+          />
+        </svg>
         Appearance
       </legend>
       <div
@@ -254,6 +268,20 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         class="mb-1 mt-2 font-semibold"
         id="notifications"
       >
+        <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 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"
+          />
+        </svg>
         Notifications
       </legend>
       <div
@@ -444,6 +472,20 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         class="mb-1 mt-2 font-semibold"
         id="system"
       >
+        <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="M14.25 1c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.752.752 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5C0 1.784.784 1 1.75 1ZM1.75 2.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25ZM9.018 12H6.982a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5Z"
+          />
+        </svg>
         System
       </legend>
       <div