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

[BOT]Maryia/feat: make work run panel with summary, transactions tabs

Author: sandeep-deriv

public/assets/icons/IcBox.svg

@@ -4,5 +4,10 @@
         padding: 12px;
         padding-left: 16px;
         border: solid 1px var(--general-section-1);
+
+        .download__button,
+        &__view-detail-button {
+            height: 3.2rem;
+        }
     }
 }

public/assets/icons/IcCross.svg

@@ -97,15 +97,19 @@ const Download = observer(({ tab }: TDownloadProps) => {
         >
             <Button
                 id='download-button'
-                is_disabled={disabled}
+                disabled={disabled}
                 className='download__button'
                 icon={
                     <Icon icon='IcDbotDownload' color={disabled ? 'disabled' : undefined} className='download__icon' />
                 }
-                text={localize('Download')}
                 onClick={clickFunction}
-                secondary
-            />
+                variant='outlined'
+                color='black'
+                size='sm'
+                textSize='sm'
+            >
+                {localize('Download')}
+            </Button>
         </Popover>
     );
 });

public/assets/icons/IcDbotDownload.svg

@@ -2,12 +2,13 @@ import React from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 
-import { Button, Modal, Tabs, Text } from '@deriv-com/ui';
+import { Button, Modal, Text } from '@deriv-com/ui';
 
 import Journal from '@/components/journal';
 import SelfExclusion from '@/components/self-exclusion';
 import Drawer from '@/components/shared_ui/drawer';
 import Money from '@/components/shared_ui/money';
+import Tabs from '@/components/shared_ui/tabs';
 import Summary from '@/components/summary';
 import TradeAnimation from '@/components/trade-animation';
 import Transactions from '@/components/transactions';
@@ -154,8 +155,10 @@ const DrawerFooter = ({ is_clear_stat_disabled, onClearStatClick }: TDrawerFoote
             className='run-panel__footer-button'
             disabled={is_clear_stat_disabled}
             onClick={onClearStatClick}
-            has_effect
             variant='outlined'
+            color='black'
+            size='sm'
+            textSize='sm'
         >
             <span>{localize('Reset')}</span>
         </Button>

public/assets/icons/IcDbotViewDetail.svg

@@ -114,14 +114,18 @@ const Transactions = observer(({ is_drawer_open }: TTransactions) => {
                 <Button
                     id='download__container__view-detail-button'
                     className='download__container__view-detail-button'
-                    is_disabled={!transaction_list?.length}
-                    text={localize('View Detail')}
+                    disabled={!transaction_list?.length}
                     onClick={() => {
                         toggleTransactionDetailsModal(true);
                     }}
-                    secondary
                     icon={<Icon icon='IcDbotViewDetail' size={18} />}
-                />
+                    variant='outlined'
+                    color='black'
+                    size='sm'
+                    textSize='sm'
+                >
+                    {localize('View Detail')}
+                </Button>
             </div>
             <div className='transactions__header'>
                 <span className='transactions__header-column transactions__header-type'>{localize('Type')}</span>

src/components/download/download.scss

@@ -1,7 +1,6 @@
 import { Field as FormField, FieldProps, Form, Formik } from 'formik';
 
-import { Input } from '@deriv-com/ui';
-
+import Input from '@/components/shared_ui/input';
 import { localize } from '@/utils/tmp/dummy';
 
 import SearchIcon from './search-icon';