From 99f941f89a01d4a9994cca17c570f916485edc27 Mon Sep 17 00:00:00 2001
From: ahmadtaimoor-deriv
 <129935294+ahmadtaimoor-deriv@users.noreply.github.com>
Date: Fri, 14 Jun 2024 13:17:21 +0800
Subject: [PATCH] chore: fixes

---
 .../remaining-time/remaining-time.tsx         | 12 +++-
 .../contract-details-footer.tsx               | 34 +++++++++---
 .../ContractDetails/contract-details.scss     |  6 +-
 .../ContractDetails/contract-details.tsx      | 55 ++++++++++---------
 4 files changed, 67 insertions(+), 40 deletions(-)

diff --git a/packages/components/src/components/remaining-time/remaining-time.tsx b/packages/components/src/components/remaining-time/remaining-time.tsx
index 293b11be71eb..cecb84eb83a3 100644
--- a/packages/components/src/components/remaining-time/remaining-time.tsx
+++ b/packages/components/src/components/remaining-time/remaining-time.tsx
@@ -11,9 +11,17 @@ type TRemainingTimeProps = {
     start_time: moment.Moment;
     format?: string;
     getCardLabels: TGetCardLables;
+    className?: string;
 };
 
-const RemainingTime = ({ as = 'div', end_time, format, getCardLabels, start_time }: TRemainingTimeProps) => {
+const RemainingTime = ({
+    as = 'div',
+    end_time,
+    format,
+    getCardLabels,
+    start_time,
+    className = 'dc-remaining-time',
+}: TRemainingTimeProps) => {
     const Tag = as;
     if (!end_time || start_time.unix() > +end_time) {
         return <React.Fragment>{''}</React.Fragment>;
@@ -26,7 +34,7 @@ const RemainingTime = ({ as = 'div', end_time, format, getCardLabels, start_time
     }
     const is_zeroes = /^00:00$/.test(remaining_time);
 
-    return <React.Fragment>{!is_zeroes && <Tag className='dc-remaining-time'>{remaining_time}</Tag>}</React.Fragment>;
+    return <React.Fragment>{!is_zeroes && <Tag className={className}>{remaining_time}</Tag>}</React.Fragment>;
 };
 
 export default RemainingTime;
diff --git a/packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.tsx b/packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.tsx
index 10a2fb8a4b0a..1cb3b56f7124 100644
--- a/packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.tsx
+++ b/packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.tsx
@@ -1,5 +1,13 @@
-import { Button } from '@deriv-com/quill-ui';
-import { TContractInfo, getCardLabels, isMultiplierContract, isValidToCancel, isValidToSell } from '@deriv/shared';
+import { Button, Text } from '@deriv-com/quill-ui';
+import { RemainingTime } from '@deriv/components';
+import {
+    TContractInfo,
+    formatMoney,
+    getCardLabels,
+    isMultiplierContract,
+    isValidToCancel,
+    isValidToSell,
+} from '@deriv/shared';
 import { useStore } from '@deriv/stores';
 import { getRemainingTime } from 'AppV2/Utils/helper';
 import { observer } from 'mobx-react';
@@ -44,12 +52,20 @@ const ContractDetailsFooter = observer(({ contract_info }: ContractInfoProps) =>
                         <Button
                             onClick={() => onClickCancel(contract_id)}
                             variant='secondary'
-                            label={`${getCardLabels().CANCEL} ${getRemainingTime({
-                                end_time: cancellation_date_expiry,
-                                format: 'mm:ss',
-                                getCardLabels,
-                                start_time: server_time,
-                            })}`}
+                            label={
+                                <>
+                                    {getCardLabels().CANCEL}
+                                    {'  '}
+                                    <RemainingTime
+                                        as='span'
+                                        end_time={cancellation_date_expiry}
+                                        format='mm:ss'
+                                        className='color'
+                                        getCardLabels={getCardLabels}
+                                        start_time={server_time}
+                                    />
+                                </>
+                            }
                             color='black'
                             disabled={Number(profit) >= 0}
                             size='lg'
@@ -62,7 +78,7 @@ const ContractDetailsFooter = observer(({ contract_info }: ContractInfoProps) =>
                     variant='secondary'
                     label={
                         is_valid_to_sell
-                            ? `${getCardLabels().CLOSE} @ ${bid_price} ${currency}`
+                            ? `${getCardLabels().CLOSE} @ ${bid_price} ${formatMoney(currency)}`
                             : getCardLabels().RESALE_NOT_OFFERED
                     }
                     color='black'
diff --git a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss
index b11af357360e..d2dfc8f070b7 100644
--- a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss
+++ b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss
@@ -6,13 +6,13 @@
     overflow: auto;
     gap: var(--semantic-spacing-general-sm);
     height: 100vh;
-    padding-bottom: var(--core-spacing-400);
+    padding-bottom: var(--semantic-spacing-general-4xl);
     &--two-buttons {
-        padding-bottom: 230px;
+        padding-bottom: 186px;
     }
 
     &--one-button {
-        padding-bottom: 140px;
+        padding-bottom: 130px;
     }
     .contract-card-wrapper {
         margin-top: var(--core-spacing-200);
diff --git a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx
index 894e9a45b059..7d081af46ce6 100644
--- a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx
+++ b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx
@@ -76,34 +76,37 @@ const ContractDetails = observer(() => {
         showTpSl = isOpen(contract_info) && Boolean(limit_order);
     }
     return (
-        <div
-            className={classNames('contract-details', {
-                'contract-details--two-buttons': should_show_sell && show_cancel_button,
-                'contract-details--one-button': should_show_sell && !show_cancel_button,
-            })}
-        >
-            <div className='contract-card-wrapper'>
-                <ContractCard contractInfo={contract_info} serverTime={server_time} />
-            </div>
-            <div className='placeholder'>
-                <ChartPlaceholder />
-            </div>
-            <DealCancellation />
-            {showTpSl && (
-                <CardWrapper>
-                    <TakeProfit />
-                    <StopLoss />
-                </CardWrapper>
-            )}
+        <>
+            {' '}
+            <div
+                className={classNames('contract-details', {
+                    'contract-details--two-buttons': should_show_sell && show_cancel_button,
+                    'contract-details--one-button': should_show_sell && !show_cancel_button,
+                })}
+            >
+                <div className='contract-card-wrapper'>
+                    <ContractCard contractInfo={contract_info} serverTime={server_time} />
+                </div>
+                <div className='placeholder'>
+                    <ChartPlaceholder />
+                </div>
+                <DealCancellation />
+                {showTpSl && (
+                    <CardWrapper>
+                        <TakeProfit />
+                        <StopLoss />
+                    </CardWrapper>
+                )}
 
-            <OrderDetails contract_info={contract_info} />
-            <PayoutInfo contract_info={contract_info} />
-            <EntryExitDetails contract_info={contract_info} />
-            {is_tp_history_visible && update_history.length > 0 && (
-                <TakeProfitHistory history={update_history} currency={currency} />
-            )}
+                <OrderDetails contract_info={contract_info} />
+                <PayoutInfo contract_info={contract_info} />
+                <EntryExitDetails contract_info={contract_info} />
+                {is_tp_history_visible && update_history.length > 0 && (
+                    <TakeProfitHistory history={update_history} currency={currency} />
+                )}
+            </div>
             {should_show_sell && <ContractDetailsFooter contract_info={contract_info} />}
-        </div>
+        </>
     );
 });