From 28aa5c0cdc1d9e84296e684bd21da40c41dab6a8 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Mon, 22 May 2023 09:13:25 +0200
Subject: [PATCH] Admin X Settings minor refinements

refs. https://github.com/TryGhost/Team/issues/3150

Spacing between setting values, input fields and headings were a bit too loose.
---
 ghost/admin-x-settings/src/admin-x-ds/global/Dropdown.tsx     | 2 +-
 ghost/admin-x-settings/src/admin-x-ds/global/TextField.tsx    | 2 +-
 .../src/admin-x-ds/settings/SettingGroupContent.tsx           | 2 +-
 .../admin-x-settings/src/admin-x-ds/settings/SettingValue.tsx | 2 +-
 .../src/components/settings/email/Mailgun.tsx                 | 4 ++--
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Dropdown.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Dropdown.tsx
index 587822e8bb..2a62997523 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Dropdown.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/Dropdown.tsx
@@ -36,7 +36,7 @@ const Dropdown: React.FC<DropdownProps> = ({title, prompt, options, onSelect, er
     return (
         <div className='flex flex-col'>
             {title && <Heading useLabelTag={true}>{title}</Heading>}
-            <select className={`-m-1 h-10 border-b ${error ? `border-red` : `border-grey-300 hover:border-grey-500 focus:border-grey-900`} py-2 ${title && `mt-0`}`} value={selectedOption} onChange={handleOptionChange}>
+            <select className={`-mx-1 -mt-1 h-10 border-b ${error ? `border-red` : `border-grey-500 hover:border-grey-600 focus:border-grey-900`} py-2 ${title && `mt-0`}`} value={selectedOption} onChange={handleOptionChange}>
                 {prompt && <option value="">{prompt}</option>}
                 {options.map(option => (
                     <option
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/TextField.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/TextField.tsx
index 99642b5be7..11c571e863 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/TextField.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/TextField.tsx
@@ -19,7 +19,7 @@ const TextField: React.FC<ITextField> = ({inputRef, title, value, error, placeho
             {title && <Heading useLabelTag={true}>{title}</Heading>}
             <input
                 ref={inputRef} 
-                className={`-mx-1 h-10 border-b ${error ? `border-red` : `border-grey-500 hover:border-grey-600 focus:border-grey-900`} px-1 py-2 ${title && `mt-0`}`} 
+                className={`-mx-1 -mt-1 h-10 border-b ${error ? `border-red` : `border-grey-500 hover:border-grey-600 focus:border-grey-900`} px-1 py-2 ${title && `mt-0`}`} 
                 defaultValue={value} 
                 placeholder={placeholder} 
                 type='text'
diff --git a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.tsx b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.tsx
index 4d6811c830..f6a03638bf 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.tsx
@@ -14,7 +14,7 @@ interface ISettingGroupContent {
 }
 
 const SettingGroupContent: React.FC<ISettingGroupContent> = ({columns, values, children}) => {
-    let styles = 'flex flex-col gap-6';
+    let styles = 'flex flex-col gap-x-6 gap-y-8';
     if (columns === 2) {
         styles = 'grid grid-cols-2 gap-6';
     }
diff --git a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingValue.tsx b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingValue.tsx
index c69941cf9b..4abd40ab95 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingValue.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingValue.tsx
@@ -13,7 +13,7 @@ const SettingValue: React.FC<ISettingValue> = ({heading, value, hint, ...props})
     return (
         <div className='flex flex-col' {...props}>
             {heading && <Heading grey={true} level={6}>{heading}</Heading>}
-            <div className={`flex items-center ${heading && `min-h-[40px]`}`}>{value}</div>
+            <div className={`-mt-1 flex items-center ${heading && `min-h-[40px]`}`}>{value}</div>
             {hint && <p className='mt-0.5 text-xs'>{hint}</p>}
         </div>
     );
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 ac17716d13..5c5bc953a9 100644
--- a/ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx
+++ b/ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx
@@ -28,7 +28,7 @@ const MailGun: React.FC = () => {
 
     const inputs = (
         <SettingGroupContent>
-            <div className='grid grid-cols-2 gap-6'>
+            <div className='grid grid-cols-[0.25fr_0.75fr] gap-6'>
                 <Dropdown
                     defaultSelectedOption='option-1'
                     options={[
@@ -43,7 +43,7 @@ const MailGun: React.FC = () => {
                 />
                 <div className='col-span-2'>
                     <TextField 
-                        hint={<>Find your Mailgun API keys<Link href="https://app.mailgun.com/app/account/security/api_keys" target="_blank">here</Link></>}
+                        hint={<>Find your Mailgun API keys <Link href="https://app.mailgun.com/app/account/security/api_keys" rel="noopener noreferrer" target="_blank">here</Link></>}
                         title='Mailgun private API key'
                     />
                 </div>