Merge pull request #23 from maryia-matskevich-deriv/maryia/bot_builder_toolbar

sandeep-deriv · web-flow · commit 2f3c61c38fd6 · 2024-07-12T15:52:32.000+08:00
[APP SEPARATION] [BOT] / maryia / feat: make work journal tab of run panel, adapt filters, text content
diff --git a/public/assets/icons/IcFilter.svg b/public/assets/icons/IcFilter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="var(--fill-color1)" d="M10 11a1 1 0 010 2H6a1 1 0 010-2h4zm2-4a1 1 0 010 2H4a1 1 0 010-2h8zm2-4a1 1 0 010 2H2a1 1 0 010-2h12z" fill-rule="evenodd"/></svg>
diff --git a/src/components/download/download.scss b/src/components/download/download.scss
@@ -4,10 +4,14 @@
         padding: 12px;
         padding-left: 16px;
         border: solid 1px var(--general-section-1);
-
-        .download__button,
         &__view-detail-button {
             height: 3.2rem;
         }
     }
 }
+
+.run-panel__info {
+    .download__button {
+        height: 3.2rem;
+    }
+}
diff --git a/src/components/journal/journal-components/filters.tsx b/src/components/journal/journal-components/filters.tsx
@@ -16,12 +16,11 @@ const Filters = ({
             return (
                 <Checkbox
                     key={item.id}
-                    classNameLabel={classNameLabel}
-                    value={hasFilter}
-                    defaultChecked={hasFilter}
+                    labelClassName={classNameLabel}
+                    checked={hasFilter}
                     label={item.label}
                     onChange={() => filterMessage(!hasFilter, item.id)}
-                />
+                    name={item.id} />
             );
         })}
     </div>
diff --git a/src/components/journal/journal-components/journal-tools.tsx b/src/components/journal/journal-components/journal-tools.tsx
@@ -24,7 +24,7 @@ const JournalTools = ({
             <div className='journal-tools__container'>
                 <Download tab='journal' />
                 <div ref={toggle_ref} className='journal-tools__container-filter' onClick={toggleFilterDialog}>
-                    <Text size='xs' className='journal-tools__container-filter--label'>
+                    <Text size='sm' weight='normal' className='journal-tools__container-filter--label'>
                         <Localize i18n_default_text='Filters' />
                     </Text>
                     <Icon icon='IcFilter' size={16} />
diff --git a/src/components/journal/journal.scss b/src/components/journal/journal.scss
@@ -65,6 +65,10 @@
                 &--label {
                     margin-inline-end: 0.8rem;
                 }
+
+                .deriv-text {
+                    font-weight: lighter;
+                }
             }
         }
     }
diff --git a/src/components/journal/journal.tsx b/src/components/journal/journal.tsx
@@ -53,41 +53,41 @@ const Journal = observer(() => {
                 ) : (
                     <>
                         {contract_stage >= contract_stages.STARTING &&
-                        !!Object.keys(checked_filters as TCheckedFilters).length &&
-                        !unfiltered_messages_length &&
-                        is_stop_button_visible ? (
+                            !!Object.keys(checked_filters as TCheckedFilters).length &&
+                            !unfiltered_messages_length &&
+                            is_stop_button_visible ? (
                             <JournalLoader is_mobile={is_mobile} />
                         ) : (
                             <div className='journal-empty'>
                                 <Icon icon='IcBox' className='journal-empty__icon' size={64} color='secondary' />
                                 <Text
                                     as='h4'
-                                    size='xs'
+                                    size='sm'
                                     weight='bold'
                                     align='center'
                                     color='less-prominent'
-                                    lineHeight='xs'
+                                    lineHeight='sm'
                                     className='journal-empty__header'
                                 >
                                     {localize('There are no messages to display')}
                                 </Text>
                                 <div className='journal-empty__message'>
-                                    <Text size='xs' color='less-prominent'>
+                                    <Text size='xs' lineHeight='3xl' color='less-prominent'>
                                         {localize('Here are the possible reasons:')}
                                     </Text>
                                     <ul className='journal-empty__list'>
                                         <li>
-                                            <Text size='xs' color='less-prominent'>
+                                            <Text size='xs' lineHeight='3xl' color='less-prominent'>
                                                 {localize('The bot is not running')}
                                             </Text>
                                         </li>
                                         <li>
-                                            <Text size='xs' color='less-prominent'>
+                                            <Text size='xs' lineHeight='3xl' color='less-prominent'>
                                                 {localize('The stats are cleared')}
                                             </Text>
                                         </li>
                                         <li>
-                                            <Text size='xs' color='less-prominent'>
+                                            <Text size='xs' lineHeight='3xl' color='less-prominent'>
                                                 {localize('All messages are filtered out')}
                                             </Text>
                                         </li>
diff --git a/src/components/summary/summary-card.scss b/src/components/summary/summary-card.scss
@@ -8,6 +8,11 @@
         width: 100%;
     }
 
+    .deriv-text {
+        font-weight: lighter;
+        text-align: center;
+    }
+
     &--inactive {
         color: var(--text-general);
         font-size: 14px;
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' LineHeight='sm' size='xs'>
+                <Text as='p' LineHeight='md' size='sm' weight='lighter'>
                     {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.scss b/src/components/transactions/transactions.scss
@@ -50,7 +50,7 @@
             list-style-type: disc;
             margin-left: 2rem;
             font-size: var(--text-size-xxs);
-            line-height: var(--text-lh-xl);
+            line-height: var(--text-lh-xxl);
             color: var(--text-less-prominent);
         }
     }
diff --git a/src/components/transactions/transactions.tsx b/src/components/transactions/transactions.tsx
@@ -200,17 +200,17 @@ const Transactions = observer(({ is_drawer_open }: TTransactions) => {
                                             </div>
                                             <Text
                                                 as='h4'
-                                                size='xs'
+                                                size='sm'
                                                 weight='bold'
                                                 align='center'
                                                 color='less-prominent'
-                                                lineHeight='xs'
+                                                lineHeight='sm'
                                                 className='transactions-empty__header'
                                             >
                                                 {localize('There are no transactions to display')}
                                             </Text>
                                             <div className='transactions-empty__message'>
-                                                <Text size='xs' color='less-prominent'>
+                                                <Text size='xs' color='less-prominent' lineHeight='3xl'>
                                                     {localize('Here are the possible reasons:')}
                                                 </Text>
                                                 <ul className='transactions-empty__list'>

Original file line number	Diff line number	Diff line change
`@@ -4,10 +4,14 @@`
`4`	`4`	`padding: 12px;`
`5`	`5`	`padding-left: 16px;`
`6`	`6`	`border: solid 1px var(--general-section-1);`
`7`		`-`
`8`		`- .download__button,`
`9`	`7`	`&__view-detail-button {`
`10`	`8`	`height: 3.2rem;`
`11`	`9`	`}`
`12`	`10`	`}`
`13`	`11`	`}`
	`12`	`+`
	`13`	`+.run-panel__info {`
	`14`	`+ .download__button {`
	`15`	`+ height: 3.2rem;`
	`16`	`+ }`
	`17`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,10 @@`
`65`	`65`	`&--label {`
`66`	`66`	`margin-inline-end: 0.8rem;`
`67`	`67`	`}`
	`68`	`+`
	`69`	`+ .deriv-text {`
	`70`	`+ font-weight: lighter;`
	`71`	`+ }`
`68`	`72`	`}`
`69`	`73`	`}`
`70`	`74`	`}`
Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@`
`50`	`50`	`list-style-type: disc;`
`51`	`51`	`margin-left: 2rem;`
`52`	`52`	`font-size: var(--text-size-xxs);`
`53`		`- line-height: var(--text-lh-xl);`
	`53`	`+ line-height: var(--text-lh-xxl);`
`54`	`54`	`color: var(--text-less-prominent);`
`55`	`55`	`}`
`56`	`56`	`}`