From 69e3baf3f778630f0ef07d0c6c86daf59def9b55 Mon Sep 17 00:00:00 2001 From: rupato-deriv Date: Mon, 13 Mar 2023 14:25:09 +0800 Subject: [PATCH 1/3] fix: dbot dark_mode production --- packages/bot-skeleton/src/scratch/dbot.js | 2 - .../bot-skeleton/src/scratch/hooks/colours.js | 120 ++++++++---------- packages/bot-web-ui/src/app/app.jsx | 8 ++ .../src/components/dashboard/hooks/index.ts | 1 + .../dashboard/hooks/useDarkMode.tsx | 33 +++++ .../Containers/Layout/trading-hub-footer.jsx | 3 +- 6 files changed, 99 insertions(+), 68 deletions(-) create mode 100644 packages/bot-web-ui/src/components/dashboard/hooks/index.ts create mode 100644 packages/bot-web-ui/src/components/dashboard/hooks/useDarkMode.tsx diff --git a/packages/bot-skeleton/src/scratch/dbot.js b/packages/bot-skeleton/src/scratch/dbot.js index 4df1e4afb380..64ed4c5baf0b 100644 --- a/packages/bot-skeleton/src/scratch/dbot.js +++ b/packages/bot-skeleton/src/scratch/dbot.js @@ -9,7 +9,6 @@ import { getSavedWorkspaces, saveWorkspaceToRecent } from '../utils/local-storag import { observer as globalObserver } from '../utils/observer'; import ApiHelpers from '../services/api/api-helpers'; import Interpreter from '../services/tradeEngine/utils/interpreter'; -import { setColors } from './hooks/colours'; import { api_base } from '../services/api/api-base'; class DBot { @@ -24,7 +23,6 @@ class DBot { */ async initWorkspace(public_path, store, api_helpers_store, is_mobile) { const recent_files = await getSavedWorkspaces(); - setColors(); return new Promise((resolve, reject) => { __webpack_public_path__ = public_path; // eslint-disable-line no-global-assign ApiHelpers.setInstance(api_helpers_store); diff --git a/packages/bot-skeleton/src/scratch/hooks/colours.js b/packages/bot-skeleton/src/scratch/hooks/colours.js index 3e1c95b496c7..b5c48d807688 100644 --- a/packages/bot-skeleton/src/scratch/hooks/colours.js +++ b/packages/bot-skeleton/src/scratch/hooks/colours.js @@ -1,73 +1,65 @@ -const isDarkModeEnabled = () => { - const ui_store = localStorage.getItem('ui_store'); +const darkMode = () => { + const workspace = Blockly; + workspace.Colours.RootBlock = { + colour: '#183046', + colourSecondary: '#F2F3F5', + colourTertiary: '#151717', + }; + workspace.Colours.Base = { + colour: '#C2C2C2', + colourSecondary: '#0e0e0e', + colourTertiary: '#0e0e0e', + }; - if (ui_store && ui_store.length > 0) { - return JSON.parse(ui_store).is_dark_mode_on || false; - } - return false; -}; - -export const setColors = () => { - if (isDarkModeEnabled()) { - Blockly.Colours.RootBlock = { - colour: '#183046', - colourSecondary: '#F2F3F5', - colourTertiary: '#151717', - }; - Blockly.Colours.Base = { - colour: '#C2C2C2', - colourSecondary: '#0e0e0e', - colourTertiary: '#0e0e0e', - }; + workspace.Colours.Special1 = { + colour: '#C2C2C2', + colourSecondary: '#0e0e0e', + colourTertiary: '#6d7278', + }; - Blockly.Colours.Special1 = { - colour: '#C2C2C2', - colourSecondary: '#0e0e0e', - colourTertiary: '#6d7278', - }; + workspace.Colours.Special2 = { + colour: '#C2C2C2', + colourSecondary: '#0e0e0e', + colourTertiary: '#D27954', + }; - Blockly.Colours.Special2 = { - colour: '#C2C2C2', - colourSecondary: '#0e0e0e', - colourTertiary: '#D27954', - }; + workspace.Colours.Special3 = { + colour: '#C2C2C2', + colourSecondary: '#0e0e0e', + colourTertiary: '#D27954', + }; +}; - Blockly.Colours.Special3 = { - colour: '#C2C2C2', - colourSecondary: '#0e0e0e', - colourTertiary: '#D27954', - }; - } else { - Blockly.Colours.RootBlock = { - colour: '#064e72', - colourSecondary: '#064e72', - colourTertiary: '#6d7278', - }; +const lightMode = () => { + const workspace = Blockly; + workspace.Colours.RootBlock = { + colour: '#064e72', + colourSecondary: '#064e72', + colourTertiary: '#6d7278', + }; - Blockly.Colours.Base = { - colour: '#e5e5e5', - colourSecondary: '#ffffff', - colourTertiary: '#6d7278', - }; + workspace.Colours.Base = { + colour: '#e5e5e5', + colourSecondary: '#ffffff', + colourTertiary: '#6d7278', + }; - Blockly.Colours.Special1 = { - colour: '#e5e5e5', - colourSecondary: '#ffffff', - colourTertiary: '#6d7278', - }; + workspace.Colours.Special1 = { + colour: '#e5e5e5', + colourSecondary: '#ffffff', + colourTertiary: '#6d7278', + }; - Blockly.Colours.Special2 = { - colour: '#e5e5e5', - colourSecondary: '#ffffff', - colourTertiary: '#6d7278', - }; + workspace.Colours.Special2 = { + colour: '#e5e5e5', + colourSecondary: '#ffffff', + colourTertiary: '#6d7278', + }; - Blockly.Colours.Special3 = { - colour: '#e5e5e5', - colourSecondary: '#ffffff', - colourTertiary: '#6d7278', - }; - } + Blockly.Colours.Special3 = { + colour: '#e5e5e5', + colourSecondary: '#ffffff', + colourTertiary: '#6d7278', + }; }; - -setColors(); +export const setColors = is_dark_mode => (is_dark_mode ? darkMode() : lightMode()); diff --git a/packages/bot-web-ui/src/app/app.jsx b/packages/bot-web-ui/src/app/app.jsx index 365468c0c6f0..189409a83a2e 100644 --- a/packages/bot-web-ui/src/app/app.jsx +++ b/packages/bot-web-ui/src/app/app.jsx @@ -20,6 +20,7 @@ import RootStore from 'Stores'; import GTM from 'Utils/gtm'; import './app.scss'; import Dashboard from 'Components/dashboard'; +import { setColors } from '../../../bot-skeleton/src/scratch/hooks/colours'; const App = ({ passthrough }) => { const { root_store, WS } = passthrough; @@ -29,6 +30,13 @@ const App = ({ passthrough }) => { const root_store_instance = React.useRef(new RootStore(root_store, WS, DBot)); const { app, common, core } = root_store_instance.current; const { onMount, onUnmount, showDigitalOptionsMaltainvestError } = app; + const { + ui: { is_dark_mode_on }, + } = root_store; + + React.useEffect(() => { + setColors(is_dark_mode_on); + }, []); React.useEffect(() => { /** diff --git a/packages/bot-web-ui/src/components/dashboard/hooks/index.ts b/packages/bot-web-ui/src/components/dashboard/hooks/index.ts new file mode 100644 index 000000000000..a8cdd4e8868d --- /dev/null +++ b/packages/bot-web-ui/src/components/dashboard/hooks/index.ts @@ -0,0 +1 @@ +export * from './useDarkMode'; diff --git a/packages/bot-web-ui/src/components/dashboard/hooks/useDarkMode.tsx b/packages/bot-web-ui/src/components/dashboard/hooks/useDarkMode.tsx new file mode 100644 index 000000000000..f552e2a12d0f --- /dev/null +++ b/packages/bot-web-ui/src/components/dashboard/hooks/useDarkMode.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +export const useDarkMode = store => { + const { + ui: { is_dark_mode_on }, + } = store; + const [is_dark_mode, setDarkMode] = React.useState(false); + const ui_store = JSON.parse(localStorage?.getItem('ui_store')); + const theme_dark = document.body.classList.contains('theme--dark'); + + React.useEffect(() => { + const onStorageChanged = () => { + const data = is_dark_mode_on; + if (data) { + setDarkMode(JSON.parse(data)); + } + }; + if (theme_dark || is_dark_mode_on) { + setDarkMode(true); + } + + window.addEventListener('storage', onStorageChanged); + + return () => { + window.removeEventListener('storage', onStorageChanged); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return { + is_dark_mode, + }; +}; diff --git a/packages/core/src/App/Containers/Layout/trading-hub-footer.jsx b/packages/core/src/App/Containers/Layout/trading-hub-footer.jsx index 471699fdbfc3..030500c421cb 100644 --- a/packages/core/src/App/Containers/Layout/trading-hub-footer.jsx +++ b/packages/core/src/App/Containers/Layout/trading-hub-footer.jsx @@ -16,7 +16,7 @@ import LiveChat from 'App/Components/Elements/LiveChat'; import WhatsApp from 'App/Components/Elements/WhatsApp/index.ts'; import { connect } from 'Stores/connect'; import ServerTime from '../server-time.jsx'; -import { isBot, routes } from '@deriv/shared'; +import { routes } from '@deriv/shared'; import DarkModeToggleIcon from 'Assets/SvgComponents/footer/ic-footer-light-theme.svg'; import LightModeToggleIcon from 'Assets/SvgComponents/footer/ic-footer-dark-theme.svg'; import { Popover } from '@deriv/components'; @@ -60,7 +60,6 @@ const TradingHubFooter = ({ } const changeTheme = () => { - if (isBot()) return; setDarkMode(!is_dark_mode); }; From 044f05e579cea70edc764e96fa984b5a38c1ea45 Mon Sep 17 00:00:00 2001 From: rupato-deriv Date: Mon, 13 Mar 2023 14:36:29 +0800 Subject: [PATCH 2/3] fix: removed unused hook --- .../src/components/dashboard/hooks/index.ts | 1 - .../dashboard/hooks/useDarkMode.tsx | 33 ------------------- 2 files changed, 34 deletions(-) delete mode 100644 packages/bot-web-ui/src/components/dashboard/hooks/index.ts delete mode 100644 packages/bot-web-ui/src/components/dashboard/hooks/useDarkMode.tsx diff --git a/packages/bot-web-ui/src/components/dashboard/hooks/index.ts b/packages/bot-web-ui/src/components/dashboard/hooks/index.ts deleted file mode 100644 index a8cdd4e8868d..000000000000 --- a/packages/bot-web-ui/src/components/dashboard/hooks/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useDarkMode'; diff --git a/packages/bot-web-ui/src/components/dashboard/hooks/useDarkMode.tsx b/packages/bot-web-ui/src/components/dashboard/hooks/useDarkMode.tsx deleted file mode 100644 index f552e2a12d0f..000000000000 --- a/packages/bot-web-ui/src/components/dashboard/hooks/useDarkMode.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; - -export const useDarkMode = store => { - const { - ui: { is_dark_mode_on }, - } = store; - const [is_dark_mode, setDarkMode] = React.useState(false); - const ui_store = JSON.parse(localStorage?.getItem('ui_store')); - const theme_dark = document.body.classList.contains('theme--dark'); - - React.useEffect(() => { - const onStorageChanged = () => { - const data = is_dark_mode_on; - if (data) { - setDarkMode(JSON.parse(data)); - } - }; - if (theme_dark || is_dark_mode_on) { - setDarkMode(true); - } - - window.addEventListener('storage', onStorageChanged); - - return () => { - window.removeEventListener('storage', onStorageChanged); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return { - is_dark_mode, - }; -}; From fd26f14d91df4d7bc1d7c14b831d99434dfab6ce Mon Sep 17 00:00:00 2001 From: rupato-deriv Date: Tue, 14 Mar 2023 16:37:07 +0800 Subject: [PATCH 3/3] fix: review comments --- packages/bot-skeleton/src/scratch/hooks/colours.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bot-skeleton/src/scratch/hooks/colours.js b/packages/bot-skeleton/src/scratch/hooks/colours.js index b5c48d807688..e4467af268b2 100644 --- a/packages/bot-skeleton/src/scratch/hooks/colours.js +++ b/packages/bot-skeleton/src/scratch/hooks/colours.js @@ -56,7 +56,7 @@ const lightMode = () => { colourTertiary: '#6d7278', }; - Blockly.Colours.Special3 = { + workspace.Colours.Special3 = { colour: '#e5e5e5', colourSecondary: '#ffffff', colourTertiary: '#6d7278',