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

Added static design to success screen to offers in AdminX

Browse source 
refs https://github.com/TryGhost/Product/issues/4149
This commit is contained in:
Sodbileg Gansukh 2023-11-15 14:51:38 +08:00
parent 0a3db4cab6
commit a083ce35b9
2 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/admin-x-design-system/src/assets/icons/linkedin.svg Normal file
View file

@ -0,0 +1 @@
<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M5.315625 21.215625H0.759375V8.15625h4.55625Zm9.459375 -8.803125000000001a2.00625 2.00625 0 0 0 -2.00625 2.00625v6.796875H7.9781249999999995V8.15625h4.790625v1.490625a6.3374999999999995 6.3374999999999995 0 0 1 4.0125 -1.5c2.971875 0 5.034375 2.203125 5.034375 6.3843749999999995v6.684375H16.78125v-6.796875a2.00625 2.00625 0 0 0 -2.00625 -2.015625Zm-9.375 -8.774999999999999a2.34375 2.34375 0 1 1 -2.34375 -2.34375 2.34375 2.34375 0 0 1 2.325 2.34375Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 667 B

19
apps/admin-x-settings/src/components/settings/growth/offers/OfferSuccess.tsx
View file

@ -1,14 +1,27 @@
import NiceModal from '@ebay/nice-modal-react';
import {Button} from '@tryghost/admin-x-design-system';
import {Modal} from '@tryghost/admin-x-design-system';
const OfferSuccess = () => {
return <Modal
cancelLabel=''
header={false}
footer={false}
height='full'
size='lg'
topRightContent='close'
>
<h1>Success</h1>
<div className='flex h-full flex-col items-center justify-center text-center'>
<h1 className='text-4xl'>Your new offer is live!</h1>
<p className='mt-4 max-w-[510px] text-[1.6rem]'>You can share the link anywhere. In your newsletter, social media, a podcast, or in-person. It all just works.</p>
<div className='mt-8 flex w-full max-w-md flex-col gap-8'>
<Button color='green' label='Copy link' fullWidth />
<div className='flex items-center gap-4 text-xs font-medium before:h-px before:grow before:bg-grey-300 before:content-[""] after:h-px after:grow after:bg-grey-300 after:content-[""]'>OR</div>
<div className='flex gap-2'>
<Button className='h-8 border border-grey-300' icon='twitter-x' iconColorClass='w-[14px] h-[14px]' size='sm' fullWidth />
<Button className='h-8 border border-grey-300' icon='facebook' size='sm' fullWidth />
<Button className='h-8 border border-grey-300' icon='linkedin' size='sm' fullWidth />
</div>
</div>
</div>
</Modal>;
};