From 77e9ea987bf3e123abcd015babd3517ed1ad019d Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 30 Nov 2023 22:08:25 +0800
Subject: [PATCH] Design details for offers modal (#19208)

no issues

- consistent spacing between modal and preview modal
- no action button jumping between the modals
- cleaner stats section in the edit screen
---
 apps/admin-x-design-system/src/global/modal/Modal.tsx          | 2 +-
 apps/admin-x-design-system/src/global/modal/PreviewModal.tsx   | 2 +-
 .../src/components/settings/growth/offers/EditOfferModal.tsx   | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/admin-x-design-system/src/global/modal/Modal.tsx b/apps/admin-x-design-system/src/global/modal/Modal.tsx
index 0c8ba75126..9622f7eeb7 100644
--- a/apps/admin-x-design-system/src/global/modal/Modal.tsx
+++ b/apps/admin-x-design-system/src/global/modal/Modal.tsx
@@ -249,7 +249,7 @@ const Modal: React.FC<ModalProps> = ({
             backdropClasses,
             'p-4 md:p-[4vmin]'
         );
-        paddingClasses = 'p-8';
+        paddingClasses = 'p-7';
         headerClasses = clsx(
             headerClasses,
             '-inset-x-8'
diff --git a/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx b/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx
index f4ec405e88..565080a339 100644
--- a/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx
+++ b/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx
@@ -281,7 +281,7 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
                 {sidebar &&
                     <div className='relative flex h-full w-full flex-col border-l border-grey-100 dark:border-grey-900 [@media(min-width:801px)]:w-auto [@media(min-width:801px)]:basis-[400px]'>
                         {sidebarHeader ? sidebarHeader : (
-                            <div className='flex max-h-[74px] items-center justify-between gap-3 px-7 py-5'>
+                            <div className='flex max-h-[82px] items-center justify-between gap-3 px-7 py-6'>
                                 <Heading level={titleHeadingLevel}>{title}</Heading>
                                 {sidebarButtons ? sidebarButtons : <ButtonGroup buttons={buttons} /> }
                             </div>
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx
index 7e48542513..3492ebad1f 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx
@@ -95,10 +95,9 @@ const Sidebar: React.FC<{
             };
 
             return (
-                <div className='flex grow flex-col pt-7'>
+                <div className='flex grow flex-col pt-2'>
                     <Form className=' grow'>
                         <section>
-                            <h2 className='mb-4 text-lg'>Stats</h2>
                             <div className='flex flex-col gap-5 rounded-md border border-grey-300 p-4 pb-3.5'>
                                 <div className='flex flex-col gap-1.5'>
                                     <span className='text-xs font-semibold leading-none text-grey-700'>Created on</span>