Admin X newsletter settings title alignment (#17435)

refs https://github.com/TryGhost/Product/issues/3601

- Added static button group which will control newsletter title
alignment as a placeholder until we implement something like a Segmented
Control component
- Made the newsletter preview box shadow more subtle and fixed the
background color issue

apps/admin-x-settings/src/admin-x-ds/assets/icons/align-center.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9 1.5H1"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.5 5h-5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9 8.5H1"></path></svg>

apps/admin-x-settings/src/admin-x-ds/assets/icons/align-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1 1.5h8"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1 5h5.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1 8.5h8"></path></svg>

apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx

@@ -1,6 +1,7 @@
 import Form from '../../../../admin-x-ds/global/form/Form';
 import NiceModal from '@ebay/nice-modal-react';
 
+import ButtonGroup from '../../../../admin-x-ds/global/ButtonGroup';
 import Heading from '../../../../admin-x-ds/global/Heading';
 import Hint from '../../../../admin-x-ds/global/Hint';
 import Icon from '../../../../admin-x-ds/global/Icon';
@@ -108,9 +109,33 @@ const Sidebar: React.FC = () => {
                 <Select containerClassName="-mt-[16px]" options={selectOptions} onSelect={(value: string) => {
                     alert(value);
                 }}/>
-                <Select options={selectOptions} title="Body style" onSelect={(value: string) => {
-                    alert(value);
-                }}/>
+                <div className="flex items-end">
+                    <div className="w-full pr-4">
+                        <Select containerClassName="" options={selectOptions} title="Body style" onSelect={(value: string) => {
+                            alert(value);
+                        }}/>
+                    </div>
+                    <ButtonGroup buttons={[
+                        {
+                            icon: 'align-left',
+                            label: 'Align left',
+                            hideLabel: true,
+                            link: false,
+                            size: 'sm',
+                            iconColorClass: 'text-grey-500'
+                        },
+                        {
+                            icon: 'align-center',
+                            label: 'Align center',
+                            hideLabel: true,
+                            link: false,
+                            size: 'sm',
+                            iconColorClass: 'text-grey-900'
+                        }
+                    ]}
+                    className="mb-1 !gap-0"
+                    />
+                </div>
                 <Toggle
                     direction="rtl"
                     label='Feature image'

apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreview.tsx

@@ -6,14 +6,16 @@ const NewsletterPreview: React.FC = () => {
     return (
         <div className="relative flex grow flex-col">
             <div className="GIGI absolute inset-0 m-5">
-                <div className="mx-auto my-0 flex h-full w-full max-w-[700px] flex-col overflow-hidden rounded-[4px] text-black shadow-xl">
+                <div className="mx-auto my-0 flex h-full w-full max-w-[700px] flex-col overflow-hidden rounded-[4px] text-black shadow-sm">
 
                     {/* Email header */}
                     <div className="flex-column flex min-h-[77px] justify-center rounded-t-sm border-b border-grey-200 bg-grey-100 px-6 text-sm text-grey-700">
                         <p className="leading-normal"><span className="font-semibold text-grey-900">Ghost</span><span> noreply@localhost</span></p>
                         <p className="leading-normal"><span className="font-semibold text-grey-900">To:</span> Jamie Larson jamie@example.com</p>
                     </div>
-                    <div className="overflow-y-auto px-20 text-sm">
+
+                    {/* Email content */}
+                    <div className="overflow-y-auto bg-white px-20 text-sm">
                         <div>
                             <img alt="" className="mt-6 block" src="https://images.unsplash.com/photo-1681898190846-0a133b5b7fe0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80"/>
                         </div>