-
-
+
+ {tabs.length > 1 ?
+
+ :
+
+ }
-
-
-
-
);
};
@@ -132,7 +114,7 @@ const DesignModal: React.FC = () => {
}
}, [setFormState, themeSettings]);
- const updateBrandSetting = (key: string, value: SettingValue) => {
+ const updateGlobalSetting = (key: string, value: SettingValue) => {
updateForm(state => ({...state, settings: state.settings.map(setting => (
setting.key === key ? {...setting, value, dirty: true} : setting
))}));
@@ -144,7 +126,7 @@ const DesignModal: React.FC = () => {
))}));
};
- const [description, accentColor, icon, logo, coverImage] = getSettingValues(formState.settings, ['description', 'accent_color', 'icon', 'logo', 'cover_image']) as string[];
+ const [description, accentColor, icon, logo, coverImage, headingFont, bodyFont] = getSettingValues(formState.settings, ['description', 'accent_color', 'icon', 'logo', 'cover_image', 'heading_font', 'body_font']) as string[];
const themeSettingGroups = (formState.themeSettings || []).reduce((groups, setting) => {
const group = (setting.group === 'homepage' || setting.group === 'post') ? setting.group : 'site-wide';
@@ -201,16 +183,18 @@ const DesignModal: React.FC = () => {
icon,
logo,
coverImage,
- themeSettings: formState.themeSettings
+ themeSettings: formState.themeSettings,
+ headingFont,
+ bodyFont
}}
url={selectedTabURL}
/>;
const sidebarContent =
;
diff --git a/apps/admin-x-settings/src/components/settings/site/DesignSetting.tsx b/apps/admin-x-settings/src/components/settings/site/DesignSetting.tsx
index 42e1fa0fd0..66f865980d 100644
--- a/apps/admin-x-settings/src/components/settings/site/DesignSetting.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/DesignSetting.tsx
@@ -1,3 +1,4 @@
+import DesignSettingsImg from '../../../assets/images/design-settings.png';
import React from 'react';
import TopLevelGroup from '../../TopLevelGroup';
import {Button, withErrorBoundary} from '@tryghost/admin-x-design-system';
@@ -12,12 +13,13 @@ const DesignSetting: React.FC<{ keywords: string[] }> = ({keywords}) => {
return (
}
- description="Customize the theme, colors, and layout of your site"
+ description="Customize the style and layout of your site"
keywords={keywords}
navid='design'
testId='design'
- title="Design & branding"
- />
+ title="Design & branding">
+ 
+
);
};
diff --git a/apps/admin-x-settings/src/components/settings/site/SiteSettings.tsx b/apps/admin-x-settings/src/components/settings/site/SiteSettings.tsx
index 0daaa1ae54..bb71dd7493 100644
--- a/apps/admin-x-settings/src/components/settings/site/SiteSettings.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/SiteSettings.tsx
@@ -1,4 +1,5 @@
import AnnouncementBar from './AnnouncementBar';
+import ChangeTheme from './ChangeTheme';
import DesignSetting from './DesignSetting';
import Navigation from './Navigation';
import React from 'react';
@@ -6,6 +7,7 @@ import SearchableSection from '../../SearchableSection';
export const searchKeywords = {
design: ['site', 'logo', 'cover', 'colors', 'fonts', 'background', 'themes', 'appearance', 'style', 'design & branding', 'design and branding'],
+ theme: ['theme', 'template', 'upload'],
navigation: ['site', 'navigation', 'menus', 'primary', 'secondary', 'links'],
announcementBar: ['site', 'announcement bar', 'important', 'banner']
};
@@ -15,6 +17,7 @@ const SiteSettings: React.FC = () => {
<>
+
diff --git a/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx b/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
index 59bbe85229..c79bb4c655 100644
--- a/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
@@ -6,7 +6,7 @@ import React, {useEffect, useState} from 'react';
import ThemeInstalledModal from './theme/ThemeInstalledModal';
import ThemePreview from './theme/ThemePreview';
import useQueryParams from '../../../hooks/useQueryParams';
-import {Breadcrumbs, Button, ConfirmationModal, FileUpload, LimitModal, Modal, PageHeader, TabView, showToast} from '@tryghost/admin-x-design-system';
+import {Button, ConfirmationModal, FileUpload, LimitModal, Modal, PageHeader, TabView, showToast} from '@tryghost/admin-x-design-system';
import {HostLimitError, useLimiter} from '../../../hooks/useLimiter';
import {InstalledTheme, Theme, ThemesInstallResponseType, isDefaultOrLegacyTheme, useActivateTheme, useBrowseThemes, useInstallTheme, useUploadTheme} from '@tryghost/admin-x-framework/api/themes';
import {JSONError} from '@tryghost/admin-x-framework/errors';
@@ -54,11 +54,11 @@ const ThemeToolbar: React.FC
= ({
setCurrentTab,
themes
}) => {
+ const modal = useModal();
const {updateRoute} = useRouting();
const {mutateAsync: uploadTheme} = useUploadTheme();
const limiter = useLimiter();
const handleError = useHandleError();
- const refParam = useQueryParams().getParam('ref');
const [uploadConfig, setUploadConfig] = useState<{enabled: boolean; error?: string}>();
@@ -80,11 +80,7 @@ const ThemeToolbar: React.FC = ({
}, [limiter]);
const onClose = () => {
- if (refParam) {
- updateRoute(`design/edit?ref=${refParam}`);
- } else {
- updateRoute('design/edit');
- }
+ updateRoute('/');
};
const onThemeUpload = async (file: File) => {
@@ -169,7 +165,7 @@ const ThemeToolbar: React.FC = ({
title,
prompt,
fatalErrors,
- onRetry: async (modal) => {
+ onRetry: async () => {
modal?.remove();
handleUpload();
}
@@ -219,17 +215,18 @@ const ThemeToolbar: React.FC = ({
};
const left =
-
+ ;
+ onTabChange={(id: string) => {
+ setCurrentTab(id);
+ }} />
+