Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Various design fixes for offers in Adminx

Browse source
This commit is contained in:
Sodbileg Gansukh 2023-11-23 17:09:17 +08:00
parent 7f451b2627
commit 17804dd3ac
3 changed files with 22 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -76,7 +76,7 @@ const TextField: React.FC<TextFieldProps> = ({
const textFieldClasses = !unstyled && clsx(
'peer z-[1] order-2 h-8 w-full bg-transparent px-3 py-1 text-sm placeholder:text-grey-500 dark:placeholder:text-grey-700 md:h-9 md:py-2 md:text-md',
disabled ? 'cursor-not-allowed text-grey-700 opacity-60 dark:text-grey-700' : 'dark:text-white',
disabled ? 'text-grey-700 opacity-60 dark:text-grey-700' : 'dark:text-white',
rightPlaceholder ? 'w-0 grow rounded-l-md' : 'rounded-md',
className
);

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

@ -92,27 +92,29 @@ const Sidebar: React.FC<{
return (
<div className='pt-7'>
<Form>
<section className='mt-4'>
<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 at</span>
<span>{formatTimestamp(offer?.created_at ? offer.created_at : '')}</span>
</div>
<div className='flex flex-col gap-1.5'>
<span className='text-xs font-semibold leading-none text-grey-700'>Total redemptions</span>
<span>{offer?.redemption_count} {offer?.redemption_count === 1 ? 'redemption' : 'redemptions'}</span>
</div>
{offer?.redemption_count > 0 && offer?.last_redeemed ?
<div className='flex items-end justify-between'>
<div className='flex items-end justify-between'>
<div className='flex flex-col gap-5'>
<div className='flex flex-col gap-1.5'>
<span className='text-xs font-semibold leading-none text-grey-700'>Last redemption</span>
<span>{formatTimestamp(offer?.last_redeemed)}</span>
<span className='text-xs font-semibold leading-none text-grey-700'>Total redemptions</span>
<span>{offer?.redemption_count} {offer?.redemption_count === 1 ? 'redemption' : 'redemptions'}</span>
</div>
<a className='font-semibold text-green' href={createRedemptionFilterUrl(offer.id)}>See all →</a>
</div> :
null
}
{offer?.redemption_count > 0 && offer?.last_redeemed ?
<div className='flex flex-col gap-1.5'>
<span className='text-xs font-semibold leading-none text-grey-700'>Last redemption</span>
<span>{formatTimestamp(offer?.last_redeemed)}</span>
</div> :
null
}
</div>
<a className='font-semibold text-green' href={createRedemptionFilterUrl(offer?.id)}>See all →</a>
</div>
</div>
</section>
<section className='mt-4'>
@ -136,7 +138,7 @@ const Sidebar: React.FC<{
type='url'
value={offerUrl}
/>
<Button color='green' label={isCopied ? 'Copied!' : 'Copy code'} onClick={handleCopyClick} />
<Button color='green' label={isCopied ? 'Copied!' : 'Copy URL'} onClick={handleCopyClick} />
</div>
</div>
</section>

10
apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
View file

@ -89,15 +89,15 @@ const OfferCard: React.FC<{amount: number, cadence: string, currency: string, du
return (
<div className={`group ${isTierArchived ? 'opacity-50' : ''} ${isTierArchived ? 'pointer-events-none' : ''} flex cursor-pointer flex-col gap-6 border border-transparent bg-grey-100 p-5 transition-all hover:border-grey-100 hover:bg-grey-75 hover:shadow-sm dark:bg-grey-950 dark:hover:border-grey-800`} onClick={onClick}>
<div className='flex items-center justify-between'>
<div className='flex grow items-baseline justify-between gap-2'>
<h2 className='text-[1.6rem] font-semibold' onClick={onClick}>{name}</h2>
<span className={`text-xs font-semibold uppercase ${discountColor}`}>{discountOffer}</span>
<span className={`-translate-y-px whitespace-nowrap text-xs font-semibold uppercase ${discountColor}`}>{discountOffer}</span>
</div>
<div className='flex items-baseline gap-1'>
<span className='text-4xl font-bold tracking-tight'>{updatedPriceWithCurrency}</span>
<span className='text-3xl font-bold tracking-tight'>{updatedPriceWithCurrency}</span>
<span className='text-[1.6rem] font-medium text-grey-700 line-through'>{originalPriceWithCurrency}</span>
</div>
<div className='flex items-end justify-between'>
<div className='flex items-center justify-between'>
<div className='flex flex-col items-start text-xs'>
<span className='font-medium'>{tierName}</span>
<a className='text-grey-700 hover:underline' href={createRedemptionFilterUrl(offerId)}>{redemptionCount} redemptions</a>
@ -212,7 +212,7 @@ export const OffersIndexModal = () => {
})}
</div>;
const listLayoutOutput = <table className='m-0'>
const listLayoutOutput = <table className='m-0 w-full'>
<tr className='border-b border-b-grey-300'>
<th className='px-5 py-2.5 pl-0 text-xs font-normal text-grey-700'>{sortedOffers.length} {sortedOffers.length > 1 ? 'offers' : 'offer'}</th>
<th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Tier</th>