Merge branch 'main' of github.com:deriv-com/bot into shafin/BOT/chore…

…--use-webpack

src/components/download/download.scss

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

src/components/download/download.tsx

@@ -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>
     );
 });

src/components/flyout/flyout-block-group.tsx

@@ -43,7 +43,7 @@ const FlyoutBlockGroup = ({ onInfoClick, block_node, is_active, should_hide_disp
                         <div className='flyout__item-header'>
                             <Text
                                 size={is_variables_get ? 'sm' : 'xs'}
-                                line_height={is_variables_get ? undefined : 'xl'}
+                                lineHeight={is_variables_get ? undefined : 'xl'}
                                 weight={is_variables_get ? undefined : 'bold'}
                             >
                                 {display_name}

src/components/flyout/flyout.tsx

@@ -82,7 +82,7 @@ const FlyoutContent = (props: TFlyoutContent) => {
                 )}
                 {is_empty ? (
                     <div className='flyout__search-empty'>
-                        <Text as='h2' weight='bold' line_height='xxs'>
+                        <Text as='h2' weight='bold' lineHeight='xs'>
                             {localize('No results found')}
                         </Text>
                     </div>

src/components/journal/journal.tsx

@@ -66,28 +66,28 @@ const Journal = observer(() => {
                                     weight='bold'
                                     align='center'
                                     color='less-prominent'
-                                    line_height='xxs'
+                                    lineHeight='xs'
                                     className='journal-empty__header'
                                 >
                                     {localize('There are no messages to display')}
                                 </Text>
                                 <div className='journal-empty__message'>
-                                    <Text size='xxs' color='less-prominent'>
+                                    <Text size='xs' color='less-prominent'>
                                         {localize('Here are the possible reasons:')}
                                     </Text>
                                     <ul className='journal-empty__list'>
                                         <li>
-                                            <Text size='xxs' color='less-prominent'>
+                                            <Text size='xs' color='less-prominent'>
                                                 {localize('The bot is not running')}
                                             </Text>
                                         </li>
                                         <li>
-                                            <Text size='xxs' color='less-prominent'>
+                                            <Text size='xs' color='less-prominent'>
                                                 {localize('The stats are cleared')}
                                             </Text>
                                         </li>
                                         <li>
-                                            <Text size='xxs' color='less-prominent'>
+                                            <Text size='xs' color='less-prominent'>
                                                 {localize('All messages are filtered out')}
                                             </Text>
                                         </li>

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

@@ -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';
@@ -153,11 +154,14 @@ 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'
-        />
+            color='black'
+            size='sm'
+            textSize='sm'
+        >
+            <span>{localize('Reset')}</span>
+        </Button>
     </div>
 );
 

src/components/shared_ui/checkbox/checkbox.tsx

@@ -18,7 +18,7 @@ type TCheckBoxProps = Omit<React.HTMLProps<HTMLInputElement>, 'value' | 'label'>
     value?: boolean;
     withTabIndex?: number;
     has_error?: boolean;
-    label_line_height?: string;
+    label_lineHeight?: string;
 };
 
 const Checkbox = React.forwardRef<HTMLInputElement, TCheckBoxProps>(
@@ -30,7 +30,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, TCheckBoxProps>(
             id,
             label,
             label_font_size = 'xs',
-            label_line_height = 'unset',
+            label_lineHeight = 'unset',
             defaultChecked,
             onChange, // This needs to be here so it's not included in `otherProps`
             value = false,
@@ -93,7 +93,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, TCheckBoxProps>(
                 </span>
                 <Text
                     size={label_font_size}
-                    line_height={label_line_height}
+                    lineHeight={label_lineHeight}
                     className={classNames('dc-checkbox__label', classNameLabel, {
                         'dc-checkbox__label--error': has_error,
                     })}

src/components/shared_ui/contract-card/contract-card-items/contract-card-footer.tsx

@@ -101,7 +101,7 @@ const CardFooter = ({
                                 as='div'
                                 size='xxxs'
                                 color='less-prominent'
-                                line_height='s'
+                                LineHeight='sm'
                                 className='lookbacks--note'
                             >
                                 <Localize

src/components/shared_ui/contract-card/contract-card-items/lookbacks-card-body.tsx

@@ -90,7 +90,7 @@ const LookBacksCardBody = ({
                 </MobileWrapper>
             </div>
             <ContractCardItem className='dc-contract-card-item__payout-limit'>
-                <Text align='center' line_height='l' size='xxs'>
+                <Text align='center' LineHeight='lg' size='xxs'>
                     {getPayoutLimit(contract_type, multiplier)}
                 </Text>
             </ContractCardItem>

src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx

@@ -89,7 +89,7 @@ const ResultOverlay = ({
                         <Text
                             weight='bold'
                             size='s'
-                            line_height='xxl'
+                            lineHeight='2xl'
                             color={is_contract_won ? 'profit-success' : 'loss-danger'}
                         >
                             <Money amount={payout_info} currency={currency} has_sign show_currency />

src/components/shared_ui/currency-badge/currency-badge.tsx

@@ -7,7 +7,7 @@ type TCurrencyBadgeProps = {
 };
 
 const CurrencyBadge = ({ currency }: TCurrencyBadgeProps) => (
-    <Text className='dc-currency-badge' color='colored-background' line_height='unset' size='xxxs' weight='bold'>
+    <Text className='dc-currency-badge' color='colored-background' lineHeight='unset' size='xxxs' weight='bold'>
         {getCurrencyDisplayCode(currency)}
     </Text>
 );

src/components/shared_ui/mobile-dialog/mobile-dialog.tsx

@@ -128,7 +128,7 @@ const MobileDialog = (props: React.PropsWithChildren<TMobileDialog>) => {
                                 size='xs'
                                 color='prominent'
                                 weight='bold'
-                                line_height='unset'
+                                lineHeight='unset'
                                 className='dc-mobile-dialog__title'
                             >
                                 {renderTitle ? renderTitle() : title}

src/components/shared_ui/mobile-full-page-modal/mobile-full-page-modal.tsx

@@ -93,7 +93,7 @@ const MobileFullPageModal = ({
                         {renderPageHeader && renderPageHeader()}
                         <div className='dc-mobile-full-page-modal__header-text'>
                             {renderPageHeaderElement ?? (
-                                <Text as='p' color='prominent' line_height='m' size='sm' weight='bold'>
+                                <Text as='p' color='prominent' LineHeight='md' size='sm' weight='bold'>
                                     {page_header_text}
                                 </Text>
                             )}

src/components/shared_ui/popover/popover.tsx

@@ -200,7 +200,7 @@ const Popover = ({
                                             {message}
                                         </Text>
                                     )) || (
-                                        <Text line_height='m' size='xxs' className='dc-popover__bubble__text'>
+                                        <Text LineHeight='md' size='xxs' className='dc-popover__bubble__text'>
                                             {message}
                                         </Text>
                                     )}

src/components/shared_ui/select-native/select-native.tsx

@@ -216,7 +216,7 @@ const SelectNative = ({
                 as='p'
                 color='less-prominent'
                 size='xxs'
-                line_height='l'
+                LineHeight='lg'
                 className={classNames('dc-select-native__hint', classNameHint)}
             >
                 {hint}

src/components/shared_ui/text/text.tsx

@@ -6,7 +6,7 @@ import { isEmptyObject } from '@/components/shared';
 type TTextProps = Omit<HTMLProps<HTMLElement>, 'size'> & {
     align?: string;
     weight?: string;
-    line_height?: string;
+    lineHeight?: string;
     styles?: CSSProperties;
     size?: string;
 };
@@ -17,7 +17,7 @@ const Text = ({
     color = 'general',
     align = 'left',
     weight = 'normal',
-    line_height = 'm',
+    lineHeight = 'm',
     as,
     className,
     styles,
@@ -26,7 +26,7 @@ const Text = ({
     const class_styles = {
         '--text-size': `var(--text-size-${size})`,
         '--text-color': `var(--text-${color})`,
-        '--text-lh': `var(--text-lh-${line_height})`,
+        '--text-lh': `var(--text-lh-${lineHeight})`,
         '--text-weight': `var(--text-weight-${weight})`,
         '--text-align': `var(--text-align-${align})`,
     };
@@ -39,7 +39,7 @@ const Text = ({
             setStyle(class_styles);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [size, color, line_height, weight, align]);
+    }, [size, color, lineHeight, weight, align]);
     const class_names = classNames('dc-text', className);
     return React.createElement(as || 'span', { className: class_names, style, ...props }, children);
 };