AdminX settings GA design refinements (#18332)

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

- some minor copy had to be updated
- we had a little bug in the small version of dropdowns
- the crash page was just a plain text without any way out (e.g. allowing navigating to dashboard)

apps/admin-x-settings/src/admin-x-ds/global/form/Select.tsx

@@ -122,8 +122,8 @@ const Select: React.FC<SelectProps> = ({
     const customClasses = {
         control: clsx(
             controlClasses?.control,
-            'min-h-[40px] w-full cursor-pointer appearance-none pr-4 outline-none dark:text-white',
-            size === 'xs' ? 'py-0 text-xs' : 'py-2',
+            'min-h-[40px] w-full cursor-pointer appearance-none outline-none dark:text-white',
+            size === 'xs' ? 'py-0 pr-2 text-xs' : 'py-2 pr-4',
             border && 'border-b',
             !clearBg && 'bg-grey-75 px-[10px] dark:bg-grey-950',
             error ? 'border-red' : 'border-grey-500 hover:border-grey-700 dark:border-grey-800 dark:hover:border-grey-700',

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

@@ -75,7 +75,7 @@ const Sidebar: React.FC = () => {
             </div>
             <div className="no-scrollbar hidden pt-10 tablet:!visible tablet:!block tablet:h-[calc(100vh-5vmin-84px-64px)] tablet:w-[240px] tablet:overflow-y-auto" id='admin-x-settings-sidebar'>
                 <SettingNavSection keywords={Object.values(generalSearchKeywords).flat()} title="General">
-                    <SettingNavItem keywords={generalSearchKeywords.titleAndDescription} navid='title-and-description' title="Title and description" onClick={handleSectionClick} />
+                    <SettingNavItem keywords={generalSearchKeywords.titleAndDescription} navid='title-and-description' title="Title & description" onClick={handleSectionClick} />
                     <SettingNavItem keywords={generalSearchKeywords.timeZone} navid='timezone' title="Timezone" onClick={handleSectionClick} />
                     <SettingNavItem keywords={generalSearchKeywords.publicationLanguage} navid='publication-language' title="Publication language" onClick={handleSectionClick} />
                     <SettingNavItem keywords={generalSearchKeywords.metadata} navid='metadata' title="Meta data" onClick={handleSectionClick} />
@@ -87,7 +87,7 @@ const Sidebar: React.FC = () => {
                 </SettingNavSection>
 
                 <SettingNavSection keywords={Object.values(siteSearchKeywords).flat()} title="Site">
-                    <SettingNavItem keywords={siteSearchKeywords.design} navid='design' title="Branding and design" onClick={handleSectionClick} />
+                    <SettingNavItem keywords={siteSearchKeywords.design} navid='design' title="Design & branding" onClick={handleSectionClick} />
                     <SettingNavItem keywords={siteSearchKeywords.navigation} navid='navigation' title="Navigation" onClick={handleSectionClick} />
                     <SettingNavItem keywords={siteSearchKeywords.announcementBar} navid='announcement-bar' title="Announcement bar" onClick={handleSectionClick} />
                 </SettingNavSection>

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

@@ -13,11 +13,11 @@ const DesignSetting: React.FC<{ keywords: string[] }> = ({keywords}) => {
     return (
         <SettingGroup
             customButtons={<Button color='green' label='Customize' link linkWithPadding onClick={openPreviewModal}/>}
-            description="Customize the look and feel of your site"
+            description="Customize the theme, colors, and layout of your site"
             keywords={keywords}
             navid='design'
             testId='design'
-            title="Branding and design"
+            title="Design & branding"
         />
     );
 };

ghost/admin/app/components/admin-x/settings.js

@@ -196,7 +196,13 @@ class ErrorHandler extends React.Component {
     render() {
         if (this.state.hasError) {
             return (
-                <p className="admin-x-settings-container-error">Loading has failed. Try refreshing the browser!</p>
+                <div className="admin-x-settings-container-error">
+                    <div className="admin-x-settings-error">
+                        <h1>Loading interrupted</h1>
+                        <p>They say life is a series of trials and tribulations. This moment right here? It's a tribulation. Our app was supposed to load, and yet here we are. Loadless. Click back to the dashboard to try again.</p>
+                        <a href={ghostPaths().adminRoot}>&larr; Back to the dashboard</a>
+                    </div>
+                </div>
             );
         }
 

ghost/admin/app/styles/layouts/main.css

@@ -2244,3 +2244,40 @@ section.gh-ds h2 {
     height: 40px;
     line-height: 40px;
 }
+
+.admin-x-settings-container-error {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background: var(--whitegrey-l2);
+}
+
+.admin-x-settings-error {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+    background: white;
+    box-shadow: var(--box-shadow-m);
+    border-radius: 20px;
+    padding: 5vmin;
+    max-width: 640px;
+    color: var(--darkgrey);
+}
+
+.admin-x-settings-container-error p,
+.admin-x-settings-container-error h1 {
+    margin: 0;
+    padding: 0;
+}
+
+.admin-x-settings-container-error a {
+    display: inline-block;
+    padding: 6px 10px;
+    border: 1px solid var(--green);
+    border-radius: 4px;
+    margin-top: 8px;
+}