OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dark mode improvements for offers (#19352)

Browse Source 
fixes PROD-262, PROD-261
This commit is contained in:
Sodbileg Gansukh 2023-12-13 14:40:40 +07:00 committed by GitHub
parent 981b8fc814
commit 3713273560
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/admin-x-design-system/src/global/SortMenu.tsx
View File

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

2
apps/admin-x-design-system/src/global/form/TextArea.tsx
View File

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

2
apps/admin-x-design-system/src/global/form/TextField.tsx
View File

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

4
apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx
View File

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

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

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

6
apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
View File

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