From 3713273560049d0563a9303c46df6b2b2fde065a Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Wed, 13 Dec 2023 14:40:40 +0700
Subject: [PATCH] Dark mode improvements for offers (#19352)

fixes PROD-262, PROD-261
---
 apps/admin-x-design-system/src/global/SortMenu.tsx          | 4 ++--
 apps/admin-x-design-system/src/global/form/TextArea.tsx     | 2 +-
 apps/admin-x-design-system/src/global/form/TextField.tsx    | 2 +-
 .../src/components/settings/growth/offers/AddOfferModal.tsx | 4 ++--
 .../components/settings/growth/offers/EditOfferModal.tsx    | 2 +-
 .../src/components/settings/growth/offers/OffersIndex.tsx   | 6 +++---
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/admin-x-design-system/src/global/SortMenu.tsx b/apps/admin-x-design-system/src/global/SortMenu.tsx
index c0bb216a11..49eb41364f 100644
--- a/apps/admin-x-design-system/src/global/SortMenu.tsx
+++ b/apps/admin-x-design-system/src/global/SortMenu.tsx
@@ -66,7 +66,7 @@ const SortMenu: React.FC<SortMenuProps> = ({
     return (
         <Popover position={position} trigger={trigger}>
             <div className='flex flex-col'>
-                <div className='cursor-default select-none border-b border-b-grey-200 p-2 pl-3 text-sm font-semibold'>Sort by</div>
+                <div className='cursor-default select-none border-b border-b-grey-200 p-2 pl-3 text-sm font-semibold dark:border-b-grey-800'>Sort by</div>
                 <div className="flex min-w-[160px] flex-col justify-stretch py-1" role="none">
                     {localItems.map(item => (
                         <button key={item.id} className="group relative mx-1 flex grow cursor-pointer items-center rounded-[2.5px] px-8 py-1.5 pr-12 text-left text-sm hover:bg-grey-100 dark:hover:bg-grey-800" type="button" onClick={() => {
@@ -74,7 +74,7 @@ const SortMenu: React.FC<SortMenuProps> = ({
                         }}>
                             {item.selected ? <Icon className='absolute left-2' name='check' size='xs' /> : null}
                             {item.label}
-                            {item.selected ? <button className='absolute right-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full hover:bg-grey-300' title={`${localDirection === 'asc' ? 'Ascending' : 'Descending'}`} type='button' onClick={handleSortDirection}>
+                            {item.selected ? <button className='absolute right-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full hover:bg-grey-300 dark:hover:bg-grey-700' title={`${localDirection === 'asc' ? 'Ascending' : 'Descending'}`} type='button' onClick={handleSortDirection}>
                                 {localDirection === 'asc' ? <Icon name='arrow-up' size='xs' /> : <Icon name='arrow-down' size='xs' />}
                             </button> : null}
                         </button>
diff --git a/apps/admin-x-design-system/src/global/form/TextArea.tsx b/apps/admin-x-design-system/src/global/form/TextArea.tsx
index 163ebb1b35..d8c8fd3301 100644
--- a/apps/admin-x-design-system/src/global/form/TextArea.tsx
+++ b/apps/admin-x-design-system/src/global/form/TextArea.tsx
@@ -95,7 +95,7 @@ const TextArea: React.FC<TextAreaProps> = ({
                 onFocus={handleFocus}
                 {...props}>
             </textarea>
-            {title && <Heading className={'order-1 dark:!text-grey-300'} grey={false} htmlFor={id} useLabelTag={true}>{title}</Heading>}
+            {title && <Heading className={'order-1'} htmlFor={id} useLabelTag={true}>{title}</Heading>}
             {hint && <Hint className='order-3' color={error ? 'red' : ''}>{hint}</Hint>}
             {maxLength && <Hint>Max length is {maxLength}</Hint>}
         </div>
diff --git a/apps/admin-x-design-system/src/global/form/TextField.tsx b/apps/admin-x-design-system/src/global/form/TextField.tsx
index 5e62848785..83630ce98b 100644
--- a/apps/admin-x-design-system/src/global/form/TextField.tsx
+++ b/apps/admin-x-design-system/src/global/form/TextField.tsx
@@ -126,7 +126,7 @@ const TextField: React.FC<TextFieldProps> = ({
         return (
             <div className={containerClassName}>
                 {field}
-                {title && <Heading className={hideTitle ? 'sr-only' : 'order-1 peer-focus:!text-black dark:!text-grey-300 dark:peer-focus:!text-white'} htmlFor={id} useLabelTag={true}>{title}</Heading>}
+                {title && <Heading className={hideTitle ? 'sr-only' : 'order-1'} htmlFor={id} useLabelTag={true}>{title}</Heading>}
                 {hint && <Hint className={hintClassName} color={error ? 'red' : 'default'}>{hint}</Hint>}
             </div>
         );
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 70cb6ad3e3..8376aa0b19 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
@@ -31,7 +31,7 @@ interface OfferType {
 }
 
 const ButtonSelect: React.FC<{type: OfferType, checked: boolean, onClick: () => void}> = ({type, checked, onClick}) => {
-    const checkboxClass = checked ? 'bg-black text-white' : 'border border-grey-300';
+    const checkboxClass = checked ? 'bg-black text-white dark:bg-white dark:text-black' : 'border border-grey-300 dark:border-grey-800';
 
     return (
         <button className='text-left' type='button' onClick={onClick}>
@@ -210,7 +210,7 @@ const Sidebar: React.FC<SidebarProps> = ({tierOptions,
                 <section className='mt-4'>
                     <h2 className='mb-4 text-lg'>Details</h2>
                     <div className='flex flex-col gap-6'>
-                        <div className='flex flex-col gap-4 rounded-md border border-grey-200 p-4'>
+                        <div className='flex flex-col gap-4 rounded-md border border-grey-200 p-4 dark:border-grey-800'>
                             <ButtonSelect checked={overrides.type !== 'trial' ? true : false} type={typeOptions[0]} onClick={() => {
                                 handleTypeChange('percent');
                             }} />
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 7f5d9a3d2e..b029e687e5 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
@@ -98,7 +98,7 @@ const Sidebar: React.FC<{
                 <div className='flex grow flex-col pt-2'>
                     <Form className=' grow'>
                         <section>
-                            <div className='flex flex-col gap-5 rounded-md border border-grey-300 p-4 pb-3.5'>
+                            <div className='flex flex-col gap-5 rounded-md border border-grey-300 p-4 pb-3.5 dark:border-grey-800'>
                                 <div className='flex flex-col gap-1.5'>
                                     <span className='text-xs font-semibold leading-none text-grey-700'>Created on</span>
                                     <span>{formatTimestamp(offer?.created_at ? offer.created_at : '')}</span>
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 c167a94b35..60e272fa3a 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
@@ -147,7 +147,7 @@ export const OffersIndexModal = () => {
     const listLayoutOutput = <div className='overflow-x-auto'>
         <table className='m-0 w-full'>
             {(selectedTab === 'active' && activeOffers.length > 0) || (selectedTab === 'archived' && archivedOffers.length > 0) ?
-                <tr className='border-b border-b-grey-300'>
+                <tr className='border-b border-b-grey-300 dark:border-grey-800'>
                     <th className='px-5 py-2.5 pl-0 text-xs font-normal text-grey-700'>{selectedTab === 'active' ? activeOffers.length : archivedOffers.length} {selectedTab === 'active' ? (activeOffers.length !== 1 ? 'offers' : 'offer') : (archivedOffers.length !== 1 ? 'offers' : 'offer')}</th>
                     <th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Tier</th>
                     <th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Terms</th>
@@ -174,7 +174,7 @@ export const OffersIndexModal = () => {
                 const {discountColor, discountOffer, originalPriceWithCurrency, updatedPriceWithCurrency} = getOfferDiscount(offer.type, offer.amount, offer.cadence, offer.currency || 'USD', offerTier);
 
                 return (
-                    <tr className={`group relative scale-100 border-b border-b-grey-200`}>
+                    <tr className={`group relative scale-100 border-b border-b-grey-200 dark:border-grey-800`}>
                         <td className={`${isTierArchived ? 'opacity-50' : ''} min-w-[200px] p-0 font-semibold`}><a className={`block ${isTierArchived ? 'cursor-default select-none' : 'cursor-pointer'} p-5 pl-0`} onClick={!isTierArchived ? () => handleOfferEdit(offer?.id ? offer.id : '') : () => {}}>{offer?.name}</a></td>
                         <td className={`${isTierArchived ? 'opacity-50' : ''} whitespace-nowrap p-0 text-sm`}><a className={`block ${isTierArchived ? 'cursor-default select-none' : 'cursor-pointer'} p-5`} onClick={!isTierArchived ? () => handleOfferEdit(offer?.id ? offer.id : '') : () => {}}>{offerTier.name} {getOfferCadence(offer.cadence)}</a></td>
                         <td className={`${isTierArchived ? 'opacity-50' : ''} whitespace-nowrap p-0 text-sm`}><a className={`block ${isTierArchived ? 'cursor-default select-none' : 'cursor-pointer'} p-5`} onClick={!isTierArchived ? () => handleOfferEdit(offer?.id ? offer.id : '') : () => {}}><span className={`font-semibold uppercase ${discountColor}`}>{discountOffer}</span> — {getOfferDuration(offer.duration)}</a></td>
@@ -237,7 +237,7 @@ export const OffersIndexModal = () => {
                     </div>
                     <ButtonGroup buttons={buttons} />
                 </div>
-                <div className='mt-12 flex items-center justify-between border-b border-b-grey-300 pb-2.5'>
+                <div className='mt-12 flex items-center justify-between border-b border-b-grey-300 pb-2.5 dark:border-b-grey-800'>
                     <h1 className='text-3xl'>{offersTabs.find(tab => tab.id === selectedTab)?.title} offers</h1>
                     <div className='-mr-3'>
                         <SortMenu