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 embeddable signup form styles

Browse source 
Refs https://github.com/TryGhost/Team/issues/3334
This commit is contained in:
Sanne de Vries 2023-05-30 15:38:33 +02:00
parent 8d485fe1b7
commit c9d0424636
2 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
ghost/signup-form/src/components/pages/FormPage.tsx
View file

@ -16,10 +16,10 @@ export const FormPage: React.FC = () => {
const description = options.description;
const logo = options.logo;
return <div className='bg-grey-300 p-24'>
return <div className='bg-grey-200 flex h-[52vmax] min-h-[320px] flex-col items-center justify-center p-6 md:p-8'>
{logo && <img alt={title} src={logo} width='100' />}
{title && <h1 className="text-4xl font-bold">{title}</h1>}
{description && <p className='pb-3'>{description}</p>}
{title && <h1 className="text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl">{title}</h1>}
{description && <p className='mb-5 text-center'>{description}</p>}
<Form />
</div>;
@ -54,15 +54,15 @@ const Form: React.FC = () => {
}
};
const borderStyle = error ? 'border-red-500' : 'border-grey-500';
const borderStyle = error ? '!border-red-500' : 'border-grey-300';
return (
<div>
<form className='flex' onSubmit={submit}>
<input className={'flex-1 p-3 border ' + borderStyle} data-testid="input" disabled={loading} placeholder='jamie@example.com' type="text" value={email} onChange={e => setEmail(e.target.value)}/>
<button className='bg-accent p-3 text-white' data-testid="button" disabled={loading} type='submit'>Subscribe</button>
<>
<form className='relative flex w-full max-w-[440px]' onSubmit={submit}>
<input className={'flex-1 py-[1rem] pl-3 border rounded-[.5rem] hover:border-grey-400 transition focus-visible:border-grey-500 focus-visible:outline-none ' + borderStyle} data-testid="input" disabled={loading} placeholder='jamie@example.com' type="text" value={email} onChange={e => setEmail(e.target.value)}/>
<button className='bg-accent absolute inset-y-0 right-[.3rem] my-auto h-[3rem] rounded-[.3rem] px-3 py-2 text-white' data-testid="button" disabled={loading} type='submit'>Subscribe</button>
</form>
{error && <p className='pt-0.5 text-red-500' data-testid="error-message">{error}</p>}
</div>
</>
);
};

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

@ -14,8 +14,8 @@ export const SuccessPage: React.FC<SuccessPageProps> = ({email}) => {
<h1 className="text-xl font-bold">Now check your email!</h1>
</div>;
}
return <div className='bg-grey-300 p-24' data-testid="success-page">
<h1 className="text-4xl font-bold">Now check your email!</h1>
<p className='pb-3'>An email has been send to {email}.</p>
return <div className='bg-grey-200 flex h-[52vmax] min-h-[320px] flex-col items-center justify-center p-6 md:p-8' data-testid="success-page">
<h1 className='text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl'>Now check your email!</h1>
<p className='mb-5 text-center'>An email has been send to {email}.</p>
</div>;
};