diff --git a/packages/bot-skeleton/src/scratch/hooks/block_render_svg_vertical.js b/packages/bot-skeleton/src/scratch/hooks/block_render_svg_vertical.js index bee0060b4c47..43e0037995f0 100644 --- a/packages/bot-skeleton/src/scratch/hooks/block_render_svg_vertical.js +++ b/packages/bot-skeleton/src/scratch/hooks/block_render_svg_vertical.js @@ -74,7 +74,7 @@ Blockly.BlockSvg.prototype.updateColour = function () { // deriv-bot: Update colours of input shapes to a fixed value of #FFF. this.inputList.forEach(input => { if (input.outlinePath) { - input.outlinePath.setAttribute('fill', '#fff'); + input.outlinePath.setAttribute('fill', 'var(--state-normal)'); input.outlinePath.setAttribute('stroke', '#6d7278'); input.outlinePath.setAttribute('stroke-width', '0.3px'); } diff --git a/packages/bot-skeleton/src/scratch/hooks/colours.js b/packages/bot-skeleton/src/scratch/hooks/colours.js index a02637116d2c..5ee3e9066956 100644 --- a/packages/bot-skeleton/src/scratch/hooks/colours.js +++ b/packages/bot-skeleton/src/scratch/hooks/colours.js @@ -1,46 +1,42 @@ const isDarkModeEnabled = () => { - return false; - // TODO: uncomment the following lines when the Dark Mode is ready fo DBot - // const ui_store = localStorage.getItem('ui_store'); + const ui_store = localStorage.getItem('ui_store'); - // if (ui_store && (ui_store.length > 0)) { - // return JSON.parse(ui_store).is_dark_mode_on || false; - // } - // return false; + if (ui_store && ui_store.length > 0) { + return JSON.parse(ui_store).is_dark_mode_on || false; + } + return false; }; if (isDarkModeEnabled()) { - // Dark theme Blockly.Colours.RootBlock = { - colour: '#151717', + colour: '#183046', colourSecondary: '#F2F3F5', colourTertiary: '#151717', }; Blockly.Colours.Base = { - colour: '#4665A0', - colourSecondary: '#507ED5', - colourTertiary: '#507ED5', + colour: '#C2C2C2', + colourSecondary: '#0e0e0e', + colourTertiary: '#0e0e0e', }; Blockly.Colours.Special1 = { - colour: '#9E6248', - colourSecondary: '#D27954', - colourTertiary: '#D27954', + colour: '#C2C2C2', + colourSecondary: '#0e0e0e', + colourTertiary: '#6d7278', }; Blockly.Colours.Special2 = { - colour: '#4F7F7E', - colourSecondary: '#5DA5A3', - colourTertiary: '#5DA5A3', + colour: '#C2C2C2', + colourSecondary: '#0e0e0e', + colourTertiary: '#D27954', }; Blockly.Colours.Special3 = { - colour: '#994949', - colourSecondary: '#CB5555', - colourTertiary: '#CB5555', + colour: '#C2C2C2', + colourSecondary: '#0e0e0e', + colourTertiary: '#D27954', }; } else { - // Light theme Blockly.Colours.RootBlock = { colour: '#064e72', colourSecondary: '#064e72', diff --git a/packages/bot-skeleton/src/scratch/hooks/css.js b/packages/bot-skeleton/src/scratch/hooks/css.js index 7b5ee267b38d..4117c7f9cca2 100644 --- a/packages/bot-skeleton/src/scratch/hooks/css.js +++ b/packages/bot-skeleton/src/scratch/hooks/css.js @@ -140,7 +140,7 @@ Blockly.Css.CONTENT = [ 'min-height: 34px;', 'background-color: #d6dadb;', 'border-radius: 4px;', - 'color: var(--text-prominent);', + 'color: #333333;', 'padding: 8px;', 'font-size: 12px;', 'font-family: "IBM Plex Sans";', @@ -222,7 +222,7 @@ Blockly.Css.CONTENT = [ 'margin: 4px;', 'border-radius: 4px;', 'background: $colour_numPadBackground;', - 'color: var(--text-general);', + 'color: #333333;', 'outline: none;', 'border: 1px solid $colour_numPadBorder;', 'cursor: pointer;', @@ -290,6 +290,7 @@ Blockly.Css.CONTENT = [ '.blocklyPath {', 'stroke-width: 0.3px;', + '}', '.blocklySelected>.blocklyPath {', @@ -373,7 +374,7 @@ Blockly.Css.CONTENT = [ '}', '.blocklyText {', - 'fill: var(--text-general);', + 'fill: #333333;', 'font-family: inherit;', 'font-size: var(--text-size-s);', 'font-weight: normal;', @@ -393,16 +394,16 @@ Blockly.Css.CONTENT = [ '.blocklyNonEditableText>text,', '.blocklyEditableText>text {', - // 'fill: $colour_text;', + 'fill: var(--text-prominent);', // 'fill: #575E75 !important;', '}', '.blocklyEditableText>.blocklyEditableLabel {', - 'fill: var(--text-general);', + 'fill: var(--text-prominent);', '}', '.blocklyDropdownText {', - 'fill: var(--text-general) !important;', + 'fill: var(--text-prominent)!important;', '}', '.blocklyBubbleText {', @@ -634,12 +635,13 @@ Blockly.Css.CONTENT = [ '.blocklyMainBackground {', 'stroke-width: 0;', + 'fill: var(--general-main-1) !important', // 'stroke: #c6c6c6;', /* Equates to #ddd due to border being off-pixel. */ '}', '.blocklyMutatorBackground {', 'fill: #fff;', - 'stroke: #ddd;', + 'stroke: #fff;', 'stroke-width: 1;', '}', @@ -1003,7 +1005,7 @@ Blockly.Css.CONTENT = [ '}', '.blocklyDropDownDiv .goog-menuitem {', - 'color: var(--text-general);', + 'color: #333333;', 'font: normal 13px "Helvetica Neue", Helvetica, sans-serif;', 'font-weight: bold;', 'list-style: none;', diff --git a/packages/bot-web-ui/src/components/chart/chart.tsx b/packages/bot-web-ui/src/components/chart/chart.tsx index 8eaadf00b9ba..f01dccdad19f 100644 --- a/packages/bot-web-ui/src/components/chart/chart.tsx +++ b/packages/bot-web-ui/src/components/chart/chart.tsx @@ -83,7 +83,7 @@ export default connect(({ chart_store, common, ui }: RootStore) => ({ isHighestLowestMarkerEnabled: false, // TODO: Pending UI, language: common.current_language.toLowerCase(), position: ui.is_chart_layout_default ? 'bottom' : 'left', - theme: 'light', + theme: ui.is_dark_mode_on ? 'dark' : 'light', }, last_contract: { is_digit_contract: false, diff --git a/packages/bot-web-ui/src/components/contract-card-loading/contract-card-loading.tsx b/packages/bot-web-ui/src/components/contract-card-loading/contract-card-loading.tsx index d9a69f7e4921..0ade53bd9a3c 100644 --- a/packages/bot-web-ui/src/components/contract-card-loading/contract-card-loading.tsx +++ b/packages/bot-web-ui/src/components/contract-card-loading/contract-card-loading.tsx @@ -6,7 +6,13 @@ type TContractCardLoader = { }; const ContractCardLoader = ({ speed = 3 }: TContractCardLoader) => ( - + diff --git a/packages/bot-web-ui/src/components/flyout/flyout.scss b/packages/bot-web-ui/src/components/flyout/flyout.scss index 98ee9d3a46f1..027b102f2fb9 100644 --- a/packages/bot-web-ui/src/components/flyout/flyout.scss +++ b/packages/bot-web-ui/src/components/flyout/flyout.scss @@ -15,7 +15,7 @@ position: absolute; left: 250px; top: 0; - background-color: var(--general-main-1); + background-color: var(--general-main-2); height: calc(100% - 40px); max-height: calc(100% - 40px); z-index: 11; @@ -23,7 +23,7 @@ font-size: 2em; margin-left: $default-margin; margin-top: 20px; - box-shadow: 0 2px 8px 0 $COLOR_LIGHT_BLACK_2; + box-shadow: 0 2px 8px 0 var(--shadow-box); min-width: 400px; visibility: hidden; @@ -134,6 +134,7 @@ font-size: var(--text-size-xs); margin-bottom: 1em; line-height: 1.3em; + color: var(--text-general); } } &__image { diff --git a/packages/bot-web-ui/src/components/journal/journal.scss b/packages/bot-web-ui/src/components/journal/journal.scss index 623fc96af3a4..3ee640ca40e0 100644 --- a/packages/bot-web-ui/src/components/journal/journal.scss +++ b/packages/bot-web-ui/src/components/journal/journal.scss @@ -41,7 +41,7 @@ &__data-list { .ReactVirtualized__Grid__innerScrollContainer { > div:nth-child(even) { - background: var(--status-default); + background: var(--general-section-2); } } } @@ -70,6 +70,7 @@ font-size: var(--text-size-xxs); line-height: 1.5; display: inline; + color: var(--text-general); &-time, &-date { diff --git a/packages/bot-web-ui/src/components/load-modal/load-modal.scss b/packages/bot-web-ui/src/components/load-modal/load-modal.scss index e92bb7703240..852e1d7e1d34 100644 --- a/packages/bot-web-ui/src/components/load-modal/load-modal.scss +++ b/packages/bot-web-ui/src/components/load-modal/load-modal.scss @@ -284,6 +284,7 @@ line-height: 2rem; margin-top: 1.6rem; text-align: center; + color: var(--text-general); } } } diff --git a/packages/bot-web-ui/src/components/main-content/toolbox.scss b/packages/bot-web-ui/src/components/main-content/toolbox.scss index 7047f88a9659..2948bf904a83 100644 --- a/packages/bot-web-ui/src/components/main-content/toolbox.scss +++ b/packages/bot-web-ui/src/components/main-content/toolbox.scss @@ -47,15 +47,18 @@ position: relative; font-weight: bold; font-size: 1.6em; - background-color: var(--general-section-1); + background-color: var(--general-section-5); text-align: center; + color: var(--text-general); } &__item { display: flex; flex-direction: row; + color: var(--text-general); &:hover { background-color: var(--general-hover); + color: var(--text-prominent); } } &__category-arrow { @@ -105,13 +108,13 @@ } &__row { cursor: pointer; - border-top: 1px solid var(--general-section-1); + border-top: 1px solid var(--general-section-6); #{$toolbox}__category--selected { background-color: var(--general-active); } &:last-of-type { - border-bottom: 1px solid var(--general-section-1); + border-bottom: 1px solid var(--general-section-6); } } &__button.dc-btn { diff --git a/packages/bot-web-ui/src/components/main-content/workspace.scss b/packages/bot-web-ui/src/components/main-content/workspace.scss index afdcc7ebf86c..e56f444b1246 100644 --- a/packages/bot-web-ui/src/components/main-content/workspace.scss +++ b/packages/bot-web-ui/src/components/main-content/workspace.scss @@ -9,7 +9,7 @@ font-style: normal; line-height: 1.43; letter-spacing: normal; - fill: var(--fill-normal); + fill: $color-white; } .blocklyMainWorkspaceScrollbar { diff --git a/packages/bot-web-ui/src/components/quick-strategy/quick-strategy.scss b/packages/bot-web-ui/src/components/quick-strategy/quick-strategy.scss index 1b854d1d67d1..342350b8e432 100644 --- a/packages/bot-web-ui/src/components/quick-strategy/quick-strategy.scss +++ b/packages/bot-web-ui/src/components/quick-strategy/quick-strategy.scss @@ -122,7 +122,7 @@ position: fixed; bottom: 0px; left: 0px; - background: var(--general-main-1); + background: var(--general-main-2); width: 100%; &--active-keyboard { diff --git a/packages/bot-web-ui/src/components/run-panel/run-panel.scss b/packages/bot-web-ui/src/components/run-panel/run-panel.scss index 8334ac51c30b..f979be627c63 100644 --- a/packages/bot-web-ui/src/components/run-panel/run-panel.scss +++ b/packages/bot-web-ui/src/components/run-panel/run-panel.scss @@ -44,7 +44,7 @@ flex-direction: column; align-items: flex-end; width: 350px; - background-color: var(--general-section-1); + background-color: var(--general-section-2); position: fixed; bottom: 5.7rem; @@ -54,10 +54,11 @@ width: 33%; padding: 16px 0px 2px 0; cursor: pointer; + color: var(--text-general); &-item { display: inline-block; - border-bottom: 1px dotted #4b4b4b; + border-bottom: 1px dotted var(--text-general); } } &--tiles { diff --git a/packages/bot-web-ui/src/components/summary/summary-card.scss b/packages/bot-web-ui/src/components/summary/summary-card.scss index 4456539c23cc..7717ace4bb1d 100644 --- a/packages/bot-web-ui/src/components/summary/summary-card.scss +++ b/packages/bot-web-ui/src/components/summary/summary-card.scss @@ -9,8 +9,9 @@ position: relative; &--inactive { - background-color: var(--general-section-1); + background-color: var(--general-section-2); border: 1px solid var(--general-main-1); + color: var(--text-general); font-size: 14px; justify-content: center; margin: auto; diff --git a/packages/bot-web-ui/src/components/toolbar/toolbar.scss b/packages/bot-web-ui/src/components/toolbar/toolbar.scss index 2627c272fa7f..e08e0090bb0a 100644 --- a/packages/bot-web-ui/src/components/toolbar/toolbar.scss +++ b/packages/bot-web-ui/src/components/toolbar/toolbar.scss @@ -40,6 +40,7 @@ margin: auto 12px; height: 16px; width: 16px; + fill: var(--text-prominent); } &__group { display: flex; diff --git a/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss b/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss index ad81d34f9faa..473352517115 100644 --- a/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss +++ b/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss @@ -88,6 +88,7 @@ position: relative; } &__text { + color: var(--text-general); font-size: 12px; font-weight: bold; text-align: center; diff --git a/packages/bot-web-ui/src/components/transactions/transaction.jsx b/packages/bot-web-ui/src/components/transactions/transaction.jsx index 19fd250297f0..eb2072aa44a4 100644 --- a/packages/bot-web-ui/src/components/transactions/transaction.jsx +++ b/packages/bot-web-ui/src/components/transactions/transaction.jsx @@ -29,7 +29,7 @@ const TransactionFieldLoader = () => ( height={10} width={80} speed={3} - primaryColor={'var(--general-section-1)'} + primaryColor={'var(--general-section-2)'} secondaryColor={'var(--general-hover)'} > diff --git a/packages/bot-web-ui/src/components/transactions/transactions.scss b/packages/bot-web-ui/src/components/transactions/transactions.scss index 94a36dba1b27..8d4fb8d152fa 100644 --- a/packages/bot-web-ui/src/components/transactions/transactions.scss +++ b/packages/bot-web-ui/src/components/transactions/transactions.scss @@ -164,6 +164,7 @@ &__cell { display: flex; align-items: center; + color: var(--text-general); } &__profit { &--win { diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss index f4655f6dd955..1d9cbaaca880 100644 --- a/packages/components/src/components/drawer/drawer.scss +++ b/packages/components/src/components/drawer/drawer.scss @@ -52,6 +52,7 @@ overflow: auto; } &__footer { + background-color: var(--general-main-2); border-top: 1px solid var(--general-section-1); line-height: 40px; font-weight: 700; @@ -66,7 +67,7 @@ position: absolute; width: $toggler-width; height: 100%; - background-color: var(--general-section-1); + background-color: var(--general-section-5); cursor: pointer; @include mobile { diff --git a/packages/components/src/components/icon/icon.scss b/packages/components/src/components/icon/icon.scss index 1710bc5682a5..21b525853205 100644 --- a/packages/components/src/components/icon/icon.scss +++ b/packages/components/src/components/icon/icon.scss @@ -34,7 +34,7 @@ --fill-color3: #{$color-white}; } &--black { - --fill-color1: #{$color-black-7}; + --fill-color1: var(--icon-black-plus); } &--orange { --fill-color1: var(--status-warning); diff --git a/packages/components/src/components/progress-slider/progress-slider.scss b/packages/components/src/components/progress-slider/progress-slider.scss index 03cf9fb75986..55222391582c 100644 --- a/packages/components/src/components/progress-slider/progress-slider.scss +++ b/packages/components/src/components/progress-slider/progress-slider.scss @@ -9,7 +9,7 @@ border-bottom: 1px solid var(--general-section-1); &--completed { - border-bottom: 1px solid var(--general-section-1); + border-bottom: 1px solid var(--general-section-6); margin: 0.4rem 0 0.8rem; } &__track { diff --git a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx index 8c2623536826..f8cbfcda19e1 100644 --- a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx +++ b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import React from 'react'; import { Div100vhContainer, Icon, MobileDrawer, ToggleSwitch, Text } from '@deriv/components'; -import { getPlatformSettings, routes, PlatformContext } from '@deriv/shared'; +import { routes, PlatformContext } from '@deriv/shared'; import { localize, getAllowedLanguages, getLanguage } from '@deriv/translations'; import NetworkStatus from 'App/Components/Layout/Footer'; import ServerTime from 'App/Containers/server-time.jsx'; @@ -93,7 +93,6 @@ const ToggleMenuDrawer = React.forwardRef( is_account_transfer_visible, is_virtual, logoutClient, - platform_header, platform_switcher, should_allow_authentication, title, @@ -340,7 +339,7 @@ const ToggleMenuDrawer = React.forwardRef( getRoutesWithSubMenu(route_config, idx) )} {getLanguageRoutes()} - {platform_header !== getPlatformSettings('dbot').name && ( + { { @@ -360,7 +359,7 @@ const ToggleMenuDrawer = React.forwardRef( /> - )} + } {secondary_routes_config.map(route_config => getRoutesWithSubMenu(route_config) diff --git a/packages/core/src/App/Containers/SettingsModal/settings-theme.jsx b/packages/core/src/App/Containers/SettingsModal/settings-theme.jsx index 206977ac447f..e9f80df62562 100644 --- a/packages/core/src/App/Containers/SettingsModal/settings-theme.jsx +++ b/packages/core/src/App/Containers/SettingsModal/settings-theme.jsx @@ -1,22 +1,17 @@ import classNames from 'classnames'; import React from 'react'; -import { isBot } from '@deriv/shared'; import { Text } from '@deriv/components'; import { Localize } from '@deriv/translations'; import DarkModeIcon from 'Assets/SvgComponents/settings/img-theme-dark.svg'; import LightModeIcon from 'Assets/SvgComponents/settings/img-theme-light.svg'; import { connect } from 'Stores/connect'; -// TODO: [disable-dark-bot] Delete all `isBot()` conditional checks when DBot dark theme is ready - const ThemeSelectSettings = ({ is_dark_mode, setDarkMode }) => { const darkOnClick = () => { - if (isBot()) return; setDarkMode(true); }; const lightOnClick = () => { - if (isBot()) return; setDarkMode(false); }; @@ -30,33 +25,28 @@ const ThemeSelectSettings = ({ is_dark_mode, setDarkMode }) => {

- {isBot() ? ( - - ) : ( - - )} + {}

diff --git a/packages/core/src/Stores/ui-store.js b/packages/core/src/Stores/ui-store.js index 494221951b32..05fd290f150b 100644 --- a/packages/core/src/Stores/ui-store.js +++ b/packages/core/src/Stores/ui-store.js @@ -1,4 +1,4 @@ -import { getPlatformInformation, isMobile, isTouchDevice, LocalStore, platform_name, routes } from '@deriv/shared'; +import { isMobile, isTouchDevice, LocalStore, routes, isBot } from '@deriv/shared'; import { MAX_MOBILE_WIDTH, MAX_TABLET_WIDTH } from 'Constants/ui'; import { action, autorun, computed, observable } from 'mobx'; import BaseStore from './base-store'; @@ -180,15 +180,6 @@ export default class UIStore extends BaseStore { }); } changeTheme = () => { - // TODO: [disable-dark-bot] Delete this condition when Bot is ready - const new_app_routing_history = this.root_store.common.app_routing_history.slice(); - const platform = getPlatformInformation(new_app_routing_history).header; - if (platform === platform_name.DBot) { - document.body.classList.remove('theme--dark'); - document.body.classList.add('theme--light'); - return; - } - if (this.is_dark_mode_on) { document.body.classList.remove('theme--light'); document.body.classList.add('theme--dark'); @@ -381,6 +372,9 @@ export default class UIStore extends BaseStore { this.is_dark_mode_on = is_dark_mode_on; // This GTM call is here instead of the GTM store due to frequency of use this.root_store.gtm.pushDataLayer({ event: 'switch theme' }); + if (isBot()) { + location.reload(); + } } return this.is_dark_mode_on; diff --git a/packages/shared/src/styles/themes.scss b/packages/shared/src/styles/themes.scss index 57e6771e15ff..32aaedb76609 100644 --- a/packages/shared/src/styles/themes.scss +++ b/packages/shared/src/styles/themes.scss @@ -72,6 +72,7 @@ --general-section-3: #{$color-grey-11}; --general-section-4: #{$color-grey-12}; --general-section-5: #{$color-grey-2}; + --general-section-6: #{$color-grey-2}; --general-disabled: #{$color-grey-3}; --general-hover: #{$color-grey-4}; --general-active: #{$color-grey-5}; @@ -90,6 +91,7 @@ --icon-light-background: #{$color-black-9}; --icon-dark-background: #{$color-white}; --icon-grey-background: #{$color-grey-2}; + --icon-black-plus: #{$color-black-7}; --text-status-info-blue: #{$color-blue}; --text-hint: #{$color-black-1}; // Purchase @@ -117,6 +119,7 @@ --shadow-menu: #{$alpha-color-black-4}; --shadow-menu-2: #{$alpha-color-black-4}; --shadow-drop: #{$alpha-color-black-3}; + --shadow-box: #{$COLOR_LIGHT_BLACK_2}; // States --state-normal: #{$color-white}; --state-hover: #{$color-grey-4}; @@ -194,6 +197,7 @@ // @TODO: get color from design --general-section-4: #{$color-black-5}; --general-section-5: #{$color-black-5}; + --general-section-6: #{$color-grey-7}; --general-disabled: #{$color-black-4}; --general-hover: #{$color-black-5}; --general-active: #{$color-black-8}; @@ -211,6 +215,7 @@ --icon-light-background: #{$color-black-9}; --icon-dark-background: #{$color-white}; --icon-grey-background: #{$color-black-1}; + --icon-black-plus: #{$color-white}; // Purchase --purchase-main-1: #{$color-green-3}; --purchase-section-1: #{$color-green-4}; @@ -235,6 +240,7 @@ --shadow-menu: #{$alpha-color-black-5}; --shadow-menu-2: #{$alpha-color-black-1}; --shadow-drop: #{$alpha-color-black-6}; + --shadow-box: #{$COLOR_DARK_GRAY_3}; // States --state-normal: #{$color-black}; --state-hover: #{$color-black-5};