From 60bf50b2d5cfda28b21795cabcac4ca57292fb8c Mon Sep 17 00:00:00 2001 From: Sandeep Date: Mon, 8 Jul 2024 11:31:22 +0800 Subject: [PATCH 1/7] fix: font size and line height for text component --- public/assets/icons/IcClose.svg | 5 +++++ src/components/flyout/flyout-block-group.tsx | 2 +- src/components/flyout/flyout.tsx | 2 +- src/components/journal/journal.tsx | 10 +++++----- src/components/shared_ui/checkbox/checkbox.tsx | 6 +++--- .../contract-card-items/contract-card-footer.tsx | 2 +- .../contract-card-items/lookbacks-card-body.tsx | 2 +- .../result-overlay/result-overlay.tsx | 2 +- .../shared_ui/currency-badge/currency-badge.tsx | 2 +- .../shared_ui/mobile-dialog/mobile-dialog.tsx | 2 +- .../mobile-full-page-modal.tsx | 2 +- src/components/shared_ui/popover/popover.tsx | 2 +- .../shared_ui/select-native/select-native.tsx | 2 +- src/components/shared_ui/text/text.tsx | 8 ++++---- src/components/summary/summary-card.tsx | 2 +- src/components/transactions/transactions.tsx | 4 ++-- src/pages/dashboard/cards.tsx | 5 +++-- src/pages/dashboard/dashboard.tsx | 15 ++++----------- src/pages/dashboard/info-panel.tsx | 11 ++++------- .../dashboard/load-bot-preview/delete-dialog.tsx | 4 ++-- .../dashboard/load-bot-preview/icon-radio.tsx | 4 ++-- .../load-bot-preview/recent-workspace.tsx | 8 ++++---- .../dashboard/load-bot-preview/save-modal.tsx | 4 ++-- src/pages/dashboard/stop-bot-modal-content.tsx | 14 +++++++------- src/pages/dashboard/user-guide.tsx | 2 +- .../no-search-result-found/no-search-result.tsx | 6 +++--- .../bot-builder-tour/bot-builder-tour-mobile.tsx | 2 +- .../tutorials/dbot-tours/common/accordion.tsx | 2 +- .../tutorials/dbot-tours/common/tour-button.tsx | 2 +- .../tutorials/dbot-tours/common/tour-steps.tsx | 6 +++--- .../onboarding-tour/onboarding-tour-mobile.tsx | 6 +++--- src/pages/tutorials/faq-content/index.tsx | 6 +++--- .../tutorials/guide-content/guide-content.tsx | 8 ++++---- .../quick-strategy-guides-details.tsx | 10 +++++----- .../quick-strategy-guides.tsx | 2 +- src/utils/tmp/dummy.tsx | 4 ++++ 36 files changed, 88 insertions(+), 88 deletions(-) create mode 100644 public/assets/icons/IcClose.svg diff --git a/public/assets/icons/IcClose.svg b/public/assets/icons/IcClose.svg new file mode 100644 index 00000000..f1c68242 --- /dev/null +++ b/public/assets/icons/IcClose.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/flyout/flyout-block-group.tsx b/src/components/flyout/flyout-block-group.tsx index 4396e703..84b5ba46 100644 --- 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
{display_name} diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx index d5afa4d5..df382099 100644 --- a/src/components/flyout/flyout.tsx +++ b/src/components/flyout/flyout.tsx @@ -82,7 +82,7 @@ const FlyoutContent = (props: TFlyoutContent) => { )} {is_empty ? (
- + {localize('No results found')}
diff --git a/src/components/journal/journal.tsx b/src/components/journal/journal.tsx index b432ef83..a9ecedbe 100644 --- 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')}
- + {localize('Here are the possible reasons:')}
  • - + {localize('The bot is not running')}
  • - + {localize('The stats are cleared')}
  • - + {localize('All messages are filtered out')}
  • diff --git a/src/components/shared_ui/checkbox/checkbox.tsx b/src/components/shared_ui/checkbox/checkbox.tsx index b5166922..e7e91a67 100644 --- a/src/components/shared_ui/checkbox/checkbox.tsx +++ b/src/components/shared_ui/checkbox/checkbox.tsx @@ -18,7 +18,7 @@ type TCheckBoxProps = Omit, 'value' | 'label'> value?: boolean; withTabIndex?: number; has_error?: boolean; - label_line_height?: string; + label_lineHeight?: string; }; const Checkbox = React.forwardRef( @@ -30,7 +30,7 @@ const Checkbox = React.forwardRef( 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(
- + {getPayoutLimit(contract_type, multiplier)} 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 index 929b20ae..680d8716 100644 --- 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 = ({ diff --git a/src/components/shared_ui/currency-badge/currency-badge.tsx b/src/components/shared_ui/currency-badge/currency-badge.tsx index 732a33a4..0b0961e6 100644 --- 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) => ( - + {getCurrencyDisplayCode(currency)} ); diff --git a/src/components/shared_ui/mobile-dialog/mobile-dialog.tsx b/src/components/shared_ui/mobile-dialog/mobile-dialog.tsx index 9828501a..2695a640 100644 --- 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) => { 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 index 920fe2b5..0c5181bb 100644 --- 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()}
{renderPageHeaderElement ?? ( - + {page_header_text} )} diff --git a/src/components/shared_ui/popover/popover.tsx b/src/components/shared_ui/popover/popover.tsx index b8fda5b9..c27f1a5b 100644 --- a/src/components/shared_ui/popover/popover.tsx +++ b/src/components/shared_ui/popover/popover.tsx @@ -200,7 +200,7 @@ const Popover = ({ {message} )) || ( - + {message} )} diff --git a/src/components/shared_ui/select-native/select-native.tsx b/src/components/shared_ui/select-native/select-native.tsx index 0df56abc..004a7410 100644 --- 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 index 69ba54a4..1bcb1cca 100644 --- 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, '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 index 18c473f4..6b987a7d 100644 --- 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 )} {!is_contract_loading && !contract_info && ( - + {localize('When you’re ready to trade, hit ')} {localize('Run')} {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 index 748ee353..c31774cd 100644 --- 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')}
- + {localize('Here are the possible reasons:')}
    diff --git a/src/pages/dashboard/cards.tsx b/src/pages/dashboard/cards.tsx index c7dcac0e..65f502bf 100644 --- 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(); }} /> - + {content}
diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx index 6581aeb8..1a070327 100644 --- 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 && ( - + {localize('Load or build your bot')} )} {localize( diff --git a/src/pages/dashboard/info-panel.tsx b/src/pages/dashboard/info-panel.tsx index 10756b82..d2cbefc2 100644 --- 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 = () => (
- +
{SIDEBAR_INTRO.map(sidebar_item => { const { label, content, link } = sidebar_item; return (
- + {label} {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} diff --git a/src/pages/dashboard/load-bot-preview/delete-dialog.tsx b/src/pages/dashboard/load-bot-preview/delete-dialog.tsx index 63facb06..25cf3ea0 100644 --- 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 >
- + {localize('Your bot will be permanently deleted when you hit ')} {localize('Yes, delete.')}
- + {localize('Are you sure you want to delete it?')}
diff --git a/src/pages/dashboard/load-bot-preview/icon-radio.tsx b/src/pages/dashboard/load-bot-preview/icon-radio.tsx index 02ce09aa..aebf716f 100644 --- 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 {localize(text)} diff --git a/src/pages/dashboard/load-bot-preview/recent-workspace.tsx b/src/pages/dashboard/load-bot-preview/recent-workspace.tsx index 3c942d03..7d2a74a2 100644 --- 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 (
{ >
- + {workspace.name}
- + {timeSince(workspace.timestamp)}
@@ -174,7 +174,7 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => { })} />
- + {getSaveType(workspace.save_type)}
diff --git a/src/pages/dashboard/load-bot-preview/save-modal.tsx b/src/pages/dashboard/load-bot-preview/save-modal.tsx index d1350927..1238fff8 100644 --- a/src/pages/dashboard/load-bot-preview/save-modal.tsx +++ b/src/pages/dashboard/load-bot-preview/save-modal.tsx @@ -58,7 +58,7 @@ const SaveModalForm = ({
- + {localize( 'Enter your bot name, choose to save on your computer or Google Drive, and hit ' )} @@ -126,7 +126,7 @@ const SaveModalForm = ({ onChange={() => setFieldValue('save_as_collection', !save_as_collection)} defaultChecked={save_as_collection} label={ - + } diff --git a/src/pages/dashboard/stop-bot-modal-content.tsx b/src/pages/dashboard/stop-bot-modal-content.tsx index ae68b19e..2f675714 100644 --- a/src/pages/dashboard/stop-bot-modal-content.tsx +++ b/src/pages/dashboard/stop-bot-modal-content.tsx @@ -46,28 +46,28 @@ const StopBotModalContent = ({ > {is_running && is_multiplier ? ( <> - + - + - + ) : ( <> - + - + - + - + diff --git a/src/pages/dashboard/user-guide.tsx b/src/pages/dashboard/user-guide.tsx index f28f07a8..41231d1d 100644 --- a/src/pages/dashboard/user-guide.tsx +++ b/src/pages/dashboard/user-guide.tsx @@ -24,7 +24,7 @@ const UserGuide: React.FC = ({ is_mobile, handleTabChange, setActive > {!is_mobile && ( - + {localize('User Guide')} )} diff --git a/src/pages/tutorials/common/no-search-result-found/no-search-result.tsx b/src/pages/tutorials/common/no-search-result-found/no-search-result.tsx index 555263b2..1107d38f 100644 --- a/src/pages/tutorials/common/no-search-result-found/no-search-result.tsx +++ b/src/pages/tutorials/common/no-search-result-found/no-search-result.tsx @@ -11,13 +11,13 @@ const NoSearchResult = observer(() => { return (
- + - + - +
diff --git a/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx b/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx index 2490309c..2db850de 100644 --- a/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx +++ b/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx @@ -63,7 +63,7 @@ const BotBuilderTourMobile = observer(() => {
- + {content_data?.content}
diff --git a/src/pages/tutorials/dbot-tours/common/accordion.tsx b/src/pages/tutorials/dbot-tours/common/accordion.tsx index a5e685e3..27738ed6 100644 --- a/src/pages/tutorials/dbot-tours/common/accordion.tsx +++ b/src/pages/tutorials/dbot-tours/common/accordion.tsx @@ -89,7 +89,7 @@ const Accordion = ({ })} data-testid='accordion-content' > - + {content}
diff --git a/src/pages/tutorials/dbot-tours/common/tour-button.tsx b/src/pages/tutorials/dbot-tours/common/tour-button.tsx index cb02e9d8..70ac1602 100644 --- a/src/pages/tutorials/dbot-tours/common/tour-button.tsx +++ b/src/pages/tutorials/dbot-tours/common/tour-button.tsx @@ -10,7 +10,7 @@ const TourButton = ({ label, type = 'default', ...props }: TTourButton) => { if (!label) return null; return ( diff --git a/src/pages/tutorials/dbot-tours/common/tour-steps.tsx b/src/pages/tutorials/dbot-tours/common/tour-steps.tsx index 4a9d5132..8daefda6 100644 --- a/src/pages/tutorials/dbot-tours/common/tour-steps.tsx +++ b/src/pages/tutorials/dbot-tours/common/tour-steps.tsx @@ -21,14 +21,14 @@ const TourSteps = observer(
{show_actions && (
- + {step_index}/6
)}
- + {label}
@@ -54,7 +54,7 @@ const TourSteps = observer( content_data ) : (
- + {content_data}
diff --git a/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx b/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx index 65de873e..f1a26830 100644 --- a/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx +++ b/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx @@ -66,7 +66,7 @@ const OnboardingTourMobile = observer(() => { {`${tour_step_key - 1}/7`} @@ -87,7 +87,7 @@ const OnboardingTourMobile = observer(() => { align='center' className='dbot-slider__title' as='span' - line_height='s' + LineHeight='sm' size='xs' > {localize(header)} @@ -123,7 +123,7 @@ const OnboardingTourMobile = observer(() => { color='prominent' className='dbot-slider__content' as='div' - line_height='s' + LineHeight='sm' size='xxs' > {data} diff --git a/src/pages/tutorials/faq-content/index.tsx b/src/pages/tutorials/faq-content/index.tsx index 1398ceac..c1f42b3b 100644 --- a/src/pages/tutorials/faq-content/index.tsx +++ b/src/pages/tutorials/faq-content/index.tsx @@ -26,7 +26,7 @@ const FAQ = ({ type, content = '', src, imageclass, is_mobile }: TDescription) = { header: ( { <> @@ -96,7 +96,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }: {content} @@ -115,7 +115,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }: align='left' weight='bold' color='prominent' - line_height='s' + LineHeight='sm' size={is_mobile ? 'xs' : 's'} > @@ -153,7 +153,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }: {content} diff --git a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx index c532b804..7426a574 100644 --- a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx +++ b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx @@ -51,7 +51,7 @@ const QuickStrategyGuidesDetail = observer( align='center' weight='bold' color='prominent' - line_height='s' + LineHeight='sm' size={text_size} > {type} @@ -64,7 +64,7 @@ const QuickStrategyGuidesDetail = observer( @@ -88,7 +88,7 @@ const QuickStrategyGuidesDetail = observer( { @@ -97,11 +97,11 @@ const QuickStrategyGuidesDetail = observer( > '} /> - +
- + diff --git a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx index 69d55537..398eab41 100644 --- a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx +++ b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx @@ -23,7 +23,7 @@ const QuickStrategyGuides = () => { className='tutorials-quick-strategy__title' weight='bold' color='prominent' - line_height='s' + LineHeight='sm' size={is_mobile ? 'xs' : 's'} as='div' > diff --git a/src/utils/tmp/dummy.tsx b/src/utils/tmp/dummy.tsx index 9d499259..f2c3797d 100644 --- a/src/utils/tmp/dummy.tsx +++ b/src/utils/tmp/dummy.tsx @@ -32,6 +32,10 @@ type TIconComponent = { icon: string; className?: string; onClick?: () => void; + size?: number; + height?: number | string; + width?: number | string; + id?: string; }; const IconComponent: React.FC = ({ icon, ...rest }) => { From b23337d9541af8c9fd3a66c876f55a5d26d470db Mon Sep 17 00:00:00 2001 From: Sandeep Date: Mon, 8 Jul 2024 12:15:23 +0800 Subject: [PATCH 2/7] fix: :fire: chart width fix --- src/pages/main/main.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/main/main.scss b/src/pages/main/main.scss index 20948df9..c99cdab1 100644 --- a/src/pages/main/main.scss +++ b/src/pages/main/main.scss @@ -244,7 +244,7 @@ } &--expanded { - width: calc(100vw - 39.8rem); + width: calc(100vw - 41.4rem); } &--modal { From 70ab6e9ca26eae975783736029d292a9ef8c667c Mon Sep 17 00:00:00 2001 From: maryia-matskevich-deriv Date: Wed, 10 Jul 2024 11:02:21 +0300 Subject: [PATCH 3/7] feat: add icons for flyout & toolbar, change styles for searchbox --- public/assets/icons/IcArrowLeft.svg | 1 + public/assets/icons/IcChartsTabDbot.svg | 1 + public/assets/icons/IcFolderOpen.svg | 1 + public/assets/icons/IcRedo.svg | 1 + public/assets/icons/IcReset.svg | 1 + public/assets/icons/IcSearch.svg | 1 + public/assets/icons/IcSort.svg | 1 + public/assets/icons/IcTradingViewChart.svg | 1 + public/assets/icons/IcUndo.svg | 1 + public/assets/icons/IcZoomIn.svg | 1 + public/assets/icons/IcZoomOut.svg | 1 + src/components/run-panel/run-panel.tsx | 5 +- src/pages/bot-builder/toolbox/toolbox.scss | 9 +++ src/styles/icon.scss | 64 ++++++++++++++++++++++ src/styles/index.scss | 1 + 15 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 public/assets/icons/IcArrowLeft.svg create mode 100644 public/assets/icons/IcChartsTabDbot.svg create mode 100644 public/assets/icons/IcFolderOpen.svg create mode 100644 public/assets/icons/IcRedo.svg create mode 100644 public/assets/icons/IcReset.svg create mode 100644 public/assets/icons/IcSearch.svg create mode 100644 public/assets/icons/IcSort.svg create mode 100644 public/assets/icons/IcTradingViewChart.svg create mode 100644 public/assets/icons/IcUndo.svg create mode 100644 public/assets/icons/IcZoomIn.svg create mode 100644 public/assets/icons/IcZoomOut.svg create mode 100644 src/styles/icon.scss diff --git a/public/assets/icons/IcArrowLeft.svg b/public/assets/icons/IcArrowLeft.svg new file mode 100644 index 00000000..0872f22c --- /dev/null +++ b/public/assets/icons/IcArrowLeft.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/IcChartsTabDbot.svg b/public/assets/icons/IcChartsTabDbot.svg new file mode 100644 index 00000000..e1584379 --- /dev/null +++ b/public/assets/icons/IcChartsTabDbot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/IcFolderOpen.svg b/public/assets/icons/IcFolderOpen.svg new file mode 100644 index 00000000..2972b937 --- /dev/null +++ b/public/assets/icons/IcFolderOpen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/IcRedo.svg b/public/assets/icons/IcRedo.svg new file mode 100644 index 00000000..638e0b85 --- /dev/null +++ b/public/assets/icons/IcRedo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/IcReset.svg b/public/assets/icons/IcReset.svg new file mode 100644 index 00000000..26381ed5 --- /dev/null +++ b/public/assets/icons/IcReset.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/IcSearch.svg b/public/assets/icons/IcSearch.svg new file mode 100644 index 00000000..7f1a0acb --- /dev/null +++ b/public/assets/icons/IcSearch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/IcSort.svg b/public/assets/icons/IcSort.svg new file mode 100644 index 00000000..8375aefb --- /dev/null +++ b/public/assets/icons/IcSort.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/IcTradingViewChart.svg b/public/assets/icons/IcTradingViewChart.svg new file mode 100644 index 00000000..22267485 --- /dev/null +++ b/public/assets/icons/IcTradingViewChart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/IcUndo.svg b/public/assets/icons/IcUndo.svg new file mode 100644 index 00000000..ce4c35b0 --- /dev/null +++ b/public/assets/icons/IcUndo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/IcZoomIn.svg b/public/assets/icons/IcZoomIn.svg new file mode 100644 index 00000000..22d25111 --- /dev/null +++ b/public/assets/icons/IcZoomIn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/IcZoomOut.svg b/public/assets/icons/IcZoomOut.svg new file mode 100644 index 00000000..2272e74d --- /dev/null +++ b/public/assets/icons/IcZoomOut.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/run-panel/run-panel.tsx b/src/components/run-panel/run-panel.tsx index e452b17c..bc4d0293 100644 --- a/src/components/run-panel/run-panel.tsx +++ b/src/components/run-panel/run-panel.tsx @@ -153,11 +153,12 @@ 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' - /> + > + {localize('Reset')} +
); diff --git a/src/pages/bot-builder/toolbox/toolbox.scss b/src/pages/bot-builder/toolbox/toolbox.scss index 5e916816..0e799c61 100644 --- a/src/pages/bot-builder/toolbox/toolbox.scss +++ b/src/pages/bot-builder/toolbox/toolbox.scss @@ -7,6 +7,7 @@ padding: 0.8rem; background: var(--general-main-1); z-index: 1; + $toolbox: &; $category-text-spacing: 10px; @@ -33,8 +34,15 @@ padding: 1.3rem 0.8rem; height: 6rem; + & .deriv-input__container { + width: 100%; + } + &-field { margin-bottom: 0 !important; + border-radius: 8px; + height: 3.2rem; + padding: 0.6rem 0.8rem; input::-ms-clear { display: none; @@ -180,6 +188,7 @@ &:hover { background-color: var(--general-hover); } + &--active { background-color: var(--general-hover); } diff --git a/src/styles/icon.scss b/src/styles/icon.scss new file mode 100644 index 00000000..41352b22 --- /dev/null +++ b/src/styles/icon.scss @@ -0,0 +1,64 @@ +/* stylelint-disable color-no-hex */ + +/* COLOR PALETTE */ + +/* colors */ +$color-black-1: #333; +$color-grey-1: #999; +$color-black-3: #151717; + +:root { + // Icons and Texts + --text-general: #{$color-black-1}; + --text-less-prominent: #{$color-grey-1}; + --general-section-1: #{$color-black-3}; + --icon-grey-background: #{$color-black-1}; + --text-prominent: #{$color-black-1}; + --fill-color1: var(--text-general); + --fill-color2: var(--text-less-prominent); + --fill-color3: var(--general-section-1); + --fill-color4: var(--icon-grey-background); + --fill-color5: var(--text-prominent); + + &--disabled { + --fill-color1: var(--text-disabled); + --fill-color2: var(--text-disabled); + } + + &--active { + --fill-color1: #{$color-white}; + --fill-color2: #{$color-white}; + } + + &--green { + --fill-color1: var(--text-profit-success); + --fill-color2: var(--text-profit-success); + --fill-color3: #{$color-white}; + } + + &--red { + --fill-color1: var(--text-loss-danger); + --fill-color2: var(--text-loss-danger); + --fill-color3: #{$color-white}; + } + + &--secondary { + --fill-color1: var(--text-less-prominent); + --fill-color2: var(--text-less-prominent); + --fill-color3: #{$color-white}; + } + + &--brand { + --fill-color1: var(--brand-red-coral); + --fill-color2: var(--brand-secondary); + --fill-color3: #{$color-white}; + } + + &--black { + --fill-color1: var(--icon-black-plus); + } + + &--orange { + --fill-color1: var(--status-warning); + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 38e36f79..aad16bf7 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,4 +1,5 @@ @import 'https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese'; +@import './icon'; body { font-family: 'IBM Plex Sans', sans-serif; From 93b29b3d5f17e403bbc0ab4f260da569c609cec9 Mon Sep 17 00:00:00 2001 From: maryia-matskevich-deriv Date: Wed, 10 Jul 2024 16:21:08 +0300 Subject: [PATCH 4/7] feat: make reset button work, tabs of run panel --- src/components/run-panel/run-panel.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/run-panel/run-panel.tsx b/src/components/run-panel/run-panel.tsx index bc4d0293..0aea7254 100644 --- a/src/components/run-panel/run-panel.tsx +++ b/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'; @@ -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' > {localize('Reset')} From 4aa100596347604ed287367d49a8cceda81c15c9 Mon Sep 17 00:00:00 2001 From: maryia-matskevich-deriv Date: Wed, 10 Jul 2024 16:21:46 +0300 Subject: [PATCH 5/7] feat: make search box of boy builder work --- src/pages/bot-builder/toolbox/search-box/search-box.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/bot-builder/toolbox/search-box/search-box.tsx b/src/pages/bot-builder/toolbox/search-box/search-box.tsx index 6b5a4c8e..8c74dad7 100644 --- a/src/pages/bot-builder/toolbox/search-box/search-box.tsx +++ b/src/pages/bot-builder/toolbox/search-box/search-box.tsx @@ -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'; From 7de1cb82ab4a795ba8740f56b038bc9a620afeee Mon Sep 17 00:00:00 2001 From: maryia-matskevich-deriv Date: Wed, 10 Jul 2024 17:24:06 +0300 Subject: [PATCH 6/7] feat: make work summary, transactions of run panel, btn download, view details, content of both tabs --- public/assets/icons/IcBox.svg | 1 + public/assets/icons/IcCross.svg | 1 + public/assets/icons/IcDbotDownload.svg | 1 + public/assets/icons/IcDbotViewDetail.svg | 1 + src/components/download/download.scss | 5 +++++ src/components/download/download.tsx | 12 ++++++++---- src/components/transactions/transactions.tsx | 12 ++++++++---- 7 files changed, 25 insertions(+), 8 deletions(-) create mode 100644 public/assets/icons/IcBox.svg create mode 100644 public/assets/icons/IcCross.svg create mode 100644 public/assets/icons/IcDbotDownload.svg create mode 100644 public/assets/icons/IcDbotViewDetail.svg diff --git a/public/assets/icons/IcBox.svg b/public/assets/icons/IcBox.svg new file mode 100644 index 00000000..35878335 --- /dev/null +++ b/public/assets/icons/IcBox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/IcCross.svg b/public/assets/icons/IcCross.svg new file mode 100644 index 00000000..56e7b5f4 --- /dev/null +++ b/public/assets/icons/IcCross.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/IcDbotDownload.svg b/public/assets/icons/IcDbotDownload.svg new file mode 100644 index 00000000..e94a0200 --- /dev/null +++ b/public/assets/icons/IcDbotDownload.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/IcDbotViewDetail.svg b/public/assets/icons/IcDbotViewDetail.svg new file mode 100644 index 00000000..afebd74c --- /dev/null +++ b/public/assets/icons/IcDbotViewDetail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/download/download.scss b/src/components/download/download.scss index 2de88775..1699163f 100644 --- a/src/components/download/download.scss +++ b/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; + } } } diff --git a/src/components/download/download.tsx b/src/components/download/download.tsx index 1785b3ae..0de5c9fc 100644 --- a/src/components/download/download.tsx +++ b/src/components/download/download.tsx @@ -97,15 +97,19 @@ const Download = observer(({ tab }: TDownloadProps) => { > ); }); diff --git a/src/components/transactions/transactions.tsx b/src/components/transactions/transactions.tsx index c31774cd..8be70494 100644 --- a/src/components/transactions/transactions.tsx +++ b/src/components/transactions/transactions.tsx @@ -114,14 +114,18 @@ const Transactions = observer(({ is_drawer_open }: TTransactions) => {
{localize('Type')} From e101810223a205118adbcfac18d465d458c5a75f Mon Sep 17 00:00:00 2001 From: maryia-matskevich-deriv Date: Wed, 10 Jul 2024 17:24:36 +0300 Subject: [PATCH 7/7] chore: uncomment a prop --- src/components/transactions/transactions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/transactions/transactions.tsx b/src/components/transactions/transactions.tsx index 8be70494..e7a6b844 100644 --- a/src/components/transactions/transactions.tsx +++ b/src/components/transactions/transactions.tsx @@ -114,7 +114,7 @@ const Transactions = observer(({ is_drawer_open }: TTransactions) => {