From ae82eb54fc02e7e8a928c26b20563573b8cc7048 Mon Sep 17 00:00:00 2001
From: meenakshi-deriv <meenakshi@regentmarkets.com>
Date: Tue, 6 Aug 2024 13:20:25 +0400
Subject: [PATCH] fix: fix for contract detail pop up

---
 .../pages/trade/purchase/contract-details.jsx | 36 +++++++++++++------
 src/sass/_common/reskin.scss                  |  1 +
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/javascript/app/pages/trade/purchase/contract-details.jsx b/src/javascript/app/pages/trade/purchase/contract-details.jsx
index 2d0a8c0dac5..f6f0d7312eb 100644
--- a/src/javascript/app/pages/trade/purchase/contract-details.jsx
+++ b/src/javascript/app/pages/trade/purchase/contract-details.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable import/no-unresolved */
 import React, { useEffect, useState } from 'react';
 import { Button,  Skeleton, Text } from '@deriv-com/quill-ui';
-import { LabelPairedArrowLeftMdRegularIcon } from '@deriv/quill-icons/LabelPaired';
+import { LabelPairedArrowLeftMdRegularIcon, LabelPairedXmarkMdRegularIcon } from '@deriv/quill-icons/LabelPaired';
 import ContractTable from './contract-table';
 import Portal from '../../portal';
 import purchaseManager from '../../../common/purchase_manager';
@@ -46,7 +46,20 @@ const AuditSection = ({ data }) => {
                         {localize('Audit page')}
                     </Text>
                 </div>
-                <Button variant='tertiary' size='lg' />
+                <Button
+                    variant='tertiary'
+                    color='black'
+                    size='lg'
+                    onClick={() => {
+                        purchaseManager.set({
+                            showContractDetailsPopup: false,
+                        });
+                    }}
+                    icon={<LabelPairedXmarkMdRegularIcon
+                        color='black'
+                        
+                    />}
+                />
             </div>
             <div className='popup-scroller'>
                 <div className='body-box'>
@@ -122,23 +135,26 @@ const AuditSection = ({ data }) => {
 const DetailsSection = ({ data }) => (
     <>
         <div className='header-box'>
+         
+            <div className='title-box'>
+                <Text size='md' bold>
+                    {localize('Contract Details')}
+                </Text>
+            </div>
             <Button
                 variant='tertiary'
-                size='lg'
-                icon={<LabelPairedArrowLeftMdRegularIcon />}
                 color='black'
+                size='lg'
                 onClick={() => {
                     purchaseManager.set({
                         showContractDetailsPopup: false,
                     });
                 }}
+                icon={<LabelPairedXmarkMdRegularIcon
+                    color='black'
+                    
+                />}
             />
-            <div className='title-box'>
-                <Text size='md' bold>
-                    {localize('Contract Details')}
-                </Text>
-            </div>
-            <div className='spacer' />
         </div>
         <div className='popup-scroller'>
             <div className='body-box'>
diff --git a/src/sass/_common/reskin.scss b/src/sass/_common/reskin.scss
index 7caf5b6f506..df7c4aa73f8 100644
--- a/src/sass/_common/reskin.scss
+++ b/src/sass/_common/reskin.scss
@@ -504,6 +504,7 @@ div#contract-injection-container {
     }
     .header-box {
         display: flex;
+        max-width: 940px;
         width: 100%;
         height: 48px;
         background: var(--core-color-opacity-white-800);