[BOT] maryia/feat: add icons for flyout & toolbar, change styles for searchbox

src/components/run-panel/run-panel.tsx

@@ -153,11 +153,12 @@ const DrawerFooter = ({ is_clear_stat_disabled, onClearStatClick }: TDrawerFoote
             id='db-run-panel__clear-button'
             className='run-panel__footer-button'
             disabled={is_clear_stat_disabled}
-            label={localize('Reset')}
             onClick={onClearStatClick}
             has_effect
             variant='outlined'
-        />
+        >
+            <span>{localize('Reset')}</span>
+        </Button>
     </div>
 );
 

src/pages/bot-builder/toolbox/toolbox.scss

@@ -7,6 +7,7 @@
     padding: 0.8rem;
     background: var(--general-main-1);
     z-index: 1;
+
     $toolbox: &;
     $category-text-spacing: 10px;
 
@@ -33,8 +34,15 @@
         padding: 1.3rem 0.8rem;
         height: 6rem;
 
+        & .deriv-input__container {
+            width: 100%;
+        }
+
         &-field {
             margin-bottom: 0 !important;
+            border-radius: 8px;
+            height: 3.2rem;
+            padding: 0.6rem 0.8rem;
 
             input::-ms-clear {
                 display: none;
@@ -180,6 +188,7 @@
             &:hover {
                 background-color: var(--general-hover);
             }
+
             &--active {
                 background-color: var(--general-hover);
             }

src/styles/icon.scss

@@ -0,0 +1,64 @@
+/* stylelint-disable color-no-hex */
+
+/* COLOR PALETTE */
+
+/* colors */
+$color-black-1: #333;
+$color-grey-1: #999;
+$color-black-3: #151717;
+
+:root {
+    // Icons and Texts
+    --text-general: #{$color-black-1};
+    --text-less-prominent: #{$color-grey-1};
+    --general-section-1: #{$color-black-3};
+    --icon-grey-background: #{$color-black-1};
+    --text-prominent: #{$color-black-1};
+    --fill-color1: var(--text-general);
+    --fill-color2: var(--text-less-prominent);
+    --fill-color3: var(--general-section-1);
+    --fill-color4: var(--icon-grey-background);
+    --fill-color5: var(--text-prominent);
+
+    &--disabled {
+        --fill-color1: var(--text-disabled);
+        --fill-color2: var(--text-disabled);
+    }
+
+    &--active {
+        --fill-color1: #{$color-white};
+        --fill-color2: #{$color-white};
+    }
+
+    &--green {
+        --fill-color1: var(--text-profit-success);
+        --fill-color2: var(--text-profit-success);
+        --fill-color3: #{$color-white};
+    }
+
+    &--red {
+        --fill-color1: var(--text-loss-danger);
+        --fill-color2: var(--text-loss-danger);
+        --fill-color3: #{$color-white};
+    }
+
+    &--secondary {
+        --fill-color1: var(--text-less-prominent);
+        --fill-color2: var(--text-less-prominent);
+        --fill-color3: #{$color-white};
+    }
+
+    &--brand {
+        --fill-color1: var(--brand-red-coral);
+        --fill-color2: var(--brand-secondary);
+        --fill-color3: #{$color-white};
+    }
+
+    &--black {
+        --fill-color1: var(--icon-black-plus);
+    }
+
+    &--orange {
+        --fill-color1: var(--status-warning);
+    }
+}

src/styles/index.scss

@@ -1,4 +1,5 @@
 @import 'https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese';
+@import './icon';
 
 body {
     font-family: 'IBM Plex Sans', sans-serif;