henry/92122/fix: spacing issue in russian and french languages accumu…

…lator (binary-com#8062) * fix: spacing issue in russian and french languages accumulator * fix: change contract card text overflow issue accumulator * fix: button overlay overflow for russian * fix: widget spacing in mobile * fix: widget spacing in mobile * fix: spacing issue in mobile contract card --------- Co-authored-by: hirad-deriv <hirad@re-work.dev>
likhith-deriv · May 17, 2023 · 7969ad5 · 7969ad5
1 parent ea7f586
commit 7969ad5
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 14 deletions.
diff --git a/...ages/components/src/components/contract-card/contract-card-items/contract-card-header.tsx b/...ages/components/src/components/contract-card/contract-card-items/contract-card-header.tsx
@@ -77,12 +77,21 @@ const ContractCardHeader = ({
                 className={classNames('dc-contract-card__grid', 'dc-contract-card__grid-underlying-trade', {
                     'dc-contract-card__grid-underlying-trade--mobile': is_mobile && !multiplier && !is_accumulator,
                     'dc-contract-card__grid-underlying-trade--trader': !is_pathname_bot,
-                    'dc-contract-card__grid-underlying-trade--trader--accumulator': is_accumulator,
+                    'dc-contract-card__grid-underlying-trade--trader--accumulator': !is_mobile && is_accumulator,
                     'dc-contract-card__grid-underlying-trade--trader--accumulator-sold': is_accumulator && is_sold,
                 })}
             >
-                <div id='dc-contract_card_underlying_label' className='dc-contract-card__underlying-name'>
-                    <Icon icon={underlying ? `IcUnderlying${underlying}` : 'IcUnknown'} width={40} size={32} />
+                <div
+                    id='dc-contract_card_underlying_label'
+                    className={classNames('dc-contract-card__underlying-name', {
+                        'dc-contract-card__underlying-name--accumulator': is_accumulator,
+                    })}
+                >
+                    <Icon
+                        icon={underlying ? `IcUnderlying${underlying}` : 'IcUnknown'}
+                        width={is_accumulator ? 46 : 40}
+                        size={32}
+                    />
                     <Text size='xxs' className='dc-contract-card__symbol' weight='bold'>
                         {display_name || contract_info.display_name}
                     </Text>
@@ -127,14 +136,14 @@ const ContractCardHeader = ({
                         </CSSTransition>
                     ) : null}
                 </MobileWrapper>
-                {!is_sold && is_accumulator && (
-                    <TickCounterBar
-                        current_tick={tick_passed}
-                        max_ticks_duration={tick_count}
-                        label={getCardLabels().TICKS}
-                    />
-                )}
             </div>
+            {!is_sold && is_accumulator && (
+                <TickCounterBar
+                    current_tick={tick_passed}
+                    max_ticks_duration={tick_count}
+                    label={getCardLabels().TICKS}
+                />
+            )}
             <MobileWrapper>
                 <div className='dc-progress-slider--completed' />
             </MobileWrapper>

diff --git a/packages/components/src/components/contract-card/contract-card.scss b/packages/components/src/components/contract-card/contract-card.scss
@@ -43,8 +43,11 @@
 
             &--trader {
                 grid-template-columns: 1.2fr 1fr;
-                &--accumulator-sold {
-                    padding-top: 1rem;
+                &--accumulator {
+                    display: flex;
+                    &-sold {
+                        padding-top: 1rem;
+                    }
                 }
             }
             &--mobile {
@@ -204,6 +207,10 @@
         font-size: 1.2em;
         max-width: 18rem;
         min-width: 10rem;
+
+        &--accumulator {
+            max-width: 10rem;
+        }
     }
     &__type {
         font-size: 1.2em;

diff --git a/packages/trader/src/sass/app/modules/trading-mobile.scss b/packages/trader/src/sass/app/modules/trading-mobile.scss
@@ -58,7 +58,7 @@
                 padding-right: 0.8rem;
             }
             &:is(.amount__widget) {
-                grid-template-columns: 5fr 1fr;
+                grid-template-columns: 5fr 1.3fr;
             }
             .trade-container {
                 &__amount {

diff --git a/packages/trader/src/sass/app/modules/trading.scss b/packages/trader/src/sass/app/modules/trading.scss
@@ -713,7 +713,7 @@
         cursor: not-allowed;
 
         &__caption {
-            width: 17.2rem;
+            width: 18rem;
             height: 4rem;
             color: var(--text-less-prominent);
             text-align: center;