Offers modal and preview improvements (#19192)

fixes ADM-20

- increased the width of the modals
- smaller width for the portal preview for better balance

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');
         }}

apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx

@@ -95,8 +95,8 @@ const Sidebar: React.FC<{
             };
 
             return (
-                <div className='pt-7'>
+                <div className='flex grow flex-col pt-7'>
-                    <Form>
+                    <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');
         }}

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'>

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();

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);