feat: redesign settings ux

src/__mocks__/mock-state.ts

@@ -1,4 +1,4 @@
-import { Appearance, AuthState, SettingsState } from '../types';
+import { Theme, AuthState, SettingsState } from '../types';
 import { mockedUser, mockedEnterpriseAccounts } from './mockedData';
 
 export const mockAccounts: AuthState = {
@@ -13,7 +13,7 @@ export const mockSettings: SettingsState = {
   showNotifications: true,
   showBots: true,
   openAtStartup: false,
-  appearance: Appearance.SYSTEM,
+  theme: Theme.SYSTEM,
   colors: false,
   markAsDoneOnOpen: false,
 };

src/components/fields/Checkbox.tsx

@@ -34,9 +34,9 @@ export const FieldCheckbox = (props: IFieldCheckbox) => {
           {props.label}
         </label>
         {props.placeholder && (
-          <p className="text-gray-500 dark:text-gray-300">
+          <div className="italic text-gray-500 dark:text-gray-300">
             {props.placeholder}
-          </p>
+          </div>
         )}
       </div>
     </div>

src/components/fields/RadioGroup.tsx

@@ -17,23 +17,31 @@ export const FieldRadioGroup = ({
   value: string;
 }) => {
   return (
-    <fieldset id={name} className="mb-1">
-      <div>
-        <legend className="mb-1 text-base font-medium dark:text-white">
+    <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}
-        </legend>
-        {placeholder && <p className="text-sm text-gray-500">{placeholder}</p>}
+        </label>
+
+        {placeholder && (
+          <div className="italic text-gray-500 dark:text-gray-300">
+            {placeholder}
+          </div>
+        )}
       </div>
 
       <div
-        className="flex items-center space-x-4 py-2"
+        className="flex items-center space-x-4"
         role="group"
         aria-labelledby={name}
       >
         {options.map((item) => {
           return (
             <div
-              className="flex items-center mt-1"
+              className="flex mt-1"
               key={`radio_item_${item.value.toLowerCase()}`}
             >
               <input
@@ -55,6 +63,6 @@ export const FieldRadioGroup = ({
           );
         })}
       </div>
-    </fieldset>
+    </div>
   );
 };

src/components/fields/__snapshots__/RadioGroup.test.tsx.snap

@@ -1,29 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/fields/radiogroup.tsx should render  1`] = `
-<fieldset
-  className="mb-1"
-  id="appearance"
+<div
+  className="flex items-start mt-1 mb-3"
 >
-  <div>
-    <legend
-      className="mb-1 text-base font-medium dark:text-white"
+  <div
+    className="mr-3 text-sm py-1"
+  >
+    <label
+      className="font-medium text-gray-700 dark:text-gray-200 "
+      htmlFor="appearance"
     >
       Appearance
-    </legend>
-    <p
-      className="text-sm text-gray-500"
+    </label>
+    <div
+      className="italic text-gray-500 dark:text-gray-300"
     >
       This is some helper text
-    </p>
+    </div>
   </div>
   <div
     aria-labelledby="appearance"
-    className="flex items-center space-x-4 py-2"
+    className="flex items-center space-x-4"
     role="group"
   >
     <div
-      className="flex items-center mt-1"
+      className="flex mt-1"
     >
       <input
         checked={false}
@@ -42,7 +44,7 @@ exports[`components/fields/radiogroup.tsx should render  1`] = `
       </label>
     </div>
     <div
-      className="flex items-center mt-1"
+      className="flex mt-1"
     >
       <input
         checked={true}
@@ -61,5 +63,5 @@ exports[`components/fields/radiogroup.tsx should render  1`] = `
       </label>
     </div>
   </div>
-</fieldset>
+</div>
 `;

src/context/App.test.tsx

@@ -285,7 +285,7 @@ describe('context/App.tsx', () => {
     expect(saveStateMock).toHaveBeenCalledWith(
       { enterpriseAccounts: [], token: null, user: null },
       {
-        appearance: 'SYSTEM',
+        theme: 'SYSTEM',
         openAtStartup: false,
         participating: true,
         playSound: true,
@@ -324,7 +324,7 @@ describe('context/App.tsx', () => {
     expect(saveStateMock).toHaveBeenCalledWith(
       { enterpriseAccounts: [], token: null, user: null },
       {
-        appearance: 'SYSTEM',
+        theme: 'SYSTEM',
         openAtStartup: true,
         participating: false,
         playSound: true,

src/context/App.tsx

@@ -10,14 +10,14 @@ import { useInterval } from '../hooks/useInterval';
 import { useNotifications } from '../hooks/useNotifications';
 import {
   AccountNotifications,
-  Appearance,
+  Theme,
   AuthOptions,
   AuthState,
   AuthTokenOptions,
   SettingsState,
 } from '../types';
 import { apiRequestAuth } from '../utils/api-requests';
-import { setAppearance } from '../utils/appearance';
+import { setTheme } from '../utils/theme';
 import { addAccount, authGitHub, getToken, getUserData } from '../utils/auth';
 import { setAutoLaunch } from '../utils/comms';
 import Constants from '../utils/constants';
@@ -36,7 +36,7 @@ export const defaultSettings: SettingsState = {
   showNotifications: true,
   showBots: true,
   openAtStartup: false,
-  appearance: Appearance.SYSTEM,
+  theme: Theme.SYSTEM,
   colors: null,
   markAsDoneOnOpen: false,
 };
@@ -87,8 +87,8 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   }, []);
 
   useEffect(() => {
-    setAppearance(settings.appearance as Appearance);
-  }, [settings.appearance]);
+    setTheme(settings.theme as Theme);
+  }, [settings.theme]);
 
   useEffect(() => {
     fetchNotifications(accounts, settings);
@@ -103,7 +103,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   }, 60000);
 
   const updateSetting = useCallback(
-    (name: keyof SettingsState, value: boolean | Appearance) => {
+    (name: keyof SettingsState, value: boolean | Theme) => {
       if (name === 'openAtStartup') {
         setAutoLaunch(value as boolean);
       }

src/routes/Settings.test.tsx

@@ -267,7 +267,7 @@ describe('routes/Settings.tsx', () => {
     expect(updateSetting).toHaveBeenCalledWith('openAtStartup', false);
   });
 
-  it('should change the appearance radio group', async () => {
+  it('should change the theme radio group', async () => {
     let getByLabelText;
 
     await act(async () => {
@@ -290,7 +290,7 @@ describe('routes/Settings.tsx', () => {
     fireEvent.click(getByLabelText('Light'));
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
-    expect(updateSetting).toHaveBeenCalledWith('appearance', 'LIGHT');
+    expect(updateSetting).toHaveBeenCalledWith('theme', 'LIGHT');
   });
 
   it('should go to the enterprise login route', async () => {