Skip to content

Commit c7cf94d

Browse files
Merge pull request #19 from deriv-com/sandeep/bot-1952/fix-icons-font
Sandeep/bot 1952/fix icons font
2 parents 3ab9b40 + b23337d commit c7cf94d

File tree

37 files changed

+89
-89
lines changed

37 files changed

+89
-89
lines changed

public/assets/icons/IcClose.svg

+5
Loading

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const FlyoutBlockGroup = ({ onInfoClick, block_node, is_active, should_hide_disp
4343
<div className='flyout__item-header'>
4444
<Text
4545
size={is_variables_get ? 'sm' : 'xs'}
46-
line_height={is_variables_get ? undefined : 'xl'}
46+
lineHeight={is_variables_get ? undefined : 'xl'}
4747
weight={is_variables_get ? undefined : 'bold'}
4848
>
4949
{display_name}

src/components/flyout/flyout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const FlyoutContent = (props: TFlyoutContent) => {
8282
)}
8383
{is_empty ? (
8484
<div className='flyout__search-empty'>
85-
<Text as='h2' weight='bold' line_height='xxs'>
85+
<Text as='h2' weight='bold' lineHeight='xs'>
8686
{localize('No results found')}
8787
</Text>
8888
</div>

src/components/journal/journal.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -66,28 +66,28 @@ const Journal = observer(() => {
6666
weight='bold'
6767
align='center'
6868
color='less-prominent'
69-
line_height='xxs'
69+
lineHeight='xs'
7070
className='journal-empty__header'
7171
>
7272
{localize('There are no messages to display')}
7373
</Text>
7474
<div className='journal-empty__message'>
75-
<Text size='xxs' color='less-prominent'>
75+
<Text size='xs' color='less-prominent'>
7676
{localize('Here are the possible reasons:')}
7777
</Text>
7878
<ul className='journal-empty__list'>
7979
<li>
80-
<Text size='xxs' color='less-prominent'>
80+
<Text size='xs' color='less-prominent'>
8181
{localize('The bot is not running')}
8282
</Text>
8383
</li>
8484
<li>
85-
<Text size='xxs' color='less-prominent'>
85+
<Text size='xs' color='less-prominent'>
8686
{localize('The stats are cleared')}
8787
</Text>
8888
</li>
8989
<li>
90-
<Text size='xxs' color='less-prominent'>
90+
<Text size='xs' color='less-prominent'>
9191
{localize('All messages are filtered out')}
9292
</Text>
9393
</li>

src/components/shared_ui/checkbox/checkbox.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ type TCheckBoxProps = Omit<React.HTMLProps<HTMLInputElement>, 'value' | 'label'>
1818
value?: boolean;
1919
withTabIndex?: number;
2020
has_error?: boolean;
21-
label_line_height?: string;
21+
label_lineHeight?: string;
2222
};
2323

2424
const Checkbox = React.forwardRef<HTMLInputElement, TCheckBoxProps>(
@@ -30,7 +30,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, TCheckBoxProps>(
3030
id,
3131
label,
3232
label_font_size = 'xs',
33-
label_line_height = 'unset',
33+
label_lineHeight = 'unset',
3434
defaultChecked,
3535
onChange, // This needs to be here so it's not included in `otherProps`
3636
value = false,
@@ -93,7 +93,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, TCheckBoxProps>(
9393
</span>
9494
<Text
9595
size={label_font_size}
96-
line_height={label_line_height}
96+
lineHeight={label_lineHeight}
9797
className={classNames('dc-checkbox__label', classNameLabel, {
9898
'dc-checkbox__label--error': has_error,
9999
})}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const CardFooter = ({
101101
as='div'
102102
size='xxxs'
103103
color='less-prominent'
104-
line_height='s'
104+
LineHeight='sm'
105105
className='lookbacks--note'
106106
>
107107
<Localize

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ const LookBacksCardBody = ({
9090
</MobileWrapper>
9191
</div>
9292
<ContractCardItem className='dc-contract-card-item__payout-limit'>
93-
<Text align='center' line_height='l' size='xxs'>
93+
<Text align='center' LineHeight='lg' size='xxs'>
9494
{getPayoutLimit(contract_type, multiplier)}
9595
</Text>
9696
</ContractCardItem>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ const ResultOverlay = ({
8989
<Text
9090
weight='bold'
9191
size='s'
92-
line_height='xxl'
92+
lineHeight='2xl'
9393
color={is_contract_won ? 'profit-success' : 'loss-danger'}
9494
>
9595
<Money amount={payout_info} currency={currency} has_sign show_currency />

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ type TCurrencyBadgeProps = {
77
};
88

99
const CurrencyBadge = ({ currency }: TCurrencyBadgeProps) => (
10-
<Text className='dc-currency-badge' color='colored-background' line_height='unset' size='xxxs' weight='bold'>
10+
<Text className='dc-currency-badge' color='colored-background' lineHeight='unset' size='xxxs' weight='bold'>
1111
{getCurrencyDisplayCode(currency)}
1212
</Text>
1313
);

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ const MobileDialog = (props: React.PropsWithChildren<TMobileDialog>) => {
128128
size='xs'
129129
color='prominent'
130130
weight='bold'
131-
line_height='unset'
131+
lineHeight='unset'
132132
className='dc-mobile-dialog__title'
133133
>
134134
{renderTitle ? renderTitle() : title}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ const MobileFullPageModal = ({
9393
{renderPageHeader && renderPageHeader()}
9494
<div className='dc-mobile-full-page-modal__header-text'>
9595
{renderPageHeaderElement ?? (
96-
<Text as='p' color='prominent' line_height='m' size='sm' weight='bold'>
96+
<Text as='p' color='prominent' LineHeight='md' size='sm' weight='bold'>
9797
{page_header_text}
9898
</Text>
9999
)}

src/components/shared_ui/popover/popover.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ const Popover = ({
200200
{message}
201201
</Text>
202202
)) || (
203-
<Text line_height='m' size='xxs' className='dc-popover__bubble__text'>
203+
<Text LineHeight='md' size='xxs' className='dc-popover__bubble__text'>
204204
{message}
205205
</Text>
206206
)}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ const SelectNative = ({
216216
as='p'
217217
color='less-prominent'
218218
size='xxs'
219-
line_height='l'
219+
LineHeight='lg'
220220
className={classNames('dc-select-native__hint', classNameHint)}
221221
>
222222
{hint}

src/components/shared_ui/text/text.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { isEmptyObject } from '@/components/shared';
66
type TTextProps = Omit<HTMLProps<HTMLElement>, 'size'> & {
77
align?: string;
88
weight?: string;
9-
line_height?: string;
9+
lineHeight?: string;
1010
styles?: CSSProperties;
1111
size?: string;
1212
};
@@ -17,7 +17,7 @@ const Text = ({
1717
color = 'general',
1818
align = 'left',
1919
weight = 'normal',
20-
line_height = 'm',
20+
lineHeight = 'm',
2121
as,
2222
className,
2323
styles,
@@ -26,7 +26,7 @@ const Text = ({
2626
const class_styles = {
2727
'--text-size': `var(--text-size-${size})`,
2828
'--text-color': `var(--text-${color})`,
29-
'--text-lh': `var(--text-lh-${line_height})`,
29+
'--text-lh': `var(--text-lh-${lineHeight})`,
3030
'--text-weight': `var(--text-weight-${weight})`,
3131
'--text-align': `var(--text-align-${align})`,
3232
};
@@ -39,7 +39,7 @@ const Text = ({
3939
setStyle(class_styles);
4040
}
4141
// eslint-disable-next-line react-hooks/exhaustive-deps
42-
}, [size, color, line_height, weight, align]);
42+
}, [size, color, lineHeight, weight, align]);
4343
const class_names = classNames('dc-text', className);
4444
return React.createElement(as || 'span', { className: class_names, style, ...props }, children);
4545
};

src/components/summary/summary-card.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ const SummaryCard = observer(({ contract_info, is_contract_loading }: TSummaryCa
9797
</ContractCard>
9898
)}
9999
{!is_contract_loading && !contract_info && (
100-
<Text as='p' line_height='s' size='xs'>
100+
<Text as='p' LineHeight='sm' size='xs'>
101101
{localize('When you’re ready to trade, hit ')}
102102
<strong>{localize('Run')}</strong>
103103
{localize('. You’ll be able to track your bot’s performance here.')}

src/components/transactions/transactions.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -200,13 +200,13 @@ const Transactions = observer(({ is_drawer_open }: TTransactions) => {
200200
weight='bold'
201201
align='center'
202202
color='less-prominent'
203-
line_height='xxs'
203+
lineHeight='xs'
204204
className='transactions-empty__header'
205205
>
206206
{localize('There are no transactions to display')}
207207
</Text>
208208
<div className='transactions-empty__message'>
209-
<Text size='xxs' color='less-prominent'>
209+
<Text size='xs' color='less-prominent'>
210210
{localize('Here are the possible reasons:')}
211211
</Text>
212212
<ul className='transactions-empty__list'>

src/pages/dashboard/cards.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
import classNames from 'classnames';
44
import { observer } from 'mobx-react-lite';
55

6+
import { localize } from '@deriv-com/translations';
67
import { Dialog, Text } from '@deriv-com/ui';
78

89
import { NOTIFICATION_TYPE } from '@/components/bot-notification/bot-notification-utils';
@@ -11,7 +12,7 @@ import MobileFullPageModal from '@/components/shared_ui/mobile-full-page-modal';
1112
import MobileWrapper from '@/components/shared_ui/mobile-wrapper';
1213
import { DBOT_TABS } from '@/constants/bot-contents';
1314
import { useStore } from '@/hooks/useStore';
14-
import { Icon, localize } from '@/utils/tmp/dummy';
15+
import { Icon } from '@/utils/tmp/dummy';
1516

1617
import { rudderStackSendQsOpenEventFromDashboard } from '../bot-builder/quick-strategy/analytics/rudderstack-quick-strategy';
1718

@@ -129,7 +130,7 @@ const Cards = observer(({ is_mobile, has_dashboard_strategies }: TCardProps) =>
129130
method();
130131
}}
131132
/>
132-
<Text color='prominent' size={is_mobile ? 'xxs' : 'xs'}>
133+
<Text color='prominent' size='sm'>
133134
{content}
134135
</Text>
135136
</div>

src/pages/dashboard/dashboard.tsx

+4-11
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import React from 'react';
22
import classNames from 'classnames';
33
import { observer } from 'mobx-react-lite';
44

5+
import { localize } from '@deriv-com/translations';
56
import { Text } from '@deriv-com/ui';
67

78
import { useStore } from '@/hooks/useStore';
8-
import { localize } from '@/utils/tmp/dummy';
99

1010
import OnboardTourHandler from '../tutorials/dbot-tours/onboarding-tour';
1111

@@ -45,22 +45,15 @@ const DashboardComponent = observer(({ handleTabChange }: TMobileIconGuide) => {
4545
})}
4646
>
4747
{!has_dashboard_strategies && (
48-
<Text
49-
className='title'
50-
as='h2'
51-
color='prominent'
52-
size={is_mobile ? 's' : 'sm'}
53-
line_height='xxl'
54-
weight='bold'
55-
>
48+
<Text className='title' as='h2' color='prominent' size='lg' weight='bold'>
5649
{localize('Load or build your bot')}
5750
</Text>
5851
)}
5952
<Text
6053
as='p'
6154
color='prominent'
62-
line_height='s'
63-
size={is_mobile ? 'xxs' : 's'}
55+
LineHeight='sm'
56+
size='md'
6457
className={classNames('subtitle', { 'subtitle__has-list': has_dashboard_strategies })}
6558
>
6659
{localize(

src/pages/dashboard/info-panel.tsx

+4-7
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@ import { Icon } from '@/utils/tmp/dummy';
1212
import { SIDEBAR_INTRO } from './constants';
1313

1414
const InfoPanel = observer(() => {
15-
const {
16-
ui: { is_mobile },
17-
} = useStore();
1815
const { dashboard } = useStore();
1916
const {
2017
active_tour,
@@ -42,14 +39,14 @@ const InfoPanel = observer(() => {
4239
const renderInfo = () => (
4340
<div className='db-info-panel'>
4441
<div data-testid='close-icon' className='db-info-panel__close-action' onClick={handleClose}>
45-
<Icon width='1rem' height='1rem' icon='IcCloseIconDbot' />
42+
<Icon width='1rem' height='1rem' icon='IcClose' />
4643
</div>
4744

4845
{SIDEBAR_INTRO.map(sidebar_item => {
4946
const { label, content, link } = sidebar_item;
5047
return (
5148
<div key={`${label}-${content}`}>
52-
<Text color='prominent' line_height='xxl' size={is_mobile ? 's' : 'm'} weight='bold' as='h1'>
49+
<Text color='prominent' lineHeight='6xl' size='lg' weight='bold' as='h1'>
5350
{label}
5451
</Text>
5552
{content.map(text => (
@@ -59,10 +56,10 @@ const InfoPanel = observer(() => {
5956
'db-info-panel__content': link,
6057
})}
6158
color='prominent'
62-
line_height='xl'
59+
lineHeight='3xl'
6360
as='p'
6461
onClick={() => switchTab(link, label, text.faq_id)}
65-
size={is_mobile ? 'xxs' : 's'}
62+
size='sm'
6663
>
6764
{text.data}
6865
</Text>

src/pages/dashboard/load-bot-preview/delete-dialog.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -82,13 +82,13 @@ const DeleteDialog = observer(() => {
8282
has_close_icon
8383
>
8484
<div>
85-
<Text color='prominent' line_height='s' size='xs'>
85+
<Text color='prominent' LineHeight='sm' size='xs'>
8686
{localize('Your bot will be permanently deleted when you hit ')}
8787
<strong>{localize('Yes, delete.')}</strong>
8888
</Text>
8989
</div>
9090
<div>
91-
<Text color='prominent' line_height='xl' size='xs'>
91+
<Text color='prominent' lineHeight='xl' size='xs'>
9292
{localize('Are you sure you want to delete it?')}
9393
</Text>
9494
</div>

src/pages/dashboard/load-bot-preview/icon-radio.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ const IconRadio = ({ icon, text, google_drive_connected, onDriveConnect }: TIcon
3131
<Text
3232
as='p'
3333
align='center'
34-
size='xxs'
34+
size='xs'
3535
color={is_drive_radio && !google_drive_connected ? 'disabled' : 'prominent'}
36-
line_height='s'
36+
LineHeight='sm'
3737
className='save-type__radio-text'
3838
>
3939
{localize(text)}

src/pages/dashboard/load-bot-preview/recent-workspace.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => {
136136
};
137137

138138
const is_active_mobile = selected_strategy_id === workspace.id && is_dropdown_visible;
139-
const text_size = is_desktop ? 'xs' : 'xxs';
139+
const text_size = 'xs';
140140

141141
return (
142142
<div
@@ -156,13 +156,13 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => {
156156
>
157157
<div className='bot-list__item__label'>
158158
<div className='text-wrapper' title={workspace.name}>
159-
<Text align='left' as='p' size={text_size} line_height='l'>
159+
<Text align='left' as='p' size={text_size} LineHeight='lg'>
160160
{workspace.name}
161161
</Text>
162162
</div>
163163
</div>
164164
<div className='bot-list__item__time-stamp'>
165-
<Text align='left' as='p' size={text_size} line_height='l'>
165+
<Text align='left' as='p' size={text_size} LineHeight='lg'>
166166
{timeSince(workspace.timestamp)}
167167
</Text>
168168
</div>
@@ -174,7 +174,7 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => {
174174
})}
175175
/>
176176
<div className='bot-list__item__load-type__icon--saved'>
177-
<Text align='left' as='p' size={text_size} line_height='l'>
177+
<Text align='left' as='p' size={text_size} LineHeight='lg'>
178178
{getSaveType(workspace.save_type)}
179179
</Text>
180180
</div>

0 commit comments

Comments
 (0)