Updated theme setting copy in AdminX

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

ghost/admin-x-settings/src/components/Sidebar.tsx

@@ -25,6 +25,7 @@ const Sidebar: React.FC = () => {
             </SettingNavSection>
 
             <SettingNavSection title="Site">
+                <SettingNavItem navid='theme' title="Theme" onClick={handleSectionClick} />
                 <SettingNavItem navid='branding-and-design' title="Branding and design" onClick={handleSectionClick} />
                 <SettingNavItem navid='navigation' title="Navigation" onClick={handleSectionClick} />
             </SettingNavSection>

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

@@ -1,9 +1,7 @@
 import BrandSettings, {BrandSettingValues} from './designAndBranding/BrandSettings';
-import ChangeThemeModal from './designAndBranding/ChangeThemeModal';
 import ConfirmationModal from '../../../admin-x-ds/global/ConfirmationModal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useContext, useEffect, useState} from 'react';
-import StickyFooter from '../../../admin-x-ds/global/StickyFooter';
 import TabView, {Tab} from '../../../admin-x-ds/global/TabView';
 import ThemePreview from './designAndBranding/ThemePreview';
 import ThemeSettings from './designAndBranding/ThemeSettings';
@@ -20,14 +18,12 @@ const Sidebar: React.FC<{
     themeSettingSections: Array<{id: string, title: string, settings: CustomThemeSetting[]}>
     updateThemeSetting: (updated: CustomThemeSetting) => void
     onTabChange: (id: string) => void
-    onChangeTheme: () => void
 }> = ({
     brandSettings,
     updateBrandSetting,
     themeSettingSections,
     updateThemeSetting,
-    onTabChange,
+    onTabChange
-    onChangeTheme
 }) => {
     const tabs: Tab[] = [
         {
@@ -47,12 +43,6 @@ const Sidebar: React.FC<{
             <div className='p-7'>
                 <TabView tabs={tabs} onTabChange={onTabChange} />
             </div>
-            <StickyFooter>
-                <button className='m m-3 flex w-full cursor-pointer flex-col rounded p-4 transition-all hover:bg-grey-100' type='button' onClick={onChangeTheme}>
-                    <strong>Change theme</strong>
-                    <span className='text-sm text-grey-600'>Casper</span>
-                </button>
-            </StickyFooter>
         </>
     );
 };
@@ -165,10 +155,6 @@ const DesignModal: React.FC = () => {
         }
     };
 
-    const showThemeModal = () => {
-        NiceModal.show(ChangeThemeModal);
-    };
-
     let selectedTabURL = getHomepageUrl(siteData!);
     switch (selectedPreviewTab) {
     case 'homepage':
@@ -197,7 +183,6 @@ const DesignModal: React.FC = () => {
             themeSettingSections={themeSettingSections}
             updateBrandSetting={updateBrandSetting}
             updateThemeSetting={updateThemeSetting}
-            onChangeTheme={showThemeModal}
             onTabChange={onTabChange}
         />;
 

ghost/admin-x-settings/src/components/settings/site/DesignSetting.tsx

@@ -12,7 +12,7 @@ const DesignSetting: React.FC = () => {
     return (
         <SettingGroup
             customButtons={<Button color='green' label='Customize' link onClick={openPreviewModal}/>}
-            description="Customize your site and manage themes"
+            description="Customize the look and feel of your site"
             navid='branding-and-design'
             testId='design'
             title="Branding and design"

ghost/admin-x-settings/src/components/settings/site/SiteSettings.tsx

@@ -7,8 +7,8 @@ const SiteSettings: React.FC = () => {
     return (
         <>
             <SettingSection title="Site">
-                <DesignSetting />
                 <Theme />
+                <DesignSetting />
             </SettingSection>
         </>
     );