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

Added email icon to signup form success page

Browse source 
Refs https://www.notion.so/ghost/Embed-testing-0193905e46d449b5ad865f7364176814?pvs=4#de29f9cc1a364a12a4a0eeebef68f3a4
This commit is contained in:
Sanne de Vries 2023-06-09 11:35:36 +02:00
parent 5e7edb9da5
commit afe18d54de
3 changed files with 5 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ghost/signup-form/assets/icons/email.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px;}</style></defs><rect class="a" x="0.75" y="4.5" width="22.5" height="15" rx="1.5" ry="1.5"/><line class="a" x1="15.687" y1="9.975" x2="19.5" y2="13.5"/><line class="a" x1="8.313" y1="9.975" x2="4.5" y2="13.5"/><path class="a" d="M22.88,5.014l-9.513,6.56a2.406,2.406,0,0,1-2.734,0L1.12,5.014"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 466 B

4
ghost/signup-form/src/components/pages/SuccessPage.tsx
View file

@ -12,7 +12,5 @@ export const SuccessPage: React.FC<SuccessPageProps> = ({email}) => {
return <SuccessView return <SuccessView
backgroundColor={options.backgroundColor} backgroundColor={options.backgroundColor}
email={email} email={email}
icon={options.icon} textColor={options.textColor} />;
textColor={options.textColor}
title={options.title} />;
}; };

7
ghost/signup-form/src/components/pages/SuccessView.tsx
View file

@ -1,13 +1,12 @@
import React from 'react'; import React from 'react';
import {ReactComponent as EmailIcon} from '../../../assets/icons/email.svg';
import {useAppContext} from '../../AppContext'; import {useAppContext} from '../../AppContext';
export const SuccessView: React.FC<{ export const SuccessView: React.FC<{
email: string; email: string;
title?: string;
icon?: string;
backgroundColor?: string; backgroundColor?: string;
textColor?: string; textColor?: string;
}> = ({title, icon, backgroundColor, textColor}) => { }> = ({backgroundColor, textColor}) => {
const {t} = useAppContext(); const {t} = useAppContext();
return ( return (
<div <div
@ -15,7 +14,7 @@ export const SuccessView: React.FC<{
data-testid="success-page" data-testid="success-page"
style={{backgroundColor, color: textColor}} style={{backgroundColor, color: textColor}}
> >
{icon && <img alt={title} className='mb-2 h-[64px] w-auto' src={icon}/>} <EmailIcon className='my-3 w-8' />
<h1 className='text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl'>{t(`Now check your email!`)}</h1> <h1 className='text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl'>{t(`Now check your email!`)}</h1>
<p className='mb-4 max-w-[600px] text-center sm:mb-[4.1rem]'>{t(`To complete signup, click the confirmation link in your inbox. If it doesn't arrive within 3 minutes, check your spam folder!`)}</p> <p className='mb-4 max-w-[600px] text-center sm:mb-[4.1rem]'>{t(`To complete signup, click the confirmation link in your inbox. If it doesn't arrive within 3 minutes, check your spam folder!`)}</p>
</div> </div>