From 9914eb753b710b9bd7d1e4709b57182c67298e93 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 30 Nov 2023 13:43:37 +0800
Subject: [PATCH] Offers modal and preview improvements (#19192)

fixes ADM-20

- increased the width of the modals
- smaller width for the portal preview for better balance
---
 .../components/settings/growth/offers/AddOfferModal.tsx    | 1 +
 .../components/settings/growth/offers/EditOfferModal.tsx   | 7 ++++---
 .../src/components/settings/growth/offers/OfferSuccess.tsx | 3 ++-
 .../src/components/settings/growth/offers/OffersIndex.tsx  | 1 +
 apps/portal/src/components/Frame.styles.js                 | 4 ++++
 5 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx
index fd407f53ad..9b94b960d0 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx
@@ -628,6 +628,7 @@ const AddOfferModal = () => {
         size='lg'
         testId='add-offer-modal'
         title='Offer'
+        width={1140}
         onBreadcrumbsBack={() => {
             updateRoute('offers/edit');
         }}
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 d755d307be..1dd34910b7 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,8 +95,8 @@ const Sidebar: React.FC<{
             };
 
             return (
-                <div className='pt-7'>
-                    <Form>
+                <div className='flex grow flex-col pt-7'>
+                    <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'>
@@ -164,7 +164,7 @@ const Sidebar: React.FC<{
                             </div>
                         </section>
                     </Form>
-                    <div className='mb-6'>
+                    <div className='mb-2'>
                         {offer?.status === 'active' ? <Button color='red' label='Archive offer' link onClick={confirmStatusChange} /> : <Button color='green' label='Reactivate offer' link onClick={confirmStatusChange} />}
                     </div>
                 </div>
@@ -269,6 +269,7 @@ const EditOfferModal: React.FC<{id: string}> = ({id}) => {
         size='lg'
         testId='offer-update-modal'
         title='Offer'
+        width={1140}
         onBreadcrumbsBack={() => {
             updateRoute('offers/edit');
         }}
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/OfferSuccess.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/OfferSuccess.tsx
index 4b8eb56e3a..88f0f52103 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/OfferSuccess.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/OfferSuccess.tsx
@@ -79,6 +79,7 @@ const OfferSuccess: React.FC<{id: string}> = ({id}) => {
         size='lg'
         testId='offer-success-modal'
         topRightContent='close'
+        width={1140}
     >
         <div className='-mt-6 flex h-full flex-col items-center justify-center text-center'>
             <div className='absolute left-6 top-5'>
@@ -96,7 +97,7 @@ const OfferSuccess: React.FC<{id: string}> = ({id}) => {
                     }}
                 />
             </div>
-            <Icon colorClass='text-grey-700' name='tags-check' size='xl' />
+            <Icon colorClass='text-grey-700 -mt-4' name='tags-check' size='xl' />
             <h1 className='mt-6 text-4xl'>Your new offer is live!</h1>
             <p className='mt-3 max-w-[510px] text-[1.6rem]'>You can share the link anywhere. In your newsletter, social media, a podcast, or in-person. It all just works.</p>
             <div className='mt-8 flex w-full max-w-md flex-col gap-8'>
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
index 7dc7a2cef5..b257613148 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
@@ -199,6 +199,7 @@ export const OffersIndexModal = () => {
         height='full'
         size='lg'
         testId='offers-modal'
+        width={1140}
         stickyFooter
         onOk={() => {
             modal.remove();
diff --git a/apps/portal/src/components/Frame.styles.js b/apps/portal/src/components/Frame.styles.js
index 30accb1d1e..7dd7cb06ea 100644
--- a/apps/portal/src/components/Frame.styles.js
+++ b/apps/portal/src/components/Frame.styles.js
@@ -362,6 +362,10 @@ const FrameStyles = `
     animation: none !important;
 }
 
+.gh-portal-popup-container.preview.offer {
+    max-width: 420px;
+}
+
 @keyframes popup {
     0% {
         transform: translateY(-30px);