hamza/88083/To Adjust the purchase button styles including animation (d…

…eriv-com#83) * chore: style changes v1.0 * fix: styling animation * fix: button styling responsive * fix: button styling responsive v1.3
hamza-deriv · Feb 14, 2023 · 935c243 · 935c243
1 parent e8fa9b5
commit 935c243
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 48 deletions.
diff --git a/packages/trader/src/Modules/Trading/Components/Elements/purchase-button.jsx b/packages/trader/src/Modules/Trading/Components/Elements/purchase-button.jsx
@@ -61,18 +61,15 @@ const PurchaseButton = ({
                 'btn-purchase--2': index === 1,
                 'btn-purchase--multiplier': is_multiplier,
                 'btn-purchase--multiplier-deal-cancel': has_deal_cancellation,
+                'btn-purchase--turbos': is_turbos,
             })}
             onClick={() => {
                 setPurchaseState(index);
                 onClickPurchase(info.id, info.stake, type);
             }}
         >
             <DesktopWrapper>
-                <div
-                    className={classNames('btn-purchase__info', 'btn-purchase__info--left', {
-                        'btn-purchase__info--left--turbos': is_turbos,
-                    })}
-                >
+                <div className='btn-purchase__info btn-purchase__info--left'>
                     <div className='btn-purchase__type-wrapper'>
                         <IconComponentWrapper type={getIconType()} />
                         <ButtonTextWrapper
@@ -84,11 +81,7 @@ const PurchaseButton = ({
                     </div>
                 </div>
                 <div className='btn-purchase__effect-detail' />
-                <div
-                    className={classNames('btn-purchase__effect-detail--arrow', {
-                        'btn-purchase__effect-detail--arrow--turbos': is_turbos,
-                    })}
-                />
+                <div className='btn-purchase__effect-detail--arrow' />
                 <div className='btn-purchase__info btn-purchase__info--right'>
                     <div className='btn-purchase__text_wrapper'>
                         {is_multiplier ? (
@@ -106,11 +99,7 @@ const PurchaseButton = ({
                 </div>
             </DesktopWrapper>
             <MobileWrapper>
-                <div
-                    className={classNames('btn-purchase__top', {
-                        'btn-purchase__turbos': is_turbos,
-                    })}
-                >
+                <div className='btn-purchase__top'>
                     <IconComponentWrapper type={getIconType()} />
                     <ButtonTextWrapper
                         should_fade={should_fade}

diff --git a/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx
@@ -6,31 +6,34 @@ import { localize } from '@deriv/translations';
 import { getCurrencyDisplayCode, getLocalizedBasis } from '@deriv/shared';
 import CancelDealInfo from './cancel-deal-info.jsx';
 
-const ValueMovement = ({ has_error_or_not_loaded, proposal_info, currency, has_increased, is_turbos }) => (
-    <React.Fragment>
-        <div className='trade-container__price-info-value'>
-            {!has_error_or_not_loaded && (
-                <Money
-                    amount={proposal_info.obj_contract_basis.value}
-                    className={classNames('trade-container__price-info-currency', {
-                        'trade-container__price-info-currency--turbos': is_turbos,
-                    })}
-                    currency={currency}
-                    show_currency
-                />
-            )}
-        </div>
-        {!is_turbos && (
-            <div className='trade-container__price-info-movement'>
-                {!has_error_or_not_loaded && has_increased !== null && has_increased ? (
-                    <Icon icon='IcProfit' />
-                ) : (
-                    <Icon icon='IcLoss' />
+const ValueMovement = ({ has_error_or_not_loaded, proposal_info, currency, has_increased, is_turbos }) => {
+    const payout_amount = is_turbos ? proposal_info.number_of_contracts : proposal_info.obj_contract_basis.value;
+    return (
+        <React.Fragment>
+            <div className='trade-container__price-info-value'>
+                {!has_error_or_not_loaded && (
+                    <Money
+                        amount={payout_amount}
+                        className={classNames('trade-container__price-info-currency', {
+                            'trade-container__price-info-currency--turbos': is_turbos,
+                        })}
+                        currency={currency}
+                        show_currency
+                    />
                 )}
             </div>
-        )}
-    </React.Fragment>
-);
+            {!is_turbos && (
+                <div className='trade-container__price-info-movement'>
+                    {!has_error_or_not_loaded && has_increased !== null && has_increased ? (
+                        <Icon icon='IcProfit' />
+                    ) : (
+                        <Icon icon='IcLoss' />
+                    )}
+                </div>
+            )}
+        </React.Fragment>
+    );
+};
 
 const ContractInfo = ({
     basis,

diff --git a/packages/trader/src/sass/app/_common/components/purchase-button.scss b/packages/trader/src/sass/app/_common/components/purchase-button.scss
@@ -41,10 +41,6 @@
         &__bottom {
             width: 40vw; // TODO remove this when find a solution for fill-width inside flex.
         }
-        &__turbos {
-            align-items: center;
-            width: auto;
-        }
         &:hover {
             transform: none !important;
         }
@@ -108,9 +104,6 @@
             position: absolute;
         }
     }
-    &__info--left--turbos {
-        width: 70%;
-    }
     &__info--right {
         width: 45%;
         padding-right: 1rem;
@@ -144,9 +137,6 @@
         bottom: 0;
         display: inline-block;
     }
-    &__effect-detail--arrow--turbos {
-        left: 12rem;
-    }
     &[disabled]:hover {
         cursor: initial;
         transform: none;
@@ -334,4 +324,32 @@
             }
         }
     }
+    &--turbos {
+        .btn-purchase {
+            &__info--left {
+                width: 70%;
+            }
+            &__effect-detail {
+                &--arrow {
+                    left: 12rem;
+                }
+            }
+            @include mobile {
+                &__top {
+                    align-items: center;
+                    width: auto;
+                }
+            }
+        }
+        &.btn-purchase--swoosh {
+            .btn-purchase {
+                &__effect-detail {
+                    transform: scale3d(15, 1, 1);
+                    &--arrow {
+                        transform: translate3d(12rem, 0, 0) rotate(45deg);
+                    }
+                }
+            }
+        }
+    }
 }