Sara / Added dark theme to the bot (#6215)

* Added dark theme to the bot * Added dark theme details * Removed extra comments * Changed color variable to const * Trigger build * Added # before color * Added theme color to the journal text * Added flyout border color * Added plus color * Fixed issue with QS cform color * Fixed issue with whas this color * Changed summary bgcolor * Fixed issue with section colors * Changed the dropdown menu item colors * Fixed issue with journal bg color * Changed tooltip color * Changed color of transaction * Added dark theme to smartchart * Added dark theme menu to bot * Changed numpad color * Added animation to contractloader * Changed line color in summary * Changed block menu color Co-authored-by: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com>
binary-com · Oct 6, 2022 · d5e51ff · d5e51ff
1 parent 530b340
commit d5e51ff
Show file tree

Hide file tree

Showing 24 changed files with 82 additions and 77 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -6,7 +6,13 @@ type TContractCardLoader = {
 };
 
 const ContractCardLoader = ({ speed = 3 }: TContractCardLoader) => (
-    <ContentLoader height={153} width={334} speed={speed}>
+    <ContentLoader
+        height={153}
+        width={334}
+        speed={speed}
+        primaryColor={'var(--general-section-2)'}
+        secondaryColor={'var(--general-hover)'}
+    >
         <rect x='12' y='15' rx='0' ry='0' width='41' height='25' />
         <rect x='61' y='24' rx='0' ry='0' width='91' height='8' />
         <rect x='180' y='15' rx='0' ry='0' width='41' height='25' />

diff --git a/packages/bot-web-ui/src/components/flyout/flyout.scss b/packages/bot-web-ui/src/components/flyout/flyout.scss
@@ -15,15 +15,15 @@
     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;
     border-radius: $BORDER_RADIUS;
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)'}
     >
         <rect x='0' y='0' rx='0' ry='0' width='100' height='12' />

diff --git 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
@@ -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
@@ -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
@@ -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 {