maryia/92124/fix: add long text support to AccumulatorsInfoDisplay (#…

…8080) * fix: add long text support to AccumulatorsInfoDisplay * chore: improve Maximum ticks by showing 0 if undefined --------- Co-authored-by: hirad-deriv <hirad@re-work.dev>
binary-com · May 17, 2023 · ea7f586 · ea7f586 · vercel · May 17, 2023
1 parent c252fb4
commit ea7f586
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/...src/Modules/Trading/Components/Form/TradeParams/Accumulator/accumulators-info-display.jsx b/...src/Modules/Trading/Components/Form/TradeParams/Accumulator/accumulators-info-display.jsx
@@ -7,29 +7,27 @@ import { Money, Text } from '@deriv/components';
 import classNames from 'classnames';
 
 const AccumulatorsInfoDisplay = ({ currency, maximum_payout, maximum_ticks }) => {
-    const labels = [localize('Maximum payout'), localize('Maximum ticks')].map((label, index) => (
-        <Text key={index} size='xxs' weight='bold'>
-            {label}
-        </Text>
-    ));
-
-    const values = [
-        <Money key={0} amount={maximum_payout} show_currency currency={currency} />,
-        localize('{{maximum_ticks}} {{ticks}}', {
-            maximum_ticks,
-            ticks: maximum_ticks === 1 ? 'tick' : 'ticks',
-        }),
-    ].map((value_component, index) => (
-        <Text key={index} size='xxs' align='right'>
-            {value_component}
-        </Text>
-    ));
+    const content = [
+        {
+            label: localize('Maximum payout'),
+            value: <Money amount={maximum_payout} show_currency currency={currency} />,
+        },
+        {
+            label: localize('Maximum ticks'),
+            value: `${maximum_ticks || 0} ${maximum_ticks === 1 ? localize('tick') : localize('ticks')}`,
+        },
+    ];
 
     return (
         <Fieldset className={classNames('trade-container__fieldset', 'accu-info-display')}>
-            {[labels, values].map((text, index) => (
-                <div key={index} className='accu-info-display__column'>
-                    {text}
+            {content.map(({ label, value }) => (
+                <div key={label} className='accu-info-display__row'>
+                    <Text size='xxs' weight='bold' line_height='xxs'>
+                        {label}
+                    </Text>
+                    <Text size='xxs' align='right'>
+                        {value}
+                    </Text>
                 </div>
             ))}
         </Fieldset>

diff --git a/packages/trader/src/sass/app/modules/trading.scss b/packages/trader/src/sass/app/modules/trading.scss
@@ -131,13 +131,21 @@
         &.accu-info-display {
             height: 7rem;
             display: flex;
+            flex-direction: column;
             justify-content: space-between;
             padding: 1.5rem 1.6rem;
 
-            .accu-info-display__column {
+            .accu-info-display__row {
                 display: flex;
-                flex-direction: column;
+                height: 2rem;
                 justify-content: space-between;
+                align-items: center;
+                span {
+                    line-height: 1rem;
+                    &:not(:first-child) {
+                        flex-shrink: 0;
+                    }
+                }
             }
         }
         .dc-datepicker {