From 02692a15e2ac26c7c31dd19cb427ddabeaaebc06 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 20 Sep 2023 17:38:36 +0300
Subject: [PATCH] AdminX design updates (#18238)

refs. https://github.com/TryGhost/Product/issues/3349
---
 .../src/admin-x-ds/global/Banner.tsx          | 14 +++++------
 .../settings/email/EnableNewsletters.tsx      | 24 ++++++++++++-------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Banner.tsx b/apps/admin-x-settings/src/admin-x-ds/global/Banner.tsx
index 2e6beb88c2..ad74060d14 100644
--- a/apps/admin-x-settings/src/admin-x-ds/global/Banner.tsx
+++ b/apps/admin-x-settings/src/admin-x-ds/global/Banner.tsx
@@ -13,15 +13,15 @@ const Banner: React.FC<BannerProps> = ({color = 'grey', children, className}) =>
         color === 'grey' && 'text-black',
         color === 'blue' && 'text-blue',
         color === 'green' && 'text-green',
-        color === 'yellow' && 'text-yellow',
+        color === 'yellow' && 'text-yellow-600',
         color === 'red' && 'text-red',
 
-        `before:absolute before:inset-0 before:block before:opacity-10 before:content-['']`,
-        color === 'grey' && 'before:bg-grey-500',
-        color === 'blue' && 'before:bg-blue',
-        color === 'green' && 'before:bg-green',
-        color === 'yellow' && 'before:bg-yellow',
-        color === 'red' && 'before:bg-red',
+        `after:pointer-events-none after:absolute after:inset-0 after:block after:opacity-10 after:content-['']`,
+        color === 'grey' && 'after:bg-grey-500',
+        color === 'blue' && 'after:bg-blue',
+        color === 'green' && 'after:bg-green',
+        color === 'yellow' && 'after:bg-yellow',
+        color === 'red' && 'after:bg-red',
 
         className
     );
diff --git a/apps/admin-x-settings/src/components/settings/email/EnableNewsletters.tsx b/apps/admin-x-settings/src/components/settings/email/EnableNewsletters.tsx
index 55e34201c3..e40924ef6e 100644
--- a/apps/admin-x-settings/src/components/settings/email/EnableNewsletters.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/EnableNewsletters.tsx
@@ -1,14 +1,17 @@
+import Banner from '../../../admin-x-ds/global/Banner';
 import Icon from '../../../admin-x-ds/global/Icon';
 import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import Toggle from '../../../admin-x-ds/global/form/Toggle';
+import useRouting from '../../../hooks/useRouting';
 import {Setting, getSettingValues, useEditSettings} from '../../../api/settings';
 import {useGlobalData} from '../../providers/GlobalDataProvider';
 
 const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
     const {settings} = useGlobalData();
     const {mutateAsync: editSettings} = useEditSettings();
+    const {updateRoute} = useRouting();
 
     const [newslettersEnabled, membersSignupAccess] = getSettingValues<string>(settings, ['editor_default_email_recipients', 'members_signup_access']);
 
@@ -29,9 +32,8 @@ const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
     const enableToggle = (
         <>
             <Toggle
-                checked={isDisabled ? false : newslettersEnabled !== 'disabled'}
+                checked={newslettersEnabled !== 'disabled'}
                 direction='rtl'
-                disabled={isDisabled}
                 onChange={handleToggleChange}
             />
         </>
@@ -46,23 +48,27 @@ const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
         title='Newsletter sending'
     >
         <SettingGroupContent
+            columns={1}
             values={[
                 {
                     key: 'private',
-                    value: (!isDisabled && newslettersEnabled !== 'disabled') ? (
+                    value: (newslettersEnabled !== 'disabled') ? (<div className='w-full'>
                         <div className='flex items-center gap-2'>
                             <Icon colorClass='text-green' name='check' size='sm' />
                             <span>Enabled</span>
                         </div>
-                    ) : (
+                        {isDisabled &&
+                        <Banner className='mt-6 text-sm' color='grey'>
+                            Your <button className='!underline' type="button" onClick={() => {
+                                updateRoute('access');
+                            }}>Subscription access</button> is set to &lsquo;Nobody&rsquo;, only existing members will receive newsletters.
+                        </Banner>
+                        }
+                    </div>) :
                         <div className='flex items-center gap-2 text-grey-900'>
                             <Icon colorClass='text-grey-600' name='mail-block' size='sm' />
-                            <span>
-                                Disabled
-                                {isDisabled && ' by Access settings'}
-                            </span>
+                            <span>Disabled</span>
                         </div>
-                    )
                 }
             ]}
         />