From 486876e3acef0499ddeaa81ae8251aa873b3be77 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Thu, 25 May 2023 14:59:30 +0200
Subject: [PATCH] Updated default states in AdminX

refs. https://github.com/TryGhost/Team/issues/3151
---
 .../src/assets/icons/check-circle.svg              |  1 +
 .../src/assets/icons/lock-locked.svg               |  1 +
 .../src/assets/icons/lock-unlocked.svg             |  1 +
 .../src/components/settings/email/Mailgun.tsx      | 10 +++++++---
 .../src/components/settings/general/LockSite.tsx   | 14 +++++++++++++-
 5 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 ghost/admin-x-settings/src/assets/icons/check-circle.svg
 create mode 100644 ghost/admin-x-settings/src/assets/icons/lock-locked.svg
 create mode 100644 ghost/admin-x-settings/src/assets/icons/lock-unlocked.svg

diff --git a/ghost/admin-x-settings/src/assets/icons/check-circle.svg b/ghost/admin-x-settings/src/assets/icons/check-circle.svg
new file mode 100644
index 0000000000..9965e6f68d
--- /dev/null
+++ b/ghost/admin-x-settings/src/assets/icons/check-circle.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5"><path d="M6,13.223,8.45,16.7a1.049,1.049,0,0,0,1.707.051L18,6.828" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M0.750 11.999 A11.250 11.250 0 1 0 23.250 11.999 A11.250 11.250 0 1 0 0.750 11.999 Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/assets/icons/lock-locked.svg b/ghost/admin-x-settings/src/assets/icons/lock-locked.svg
new file mode 100644
index 0000000000..f47f37b370
--- /dev/null
+++ b/ghost/admin-x-settings/src/assets/icons/lock-locked.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5px"><defs></defs><title>lock-1</title><rect x="3.75" y="9.75" width="16.5" height="13.5" rx="1.5" ry="1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></rect><path d="M6.75,9.75V6a5.25,5.25,0,0,1,10.5,0V9.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><line x1="12" y1="15" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></svg>
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/assets/icons/lock-unlocked.svg b/ghost/admin-x-settings/src/assets/icons/lock-unlocked.svg
new file mode 100644
index 0000000000..2a10992b47
--- /dev/null
+++ b/ghost/admin-x-settings/src/assets/icons/lock-unlocked.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5px"><defs></defs><title>lock-unlock</title><path d="M.75,9.75V6a5.25,5.25,0,0,1,10.5,0V9.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><rect x="6.75" y="9.75" width="16.5" height="13.5" rx="1.5" ry="1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></rect><line x1="15" y1="15" x2="15" y2="18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></svg>
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx b/ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx
index c29438dd6f..53efc21e29 100644
--- a/ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx
+++ b/ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx
@@ -5,6 +5,7 @@ import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import TextField from '../../../admin-x-ds/global/TextField';
 import useSettingGroup from '../../../hooks/useSettingGroup';
+import {ReactComponent as CheckIcon} from '../../../assets/icons/check-circle.svg';
 
 const MAILGUN_REGIONS = [
     {label: '🇺🇸 US', value: 'https://api.mailgun.net/v3'},
@@ -25,13 +26,16 @@ const MailGun: React.FC = () => {
         'mailgun_base_url', 'mailgun_domain', 'mailgun_api_key'
     ]) as string[];
 
-    const isMailgunSetup = mailgunRegion && mailgunDomain && mailgunApiKey;
+    const isMailgunSetup = mailgunDomain && mailgunApiKey;
 
     const data = isMailgunSetup ? [
         {
-            heading: 'Status',
             key: 'status',
-            value: 'Mailgun is set up ✅'
+            value: (
+                <div className='flex items-center'>
+                    <CheckIcon className='mr-2 h-4 w-4 text-green' /> Mailgun is set up
+                </div>
+            )
         }
     ] : [
         {
diff --git a/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx b/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx
index 589c20e96c..0a105fb8d8 100644
--- a/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx
@@ -5,6 +5,8 @@ import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupConten
 import TextField from '../../../admin-x-ds/global/TextField';
 import Toggle from '../../../admin-x-ds/global/Toggle';
 import useSettingGroup from '../../../hooks/useSettingGroup';
+import {ReactComponent as LockedIcon} from '../../../assets/icons/lock-locked.svg';
+import {ReactComponent as UnLockedIcon} from '../../../assets/icons/lock-unlocked.svg';
 
 const LockSite: React.FC = () => {
     const {
@@ -31,7 +33,17 @@ const LockSite: React.FC = () => {
             values={[
                 {
                     key: 'private',
-                    value: !passwordEnabled ? 'Your site is not password protected' : 'Your site is password protected'
+                    value: passwordEnabled ? (
+                        <div className='flex items-center  '>
+                            <LockedIcon className='mr-2 h-4 w-4 text-yellow' />
+                            <span>Your site is password protected</span>
+                        </div>
+                    ) : (
+                        <div className='flex items-center text-grey-900 '>
+                            <UnLockedIcon className='mr-2 h-4 w-4' />
+                            <span>Your site is not password protected</span>
+                        </div>
+                    )
                 }
             ]}
         />