From 358e95621d145dbc365ba41d0274af1d4192d3c3 Mon Sep 17 00:00:00 2001 From: Kee Jefferys Date: Tue, 24 Oct 2023 11:49:31 +1100 Subject: [PATCH] fix: refactor and move various functions --- _locales/en/messages.json | 2 +- ts/components/leftpane/ActionsPanel.tsx | 13 ++++++------ .../settings/section/CategoryAppearance.tsx | 10 +++++---- ts/mains/main_renderer.tsx | 10 +++------ ts/themes/SessionTheme.tsx | 21 ++++--------------- 5 files changed, 21 insertions(+), 35 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 8862edd2f..8f6f8b5eb 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -222,7 +222,7 @@ "noteToSelf": "Note to Self", "hideMenuBarTitle": "Hide Menu Bar", "hideMenuBarDescription": "Toggle system menu bar visibility.", - "matchThemeSystemSettingTitle": "Auto night-mode", + "matchThemeSystemSettingTitle": "Auto dark-mode", "matchThemeSystemSettingDescription": "Match system settings", "startConversation": "Start New Conversation", "invalidNumberError": "Please check the Session ID or ONS name and try again", diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx index 188056574..b70eabba7 100644 --- a/ts/components/leftpane/ActionsPanel.tsx +++ b/ts/components/leftpane/ActionsPanel.tsx @@ -43,8 +43,8 @@ import { getFreshSwarmFor, } from '../../session/apis/snode_api/snodePool'; import { isDarkTheme } from '../../state/selectors/theme'; -import { getOppositeTheme, checkThemeCongruency } from '../../themes/SessionTheme'; -import { ThemeStateType } from '../../themes/constants/colors'; +import { ensureThemeConsistency } from '../../themes/SessionTheme'; +import { getOppositeTheme } from '../../util/theme'; import { switchThemeTo } from '../../themes/switchTheme'; import { ConfigurationSync } from '../../session/utils/job_runners/jobs/ConfigurationSyncJob'; @@ -63,7 +63,7 @@ const Section = (props: { type: SectionType }) => { dispatch(editProfileModal({})); } else if (type === SectionType.ColorMode) { const currentTheme = String(window.Events.getThemeSetting()); - const newTheme = getOppositeTheme(currentTheme) as ThemeStateType; + const newTheme = getOppositeTheme(currentTheme); // We want to persist the primary color when using the color mode button void switchThemeTo({ theme: newTheme, @@ -157,9 +157,10 @@ const setupTheme = async () => { }; if (shouldFollowSystemTheme) { - const themeIsCongruent = await checkThemeCongruency(); - // Only set theme if it matches with native theme, otherwise handled by checkThemeCongruency() - if (!themeIsCongruent) { + // Check if system theme matches currently set theme, if not switch it and return true, if matching return false + const wasThemeSwitched = await ensureThemeConsistency(); + if (!wasThemeSwitched) { + // if theme wasn't switched them set theme to default await switchThemeTo(themeConfig); } return; diff --git a/ts/components/settings/section/CategoryAppearance.tsx b/ts/components/settings/section/CategoryAppearance.tsx index fa057947a..9d889dedf 100644 --- a/ts/components/settings/section/CategoryAppearance.tsx +++ b/ts/components/settings/section/CategoryAppearance.tsx @@ -4,7 +4,7 @@ import useUpdate from 'react-use/lib/useUpdate'; import { SettingsKey } from '../../../data/settings-key'; import { isHideMenuBarSupported } from '../../../types/Settings'; import { useHasFollowSystemThemeEnabled } from '../../../state/selectors/settings'; -import { checkThemeCongruency } from '../../../themes/SessionTheme'; +import { ensureThemeConsistency } from '../../../themes/SessionTheme'; import { SessionToggleWithDescription } from '../SessionSettingListItem'; import { SettingsThemeSwitcher } from '../SettingsThemeSwitcher'; import { ZoomingSessionSlider } from '../ZoomingSessionSlider'; @@ -35,16 +35,18 @@ export const SettingsCategoryAppearance = (props: { hasPassword: boolean | null /> )} { + // eslint-disable-next-line @typescript-eslint/no-misused-promises + onClickToggle={async () => { const toggledValue = !isFollowSystemThemeEnabled; - void window.setSettingValue(SettingsKey.hasFollowSystemThemeEnabled, toggledValue); + await window.setSettingValue(SettingsKey.hasFollowSystemThemeEnabled, toggledValue); if (!isFollowSystemThemeEnabled) { - void checkThemeCongruency(); + await ensureThemeConsistency(); } }} title={window.i18n('matchThemeSystemSettingTitle')} description={window.i18n('matchThemeSystemSettingDescription')} active={isFollowSystemThemeEnabled} + dataTestId="enable-follow-system-theme" /> ); diff --git a/ts/mains/main_renderer.tsx b/ts/mains/main_renderer.tsx index 80658b431..9c737f98e 100644 --- a/ts/mains/main_renderer.tsx +++ b/ts/mains/main_renderer.tsx @@ -27,9 +27,8 @@ import { switchPrimaryColorTo } from '../themes/switchPrimaryColor'; import { LibSessionUtil } from '../session/utils/libsession/libsession_utils'; import { runners } from '../session/utils/job_runners/JobRunner'; import { SettingsKey } from '../data/settings-key'; -import { getOppositeTheme } from '../themes/SessionTheme'; +import { getOppositeTheme, isThemeMismatched } from '../util/theme'; import { switchThemeTo } from '../themes/switchTheme'; -import { ThemeStateType } from '../themes/constants/colors'; // Globally disable drag and drop document.body.addEventListener( @@ -118,11 +117,8 @@ ipcRenderer.on('native-theme-update', (__unused, shouldUseDarkColors) => { if (shouldFollowSystemTheme) { const theme = window.Events.getThemeSetting(); - if ( - (shouldUseDarkColors && theme.includes('light')) || - (!shouldUseDarkColors && theme.includes('dark')) - ) { - const newTheme = getOppositeTheme(theme) as ThemeStateType; + if (isThemeMismatched(theme, shouldUseDarkColors)) { + const newTheme = getOppositeTheme(theme); void switchThemeTo({ theme: newTheme, mainWindow: true, diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index fda5eb1f2..7e8331058 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -2,8 +2,8 @@ import { ipcRenderer } from 'electron'; import React from 'react'; import { createGlobalStyle } from 'styled-components'; import { switchThemeTo } from './switchTheme'; -import { ThemeStateType } from './constants/colors'; import { classicDark } from './classicDark'; +import { getOppositeTheme, isThemeMismatched } from '../util/theme'; import { declareCSSVariables, THEME_GLOBALS } from './globals'; // Defaults to Classic Dark theme @@ -21,28 +21,15 @@ export const SessionTheme = ({ children }: { children: any }) => ( ); -export function getOppositeTheme(themeName: string) { - if (themeName.includes('dark')) { - return themeName.replace('dark', 'light'); - } - if (themeName.includes('light')) { - return themeName.replace('light', 'dark'); - } - // If neither 'dark' nor 'light' is in the theme name, return the original theme name. - return themeName; -} - -export async function checkThemeCongruency(): Promise { +export async function ensureThemeConsistency(): Promise { const theme = window.Events.getThemeSetting(); return new Promise(resolve => { ipcRenderer.send('get-native-theme'); ipcRenderer.once('send-native-theme', (_, shouldUseDarkColors) => { - const isMismatchedTheme = - (shouldUseDarkColors && theme.includes('light')) || - (!shouldUseDarkColors && theme.includes('dark')); + const isMismatchedTheme = isThemeMismatched(theme, shouldUseDarkColors); if (isMismatchedTheme) { - const newTheme = getOppositeTheme(theme) as ThemeStateType; + const newTheme = getOppositeTheme(theme); void switchThemeTo({ theme: newTheme, mainWindow: true,