Broke down design settings in AdminX

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

ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx

@@ -71,8 +71,10 @@ const Modal: React.FC<ModalProps> = ({
         }
     }
 
-    //bg-[linear-gradient(0deg,rgba(255,255,255,1)_85%,rgba(255,255,255,0)_100%)]
+    let modalClasses = clsx(
-    let modalClasses = clsx('relative z-50 mx-auto flex w-full flex-col justify-between rounded bg-white shadow-xl');
+        'relative z-50 mx-auto flex w-full flex-col justify-between rounded bg-white shadow-xl'
+        // !stickyFooter && ' overflow-hidden'
+    );
     let backdropClasses = clsx('fixed inset-0 z-40 h-[100vh] w-[100vw] overflow-y-scroll ');
 
     let padding = '';

ghost/admin-x-settings/src/components/settings/site/modals/DesignModal.tsx

@@ -1,124 +1,35 @@
+import BrandSettings from './designAndBranding/BrandSettings';
 import Button from '../../../../admin-x-ds/global/Button';
-import DesktopChrome from '../../../../admin-x-ds/global/DesktopChrome';
-import Heading from '../../../../admin-x-ds/global/Heading';
-import Hint from '../../../../admin-x-ds/global/Hint';
 import NiceModal from '@ebay/nice-modal-react';
 import PreviewModal from '../../../../admin-x-ds/global/PreviewModal';
 import React from 'react';
 import SettingGroup from '../../../../admin-x-ds/settings/SettingGroup';
-import SettingGroupContent from '../../../../admin-x-ds/settings/SettingGroupContent';
 import TabView from '../../../../admin-x-ds/global/TabView';
-import TextField from '../../../../admin-x-ds/global/TextField';
+import ThemePreview from './designAndBranding/ThemePreivew';
-import useSettingGroup from '../../../../hooks/useSettingGroup';
+import ThemeSettings from './designAndBranding/ThemeSettings';
 import {Tab} from '../../../../admin-x-ds/global/TabView';
 
-const Preview: React.FC = () => {
-    return (
-        <>
-            <DesktopChrome>
-                <div className='flex h-full items-center justify-center bg-grey-50 text-sm text-grey-400'>
-                    Preview iframe
-                </div>
-            </DesktopChrome>
-        </>
-    );
-};
-
-const Brand: React.FC = () => {
-    const {
-        getSettingValues
-    } = useSettingGroup();
-
-    const [description, accentColor] = getSettingValues(['description', 'accent_color']) as string[];
-
-    return (
-        <div className='mt-7'>
-            <SettingGroupContent>
-                <TextField 
-                    key='site-description'
-                    clearBg={true}
-                    hint='Used in your theme, meta data and search results' 
-                    title='Site description'
-                    value={description}
-                />
-                <div className='flex items-center justify-between gap-3'>
-                    <Heading level={6}>Accent color</Heading>
-                    <div className='relative max-w-[70px]'>
-                        {/* <span className='absolute left-1 top-[9px] text-grey-600'>#</span> */}
-                        <TextField 
-                            key='accent-color'
-                            className='text-right'
-                            clearBg={true}
-                            maxLength={7}
-                            value={accentColor}
-                        />
-                    </div>
-                </div>
-                <div>
-                    <Heading level={6}>Publication icon</Heading>
-                    <div className='mt-2 flex gap-3'>
-                        <Hint className='mr-5'>A square, social icon, at least 60x60px</Hint>
-                        <Button color='grey' label='Upload icon' />
-                    </div>
-                </div>
-                <div>
-                    <Heading level={6}>Publication logo</Heading>
-                    <Button className='mt-2' color='grey' fullWidth={true} label='Upload logo' />
-                </div>
-                <div>
-                    <Heading level={6}>Publication cover</Heading>
-                    <Button className='mt-2' color='grey' fullWidth={true} label='Upload cover' />
-                </div>
-            </SettingGroupContent>
-        </div>
-    );
-};
-
-const SiteWide: React.FC = () => {
-    return (
-        <div className='mt-2'>
-            Site wide design settings
-        </div>
-    );
-};
-
-const Homepage: React.FC = () => {
-    return (
-        <div className='mt-2'>
-            Homepage design settings
-        </div>
-    );
-};
-
-const Post: React.FC = () => {
-    return (
-        <div className='mt-2'>
-            Post design settings
-        </div>
-    );
-};
-
 const Sidebar: React.FC = () => {
     const tabs: Tab[] = [
         {
             id: 'brand',
             title: 'Brand',
-            contents: <Brand />
+            contents: <BrandSettings />
         },
         {
             id: 'site-wide',
             title: 'Site wide',
-            contents: <SiteWide />
+            contents: <ThemeSettings settingSection='site-wide' />
         },
         {
             id: 'homepage',
             title: 'Homepage',
-            contents: <Homepage />
+            contents: <ThemeSettings settingSection='homepage' />
         },
         {
             id: 'post',
             title: 'Post',
-            contents: <Post />
+            contents: <ThemeSettings settingSection='post' />
         }
     ];
 
@@ -132,7 +43,7 @@ const DesignModal: React.FC = () => {
         NiceModal.show(PreviewModal, {
             title: 'Design',
             okLabel: 'Save',
-            preview: <Preview />,
+            preview: <ThemePreview />,
             sidebar: <Sidebar />
         });
     };

ghost/admin-x-settings/src/components/settings/site/modals/designAndBranding/BrandSettings.tsx

@@ -0,0 +1,59 @@
+import Button from '../../../../../admin-x-ds/global/Button';
+import Heading from '../../../../../admin-x-ds/global/Heading';
+import Hint from '../../../../../admin-x-ds/global/Hint';
+import React from 'react';
+import SettingGroupContent from '../../../../../admin-x-ds/settings/SettingGroupContent';
+import TextField from '../../../../../admin-x-ds/global/TextField';
+import useSettingGroup from '../../../../../hooks/useSettingGroup';
+
+const BrandSettings: React.FC = () => {
+    const {
+        getSettingValues
+    } = useSettingGroup();
+
+    const [description, accentColor] = getSettingValues(['description', 'accent_color']) as string[];
+
+    return (
+        <div className='mt-7'>
+            <SettingGroupContent>
+                <TextField
+                    key='site-description'
+                    clearBg={true}
+                    hint='Used in your theme, meta data and search results'
+                    title='Site description'
+                    value={description}
+                />
+                <div className='flex items-center justify-between gap-3'>
+                    <Heading level={6}>Accent color</Heading>
+                    <div className='relative max-w-[70px]'>
+                        {/* <span className='absolute left-1 top-[9px] text-grey-600'>#</span> */}
+                        <TextField
+                            key='accent-color'
+                            className='text-right'
+                            clearBg={true}
+                            maxLength={7}
+                            value={accentColor}
+                        />
+                    </div>
+                </div>
+                <div>
+                    <Heading level={6}>Publication icon</Heading>
+                    <div className='mt-2 flex gap-3'>
+                        <Hint className='mr-5'>A square, social icon, at least 60x60px</Hint>
+                        <Button color='grey' label='Upload icon' />
+                    </div>
+                </div>
+                <div>
+                    <Heading level={6}>Publication logo</Heading>
+                    <Button className='mt-2' color='grey' fullWidth={true} label='Upload logo' />
+                </div>
+                <div>
+                    <Heading level={6}>Publication cover</Heading>
+                    <Button className='mt-2' color='grey' fullWidth={true} label='Upload cover' />
+                </div>
+            </SettingGroupContent>
+        </div>
+    );
+};
+
+export default BrandSettings;

ghost/admin-x-settings/src/components/settings/site/modals/designAndBranding/ThemePreivew.tsx

@@ -0,0 +1,16 @@
+import DesktopChrome from '../../../../../admin-x-ds/global/DesktopChrome';
+import React from 'react';
+
+const ThemePreview: React.FC = () => {
+    return (
+        <>
+            <DesktopChrome>
+                <div className='flex h-full items-center justify-center bg-grey-50 text-sm text-grey-400'>
+                        Preview iframe
+                </div>
+            </DesktopChrome>
+        </>
+    );
+};
+
+export default ThemePreview;

ghost/admin-x-settings/src/components/settings/site/modals/designAndBranding/ThemeSettings.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+type ThemeSettingSection = 'site-wide' | 'homepage' | 'post';
+
+interface ThemeSettingsProps {
+    settingSection: ThemeSettingSection;
+}
+
+const ThemeSettings: React.FC<ThemeSettingsProps> = ({settingSection}) => {
+    return (
+        <>
+            {settingSection}
+        </>
+    );
+};
+
+export default ThemeSettings;