Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sandeep/bot 1952/fix icons font #19

Merged
merged 2 commits into from
Jul 8, 2024
Merged

Sandeep/bot 1952/fix icons font #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
60bf50b
fix: font size and line height for text component
sandeep-deriv Jul 8, 2024
b23337d
fix: :fire: chart width fix
sandeep-deriv Jul 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions public/assets/icons/IcClose.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/flyout/flyout-block-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/components/flyout/flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions src/components/journal/journal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/components/shared_ui/checkbox/checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>(
Expand All @@ -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,
Expand Down Expand Up @@ -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,
})}
Expand Down
2 changes: 1 addition & 1 deletion src/components/shared_ui/contract-card/contract-card-items/contract-card-footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ const CardFooter = ({
as='div'
size='xxxs'
color='less-prominent'
line_height='s'
LineHeight='sm'
className='lookbacks--note'
>
<Localize
Expand Down
2 changes: 1 addition & 1 deletion src/components/shared_ui/contract-card/contract-card-items/lookbacks-card-body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
2 changes: 1 addition & 1 deletion src/components/shared_ui/currency-badge/currency-badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/shared_ui/mobile-dialog/mobile-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/components/shared_ui/mobile-full-page-modal/mobile-full-page-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/shared_ui/popover/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/shared_ui/select-native/select-native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
8 changes: 4 additions & 4 deletions src/components/shared_ui/text/text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand All @@ -17,7 +17,7 @@ const Text = ({
color = 'general',
align = 'left',
weight = 'normal',
line_height = 'm',
lineHeight = 'm',
as,
className,
styles,
Expand All @@ -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})`,
};
Expand All @@ -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);
};
Expand Down
2 changes: 1 addition & 1 deletion src/components/summary/summary-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.')}
Expand Down
4 changes: 2 additions & 2 deletions src/components/transactions/transactions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand Down
5 changes: 3 additions & 2 deletions src/pages/dashboard/cards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';

Expand Down Expand Up @@ -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>
Expand Down
15 changes: 4 additions & 11 deletions src/pages/dashboard/dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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(
Expand Down
11 changes: 4 additions & 7 deletions src/pages/dashboard/info-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 => (
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/dashboard/load-bot-preview/delete-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/dashboard/load-bot-preview/icon-radio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
8 changes: 4 additions & 4 deletions src/pages/dashboard/load-bot-preview/recent-workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Loading
Loading