From 79d9f851ddba3dc0f25775a6361a39bef65f3c52 Mon Sep 17 00:00:00 2001 From: Ostap Piatkovskyi <44294945+ost-ptk@users.noreply.github.com> Date: Tue, 19 Dec 2023 15:42:57 +0200 Subject: [PATCH 1/2] removed the System option for Safari from the theme switcher (#895) Co-authored-by: ost-ptk --- src/apps/connect-to-app/index.tsx | 5 +- src/apps/import-account-with-file/index.tsx | 5 +- src/apps/popup/index.tsx | 5 +- src/apps/signature-request/index.tsx | 5 +- src/background/redux/settings/reducer.ts | 5 +- .../theme-switcher/theme-switcher.tsx | 57 ++++++++++++------- webpack.config.js | 4 +- 7 files changed, 58 insertions(+), 28 deletions(-) diff --git a/src/apps/connect-to-app/index.tsx b/src/apps/connect-to-app/index.tsx index 83b9b13f5..43148a6b7 100644 --- a/src/apps/connect-to-app/index.tsx +++ b/src/apps/connect-to-app/index.tsx @@ -20,6 +20,7 @@ import { selectThemeModeSetting } from '@background/redux/settings/selectors'; import { useSystemThemeDetector } from '@src/hooks'; import { themeModeSettingChanged } from '@background/redux/settings/actions'; import { ThemeMode } from '@background/redux/settings/types'; +import { isSafariBuild } from '@src/utils'; const Tree = () => { const [state, setState] = useState(null); @@ -40,8 +41,10 @@ const Tree = () => { const themeMode = selectThemeModeSetting(store.getState()); // Set theme mode to system if it is no present in the store - if (themeMode === undefined) { + if (themeMode === undefined && !isSafariBuild) { dispatchToMainStore(themeModeSettingChanged(ThemeMode.SYSTEM)); + } else if (themeMode === undefined && isSafariBuild) { + dispatchToMainStore(themeModeSettingChanged(ThemeMode.LIGHT)); } const isDarkMode = diff --git a/src/apps/import-account-with-file/index.tsx b/src/apps/import-account-with-file/index.tsx index 644a662ce..eb909f2cf 100644 --- a/src/apps/import-account-with-file/index.tsx +++ b/src/apps/import-account-with-file/index.tsx @@ -20,6 +20,7 @@ import { selectThemeModeSetting } from '@background/redux/settings/selectors'; import { useSystemThemeDetector } from '@src/hooks'; import { themeModeSettingChanged } from '@background/redux/settings/actions'; import { ThemeMode } from '@background/redux/settings/types'; +import { isSafariBuild } from '@src/utils'; const Tree = () => { const [state, setState] = useState(null); @@ -40,8 +41,10 @@ const Tree = () => { const themeMode = selectThemeModeSetting(store.getState()); // Set theme mode to system if it is no present in the store - if (themeMode === undefined) { + if (themeMode === undefined && !isSafariBuild) { dispatchToMainStore(themeModeSettingChanged(ThemeMode.SYSTEM)); + } else if (themeMode === undefined && isSafariBuild) { + dispatchToMainStore(themeModeSettingChanged(ThemeMode.LIGHT)); } const isDarkMode = diff --git a/src/apps/popup/index.tsx b/src/apps/popup/index.tsx index f0ac473d1..c5adf3aed 100644 --- a/src/apps/popup/index.tsx +++ b/src/apps/popup/index.tsx @@ -16,6 +16,7 @@ import { selectThemeModeSetting } from '@background/redux/settings/selectors'; import { ThemeMode } from '@background/redux/settings/types'; import { useSystemThemeDetector } from '@src/hooks'; import { themeModeSettingChanged } from '@background/redux/settings/actions'; +import { isSafariBuild } from '@src/utils'; import { AppRouter } from './app-router'; @@ -41,8 +42,10 @@ const Tree = () => { const themeMode = selectThemeModeSetting(store.getState()); // Set theme mode to system if it is no present in the store - if (themeMode === undefined) { + if (themeMode === undefined && !isSafariBuild) { dispatchToMainStore(themeModeSettingChanged(ThemeMode.SYSTEM)); + } else if (themeMode === undefined && isSafariBuild) { + dispatchToMainStore(themeModeSettingChanged(ThemeMode.LIGHT)); } const isDarkMode = diff --git a/src/apps/signature-request/index.tsx b/src/apps/signature-request/index.tsx index 13570d8c1..11922c224 100644 --- a/src/apps/signature-request/index.tsx +++ b/src/apps/signature-request/index.tsx @@ -21,6 +21,7 @@ import { selectThemeModeSetting } from '@background/redux/settings/selectors'; import { useSystemThemeDetector } from '@src/hooks'; import { themeModeSettingChanged } from '@background/redux/settings/actions'; import { ThemeMode } from '@background/redux/settings/types'; +import { isSafariBuild } from '@src/utils'; const Tree = () => { const [state, setState] = useState(null); @@ -41,8 +42,10 @@ const Tree = () => { const themeMode = selectThemeModeSetting(store.getState()); // Set theme mode to system if it is no present in the store - if (themeMode === undefined) { + if (themeMode === undefined && !isSafariBuild) { dispatchToMainStore(themeModeSettingChanged(ThemeMode.SYSTEM)); + } else if (themeMode === undefined && isSafariBuild) { + dispatchToMainStore(themeModeSettingChanged(ThemeMode.LIGHT)); } const isDarkMode = diff --git a/src/background/redux/settings/reducer.ts b/src/background/redux/settings/reducer.ts index fbe6f2a25..e29deee12 100644 --- a/src/background/redux/settings/reducer.ts +++ b/src/background/redux/settings/reducer.ts @@ -2,6 +2,7 @@ import { createReducer } from 'typesafe-actions'; import { TimeoutDurationSetting } from '@popup/constants'; import { NetworkSetting } from '@src/constants'; +import { isSafariBuild } from '@src/utils'; import { activeNetworkSettingChanged, @@ -14,8 +15,8 @@ import { SettingsState, ThemeMode } from './types'; const initialState: SettingsState = { activeNetwork: NetworkSetting.Mainnet, activeTimeoutDuration: TimeoutDurationSetting['5 min'], - isDarkMode: false, - themeMode: ThemeMode.SYSTEM + isDarkMode: false, // Deprecated + themeMode: isSafariBuild ? ThemeMode.LIGHT : ThemeMode.SYSTEM }; export const reducer = createReducer(initialState) diff --git a/src/libs/ui/components/theme-switcher/theme-switcher.tsx b/src/libs/ui/components/theme-switcher/theme-switcher.tsx index 644611bef..3a6065a93 100644 --- a/src/libs/ui/components/theme-switcher/theme-switcher.tsx +++ b/src/libs/ui/components/theme-switcher/theme-switcher.tsx @@ -17,6 +17,7 @@ import { selectThemeModeSetting } from '@background/redux/settings/selectors'; import { dispatchToMainStore } from '@background/redux/utils'; import { themeModeSettingChanged } from '@background/redux/settings/actions'; import { Button, List, SvgIcon, Typography } from '@libs/ui'; +import { isSafariBuild } from '@src/utils'; const Container = styled(FlexColumn)` padding-top: 24px; @@ -42,26 +43,42 @@ export const ThemeSwitcher = ({ closeSwitcher }: ThemeSwitcherProps) => { const themeMode = useSelector(selectThemeModeSetting); const listOfThemes = useMemo( - () => [ - { - id: 1, - name: ThemeMode.SYSTEM, - icon: 'assets/icons/theme.svg', - isActive: themeMode === ThemeMode.SYSTEM - }, - { - id: 2, - name: ThemeMode.DARK, - icon: 'assets/icons/moon.svg', - isActive: themeMode === ThemeMode.DARK - }, - { - id: 3, - name: ThemeMode.LIGHT, - icon: 'assets/icons/sun.svg', - isActive: themeMode === ThemeMode.LIGHT - } - ], + () => + isSafariBuild + ? [ + { + id: 1, + name: ThemeMode.DARK, + icon: 'assets/icons/moon.svg', + isActive: themeMode === ThemeMode.DARK + }, + { + id: 2, + name: ThemeMode.LIGHT, + icon: 'assets/icons/sun.svg', + isActive: themeMode === ThemeMode.LIGHT + } + ] + : [ + { + id: 1, + name: ThemeMode.SYSTEM, + icon: 'assets/icons/theme.svg', + isActive: themeMode === ThemeMode.SYSTEM + }, + { + id: 2, + name: ThemeMode.DARK, + icon: 'assets/icons/moon.svg', + isActive: themeMode === ThemeMode.DARK + }, + { + id: 3, + name: ThemeMode.LIGHT, + icon: 'assets/icons/sun.svg', + isActive: themeMode === ThemeMode.LIGHT + } + ], [themeMode] ); diff --git a/webpack.config.js b/webpack.config.js index 1eda08eab..1a16e80e6 100755 --- a/webpack.config.js +++ b/webpack.config.js @@ -180,8 +180,8 @@ const options = { from: isChrome ? ManifestPath.v3 : isSafari - ? ManifestPath.v2_Safari - : ManifestPath.v2, + ? ManifestPath.v2_Safari + : ManifestPath.v2, to: path.join(__dirname, buildDir, 'manifest.json'), force: true, transform: function (content) { From 8a5f8fb7e88311fcd4de20ee0266b45850158000 Mon Sep 17 00:00:00 2001 From: Ostap Piatkovskyi <44294945+ost-ptk@users.noreply.github.com> Date: Tue, 19 Dec 2023 15:45:44 +0200 Subject: [PATCH 2/2] changed 'Contacts list' to 'Contacts' (#896) Co-authored-by: ost-ptk --- src/apps/popup/pages/navigation-menu/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/apps/popup/pages/navigation-menu/index.tsx b/src/apps/popup/pages/navigation-menu/index.tsx index c2e553c94..6911cbd33 100644 --- a/src/apps/popup/pages/navigation-menu/index.tsx +++ b/src/apps/popup/pages/navigation-menu/index.tsx @@ -148,7 +148,7 @@ export function NavigationMenuPageContent() { items: [ { id: 1, - title: t('Contacts list'), + title: t('Contacts'), iconPath: 'assets/icons/team.svg', currentValue: countOfContacts, disabled: false,