Merge pull request #20 from maryia-matskevich-deriv/maryia/bot_builder_toolbar

sandeep-deriv · web-flow · commit 6450a8ef4983 · 2024-07-10T18:51:09.000+08:00
[BOT] maryia/feat: add icons for flyout &amp; toolbar, change styles for searchbox
diff --git a/public/assets/icons/IcArrowLeft.svg b/public/assets/icons/IcArrowLeft.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="var(--fill-color1)" fill-rule="evenodd" d="M3.613 8.5l3.26 3.668a.5.5 0 11-.747.664l-4-4.5a.5.5 0 010-.664l4-4.5a.5.5 0 01.748.664L3.614 7.5H13.5a.5.5 0 110 1H3.613z"/></svg>
diff --git a/public/assets/icons/IcChartsTabDbot.svg b/public/assets/icons/IcChartsTabDbot.svg
@@ -0,0 +1 @@
+<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m3.5 13 3-3.5L10 13l6.5-6.5" stroke="var(--fill-color1)" stroke-linecap="round"/><path d="M1 1v15a1 1 0 0 0 1 1h15" stroke="var(--fill-color1)" stroke-linecap="round"/></svg>
diff --git a/public/assets/icons/IcFolderOpen.svg b/public/assets/icons/IcFolderOpen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g fill="none" fill-rule="evenodd" stroke="var(--fill-color1)"><path d="M10.5 13.5h-7a1 1 0 01-1-1V4.75A.75.75 0 013.25 4 .75.75 0 004 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75c0 .414.336.75.75.75h2.75a1 1 0 011 1v1.5"/><path d="M2.939 12.184l1.833-5.5A1 1 0 015.721 6h6.892a1 1 0 01.948 1.316l-1.833 5.5a1 1 0 01-.949.684H3.887a1 1 0 01-.948-1.316z"/></g></svg>
diff --git a/public/assets/icons/IcRedo.svg b/public/assets/icons/IcRedo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g fill="none" fill-rule="evenodd" stroke="var(--fill-color1)" stroke-linecap="round" stroke-linejoin="round"><path d="M11 3l2 2-1.995 2"/><path d="M12 5H8a4 4 0 100 8h2"/></g></svg>
diff --git a/public/assets/icons/IcReset.svg b/public/assets/icons/IcReset.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 489.711 489.711"><path d="M112.156 97.111c72.3-65.4 180.5-66.4 253.8-6.7l-58.1 2.2c-7.5.3-13.3 6.5-13 14 .3 7.3 6.3 13 13.5 13h.5l89.2-3.3c7.3-.3 13-6.2 13-13.5v-1-.6l-3.3-88.2c-.3-7.5-6.6-13.3-14-13-7.5.3-13.3 6.5-13 14l2.1 55.3c-36.3-29.7-81-46.9-128.8-49.3-59.2-3-116.1 17.3-160 57.1-60.4 54.7-86 137.9-66.8 217.1 1.5 6.2 7 10.3 13.1 10.3 1.1 0 2.1-.1 3.2-.4 7.2-1.8 11.7-9.1 9.9-16.3-16.8-69.6 5.6-142.7 58.7-190.7zM462.456 195.511c-1.8-7.2-9.1-11.7-16.3-9.9-7.2 1.8-11.7 9.1-9.9 16.3 16.9 69.6-5.6 142.7-58.7 190.7-37.3 33.7-84.1 50.3-130.7 50.3-44.5 0-88.9-15.1-124.7-44.9l58.8-5.3c7.4-.7 12.9-7.2 12.2-14.7s-7.2-12.9-14.7-12.2l-88.9 8c-7.4.7-12.9 7.2-12.2 14.7l8 88.9c.6 7 6.5 12.3 13.4 12.3.4 0 .8 0 1.2-.1 7.4-.7 12.9-7.2 12.2-14.7l-4.8-54.1c36.3 29.4 80.8 46.5 128.3 48.9 3.8.2 7.6.3 11.3.3 55.1 0 107.5-20.2 148.7-57.4 60.4-54.7 86-137.8 66.8-217.1z"/></svg>
diff --git a/public/assets/icons/IcSearch.svg b/public/assets/icons/IcSearch.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="var(--fill-color1)" fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zm0-12a6.5 6.5 0 014.936 10.729l4.418 4.417a.5.5 0 01-.708.708l-4.417-4.418A6.5 6.5 0 116.5 0z"/></svg>
diff --git a/public/assets/icons/IcSort.svg b/public/assets/icons/IcSort.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g fill="none" fill-rule="evenodd" stroke="var(--fill-color1)"><path stroke-linecap="round" d="M1.5 1.5v13"/><rect width="9" height="3" x="3.5" y="1.5" rx="1"/><rect width="7" height="3" x="3.5" y="6.5" rx="1"/><rect width="5" height="3" x="3.5" y="11.5" rx="1"/></g></svg>
diff --git a/public/assets/icons/IcTradingViewChart.svg b/public/assets/icons/IcTradingViewChart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"><path stroke="var(--text-general)" stroke-linecap="round" d="M1 1v15a1 1 0 0 0 1 1h15"/><rect width="8" height="8" x="5" y="1" fill="var(--general-main-1)" rx="4"/><path fill="var(--text-general)" d="M10.353 3.706c0 .383-.325.693-.726.693-.4 0-.725-.31-.725-.693 0-.383.324-.694.725-.694.4 0 .726.31.726.694ZM10.912 3H12l-1.466 4H9.446l1.466-4ZM6 3h2.539v3.988h-.975v-3.1H6V3Z"/><path stroke="var(--text-general)" stroke-linecap="round" d="M3 14.5 6 11l3.5 3.5L16 8"/></svg>
diff --git a/public/assets/icons/IcUndo.svg b/public/assets/icons/IcUndo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g fill="none" fill-rule="evenodd" stroke="var(--fill-color1)" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3L3 5l1.995 2"/><path d="M4 5h4a4 4 0 110 8H6"/></g></svg>
diff --git a/public/assets/icons/IcZoomIn.svg b/public/assets/icons/IcZoomIn.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g fill="none" fill-rule="evenodd"><path d="M0 0h16v16H0z"/><circle cx="7.5" cy="7.5" r="5.5" stroke="var(--fill-color1)"/><rect width="6" height="1" x="4.5" y="7" fill="var(--fill-color1)" rx=".5"/><rect width="1" height="6" x="7" y="4.5" fill="var(--fill-color1)" rx=".5"/><path stroke="var(--fill-color1)" stroke-linecap="round" d="M11.5 11.5l3.565 3.565"/></g></svg>
diff --git a/public/assets/icons/IcZoomOut.svg b/public/assets/icons/IcZoomOut.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g fill="none" fill-rule="evenodd"><path d="M0 0h16v16H0z"/><circle cx="7.5" cy="7.5" r="5.5" stroke="var(--fill-color1)"/><rect width="6" height="1" x="4.5" y="7" fill="var(--fill-color1)" rx=".5"/><path stroke="var(--fill-color1)" stroke-linecap="round" d="M11.5 11.5l3.565 3.565"/></g></svg>
diff --git a/src/components/run-panel/run-panel.tsx b/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>
 );
 
diff --git a/src/pages/bot-builder/toolbox/toolbox.scss b/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);
             }
diff --git a/src/styles/icon.scss b/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);
+    }
+}
diff --git a/src/styles/index.scss b/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;
