fix: dbot dark_mode production (#7885)

* fix: dbot dark_mode production * fix: removed unused hook * fix: review comments --------- Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>
deriv-com · Mar 30, 2023 · 711a54e · 711a54e · vercel · Mar 30, 2023
1 parent 873b920
commit 711a54e
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 66 deletions.
diff --git 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
@@ -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',
-        };
-    }
+    workspace.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
@@ -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(() => {
         /**