Merge pull request #19 from deriv-com/sandeep/bot-1952/fix-icons-font

Sandeep/bot 1952/fix icons font
deriv-com · Jul 8, 2024 · c7cf94d · c7cf94d
2 parents 3ab9b40 + b23337d
commit c7cf94d
Show file tree

Hide file tree

Showing 37 changed files with 89 additions and 89 deletions.
diff --git a/public/assets/icons/IcClose.svg b/public/assets/icons/IcClose.svg
diff --git a/src/components/flyout/flyout-block-group.tsx b/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}

diff --git a/src/components/flyout/flyout.tsx b/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>

diff --git a/src/components/journal/journal.tsx b/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>

diff --git a/src/components/shared_ui/checkbox/checkbox.tsx b/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,
                     })}

diff --git a/src/components/shared_ui/contract-card/contract-card-items/contract-card-footer.tsx b/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

diff --git a/src/components/shared_ui/contract-card/contract-card-items/lookbacks-card-body.tsx b/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>

diff --git a/src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx b/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 />

diff --git a/src/components/shared_ui/currency-badge/currency-badge.tsx b/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>
 );

diff --git a/src/components/shared_ui/mobile-dialog/mobile-dialog.tsx b/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}

diff --git a/src/components/shared_ui/mobile-full-page-modal/mobile-full-page-modal.tsx b/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>
                             )}

diff --git a/src/components/shared_ui/popover/popover.tsx b/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>
                                     )}

diff --git a/src/components/shared_ui/select-native/select-native.tsx b/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}

diff --git a/src/components/shared_ui/text/text.tsx b/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);
 };

diff --git a/src/components/summary/summary-card.tsx b/src/components/summary/summary-card.tsx
@@ -97,7 +97,7 @@ const SummaryCard = observer(({ contract_info, is_contract_loading }: TSummaryCa
                 </ContractCard>
             )}
             {!is_contract_loading && !contract_info && (
-                <Text as='p' line_height='s' size='xs'>
+                <Text as='p' LineHeight='sm' size='xs'>
                     {localize('When you’re ready to trade, hit ')}
                     <strong>{localize('Run')}</strong>
                     {localize('. You’ll be able to track your bot’s performance here.')}

diff --git a/src/components/transactions/transactions.tsx b/src/components/transactions/transactions.tsx
@@ -200,13 +200,13 @@ const Transactions = observer(({ is_drawer_open }: TTransactions) => {
                                                 weight='bold'
                                                 align='center'
                                                 color='less-prominent'
-                                                line_height='xxs'
+                                                lineHeight='xs'
                                                 className='transactions-empty__header'
                                             >
                                                 {localize('There are no transactions to display')}
                                             </Text>
                                             <div className='transactions-empty__message'>
-                                                <Text size='xxs' color='less-prominent'>
+                                                <Text size='xs' color='less-prominent'>
                                                     {localize('Here are the possible reasons:')}
                                                 </Text>
                                                 <ul className='transactions-empty__list'>

diff --git a/src/pages/dashboard/cards.tsx b/src/pages/dashboard/cards.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 
+import { localize } from '@deriv-com/translations';
 import { Dialog, Text } from '@deriv-com/ui';
 
 import { NOTIFICATION_TYPE } from '@/components/bot-notification/bot-notification-utils';
@@ -11,7 +12,7 @@ import MobileFullPageModal from '@/components/shared_ui/mobile-full-page-modal';
 import MobileWrapper from '@/components/shared_ui/mobile-wrapper';
 import { DBOT_TABS } from '@/constants/bot-contents';
 import { useStore } from '@/hooks/useStore';
-import { Icon, localize } from '@/utils/tmp/dummy';
+import { Icon } from '@/utils/tmp/dummy';
 
 import { rudderStackSendQsOpenEventFromDashboard } from '../bot-builder/quick-strategy/analytics/rudderstack-quick-strategy';
 
@@ -129,7 +130,7 @@ const Cards = observer(({ is_mobile, has_dashboard_strategies }: TCardProps) =>
                                         method();
                                     }}
                                 />
-                                <Text color='prominent' size={is_mobile ? 'xxs' : 'xs'}>
+                                <Text color='prominent' size='sm'>
                                     {content}
                                 </Text>
                             </div>

diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 
+import { localize } from '@deriv-com/translations';
 import { Text } from '@deriv-com/ui';
 
 import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
 
 import OnboardTourHandler from '../tutorials/dbot-tours/onboarding-tour';
 
@@ -45,22 +45,15 @@ const DashboardComponent = observer(({ handleTabChange }: TMobileIconGuide) => {
                             })}
                         >
                             {!has_dashboard_strategies && (
-                                <Text
-                                    className='title'
-                                    as='h2'
-                                    color='prominent'
-                                    size={is_mobile ? 's' : 'sm'}
-                                    line_height='xxl'
-                                    weight='bold'
-                                >
+                                <Text className='title' as='h2' color='prominent' size='lg' weight='bold'>
                                     {localize('Load or build your bot')}
                                 </Text>
                             )}
                             <Text
                                 as='p'
                                 color='prominent'
-                                line_height='s'
-                                size={is_mobile ? 'xxs' : 's'}
+                                LineHeight='sm'
+                                size='md'
                                 className={classNames('subtitle', { 'subtitle__has-list': has_dashboard_strategies })}
                             >
                                 {localize(

diff --git a/src/pages/dashboard/info-panel.tsx b/src/pages/dashboard/info-panel.tsx
@@ -12,9 +12,6 @@ import { Icon } from '@/utils/tmp/dummy';
 import { SIDEBAR_INTRO } from './constants';
 
 const InfoPanel = observer(() => {
-    const {
-        ui: { is_mobile },
-    } = useStore();
     const { dashboard } = useStore();
     const {
         active_tour,
@@ -42,14 +39,14 @@ const InfoPanel = observer(() => {
     const renderInfo = () => (
         <div className='db-info-panel'>
             <div data-testid='close-icon' className='db-info-panel__close-action' onClick={handleClose}>
-                <Icon width='1rem' height='1rem' icon='IcCloseIconDbot' />
+                <Icon width='1rem' height='1rem' icon='IcClose' />
             </div>
 
             {SIDEBAR_INTRO.map(sidebar_item => {
                 const { label, content, link } = sidebar_item;
                 return (
                     <div key={`${label}-${content}`}>
-                        <Text color='prominent' line_height='xxl' size={is_mobile ? 's' : 'm'} weight='bold' as='h1'>
+                        <Text color='prominent' lineHeight='6xl' size='lg' weight='bold' as='h1'>
                             {label}
                         </Text>
                         {content.map(text => (
@@ -59,10 +56,10 @@ const InfoPanel = observer(() => {
                                     'db-info-panel__content': link,
                                 })}
                                 color='prominent'
-                                line_height='xl'
+                                lineHeight='3xl'
                                 as='p'
                                 onClick={() => switchTab(link, label, text.faq_id)}
-                                size={is_mobile ? 'xxs' : 's'}
+                                size='sm'
                             >
                                 {text.data}
                             </Text>

diff --git a/src/pages/dashboard/load-bot-preview/delete-dialog.tsx b/src/pages/dashboard/load-bot-preview/delete-dialog.tsx
@@ -82,13 +82,13 @@ const DeleteDialog = observer(() => {
                 has_close_icon
             >
                 <div>
-                    <Text color='prominent' line_height='s' size='xs'>
+                    <Text color='prominent' LineHeight='sm' size='xs'>
                         {localize('Your bot will be permanently deleted when you hit ')}
                         <strong>{localize('Yes, delete.')}</strong>
                     </Text>
                 </div>
                 <div>
-                    <Text color='prominent' line_height='xl' size='xs'>
+                    <Text color='prominent' lineHeight='xl' size='xs'>
                         {localize('Are you sure you want to delete it?')}
                     </Text>
                 </div>

diff --git a/src/pages/dashboard/load-bot-preview/icon-radio.tsx b/src/pages/dashboard/load-bot-preview/icon-radio.tsx
@@ -31,9 +31,9 @@ const IconRadio = ({ icon, text, google_drive_connected, onDriveConnect }: TIcon
                 <Text
                     as='p'
                     align='center'
-                    size='xxs'
+                    size='xs'
                     color={is_drive_radio && !google_drive_connected ? 'disabled' : 'prominent'}
-                    line_height='s'
+                    LineHeight='sm'
                     className='save-type__radio-text'
                 >
                     {localize(text)}

diff --git a/src/pages/dashboard/load-bot-preview/recent-workspace.tsx b/src/pages/dashboard/load-bot-preview/recent-workspace.tsx
@@ -136,7 +136,7 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => {
     };
 
     const is_active_mobile = selected_strategy_id === workspace.id && is_dropdown_visible;
-    const text_size = is_desktop ? 'xs' : 'xxs';
+    const text_size = 'xs';
 
     return (
         <div
@@ -156,13 +156,13 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => {
         >
             <div className='bot-list__item__label'>
                 <div className='text-wrapper' title={workspace.name}>
-                    <Text align='left' as='p' size={text_size} line_height='l'>
+                    <Text align='left' as='p' size={text_size} LineHeight='lg'>
                         {workspace.name}
                     </Text>
                 </div>
             </div>
             <div className='bot-list__item__time-stamp'>
-                <Text align='left' as='p' size={text_size} line_height='l'>
+                <Text align='left' as='p' size={text_size} LineHeight='lg'>
                     {timeSince(workspace.timestamp)}
                 </Text>
             </div>
@@ -174,7 +174,7 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => {
                     })}
                 />
                 <div className='bot-list__item__load-type__icon--saved'>
-                    <Text align='left' as='p' size={text_size} line_height='l'>
+                    <Text align='left' as='p' size={text_size} LineHeight='lg'>
                         {getSaveType(workspace.save_type)}
                     </Text>
                 </div>