Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -05:00
Code Issues Activity

Updated label typography

Browse source 
No ref
- Changed some labels in design and portal settings to be more consistent
This commit is contained in:
Sanne de Vries 2024-10-10 17:16:43 +01:00 • committed by Aileen Booker
parent 298a90e175
commit 30ca22ae81
3 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/admin-x-settings/src/components/settings/membership/portal/LookAndFeel.tsx
View file

@ -76,14 +76,14 @@ const LookAndFeel: React.FC<{
return <div className='mt-7'><Form>
<Toggle
checked={Boolean(portalButton)}
direction='rtl'
label='Show portal button'
labelStyle='heading'
onChange={e => updateSetting('portal_button', e.target.checked)}
/>
<Select
options={portalButtonOptions}
selectedOption={portalButtonOptions.find(option => option.value === portalButtonStyle)}
title='Portal button style'
title='Button style'
onSelect={option => updateSetting('portal_button_style', option?.value || null)}
/>
{portalButtonStyle?.toString()?.includes('icon') &&

6
apps/admin-x-settings/src/components/settings/membership/portal/SignupOptions.tsx
View file

@ -118,15 +118,15 @@ const SignupOptions: React.FC<{
return <div className='mt-7'><Form>
<Toggle
checked={Boolean(portalName)}
direction='rtl'
disabled={isDisabled}
label='Display name in signup form'
labelStyle='heading'
onChange={e => updateSetting('portal_name', e.target.checked)}
/>
<CheckboxGroup
checkboxes={tiersCheckboxes}
title='Tiers available at signup'
title='Available tiers'
/>
{arePaidTiersVisible && (
@ -152,7 +152,7 @@ const SignupOptions: React.FC<{
}
}
]}
title='Prices available at signup'
title='Available prices'
/>
{(portalPlans.includes('yearly') && portalPlans.includes('monthly')) &&
<Select

10
apps/admin-x-settings/src/components/settings/site/designAndBranding/GlobalSettings.tsx
View file

@ -4,7 +4,7 @@ import UnsplashSelector from '../../../selectors/UnsplashSelector';
import usePinturaEditor from '../../../../hooks/usePinturaEditor';
import {APIError} from '@tryghost/admin-x-framework/errors';
import {CUSTOM_FONTS} from '@tryghost/custom-fonts';
import {ColorPickerField, Form, Heading, Hint, ImageUpload, Select} from '@tryghost/admin-x-design-system';
import {ColorPickerField, Form, Hint, ImageUpload, Select} from '@tryghost/admin-x-design-system';
import {SettingValue, getSettingValues} from '@tryghost/admin-x-framework/api/settings';
import {getImageUrl, useUploadImage} from '@tryghost/admin-x-framework/api/images';
import {useFramework} from '@tryghost/admin-x-framework';
@ -61,14 +61,14 @@ const GlobalSettings: React.FC<{ values: GlobalSettingValues, updateSetting: (ke
<ColorPickerField
debounceMs={200}
direction='rtl'
title={<Heading className='mt-[3px]' level={6}>Accent color</Heading>}
title={<div>Accent color</div>}
value={values.accentColor}
// we debounce this because the color picker fires a lot of events.
onChange={value => updateSetting('accent_color', value)}
/>
<div className='flex items-start justify-between'>
<div>
<Heading level={6}>Publication icon</Heading>
<div>Publication icon</div>
<Hint className='!mt-0 mr-5 max-w-[160px]'>A square, social icon, at least 60x60px</Hint>
</div>
<div className='flex gap-3'>
@ -99,7 +99,7 @@ const GlobalSettings: React.FC<{ values: GlobalSettingValues, updateSetting: (ke
</div>
<div className={`flex items-start justify-between ${values.icon && 'mt-2'}`}>
<div>
<Heading level={6}>Publication logo</Heading>
<div>Publication logo</div>
<Hint className='!mt-0 mr-5 max-w-[160px]'>Appears usually in the main header of your theme</Hint>
</div>
<div>
@ -130,7 +130,7 @@ const GlobalSettings: React.FC<{ values: GlobalSettingValues, updateSetting: (ke
</div>
<div className='mt-2 flex items-start justify-between'>
<div>
<Heading level={6}>Publication cover</Heading>
<div>Publication cover</div>
<Hint className='!mt-0 mr-5 max-w-[160px]'>Usually as a large banner image on your index pages</Hint>
</div>
<ImageUpload