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

Added styling for accent colours on Tiers and Offers (#20696)

Browse Source 
fixes
https://linear.app/tryghost/issue/DES-81/misleading-hardcoded-tier-preview-title-colors

Tiers and Offers in Admin were shown with hardcoded pink titles. This
changes that. They are now shown with black titles, and only in the preview will they render with the site's accent colour. 

---------

Co-authored-by: Princi Vershwal <vershwal.princi@gmail.com>
This commit is contained in:
Daniël van der Winden 2024-08-01 11:46:11 +02:00 committed by GitHub
parent 086ed9e7a9
commit 42299abf82
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/admin-x-design-system/styles.css
View File

@ -97,3 +97,4 @@
.gh-prose-links a {
color: #30CF43;
}

1
apps/admin-x-design-system/tailwind.config.cjs
View File

@ -18,6 +18,7 @@ module.exports = {
colors: {
transparent: 'transparent',
current: 'currentColor',
accent: 'var(--accent-color, #ff0095)',
white: '#FFF',
black: '#15171A',
grey: {

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

@ -13,7 +13,7 @@ const OfferContainer: React.FC<{offerTitle: string, tier: Tier, cadence: string,
{offerTitle, tier, cadence, redemptions, type, amount, currency, offerId, offerCode, goToOfferEdit}) => {
const {discountOffer} = getOfferDiscount(type, amount, cadence, currency || 'USD', tier);
return <div className='group flex h-full cursor-pointer flex-col justify-between gap-4 break-words rounded-sm 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 min-[900px]:min-h-[187px]' onClick={() => goToOfferEdit(offerId)}>
<span className='text-[1.65rem] font-bold leading-tight tracking-tight'>{offerTitle}</span>
<span className='text-[1.65rem] font-bold leading-tight tracking-tight text-black dark:text-white'>{offerTitle}</span>
<div className='flex flex-col'>
<span className={`text-sm font-semibold uppercase`}>{discountOffer}</span>
<div className='flex gap-1 text-xs'>

6
apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailPreview.tsx
View File

@ -22,8 +22,8 @@ export const TrialDaysLabel: React.FC<{size?: 'sm' | 'md'; trialDays: number;}>
return (
<span className={containerClassName}>
<span className="absolute inset-0 block rounded-full bg-pink opacity-20"></span>
<span className='dark:text-pink'>{trialDays} days free</span>
<span className="absolute inset-0 block rounded-full bg-accent opacity-20 dark:bg-pink"></span>
<span className="dark:text-pink">{trialDays} days free</span>
</span>
);
};
@ -96,7 +96,7 @@ const TierDetailPreview: React.FC<TierDetailPreviewProps> = ({tier, isFreeTier})
<div className='rounded-sm border border-grey-200 bg-white dark:border-transparent'>
<div className="flex-column relative flex min-h-[200px] w-full max-w-[420px] scale-90 items-start justify-stretch rounded bg-white p-4">
<div className="min-h-[56px] w-full">
<h4 className={`-mt-1 mb-0 w-full break-words text-lg font-semibold leading-tight text-pink ${!name && 'opacity-30'}`}>{name || (isFreeTier ? 'Free' : 'Bronze')}</h4>
<h4 className={`-mt-1 mb-0 w-full break-words text-lg font-semibold leading-tight text-accent ${!name && 'opacity-30'}`}>{name || (isFreeTier ? 'Free' : 'Bronze')}</h4>
<div className="mt-4 flex w-full flex-row flex-wrap items-end justify-between gap-x-1 gap-y-[10px]">
<div className={`flex flex-wrap text-black ${((showingYearly && tier?.yearly_price === undefined) || (!showingYearly && tier?.monthly_price === undefined)) && !isFreeTier ? 'opacity-30' : ''}`}>
<span className="self-start text-[2.7rem] font-bold uppercase leading-[1.115]">{currencySymbol}</span>

2
apps/admin-x-settings/src/components/settings/membership/tiers/TiersList.tsx
View File

@ -30,7 +30,7 @@ const TierCard: React.FC<TierCardProps> = ({tier}) => {
<div className='w-full grow' onClick={() => {
updateRoute({route: `tiers/${tier.id}`});
}}>
<div className='text-[1.65rem] font-bold leading-tight tracking-tight text-pink'>{tier.name}</div>
<div className='text-[1.65rem] font-bold leading-tight tracking-tight text-black dark:text-white'>{tier.name}</div>
<div className='mt-2 flex items-baseline'>
<span className="ml-1 translate-y-[-3px] text-md font-bold uppercase">{currencySymbol}</span>
<span className='text-xl font-bold tracking-tighter'>{numberWithCommas(currencyToDecimal(tier.monthly_price || 0))}</span>