diff --git a/src/__mocks__/mock-state.ts b/src/__mocks__/mock-state.ts index 8175a7f1d..bb8b7a3cc 100644 --- a/src/__mocks__/mock-state.ts +++ b/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, }; diff --git a/src/components/fields/Checkbox.tsx b/src/components/fields/Checkbox.tsx index 4f4bc6583..1197278a9 100644 --- a/src/components/fields/Checkbox.tsx +++ b/src/components/fields/Checkbox.tsx @@ -34,9 +34,9 @@ export const FieldCheckbox = (props: IFieldCheckbox) => { {props.label} {props.placeholder && ( -

+

{props.placeholder} -

+
)} diff --git a/src/components/fields/RadioGroup.tsx b/src/components/fields/RadioGroup.tsx index f61bf79ef..cc21327d4 100644 --- a/src/components/fields/RadioGroup.tsx +++ b/src/components/fields/RadioGroup.tsx @@ -17,23 +17,31 @@ export const FieldRadioGroup = ({ value: string; }) => { return ( -
-
- +
+
+ + + {placeholder && ( +
+ {placeholder} +
+ )}
{options.map((item) => { return (
-
+ ); }; diff --git a/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap b/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap index 370259142..70e146f0e 100644 --- a/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap +++ b/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`] = ` -
-
- + -

+

This is some helper text -

+
-
+ `; diff --git a/src/context/App.test.tsx b/src/context/App.test.tsx index 63d0e8bfa..d31f24631 100644 --- a/src/context/App.test.tsx +++ b/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, diff --git a/src/context/App.tsx b/src/context/App.tsx index 3da7ba375..6fe2e7587 100644 --- a/src/context/App.tsx +++ b/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); } diff --git a/src/routes/Settings.test.tsx b/src/routes/Settings.test.tsx index 3e36c9da1..6394ec305 100644 --- a/src/routes/Settings.test.tsx +++ b/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 () => { diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx index 1c218bacf..0fa76eb94 100644 --- a/src/routes/Settings.tsx +++ b/src/routes/Settings.tsx @@ -17,9 +17,9 @@ import { useNavigate } from 'react-router-dom'; import { FieldCheckbox } from '../components/fields/Checkbox'; import { FieldRadioGroup } from '../components/fields/RadioGroup'; import { AppContext } from '../context/App'; -import { Appearance } from '../types'; +import { Theme } from '../types'; import { apiRequestAuth } from '../utils/api-requests'; -import { setAppearance } from '../utils/appearance'; +import { setTheme } from '../utils/theme'; import { openExternalLink, updateTrayIcon } from '../utils/comms'; import Constants from '../utils/constants'; import { generateGitHubAPIUrl } from '../utils/helpers'; @@ -61,9 +61,9 @@ export const SettingsRoute: React.FC = () => { })(); }, [accounts.token]); - ipcRenderer.on('update-native-theme', (_, updatedAppearance: Appearance) => { - if (settings.appearance === Appearance.SYSTEM) { - setAppearance(updatedAppearance); + ipcRenderer.on('update-native-theme', (_, updatedTheme: Theme) => { + if (settings.theme === Theme.SYSTEM) { + setTheme(updatedTheme); } }); @@ -86,7 +86,7 @@ export const SettingsRoute: React.FC = () => { return (
@@ -105,77 +105,95 @@ export const SettingsRoute: React.FC = () => {

Settings

-
- { - updateSetting('appearance', evt.target.value); - }} - /> - - - colorScope && updateSetting('colors', evt.target.checked) - } - disabled={!colorScope} - /> - updateSetting('participating', evt.target.checked)} - /> - - - updateSetting('showNotifications', evt.target.checked) - } - /> - updateSetting('showBots', evt.target.checked)} - /> - - updateSetting('markAsDoneOnOpen', evt.target.checked) - } - /> - updateSetting('playSound', evt.target.checked)} - /> - {!isLinux && ( +
+
+ + Appearance + + { + updateSetting('theme', evt.target.value); + }} + /> + + colorScope && updateSetting('colors', evt.target.checked) + } + disabled={!colorScope} + /> +
+ +
+ + Notifications + + + updateSetting('participating', evt.target.checked) + } + /> + - updateSetting('openAtStartup', evt.target.checked) + updateSetting('showNotifications', evt.target.checked) } /> - )} + updateSetting('showBots', evt.target.checked)} + /> + + updateSetting('markAsDoneOnOpen', evt.target.checked) + } + /> +
+ +
+ + System + + updateSetting('playSound', evt.target.checked)} + /> + {!isLinux && ( + + updateSetting('openAtStartup', evt.target.checked) + } + /> + )} +
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap index 2fa0d6d38..73583eb5e 100644 --- a/src/routes/__snapshots__/Settings.test.tsx.snap +++ b/src/routes/__snapshots__/Settings.test.tsx.snap @@ -30,7 +30,7 @@ exports[`routes/Settings.tsx should not be able to enable colors due to missing exports[`routes/Settings.tsx should render itself & its children 1`] = `
-
- - Appearance - -
+ + Appearance +
-
- - + + +
+
+ + +
+
+ + +
+
+
+
+
-
-
- -
+ Notifications +
- -
-
-
-
- -
-
-
+
- Show only participating - -
-
-
-
- + +
- -
-
-
-
- -
-
-
+
- Show notifications from Bot accounts - + +
-
-
- +
+ +
+
+ +
-
+
- Mark as done on open - + +
-
-
+
-
- -
+ System +
- -
-
-
-
- + +
+
+ +
- + +
+
+ +
- +
{ jest.spyOn(localStorage.__proto__, 'getItem').mockReturnValueOnce( JSON.stringify({ auth: { token: '123-456' }, - settings: { appearance: 'DARK' }, + settings: { theme: 'DARK' }, }), ); const result = loadState(); expect(result.accounts.token).toBe('123-456'); - expect(result.settings.appearance).toBe('DARK'); + expect(result.settings.theme).toBe('DARK'); }); it('should load the state from localstorage - empty', () => { diff --git a/src/utils/appearance.test.ts b/src/utils/theme.test.ts similarity index 79% rename from src/utils/appearance.test.ts rename to src/utils/theme.test.ts index a6f8005ea..baa43188e 100644 --- a/src/utils/appearance.test.ts +++ b/src/utils/theme.test.ts @@ -1,7 +1,7 @@ -import { Appearance } from '../types'; -import { setAppearance } from './appearance'; +import { Theme } from '../types'; +import { setTheme } from './theme'; -import * as appearanceHelpers from './appearance'; +import * as appearanceHelpers from './theme'; describe('utils/appearance.ts', () => { beforeAll(() => { @@ -17,17 +17,17 @@ describe('utils/appearance.ts', () => { }); it('should change to light mode', () => { - setAppearance(Appearance.LIGHT); + setTheme(Theme.LIGHT); expect(appearanceHelpers.setLightMode).toHaveBeenCalledTimes(1); }); it('should change to dark mode', () => { - setAppearance(Appearance.DARK); + setTheme(Theme.DARK); expect(appearanceHelpers.setDarkMode).toHaveBeenCalledTimes(1); }); it("should use the system's mode - light", () => { - setAppearance(); + setTheme(); expect(appearanceHelpers.setLightMode).toHaveBeenCalledTimes(1); }); @@ -38,7 +38,7 @@ describe('utils/appearance.ts', () => { matches: true, })), }); - setAppearance(); + setTheme(); expect(appearanceHelpers.setDarkMode).toHaveBeenCalledTimes(1); }); }); diff --git a/src/utils/appearance.ts b/src/utils/theme.ts similarity index 69% rename from src/utils/appearance.ts rename to src/utils/theme.ts index bce783d5e..57f902026 100644 --- a/src/utils/appearance.ts +++ b/src/utils/theme.ts @@ -1,11 +1,11 @@ -import { Appearance } from '../types'; +import { Theme } from '../types'; -export function getAppearance(): Appearance { +export function getTheme(): Theme { if (document.querySelector('html').classList.contains('dark')) { - return Appearance.DARK; + return Theme.DARK; } - return Appearance.LIGHT; + return Theme.LIGHT; } export const setLightMode = () => @@ -14,13 +14,13 @@ export const setLightMode = () => export const setDarkMode = () => document.querySelector('html').classList.add('dark'); -export const setAppearance = (mode?: Appearance) => { +export const setTheme = (mode?: Theme) => { switch (mode) { - case Appearance.LIGHT: + case Theme.LIGHT: setLightMode(); break; - case Appearance.DARK: + case Theme.DARK: setDarkMode(); break;