From d96d5526b53692cdd2b91abe89e9bf4f801a7d3f Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 22 Jan 2025 17:09:25 -0500
Subject: [PATCH] refactor: simplify fields

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/renderer/components/fields/Checkbox.tsx   |   9 +-
 .../components/fields/FieldLabel.test.tsx     |  14 +
 src/renderer/components/fields/FieldLabel.tsx |  14 +
 src/renderer/components/fields/RadioGroup.tsx |  73 ++---
 .../__snapshots__/FieldLabel.test.tsx.snap    |  76 +++++
 .../__snapshots__/RadioGroup.test.tsx.snap    | 290 ++++++++----------
 .../settings/AppearanceSettings.tsx           |   8 +-
 .../__snapshots__/Filters.test.tsx.snap       |   3 +-
 .../__snapshots__/Settings.test.tsx.snap      | 275 ++++++++---------
 9 files changed, 389 insertions(+), 373 deletions(-)
 create mode 100644 src/renderer/components/fields/FieldLabel.test.tsx
 create mode 100644 src/renderer/components/fields/FieldLabel.tsx
 create mode 100644 src/renderer/components/fields/__snapshots__/FieldLabel.test.tsx.snap

diff --git a/src/renderer/components/fields/Checkbox.tsx b/src/renderer/components/fields/Checkbox.tsx
index d44e24cc8..70de2ecac 100644
--- a/src/renderer/components/fields/Checkbox.tsx
+++ b/src/renderer/components/fields/Checkbox.tsx
@@ -1,4 +1,5 @@
 import type { FC, ReactNode } from 'react';
+import { cn } from '../../utils/cn';
 import { Tooltip } from './Tooltip';
 
 export interface ICheckbox {
@@ -26,10 +27,10 @@ export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
         <div className="flex items-center ml-3">
           <label
             htmlFor={props.name}
-            className="font-medium text-gitify-font cursor-pointer"
-            style={
-              props.disabled ? { textDecoration: 'line-through' } : undefined
-            }
+            className={cn(
+              'font-medium text-gitify-font cursor-pointer',
+              props.disabled && 'line-through',
+            )}
           >
             {props.label}
           </label>
diff --git a/src/renderer/components/fields/FieldLabel.test.tsx b/src/renderer/components/fields/FieldLabel.test.tsx
new file mode 100644
index 000000000..31f76978d
--- /dev/null
+++ b/src/renderer/components/fields/FieldLabel.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { FieldLabel, type IFieldLabel } from './FieldLabel';
+
+describe('renderer/components/fields/FieldLabel.tsx', () => {
+  const props: IFieldLabel = {
+    name: 'appearance',
+    label: 'Appearance',
+  };
+
+  it('should render', () => {
+    const tree = render(<FieldLabel {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/renderer/components/fields/FieldLabel.tsx b/src/renderer/components/fields/FieldLabel.tsx
new file mode 100644
index 000000000..633d1225d
--- /dev/null
+++ b/src/renderer/components/fields/FieldLabel.tsx
@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+
+export interface IFieldLabel {
+  name: string;
+  label: string;
+}
+
+export const FieldLabel: FC<IFieldLabel> = (props: IFieldLabel) => {
+  return (
+    <label htmlFor={props.name} className="mr-3 font-medium cursor-pointer">
+      {props.label}
+    </label>
+  );
+};
diff --git a/src/renderer/components/fields/RadioGroup.tsx b/src/renderer/components/fields/RadioGroup.tsx
index d193d74e5..990254158 100644
--- a/src/renderer/components/fields/RadioGroup.tsx
+++ b/src/renderer/components/fields/RadioGroup.tsx
@@ -1,64 +1,43 @@
 import type { ChangeEvent, FC } from 'react';
 import type { RadioGroupItem } from '../../types';
-import { cn } from '../../utils/cn';
+import { FieldLabel } from './FieldLabel';
 
 export interface IRadioGroup {
   name: string;
   label: string;
   options: RadioGroupItem[];
   value: string;
-  disabled?: boolean;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  className?: string;
 }
 
 export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
   return (
-    <div className={cn('mt-3 mb-2 text-sm', props.className)}>
-      <div className="flex items-start">
-        <div className="mr-3">
-          <label
-            htmlFor={props.name}
-            className="font-medium text-gitify-font"
-            style={
-              props.disabled ? { textDecoration: 'line-through' } : undefined
-            }
-          >
-            {props.label}
-          </label>
-        </div>
+    <div className="flex items-start my-2 text-sm font-medium">
+      <FieldLabel name={props.name} label={props.label} />
 
-        <div
-          className="flex items-center space-x-4"
-          role="group"
-          aria-labelledby={props.name}
-        >
-          {props.options.map((item) => {
-            return (
-              <div
-                className="flex items-center"
-                key={`radio_item_${item.value.toLowerCase()}`}
-              >
-                <input
-                  type="radio"
-                  className="size-4 cursor-pointer"
-                  id={`${props.name}_${item.value.toLowerCase()}`}
-                  name={props.name}
-                  value={item.value}
-                  onChange={props.onChange}
-                  checked={item.value === props.value}
-                  disabled={props.disabled}
-                />
-                <label
-                  htmlFor={`${props.name}_${item.value.toLowerCase()}`}
-                  className="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
-                >
-                  {item.label}
-                </label>
-              </div>
-            );
-          })}
-        </div>
+      <div
+        className="flex items-center space-x-4"
+        role="group"
+        aria-labelledby={props.name}
+      >
+        {props.options.map((item) => {
+          const name = `${props.name}_${item.value.toLowerCase()}`;
+
+          return (
+            <div className="flex items-center gap-2" key={name}>
+              <input
+                type="radio"
+                className="size-4 cursor-pointer"
+                id={name}
+                name={props.name}
+                value={item.value}
+                onChange={props.onChange}
+                checked={item.value === props.value}
+              />
+              <FieldLabel name={name} label={item.label} />
+            </div>
+          );
+        })}
       </div>
     </div>
   );
diff --git a/src/renderer/components/fields/__snapshots__/FieldLabel.test.tsx.snap b/src/renderer/components/fields/__snapshots__/FieldLabel.test.tsx.snap
new file mode 100644
index 000000000..8e06a68ea
--- /dev/null
+++ b/src/renderer/components/fields/__snapshots__/FieldLabel.test.tsx.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renderer/components/fields/FieldLabel.tsx should render 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <label
+        class="mr-3 font-medium cursor-pointer"
+        for="appearance"
+      >
+        Appearance
+      </label>
+    </div>
+  </body>,
+  "container": <div>
+    <label
+      class="mr-3 font-medium cursor-pointer"
+      for="appearance"
+    >
+      Appearance
+    </label>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap b/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap
index e0ef716ea..5f74db2a9 100644
--- a/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap
+++ b/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap
@@ -6,90 +6,21 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="mt-3 mb-2 text-sm"
+        class="flex items-start my-2 text-sm font-medium"
       >
-        <div
-          class="flex items-start"
-        >
-          <div
-            class="mr-3"
-          >
-            <label
-              class="font-medium text-gitify-font"
-              for="appearance"
-            >
-              Appearance
-            </label>
-          </div>
-          <div
-            aria-labelledby="appearance"
-            class="flex items-center space-x-4"
-            role="group"
-          >
-            <div
-              class="flex items-center"
-            >
-              <input
-                class="size-4 cursor-pointer"
-                id="appearance_one"
-                name="appearance"
-                type="radio"
-                value="one"
-              />
-              <label
-                class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
-                for="appearance_one"
-              >
-                Value 1
-              </label>
-            </div>
-            <div
-              class="flex items-center"
-            >
-              <input
-                checked=""
-                class="size-4 cursor-pointer"
-                id="appearance_two"
-                name="appearance"
-                type="radio"
-                value="two"
-              />
-              <label
-                class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
-                for="appearance_two"
-              >
-                Value 2
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="mt-3 mb-2 text-sm"
-    >
-      <div
-        class="flex items-start"
-      >
-        <div
-          class="mr-3"
+        <label
+          class="mr-3 font-medium cursor-pointer"
+          for="appearance"
         >
-          <label
-            class="font-medium text-gitify-font"
-            for="appearance"
-          >
-            Appearance
-          </label>
-        </div>
+          Appearance
+        </label>
         <div
           aria-labelledby="appearance"
           class="flex items-center space-x-4"
           role="group"
         >
           <div
-            class="flex items-center"
+            class="flex items-center gap-2"
           >
             <input
               class="size-4 cursor-pointer"
@@ -99,14 +30,14 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = `
               value="one"
             />
             <label
-              class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
+              class="mr-3 font-medium cursor-pointer"
               for="appearance_one"
             >
               Value 1
             </label>
           </div>
           <div
-            class="flex items-center"
+            class="flex items-center gap-2"
           >
             <input
               checked=""
@@ -117,7 +48,7 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = `
               value="two"
             />
             <label
-              class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
+              class="mr-3 font-medium cursor-pointer"
               for="appearance_two"
             >
               Value 2
@@ -126,6 +57,59 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = `
         </div>
       </div>
     </div>
+  </body>,
+  "container": <div>
+    <div
+      class="flex items-start my-2 text-sm font-medium"
+    >
+      <label
+        class="mr-3 font-medium cursor-pointer"
+        for="appearance"
+      >
+        Appearance
+      </label>
+      <div
+        aria-labelledby="appearance"
+        class="flex items-center space-x-4"
+        role="group"
+      >
+        <div
+          class="flex items-center gap-2"
+        >
+          <input
+            class="size-4 cursor-pointer"
+            id="appearance_one"
+            name="appearance"
+            type="radio"
+            value="one"
+          />
+          <label
+            class="mr-3 font-medium cursor-pointer"
+            for="appearance_one"
+          >
+            Value 1
+          </label>
+        </div>
+        <div
+          class="flex items-center gap-2"
+        >
+          <input
+            checked=""
+            class="size-4 cursor-pointer"
+            id="appearance_two"
+            name="appearance"
+            type="radio"
+            value="two"
+          />
+          <label
+            class="mr-3 font-medium cursor-pointer"
+            for="appearance_two"
+          >
+            Value 2
+          </label>
+        </div>
+      </div>
+    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
@@ -187,124 +171,49 @@ exports[`renderer/components/fields/RadioGroup.tsx should render as disabled 1`]
   "baseElement": <body>
     <div>
       <div
-        class="mt-3 mb-2 text-sm"
+        class="flex items-start my-2 text-sm font-medium"
       >
-        <div
-          class="flex items-start"
-        >
-          <div
-            class="mr-3"
-          >
-            <label
-              class="font-medium text-gitify-font"
-              for="appearance"
-              style="text-decoration: line-through;"
-            >
-              Appearance
-            </label>
-          </div>
-          <div
-            aria-labelledby="appearance"
-            class="flex items-center space-x-4"
-            role="group"
-          >
-            <div
-              class="flex items-center"
-            >
-              <input
-                class="size-4 cursor-pointer"
-                disabled=""
-                id="appearance_one"
-                name="appearance"
-                type="radio"
-                value="one"
-              />
-              <label
-                class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
-                for="appearance_one"
-              >
-                Value 1
-              </label>
-            </div>
-            <div
-              class="flex items-center"
-            >
-              <input
-                checked=""
-                class="size-4 cursor-pointer"
-                disabled=""
-                id="appearance_two"
-                name="appearance"
-                type="radio"
-                value="two"
-              />
-              <label
-                class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
-                for="appearance_two"
-              >
-                Value 2
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="mt-3 mb-2 text-sm"
-    >
-      <div
-        class="flex items-start"
-      >
-        <div
-          class="mr-3"
+        <label
+          class="mr-3 font-medium cursor-pointer"
+          for="appearance"
         >
-          <label
-            class="font-medium text-gitify-font"
-            for="appearance"
-            style="text-decoration: line-through;"
-          >
-            Appearance
-          </label>
-        </div>
+          Appearance
+        </label>
         <div
           aria-labelledby="appearance"
           class="flex items-center space-x-4"
           role="group"
         >
           <div
-            class="flex items-center"
+            class="flex items-center gap-2"
           >
             <input
               class="size-4 cursor-pointer"
-              disabled=""
               id="appearance_one"
               name="appearance"
               type="radio"
               value="one"
             />
             <label
-              class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
+              class="mr-3 font-medium cursor-pointer"
               for="appearance_one"
             >
               Value 1
             </label>
           </div>
           <div
-            class="flex items-center"
+            class="flex items-center gap-2"
           >
             <input
               checked=""
               class="size-4 cursor-pointer"
-              disabled=""
               id="appearance_two"
               name="appearance"
               type="radio"
               value="two"
             />
             <label
-              class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
+              class="mr-3 font-medium cursor-pointer"
               for="appearance_two"
             >
               Value 2
@@ -313,6 +222,59 @@ exports[`renderer/components/fields/RadioGroup.tsx should render as disabled 1`]
         </div>
       </div>
     </div>
+  </body>,
+  "container": <div>
+    <div
+      class="flex items-start my-2 text-sm font-medium"
+    >
+      <label
+        class="mr-3 font-medium cursor-pointer"
+        for="appearance"
+      >
+        Appearance
+      </label>
+      <div
+        aria-labelledby="appearance"
+        class="flex items-center space-x-4"
+        role="group"
+      >
+        <div
+          class="flex items-center gap-2"
+        >
+          <input
+            class="size-4 cursor-pointer"
+            id="appearance_one"
+            name="appearance"
+            type="radio"
+            value="one"
+          />
+          <label
+            class="mr-3 font-medium cursor-pointer"
+            for="appearance_one"
+          >
+            Value 1
+          </label>
+        </div>
+        <div
+          class="flex items-center gap-2"
+        >
+          <input
+            checked=""
+            class="size-4 cursor-pointer"
+            id="appearance_two"
+            name="appearance"
+            type="radio"
+            value="two"
+          />
+          <label
+            class="mr-3 font-medium cursor-pointer"
+            for="appearance_two"
+          >
+            Value 2
+          </label>
+        </div>
+      </div>
+    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
diff --git a/src/renderer/components/settings/AppearanceSettings.tsx b/src/renderer/components/settings/AppearanceSettings.tsx
index c64aa37e7..506604cc4 100644
--- a/src/renderer/components/settings/AppearanceSettings.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.tsx
@@ -22,6 +22,7 @@ import { hasMultipleAccounts } from '../../utils/auth/utils';
 import { getColorModeFromTheme, setTheme } from '../../utils/theme';
 import { zoomLevelToPercentage, zoomPercentageToLevel } from '../../utils/zoom';
 import { Checkbox } from '../fields/Checkbox';
+import { FieldLabel } from '../fields/FieldLabel';
 import { RadioGroup } from '../fields/RadioGroup';
 import { Title } from '../primitives/Title';
 
@@ -77,12 +78,7 @@ export const AppearanceSettings: FC = () => {
       />
 
       <div className="flex items-center mt-3 mb-2 text-sm">
-        <label
-          htmlFor="Zoom"
-          className="mr-3 content-center font-medium text-gitify-font"
-        >
-          Zoom:
-        </label>
+        <FieldLabel name="zoom" label="Zoom" />
 
         <ButtonGroup>
           <IconButton
diff --git a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
index cdfd937b6..e82f3d5e3 100644
--- a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
@@ -1106,9 +1106,8 @@ exports[`renderer/routes/Filters.tsx Users section should not be able to toggle
       class="flex items-center ml-3"
     >
       <label
-        class="font-medium text-gitify-font cursor-pointer"
+        class="font-medium text-gitify-font cursor-pointer line-through"
         for="hideBots"
-        style="text-decoration: line-through;"
       >
         Hide notifications from Bot accounts
       </label>
diff --git a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
index 6646cb891..8a398bd14 100644
--- a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
@@ -126,78 +126,70 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           </div>
         </legend>
         <div
-          class="mt-3 mb-2 text-sm"
+          class="flex items-start my-2 text-sm font-medium"
         >
+          <label
+            class="mr-3 font-medium cursor-pointer"
+            for="theme"
+          >
+            Theme:
+          </label>
           <div
-            class="flex items-start"
+            aria-labelledby="theme"
+            class="flex items-center space-x-4"
+            role="group"
           >
             <div
-              class="mr-3"
+              class="flex items-center gap-2"
             >
+              <input
+                checked=""
+                class="size-4 cursor-pointer"
+                id="theme_system"
+                name="theme"
+                type="radio"
+                value="SYSTEM"
+              />
               <label
-                class="font-medium text-gitify-font"
-                for="theme"
+                class="mr-3 font-medium cursor-pointer"
+                for="theme_system"
               >
-                Theme:
+                System
               </label>
             </div>
             <div
-              aria-labelledby="theme"
-              class="flex items-center space-x-4"
-              role="group"
+              class="flex items-center gap-2"
             >
-              <div
-                class="flex items-center"
-              >
-                <input
-                  checked=""
-                  class="size-4 cursor-pointer"
-                  id="theme_system"
-                  name="theme"
-                  type="radio"
-                  value="SYSTEM"
-                />
-                <label
-                  class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
-                  for="theme_system"
-                >
-                  System
-                </label>
-              </div>
-              <div
-                class="flex items-center"
+              <input
+                class="size-4 cursor-pointer"
+                id="theme_light"
+                name="theme"
+                type="radio"
+                value="LIGHT"
+              />
+              <label
+                class="mr-3 font-medium cursor-pointer"
+                for="theme_light"
               >
-                <input
-                  class="size-4 cursor-pointer"
-                  id="theme_light"
-                  name="theme"
-                  type="radio"
-                  value="LIGHT"
-                />
-                <label
-                  class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
-                  for="theme_light"
-                >
-                  Light
-                </label>
-              </div>
-              <div
-                class="flex items-center"
+                Light
+              </label>
+            </div>
+            <div
+              class="flex items-center gap-2"
+            >
+              <input
+                class="size-4 cursor-pointer"
+                id="theme_dark"
+                name="theme"
+                type="radio"
+                value="DARK"
+              />
+              <label
+                class="mr-3 font-medium cursor-pointer"
+                for="theme_dark"
               >
-                <input
-                  class="size-4 cursor-pointer"
-                  id="theme_dark"
-                  name="theme"
-                  type="radio"
-                  value="DARK"
-                />
-                <label
-                  class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
-                  for="theme_dark"
-                >
-                  Dark
-                </label>
-              </div>
+                Dark
+              </label>
             </div>
           </div>
         </div>
@@ -205,10 +197,10 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           class="flex items-center mt-3 mb-2 text-sm"
         >
           <label
-            class="mr-3 content-center font-medium text-gitify-font"
-            for="Zoom"
+            class="mr-3 font-medium cursor-pointer"
+            for="zoom"
           >
-            Zoom:
+            Zoom
           </label>
           <div
             class="ButtonGroup-sc-1gxhls1-0 jXbkKi"
@@ -481,9 +473,8 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               class="flex items-center ml-3"
             >
               <label
-                class="font-medium text-gitify-font cursor-pointer"
+                class="font-medium text-gitify-font cursor-pointer line-through"
                 for="showAccountHeader"
-                style="text-decoration: line-through;"
               >
                 Show account header
               </label>
@@ -528,61 +519,53 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           </div>
         </legend>
         <div
-          class="mt-3 mb-2 text-sm"
+          class="flex items-start my-2 text-sm font-medium"
         >
+          <label
+            class="mr-3 font-medium cursor-pointer"
+            for="groupBy"
+          >
+            Group by:
+          </label>
           <div
-            class="flex items-start"
+            aria-labelledby="groupBy"
+            class="flex items-center space-x-4"
+            role="group"
           >
             <div
-              class="mr-3"
+              class="flex items-center gap-2"
             >
+              <input
+                checked=""
+                class="size-4 cursor-pointer"
+                id="groupBy_repository"
+                name="groupBy"
+                type="radio"
+                value="REPOSITORY"
+              />
               <label
-                class="font-medium text-gitify-font"
-                for="groupBy"
+                class="mr-3 font-medium cursor-pointer"
+                for="groupBy_repository"
               >
-                Group by:
+                Repository
               </label>
             </div>
             <div
-              aria-labelledby="groupBy"
-              class="flex items-center space-x-4"
-              role="group"
+              class="flex items-center gap-2"
             >
-              <div
-                class="flex items-center"
-              >
-                <input
-                  checked=""
-                  class="size-4 cursor-pointer"
-                  id="groupBy_repository"
-                  name="groupBy"
-                  type="radio"
-                  value="REPOSITORY"
-                />
-                <label
-                  class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
-                  for="groupBy_repository"
-                >
-                  Repository
-                </label>
-              </div>
-              <div
-                class="flex items-center"
+              <input
+                class="size-4 cursor-pointer"
+                id="groupBy_date"
+                name="groupBy"
+                type="radio"
+                value="DATE"
+              />
+              <label
+                class="mr-3 font-medium cursor-pointer"
+                for="groupBy_date"
               >
-                <input
-                  class="size-4 cursor-pointer"
-                  id="groupBy_date"
-                  name="groupBy"
-                  type="radio"
-                  value="DATE"
-                />
-                <label
-                  class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
-                  for="groupBy_date"
-                >
-                  Date
-                </label>
-              </div>
+                Date
+              </label>
             </div>
           </div>
         </div>
@@ -850,61 +833,53 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           </div>
         </legend>
         <div
-          class="mt-3 mb-2 text-sm"
+          class="flex items-start my-2 text-sm font-medium"
         >
+          <label
+            class="mr-3 font-medium cursor-pointer"
+            for="openLinks"
+          >
+            Open Links:
+          </label>
           <div
-            class="flex items-start"
+            aria-labelledby="openLinks"
+            class="flex items-center space-x-4"
+            role="group"
           >
             <div
-              class="mr-3"
+              class="flex items-center gap-2"
             >
+              <input
+                checked=""
+                class="size-4 cursor-pointer"
+                id="openLinks_foreground"
+                name="openLinks"
+                type="radio"
+                value="FOREGROUND"
+              />
               <label
-                class="font-medium text-gitify-font"
-                for="openLinks"
+                class="mr-3 font-medium cursor-pointer"
+                for="openLinks_foreground"
               >
-                Open Links:
+                Foreground
               </label>
             </div>
             <div
-              aria-labelledby="openLinks"
-              class="flex items-center space-x-4"
-              role="group"
+              class="flex items-center gap-2"
             >
-              <div
-                class="flex items-center"
-              >
-                <input
-                  checked=""
-                  class="size-4 cursor-pointer"
-                  id="openLinks_foreground"
-                  name="openLinks"
-                  type="radio"
-                  value="FOREGROUND"
-                />
-                <label
-                  class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
-                  for="openLinks_foreground"
-                >
-                  Foreground
-                </label>
-              </div>
-              <div
-                class="flex items-center"
+              <input
+                class="size-4 cursor-pointer"
+                id="openLinks_background"
+                name="openLinks"
+                type="radio"
+                value="BACKGROUND"
+              />
+              <label
+                class="mr-3 font-medium cursor-pointer"
+                for="openLinks_background"
               >
-                <input
-                  class="size-4 cursor-pointer"
-                  id="openLinks_background"
-                  name="openLinks"
-                  type="radio"
-                  value="BACKGROUND"
-                />
-                <label
-                  class="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
-                  for="openLinks_background"
-                >
-                  Background
-                </label>
-              </div>
+                Background
+              </label>
             </div>
           </div>
         </div>