From 42299abf82634df1ce5077605d0b974d0c0a6166 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20der=20Winden?=
 <danielvanderwinden@ghost.org>
Date: Thu, 1 Aug 2024 11:46:11 +0200
Subject: [PATCH] Added styling for accent colours on Tiers and Offers (#20696)

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>
---
 apps/admin-x-design-system/styles.css                       | 3 ++-
 apps/admin-x-design-system/tailwind.config.cjs              | 1 +
 .../src/components/settings/growth/Offers.tsx               | 2 +-
 .../settings/membership/tiers/TierDetailPreview.tsx         | 6 +++---
 .../src/components/settings/membership/tiers/TiersList.tsx  | 2 +-
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/admin-x-design-system/styles.css b/apps/admin-x-design-system/styles.css
index 1842f304c2..5ba0b87bf7 100644
--- a/apps/admin-x-design-system/styles.css
+++ b/apps/admin-x-design-system/styles.css
@@ -96,4 +96,5 @@
 /* Prose classes are for formatting arbitrary HTML that comes from the API */
 .gh-prose-links a {
     color: #30CF43;
-}
\ No newline at end of file
+}
+
diff --git a/apps/admin-x-design-system/tailwind.config.cjs b/apps/admin-x-design-system/tailwind.config.cjs
index 7a614ce4f6..59a302365e 100644
--- a/apps/admin-x-design-system/tailwind.config.cjs
+++ b/apps/admin-x-design-system/tailwind.config.cjs
@@ -18,6 +18,7 @@ module.exports = {
         colors: {
             transparent: 'transparent',
             current: 'currentColor',
+            accent: 'var(--accent-color, #ff0095)',
             white: '#FFF',
             black: '#15171A',
             grey: {
diff --git a/apps/admin-x-settings/src/components/settings/growth/Offers.tsx b/apps/admin-x-settings/src/components/settings/growth/Offers.tsx
index dedcc9daaa..75b07ffff6 100644
--- a/apps/admin-x-settings/src/components/settings/growth/Offers.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/Offers.tsx
@@ -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'>
diff --git a/apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailPreview.tsx b/apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailPreview.tsx
index ae5c115087..ced9678a6d 100644
--- a/apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailPreview.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailPreview.tsx
@@ -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>
diff --git a/apps/admin-x-settings/src/components/settings/membership/tiers/TiersList.tsx b/apps/admin-x-settings/src/components/settings/membership/tiers/TiersList.tsx
index 28c5c6dca1..3aa1b36a08 100644
--- a/apps/admin-x-settings/src/components/settings/membership/tiers/TiersList.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/tiers/TiersList.tsx
@@ -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>