Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Updated spacing in custom theme settings

Browse source
This commit is contained in:
Peter Zimon 2024-10-10 17:53:13 +01:00 • committed by Aileen Booker
parent 8b28694c31
commit 123f34b252
2 changed files with 23 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/admin-x-design-system/src/global/form/Form.tsx
View file

@ -5,8 +5,8 @@ import Heading from '../Heading';
export interface FormProps {
title?: string;
grouped?: boolean;
gap?: 'none' | 'sm' | 'md' | 'lg';
margins?: 'none' | 'sm' | 'md' | 'lg';
gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg';
margins?: 'none' | 'xs' | 'sm' | 'md' | 'lg';
marginTop?: boolean;
marginBottom?: boolean;
className?: string;
@ -28,6 +28,7 @@ const Form: React.FC<FormProps> = ({
}) => {
let classes = clsx(
'flex flex-col',
(gap === 'xs' && 'gap-4'),
(gap === 'sm' && 'gap-6'),
(gap === 'md' && 'gap-8'),
(gap === 'lg' && 'gap-11')

28
apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx
View file

@ -20,15 +20,27 @@ const ThemeSettings: React.FC<ThemeSettingsProps> = ({sections, updateSetting})
const filteredSettings = section.settings.filter(setting => isCustomThemeSettingVisible(setting, section.settings.reduce((obj, {key, value}) => ({...obj, [key]: value}), {}))
);
let previousType: string | undefined;
return (
<Form key={section.id} className='first-of-type:mt-6' gap='sm' margins='lg' title={section.title}>
{filteredSettings.map(setting => (
<ThemeSetting
key={setting.key}
setSetting={value => updateSetting({...setting, value} as CustomThemeSetting)}
setting={setting}
/>
))}
<Form key={section.id} className='first-of-type:mt-6' gap='xs' margins='lg' title={section.title}>
{filteredSettings.map((setting) => {
let spaceClass = '';
if (setting.type === 'boolean' && previousType !== 'boolean' && previousType !== undefined) {
spaceClass = 'mt-3';
}
if ((setting.type === 'text' || setting.type === 'select') && (previousType === 'text' || previousType === 'select')) {
spaceClass = 'mt-2';
}
previousType = setting.type;
return <div key={setting.key} className={spaceClass}>
<ThemeSetting
key={setting.key}
setSetting={value => updateSetting({...setting, value} as CustomThemeSetting)}
setting={setting}
/>
</div>;
})}
</Form>
);
})}