From 1095c63e684cc446c1f5ad8875c353548c4fb9e2 Mon Sep 17 00:00:00 2001
From: maryia-matskevich-deriv <maryia.frantsava@binary.com>
Date: Thu, 11 Jul 2024 11:35:08 +0300
Subject: [PATCH] feat: make work journal tab of run panel, adapt filters, text
 content

---
 public/assets/icons/IcFilter.svg               |  1 +
 src/components/download/download.scss          |  8 ++++++--
 .../journal/journal-components/filters.tsx     |  7 +++----
 .../journal-components/journal-tools.tsx       |  2 +-
 src/components/journal/journal.scss            |  4 ++++
 src/components/journal/journal.tsx             | 18 +++++++++---------
 src/components/summary/summary-card.scss       |  5 +++++
 src/components/summary/summary-card.tsx        |  2 +-
 src/components/transactions/transactions.scss  |  2 +-
 src/components/transactions/transactions.tsx   |  6 +++---
 10 files changed, 34 insertions(+), 21 deletions(-)
 create mode 100644 public/assets/icons/IcFilter.svg

diff --git a/public/assets/icons/IcFilter.svg b/public/assets/icons/IcFilter.svg
new file mode 100644
index 00000000..ae47d713
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/components/download/download.scss b/src/components/download/download.scss
index 1699163f..21b9d582 100644
--- 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
index 12118d15..47e8f1af 100644
--- 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
index 76b81f6e..f4989b9a 100644
--- 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
index 0bac0519..81a0697e 100644
--- 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
index a9ecedbe..054f5a6b 100644
--- 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
index 671635f3..351db29b 100644
--- 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
index 6b987a7d..365f5a81 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
                 </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
index 5c7c595a..5ad4a235 100644
--- 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
index e7a6b844..940239c6 100644
--- 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'>