From bc070f9749252d3e8ea6d2bbb4648ad707de3421 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 10 Apr 2024 09:22:46 -0400
Subject: [PATCH 1/3] refactor: field components

---
 src/components/fields/Checkbox.tsx   |  62 ++++++++-------
 src/components/fields/RadioGroup.tsx | 111 ++++++++++++++-------------
 2 files changed, 89 insertions(+), 84 deletions(-)

diff --git a/src/components/fields/Checkbox.tsx b/src/components/fields/Checkbox.tsx
index 7321e26e9..9bc091e39 100644
--- a/src/components/fields/Checkbox.tsx
+++ b/src/components/fields/Checkbox.tsx
@@ -1,42 +1,46 @@
+import type { FC, ReactNode } from 'react';
+
 interface IFieldCheckbox {
   name: string;
   label: string;
+  helpText?: ReactNode | string;
   checked: boolean;
-  onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
-  placeholder?: string;
   disabled?: boolean;
+  onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const FieldCheckbox = (props: IFieldCheckbox) => {
+export const FieldCheckbox: FC<IFieldCheckbox> = (props: IFieldCheckbox) => {
   return (
-    <div className="flex items-start mt-1 mb-3">
-      <div className="flex items-center h-5">
-        <input
-          type="checkbox"
-          id={props.name}
-          className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-          checked={props.checked}
-          onChange={props.onChange}
-          disabled={props.disabled}
-        />
-      </div>
+    <div className="mt-1 mb-3 text-sm">
+      <div className="flex items-start">
+        <div className="flex items-center h-5">
+          <input
+            type="checkbox"
+            id={props.name}
+            className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+            checked={props.checked}
+            onChange={props.onChange}
+            disabled={props.disabled}
+          />
+        </div>
 
-      <div className="ml-3 text-sm">
-        <label
-          htmlFor={props.name}
-          className="font-medium text-gray-700 dark:text-gray-200"
-          style={
-            props.disabled ? { textDecoration: 'line-through' } : undefined
-          }
-        >
-          {props.label}
-        </label>
-        {props.placeholder && (
-          <div className="italic text-gray-500 dark:text-gray-300">
-            {props.placeholder}
-          </div>
-        )}
+        <div className="ml-3 ">
+          <label
+            htmlFor={props.name}
+            className="font-medium text-gray-700 dark:text-gray-200"
+            style={
+              props.disabled ? { textDecoration: 'line-through' } : undefined
+            }
+          >
+            {props.label}
+          </label>
+        </div>
       </div>
+      {props.helpText && (
+        <div className="text-xs mt-1 italic text-gray-500 dark:text-gray-300">
+          {props.helpText}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/fields/RadioGroup.tsx b/src/components/fields/RadioGroup.tsx
index ebf5c18ec..1bd897328 100644
--- a/src/components/fields/RadioGroup.tsx
+++ b/src/components/fields/RadioGroup.tsx
@@ -1,68 +1,69 @@
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, FC, ReactNode } from 'react';
 import type { RadioGroupItem } from '../../types';
 
-export const FieldRadioGroup = ({
-  label,
-  placeholder,
-  name,
-  options,
-  onChange,
-  value,
-}: {
+interface IRadioGroup {
   name: string;
   label: string;
-  placeholder?: string;
+  helpText?: ReactNode | string;
   options: RadioGroupItem[];
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   value: string;
-}) => {
-  return (
-    <div className="flex items-start mt-1 mb-3">
-      <div className="mr-3 text-sm py-1">
-        <label
-          htmlFor={name}
-          className="font-medium text-gray-700 dark:text-gray-200 "
-        >
-          {label}
-        </label>
+  disabled?: boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
 
-        {placeholder && (
-          <div className="italic text-gray-500 dark:text-gray-300">
-            {placeholder}
-          </div>
-        )}
-      </div>
+export const FieldRadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
+  return (
+    <div className="mt-1 mb-3 text-sm">
+      <div className="flex items-start">
+        <div className="mr-3 py-1">
+          <label
+            htmlFor={props.name}
+            className="font-medium text-gray-700 dark:text-gray-200 "
+            style={
+              props.disabled ? { textDecoration: 'line-through' } : undefined
+            }
+          >
+            {props.label}
+          </label>
+        </div>
 
-      <div
-        className="flex items-center space-x-4"
-        role="group"
-        aria-labelledby={name}
-      >
-        {options.map((item) => {
-          return (
-            <div
-              className="flex mt-1"
-              key={`radio_item_${item.value.toLowerCase()}`}
-            >
-              <input
-                type="radio"
-                className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
-                id={`${name}_${item.value.toLowerCase()}`}
-                name={name}
-                value={item.value}
-                onChange={onChange}
-                checked={item.value === value}
-              />
-              <label
-                htmlFor={`${name}_${item.value.toLowerCase()}`}
-                className="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
+        <div
+          className="flex items-center space-x-4"
+          role="group"
+          aria-labelledby={props.name}
+        >
+          {props.options.map((item) => {
+            return (
+              <div
+                className="flex mt-1"
+                key={`radio_item_${item.value.toLowerCase()}`}
               >
-                {item.label}
-              </label>
-            </div>
-          );
-        })}
+                <input
+                  type="radio"
+                  className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+                  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-gray-700 dark:text-white"
+                >
+                  {item.label}
+                </label>
+              </div>
+            );
+          })}
+        </div>
       </div>
+      {props.helpText && (
+        <div className="text-xs mt-1 italic text-gray-500 dark:text-gray-300">
+          {props.helpText}
+        </div>
+      )}
     </div>
   );
 };

From 904f9c8a9ecb0cf351bbaa036e26d10e59fdded7 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 10 Apr 2024 12:54:18 -0400
Subject: [PATCH 2/3] refactor: field components

---
 src/components/fields/Checkbox.test.tsx       |  18 +
 src/components/fields/Checkbox.tsx            |   5 +-
 src/components/fields/FieldInput.test.tsx     |  17 +
 src/components/fields/FieldInput.tsx          |   4 +-
 src/components/fields/RadioGroup.test.tsx     |  10 +-
 src/components/fields/RadioGroup.tsx          |   3 +-
 .../__snapshots__/Checkbox.test.tsx.snap      |  38 ++
 .../__snapshots__/RadioGroup.test.tsx.snap    | 100 ++--
 src/routes/Settings.tsx                       |  26 +-
 .../__snapshots__/Settings.test.tsx.snap      | 458 ++++++++++--------
 10 files changed, 405 insertions(+), 274 deletions(-)
 create mode 100644 src/components/fields/Checkbox.test.tsx
 create mode 100644 src/components/fields/FieldInput.test.tsx
 create mode 100644 src/components/fields/__snapshots__/Checkbox.test.tsx.snap

diff --git a/src/components/fields/Checkbox.test.tsx b/src/components/fields/Checkbox.test.tsx
new file mode 100644
index 000000000..95f3496e4
--- /dev/null
+++ b/src/components/fields/Checkbox.test.tsx
@@ -0,0 +1,18 @@
+import * as TestRenderer from 'react-test-renderer';
+
+import { Checkbox, type ICheckbox } from './Checkbox';
+
+describe('components/fields/Checkbox.tsx', () => {
+  const props: ICheckbox = {
+    name: 'appearance',
+    label: 'Appearance',
+    helpText: 'This is some helper text',
+    checked: true,
+    onChange: jest.fn(),
+  };
+
+  it('should render', () => {
+    const tree = TestRenderer.create(<Checkbox {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/components/fields/Checkbox.tsx b/src/components/fields/Checkbox.tsx
index 9bc091e39..20ca31646 100644
--- a/src/components/fields/Checkbox.tsx
+++ b/src/components/fields/Checkbox.tsx
@@ -1,6 +1,6 @@
 import type { FC, ReactNode } from 'react';
 
-interface IFieldCheckbox {
+export interface ICheckbox {
   name: string;
   label: string;
   helpText?: ReactNode | string;
@@ -9,7 +9,7 @@ interface IFieldCheckbox {
   onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const FieldCheckbox: FC<IFieldCheckbox> = (props: IFieldCheckbox) => {
+export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
   return (
     <div className="mt-1 mb-3 text-sm">
       <div className="flex items-start">
@@ -36,6 +36,7 @@ export const FieldCheckbox: FC<IFieldCheckbox> = (props: IFieldCheckbox) => {
           </label>
         </div>
       </div>
+
       {props.helpText && (
         <div className="text-xs mt-1 italic text-gray-500 dark:text-gray-300">
           {props.helpText}
diff --git a/src/components/fields/FieldInput.test.tsx b/src/components/fields/FieldInput.test.tsx
new file mode 100644
index 000000000..fd4aa92a4
--- /dev/null
+++ b/src/components/fields/FieldInput.test.tsx
@@ -0,0 +1,17 @@
+import * as TestRendener from 'react-test-renderer';
+
+import { FieldInput, type IFieldInput } from './FieldInput';
+
+describe('components/fields/FieldInput.tsx', () => {
+  const props: IFieldInput = {
+    name: 'appearance',
+    label: 'Appearance',
+    placeholder: 'This is some placeholder text',
+    helpText: 'This is some helper text',
+  };
+
+  it('should render ', () => {
+    const tree = TestRendener.create(<FieldInput {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/components/fields/FieldInput.tsx b/src/components/fields/FieldInput.tsx
index 930932784..cc1890fe0 100644
--- a/src/components/fields/FieldInput.tsx
+++ b/src/components/fields/FieldInput.tsx
@@ -1,7 +1,7 @@
 import type { FC, ReactNode } from 'react';
 import { Field } from 'react-final-form';
 
-export interface IProps {
+export interface IFieldInput {
   name: string;
   type?: string;
   label: string;
@@ -10,7 +10,7 @@ export interface IProps {
   required?: boolean;
 }
 
-export const FieldInput: FC<IProps> = ({
+export const FieldInput: FC<IFieldInput> = ({
   label,
   name,
   placeholder = '',
diff --git a/src/components/fields/RadioGroup.test.tsx b/src/components/fields/RadioGroup.test.tsx
index f316c6d9f..25cad0ffd 100644
--- a/src/components/fields/RadioGroup.test.tsx
+++ b/src/components/fields/RadioGroup.test.tsx
@@ -2,13 +2,13 @@ import { fireEvent, render, screen } from '@testing-library/react';
 
 import * as TestRendener from 'react-test-renderer';
 
-import { FieldRadioGroup } from './RadioGroup';
+import { FieldRadioGroup, type IRadioGroup } from './RadioGroup';
 
-describe('components/fields/radiogroup.tsx', () => {
-  const props = {
+describe('components/fields/RadioGroup.tsx', () => {
+  const props: IRadioGroup = {
     label: 'Appearance',
     name: 'appearance',
-    placeholder: 'This is some helper text',
+    helpText: 'This is some helper text',
     options: [
       { label: 'Value 1', value: 'one' },
       { label: 'Value 2', value: 'two' },
@@ -17,7 +17,7 @@ describe('components/fields/radiogroup.tsx', () => {
     value: 'two',
   };
 
-  it('should render ', () => {
+  it('should render', () => {
     const tree = TestRendener.create(<FieldRadioGroup {...props} />);
     expect(tree).toMatchSnapshot();
   });
diff --git a/src/components/fields/RadioGroup.tsx b/src/components/fields/RadioGroup.tsx
index 1bd897328..ca0d4ac36 100644
--- a/src/components/fields/RadioGroup.tsx
+++ b/src/components/fields/RadioGroup.tsx
@@ -1,7 +1,7 @@
 import type { ChangeEvent, FC, ReactNode } from 'react';
 import type { RadioGroupItem } from '../../types';
 
-interface IRadioGroup {
+export interface IRadioGroup {
   name: string;
   label: string;
   helpText?: ReactNode | string;
@@ -59,6 +59,7 @@ export const FieldRadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
           })}
         </div>
       </div>
+
       {props.helpText && (
         <div className="text-xs mt-1 italic text-gray-500 dark:text-gray-300">
           {props.helpText}
diff --git a/src/components/fields/__snapshots__/Checkbox.test.tsx.snap b/src/components/fields/__snapshots__/Checkbox.test.tsx.snap
new file mode 100644
index 000000000..0138d82b1
--- /dev/null
+++ b/src/components/fields/__snapshots__/Checkbox.test.tsx.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/fields/Checkbox.tsx should render 1`] = `
+<div
+  className="mt-1 mb-3 text-sm"
+>
+  <div
+    className="flex items-start"
+  >
+    <div
+      className="flex items-center h-5"
+    >
+      <input
+        checked={true}
+        className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+        id="appearance"
+        onChange={[MockFunction]}
+        type="checkbox"
+      />
+    </div>
+    <div
+      className="ml-3 "
+    >
+      <label
+        className="font-medium text-gray-700 dark:text-gray-200"
+        htmlFor="appearance"
+      >
+        Appearance
+      </label>
+    </div>
+  </div>
+  <div
+    className="text-xs mt-1 italic text-gray-500 dark:text-gray-300"
+  >
+    This is some helper text
+  </div>
+</div>
+`;
diff --git a/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap b/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap
index 70e146f0e..dd13f380f 100644
--- a/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap
+++ b/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap
@@ -1,67 +1,71 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/fields/radiogroup.tsx should render  1`] = `
+exports[`components/fields/RadioGroup.tsx should render 1`] = `
 <div
-  className="flex items-start mt-1 mb-3"
+  className="mt-1 mb-3 text-sm"
 >
   <div
-    className="mr-3 text-sm py-1"
-  >
-    <label
-      className="font-medium text-gray-700 dark:text-gray-200 "
-      htmlFor="appearance"
-    >
-      Appearance
-    </label>
-    <div
-      className="italic text-gray-500 dark:text-gray-300"
-    >
-      This is some helper text
-    </div>
-  </div>
-  <div
-    aria-labelledby="appearance"
-    className="flex items-center space-x-4"
-    role="group"
+    className="flex items-start"
   >
     <div
-      className="flex mt-1"
+      className="mr-3 py-1"
     >
-      <input
-        checked={false}
-        className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
-        id="appearance_one"
-        name="appearance"
-        onChange={[MockFunction]}
-        type="radio"
-        value="one"
-      />
       <label
-        className="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
-        htmlFor="appearance_one"
+        className="font-medium text-gray-700 dark:text-gray-200 "
+        htmlFor="appearance"
       >
-        Value 1
+        Appearance
       </label>
     </div>
     <div
-      className="flex mt-1"
+      aria-labelledby="appearance"
+      className="flex items-center space-x-4"
+      role="group"
     >
-      <input
-        checked={true}
-        className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
-        id="appearance_two"
-        name="appearance"
-        onChange={[MockFunction]}
-        type="radio"
-        value="two"
-      />
-      <label
-        className="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
-        htmlFor="appearance_two"
+      <div
+        className="flex mt-1"
       >
-        Value 2
-      </label>
+        <input
+          checked={false}
+          className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+          id="appearance_one"
+          name="appearance"
+          onChange={[MockFunction]}
+          type="radio"
+          value="one"
+        />
+        <label
+          className="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
+          htmlFor="appearance_one"
+        >
+          Value 1
+        </label>
+      </div>
+      <div
+        className="flex mt-1"
+      >
+        <input
+          checked={true}
+          className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+          id="appearance_two"
+          name="appearance"
+          onChange={[MockFunction]}
+          type="radio"
+          value="two"
+        />
+        <label
+          className="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
+          htmlFor="appearance_two"
+        >
+          Value 2
+        </label>
+      </div>
     </div>
   </div>
+  <div
+    className="text-xs mt-1 italic text-gray-500 dark:text-gray-300"
+  >
+    This is some helper text
+  </div>
 </div>
 `;
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index 89eb56c25..cd639dbad 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -16,7 +16,7 @@ import {
 } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { FieldCheckbox } from '../components/fields/Checkbox';
+import { Checkbox } from '../components/fields/Checkbox';
 import { FieldRadioGroup } from '../components/fields/RadioGroup';
 import { AppContext } from '../context/App';
 import { Theme } from '../types';
@@ -130,8 +130,9 @@ export const SettingsRoute: FC = () => {
             onChange={(evt) => {
               updateSetting('theme', evt.target.value);
             }}
+            helpText="Changes will take effect after restarting the app"
           />
-          <FieldCheckbox
+          <Checkbox
             name="colors"
             label={`Use GitHub-like state colors${
               !colorScope ? ' (requires repo scope)' : ''
@@ -142,7 +143,7 @@ export const SettingsRoute: FC = () => {
             }
             disabled={!colorScope}
           />
-          <FieldCheckbox
+          <Checkbox
             name="showAccountHostname"
             label="Show account hostname"
             checked={settings.showAccountHostname}
@@ -153,10 +154,10 @@ export const SettingsRoute: FC = () => {
         </fieldset>
 
         <fieldset className="mb-3">
-          <legend id="notifications" className="font-semibold  mt-2 mb-1">
+          <legend id="notifications" className="font-semibold mt-2 mb-1">
             Notifications
           </legend>
-          <FieldCheckbox
+          <Checkbox
             name="showOnlyParticipating"
             label="Show only participating"
             checked={settings.participating}
@@ -164,13 +165,13 @@ export const SettingsRoute: FC = () => {
               updateSetting('participating', evt.target.checked)
             }
           />
-          <FieldCheckbox
+          <Checkbox
             name="showBots"
             label="Show notifications from Bot accounts"
             checked={settings.showBots}
             onChange={(evt) => updateSetting('showBots', evt.target.checked)}
           />
-          <FieldCheckbox
+          <Checkbox
             name="markAsDoneOnOpen"
             label="Mark as done on open"
             checked={settings.markAsDoneOnOpen}
@@ -181,18 +182,19 @@ export const SettingsRoute: FC = () => {
         </fieldset>
 
         <fieldset className="mb-3">
-          <legend id="system" className="font-semibold  mt-2 mb-1">
+          <legend id="system" className="font-semibold mt-2 mb-1">
             System
           </legend>
-          <FieldCheckbox
+          <Checkbox
             name="showNotificationsCountInTray"
             label="Show notifications count in tray"
             checked={settings.showNotificationsCountInTray}
             onChange={(evt) =>
               updateSetting('showNotificationsCountInTray', evt.target.checked)
             }
+            helpText="Changes will take effect after restarting the app"
           />
-          <FieldCheckbox
+          <Checkbox
             name="showNotifications"
             label="Show system notifications"
             checked={settings.showNotifications}
@@ -200,14 +202,14 @@ export const SettingsRoute: FC = () => {
               updateSetting('showNotifications', evt.target.checked)
             }
           />
-          <FieldCheckbox
+          <Checkbox
             name="playSound"
             label="Play sound"
             checked={settings.playSound}
             onChange={(evt) => updateSetting('playSound', evt.target.checked)}
           />
           {!isLinux && (
-            <FieldCheckbox
+            <Checkbox
               name="openAtStartUp"
               label="Open at startup"
               checked={settings.openAtStartup}
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 3948a30f6..ab2eda095 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`routes/Settings.tsx should not be able to enable colors due to missing scope 1`] = `
 <div
-  class="flex items-start mt-1 mb-3"
+  class="flex items-start"
 >
   <div
     class="flex items-center h-5"
@@ -15,7 +15,7 @@ exports[`routes/Settings.tsx should not be able to enable colors due to missing
     />
   </div>
   <div
-    class="ml-3 text-sm"
+    class="ml-3 "
   >
     <label
       class="font-medium text-gray-700 dark:text-gray-200"
@@ -76,122 +76,139 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         Appearance
       </legend>
       <div
-        class="flex items-start mt-1 mb-3"
+        class="mt-1 mb-3 text-sm"
       >
         <div
-          class="mr-3 text-sm py-1"
-        >
-          <label
-            class="font-medium text-gray-700 dark:text-gray-200 "
-            for="theme"
-          >
-            Theme:
-          </label>
-        </div>
-        <div
-          aria-labelledby="theme"
-          class="flex items-center space-x-4"
-          role="group"
+          class="flex items-start"
         >
           <div
-            class="flex mt-1"
+            class="mr-3 py-1"
           >
-            <input
-              checked=""
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
-              id="theme_system"
-              name="theme"
-              type="radio"
-              value="SYSTEM"
-            />
             <label
-              class="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
-              for="theme_system"
+              class="font-medium text-gray-700 dark:text-gray-200 "
+              for="theme"
             >
-              System
+              Theme:
             </label>
           </div>
           <div
-            class="flex mt-1"
+            aria-labelledby="theme"
+            class="flex items-center space-x-4"
+            role="group"
           >
-            <input
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
-              id="theme_light"
-              name="theme"
-              type="radio"
-              value="LIGHT"
-            />
-            <label
-              class="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
-              for="theme_light"
+            <div
+              class="flex mt-1"
             >
-              Light
-            </label>
+              <input
+                checked=""
+                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+                id="theme_system"
+                name="theme"
+                type="radio"
+                value="SYSTEM"
+              />
+              <label
+                class="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
+                for="theme_system"
+              >
+                System
+              </label>
+            </div>
+            <div
+              class="flex mt-1"
+            >
+              <input
+                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+                id="theme_light"
+                name="theme"
+                type="radio"
+                value="LIGHT"
+              />
+              <label
+                class="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
+                for="theme_light"
+              >
+                Light
+              </label>
+            </div>
+            <div
+              class="flex mt-1"
+            >
+              <input
+                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+                id="theme_dark"
+                name="theme"
+                type="radio"
+                value="DARK"
+              />
+              <label
+                class="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
+                for="theme_dark"
+              >
+                Dark
+              </label>
+            </div>
           </div>
+        </div>
+        <div
+          class="text-xs mt-1 italic text-gray-500 dark:text-gray-300"
+        >
+          Changes will take effect after restarting the app
+        </div>
+      </div>
+      <div
+        class="mt-1 mb-3 text-sm"
+      >
+        <div
+          class="flex items-start"
+        >
           <div
-            class="flex mt-1"
+            class="flex items-center h-5"
           >
             <input
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
-              id="theme_dark"
-              name="theme"
-              type="radio"
-              value="DARK"
+              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              id="colors"
+              type="checkbox"
             />
+          </div>
+          <div
+            class="ml-3 "
+          >
             <label
-              class="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
-              for="theme_dark"
+              class="font-medium text-gray-700 dark:text-gray-200"
+              for="colors"
+              style=""
             >
-              Dark
+              Use GitHub-like state colors
             </label>
           </div>
         </div>
       </div>
       <div
-        class="flex items-start mt-1 mb-3"
+        class="mt-1 mb-3 text-sm"
       >
         <div
-          class="flex items-center h-5"
-        >
-          <input
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-            id="colors"
-            type="checkbox"
-          />
-        </div>
-        <div
-          class="ml-3 text-sm"
+          class="flex items-start"
         >
-          <label
-            class="font-medium text-gray-700 dark:text-gray-200"
-            for="colors"
-            style=""
+          <div
+            class="flex items-center h-5"
           >
-            Use GitHub-like state colors
-          </label>
-        </div>
-      </div>
-      <div
-        class="flex items-start mt-1 mb-3"
-      >
-        <div
-          class="flex items-center h-5"
-        >
-          <input
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-            id="showAccountHostname"
-            type="checkbox"
-          />
-        </div>
-        <div
-          class="ml-3 text-sm"
-        >
-          <label
-            class="font-medium text-gray-700 dark:text-gray-200"
-            for="showAccountHostname"
+            <input
+              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              id="showAccountHostname"
+              type="checkbox"
+            />
+          </div>
+          <div
+            class="ml-3 "
           >
-            Show account hostname
-          </label>
+            <label
+              class="font-medium text-gray-700 dark:text-gray-200"
+              for="showAccountHostname"
+            >
+              Show account hostname
+            </label>
+          </div>
         </div>
       </div>
     </fieldset>
@@ -199,79 +216,91 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
       class="mb-3"
     >
       <legend
-        class="font-semibold  mt-2 mb-1"
+        class="font-semibold mt-2 mb-1"
         id="notifications"
       >
         Notifications
       </legend>
       <div
-        class="flex items-start mt-1 mb-3"
+        class="mt-1 mb-3 text-sm"
       >
         <div
-          class="flex items-center h-5"
-        >
-          <input
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-            id="showOnlyParticipating"
-            type="checkbox"
-          />
-        </div>
-        <div
-          class="ml-3 text-sm"
+          class="flex items-start"
         >
-          <label
-            class="font-medium text-gray-700 dark:text-gray-200"
-            for="showOnlyParticipating"
+          <div
+            class="flex items-center h-5"
           >
-            Show only participating
-          </label>
+            <input
+              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              id="showOnlyParticipating"
+              type="checkbox"
+            />
+          </div>
+          <div
+            class="ml-3 "
+          >
+            <label
+              class="font-medium text-gray-700 dark:text-gray-200"
+              for="showOnlyParticipating"
+            >
+              Show only participating
+            </label>
+          </div>
         </div>
       </div>
       <div
-        class="flex items-start mt-1 mb-3"
+        class="mt-1 mb-3 text-sm"
       >
         <div
-          class="flex items-center h-5"
-        >
-          <input
-            checked=""
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-            id="showBots"
-            type="checkbox"
-          />
-        </div>
-        <div
-          class="ml-3 text-sm"
+          class="flex items-start"
         >
-          <label
-            class="font-medium text-gray-700 dark:text-gray-200"
-            for="showBots"
+          <div
+            class="flex items-center h-5"
           >
-            Show notifications from Bot accounts
-          </label>
+            <input
+              checked=""
+              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              id="showBots"
+              type="checkbox"
+            />
+          </div>
+          <div
+            class="ml-3 "
+          >
+            <label
+              class="font-medium text-gray-700 dark:text-gray-200"
+              for="showBots"
+            >
+              Show notifications from Bot accounts
+            </label>
+          </div>
         </div>
       </div>
       <div
-        class="flex items-start mt-1 mb-3"
+        class="mt-1 mb-3 text-sm"
       >
         <div
-          class="flex items-center h-5"
-        >
-          <input
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-            id="markAsDoneOnOpen"
-            type="checkbox"
-          />
-        </div>
-        <div
-          class="ml-3 text-sm"
+          class="flex items-start"
         >
-          <label
-            class="font-medium text-gray-700 dark:text-gray-200"
-            for="markAsDoneOnOpen"
+          <div
+            class="flex items-center h-5"
           >
-            Mark as done on open
-          </label>
+            <input
+              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              id="markAsDoneOnOpen"
+              type="checkbox"
+            />
+          </div>
+          <div
+            class="ml-3 "
+          >
+            <label
+              class="font-medium text-gray-700 dark:text-gray-200"
+              for="markAsDoneOnOpen"
+            >
+              Mark as done on open
+            </label>
+          </div>
         </div>
       </div>
     </fieldset>
@@ -279,103 +308,124 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
       class="mb-3"
     >
       <legend
-        class="font-semibold  mt-2 mb-1"
+        class="font-semibold mt-2 mb-1"
         id="system"
       >
         System
       </legend>
       <div
-        class="flex items-start mt-1 mb-3"
+        class="mt-1 mb-3 text-sm"
       >
         <div
-          class="flex items-center h-5"
+          class="flex items-start"
         >
-          <input
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-            id="showNotificationsCountInTray"
-            type="checkbox"
-          />
+          <div
+            class="flex items-center h-5"
+          >
+            <input
+              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              id="showNotificationsCountInTray"
+              type="checkbox"
+            />
+          </div>
+          <div
+            class="ml-3 "
+          >
+            <label
+              class="font-medium text-gray-700 dark:text-gray-200"
+              for="showNotificationsCountInTray"
+            >
+              Show notifications count in tray
+            </label>
+          </div>
         </div>
         <div
-          class="ml-3 text-sm"
+          class="text-xs mt-1 italic text-gray-500 dark:text-gray-300"
         >
-          <label
-            class="font-medium text-gray-700 dark:text-gray-200"
-            for="showNotificationsCountInTray"
-          >
-            Show notifications count in tray
-          </label>
+          Changes will take effect after restarting the app
         </div>
       </div>
       <div
-        class="flex items-start mt-1 mb-3"
+        class="mt-1 mb-3 text-sm"
       >
         <div
-          class="flex items-center h-5"
+          class="flex items-start"
         >
-          <input
-            checked=""
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-            id="showNotifications"
-            type="checkbox"
-          />
-        </div>
-        <div
-          class="ml-3 text-sm"
-        >
-          <label
-            class="font-medium text-gray-700 dark:text-gray-200"
-            for="showNotifications"
+          <div
+            class="flex items-center h-5"
           >
-            Show system notifications
-          </label>
+            <input
+              checked=""
+              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              id="showNotifications"
+              type="checkbox"
+            />
+          </div>
+          <div
+            class="ml-3 "
+          >
+            <label
+              class="font-medium text-gray-700 dark:text-gray-200"
+              for="showNotifications"
+            >
+              Show system notifications
+            </label>
+          </div>
         </div>
       </div>
       <div
-        class="flex items-start mt-1 mb-3"
+        class="mt-1 mb-3 text-sm"
       >
         <div
-          class="flex items-center h-5"
+          class="flex items-start"
         >
-          <input
-            checked=""
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-            id="playSound"
-            type="checkbox"
-          />
-        </div>
-        <div
-          class="ml-3 text-sm"
-        >
-          <label
-            class="font-medium text-gray-700 dark:text-gray-200"
-            for="playSound"
+          <div
+            class="flex items-center h-5"
+          >
+            <input
+              checked=""
+              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              id="playSound"
+              type="checkbox"
+            />
+          </div>
+          <div
+            class="ml-3 "
           >
-            Play sound
-          </label>
+            <label
+              class="font-medium text-gray-700 dark:text-gray-200"
+              for="playSound"
+            >
+              Play sound
+            </label>
+          </div>
         </div>
       </div>
       <div
-        class="flex items-start mt-1 mb-3"
+        class="mt-1 mb-3 text-sm"
       >
         <div
-          class="flex items-center h-5"
+          class="flex items-start"
         >
-          <input
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-            id="openAtStartUp"
-            type="checkbox"
-          />
-        </div>
-        <div
-          class="ml-3 text-sm"
-        >
-          <label
-            class="font-medium text-gray-700 dark:text-gray-200"
-            for="openAtStartUp"
+          <div
+            class="flex items-center h-5"
           >
-            Open at startup
-          </label>
+            <input
+              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              id="openAtStartUp"
+              type="checkbox"
+            />
+          </div>
+          <div
+            class="ml-3 "
+          >
+            <label
+              class="font-medium text-gray-700 dark:text-gray-200"
+              for="openAtStartUp"
+            >
+              Open at startup
+            </label>
+          </div>
         </div>
       </div>
     </fieldset>

From e21b7ce039271f3a593ebdd33c175726a5a78824 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 10 Apr 2024 23:53:39 -0400
Subject: [PATCH 3/3] refactor: field components

---
 src/components/fields/RadioGroup.test.tsx       | 8 ++++----
 src/components/fields/RadioGroup.tsx            | 2 +-
 src/routes/Settings.tsx                         | 5 ++---
 src/routes/__snapshots__/Settings.test.tsx.snap | 5 -----
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/components/fields/RadioGroup.test.tsx b/src/components/fields/RadioGroup.test.tsx
index e5b336f42..4a902abe9 100644
--- a/src/components/fields/RadioGroup.test.tsx
+++ b/src/components/fields/RadioGroup.test.tsx
@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 
 import * as TestRenderer from 'react-test-renderer';
 
-import { FieldRadioGroup, type IRadioGroup } from './RadioGroup';
+import { type IRadioGroup, RadioGroup } from './RadioGroup';
 
 describe('components/fields/RadioGroup.tsx', () => {
   const props: IRadioGroup = {
@@ -18,19 +18,19 @@ describe('components/fields/RadioGroup.tsx', () => {
   };
 
   it('should render', () => {
-    const tree = TestRenderer.create(<FieldRadioGroup {...props} />);
+    const tree = TestRenderer.create(<RadioGroup {...props} />);
     expect(tree).toMatchSnapshot();
   });
 
   it('should render as disabled', () => {
     const mockProps = { ...props, disabled: true };
 
-    const tree = TestRenderer.create(<FieldRadioGroup {...mockProps} />);
+    const tree = TestRenderer.create(<RadioGroup {...mockProps} />);
     expect(tree).toMatchSnapshot();
   });
 
   it('should check that NProgress is getting called in getDerivedStateFromProps (loading)', () => {
-    render(<FieldRadioGroup {...props} />);
+    render(<RadioGroup {...props} />);
     fireEvent.click(screen.getByLabelText('Value 1'));
     expect(props.onChange).toHaveBeenCalledTimes(1);
   });
diff --git a/src/components/fields/RadioGroup.tsx b/src/components/fields/RadioGroup.tsx
index ca0d4ac36..c143b75b5 100644
--- a/src/components/fields/RadioGroup.tsx
+++ b/src/components/fields/RadioGroup.tsx
@@ -11,7 +11,7 @@ export interface IRadioGroup {
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const FieldRadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
+export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
   return (
     <div className="mt-1 mb-3 text-sm">
       <div className="flex items-start">
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index cd639dbad..7ce87b94a 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -17,7 +17,7 @@ import {
 import { useNavigate } from 'react-router-dom';
 
 import { Checkbox } from '../components/fields/Checkbox';
-import { FieldRadioGroup } from '../components/fields/RadioGroup';
+import { RadioGroup } from '../components/fields/RadioGroup';
 import { AppContext } from '../context/App';
 import { Theme } from '../types';
 import { apiRequestAuth } from '../utils/api-requests';
@@ -118,7 +118,7 @@ export const SettingsRoute: FC = () => {
           <legend id="appearance" className="font-semibold mt-2 mb-1">
             Appearance
           </legend>
-          <FieldRadioGroup
+          <RadioGroup
             name="theme"
             label="Theme:"
             value={settings.theme}
@@ -130,7 +130,6 @@ export const SettingsRoute: FC = () => {
             onChange={(evt) => {
               updateSetting('theme', evt.target.value);
             }}
-            helpText="Changes will take effect after restarting the app"
           />
           <Checkbox
             name="colors"
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index ab2eda095..65aefafab 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -150,11 +150,6 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="text-xs mt-1 italic text-gray-500 dark:text-gray-300"
-        >
-          Changes will take effect after restarting the app
-        </div>
       </div>
       <div
         class="mt-1 mb-3 text-sm"