TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 20:03:12 +03:00
Code Issues Projects Releases Wiki Activity

AdminX design updates (#18238)

Browse Source 
refs. https://github.com/TryGhost/Product/issues/3349
This commit is contained in:
Peter Zimon 2023-09-20 17:38:36 +03:00 committed by GitHub
parent 7439e68628
commit 02692a15e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/admin-x-settings/src/admin-x-ds/global/Banner.tsx
View File

@ -13,15 +13,15 @@ const Banner: React.FC<BannerProps> = ({color = 'grey', children, className}) =>
color === 'grey' && 'text-black',
color === 'blue' && 'text-blue',
color === 'green' && 'text-green',
color === 'yellow' && 'text-yellow',
color === 'yellow' && 'text-yellow-600',
color === 'red' && 'text-red',
`before:absolute before:inset-0 before:block before:opacity-10 before:content-['']`,
color === 'grey' && 'before:bg-grey-500',
color === 'blue' && 'before:bg-blue',
color === 'green' && 'before:bg-green',
color === 'yellow' && 'before:bg-yellow',
color === 'red' && 'before:bg-red',
`after:pointer-events-none after:absolute after:inset-0 after:block after:opacity-10 after:content-['']`,
color === 'grey' && 'after:bg-grey-500',
color === 'blue' && 'after:bg-blue',
color === 'green' && 'after:bg-green',
color === 'yellow' && 'after:bg-yellow',
color === 'red' && 'after:bg-red',
className
);

24
apps/admin-x-settings/src/components/settings/email/EnableNewsletters.tsx
View File

@ -1,14 +1,17 @@
import Banner from '../../../admin-x-ds/global/Banner';
import Icon from '../../../admin-x-ds/global/Icon';
import React from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import Toggle from '../../../admin-x-ds/global/form/Toggle';
import useRouting from '../../../hooks/useRouting';
import {Setting, getSettingValues, useEditSettings} from '../../../api/settings';
import {useGlobalData} from '../../providers/GlobalDataProvider';
const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
const {settings} = useGlobalData();
const {mutateAsync: editSettings} = useEditSettings();
const {updateRoute} = useRouting();
const [newslettersEnabled, membersSignupAccess] = getSettingValues<string>(settings, ['editor_default_email_recipients', 'members_signup_access']);
@ -29,9 +32,8 @@ const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
const enableToggle = (
<>
<Toggle
checked={isDisabled ? false : newslettersEnabled !== 'disabled'}
checked={newslettersEnabled !== 'disabled'}
direction='rtl'
disabled={isDisabled}
onChange={handleToggleChange}
/>
</>
@ -46,23 +48,27 @@ const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
title='Newsletter sending'
>
<SettingGroupContent
columns={1}
values={[
{
key: 'private',
value: (!isDisabled && newslettersEnabled !== 'disabled') ? (
value: (newslettersEnabled !== 'disabled') ? (<div className='w-full'>
<div className='flex items-center gap-2'>
<Icon colorClass='text-green' name='check' size='sm' />
<span>Enabled</span>
</div>
) : (
{isDisabled &&
<Banner className='mt-6 text-sm' color='grey'>
Your <button className='!underline' type="button" onClick={() => {
updateRoute('access');
}}>Subscription access</button> is set to &lsquo;Nobody&rsquo;, only existing members will receive newsletters.
</Banner>
}
</div>) :
<div className='flex items-center gap-2 text-grey-900'>
<Icon colorClass='text-grey-600' name='mail-block' size='sm' />
<span>
Disabled
{isDisabled && ' by Access settings'}
</span>
<span>Disabled</span>
</div>
)
}
]}
/>