## Summary Closes #49. - Show **Hesychia.ai** wordmark with the brand mark on the sign-in page - Regenerate brand PNGs with true transparent corners (source soft-glow RGBA had no fully clear pixels) - Update SignIn test for the new heading ## Test plan - [ ] Open `/signin/` — mark + **Hesychia.ai** above Sign In - [ ] Confirm no black square around mark on dark particle background - [ ] `npm test -- --testPathPattern=SignIn.test --watchAll=false`Reviewed-on: #50
|
Before Width: | Height: | Size: 872 KiB After Width: | Height: | Size: 823 KiB |
|
Before Width: | Height: | Size: 697 KiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 85 KiB |
@@ -57,6 +57,7 @@ describe('SignIn', () => {
|
|||||||
it('renders sign-in form fields', async () => {
|
it('renders sign-in form fields', async () => {
|
||||||
renderSignIn();
|
renderSignIn();
|
||||||
|
|
||||||
|
expect(screen.getByRole('heading', { name: 'Hesychia.ai' })).toBeInTheDocument();
|
||||||
expect(screen.getByRole('heading', { name: 'Sign In' })).toBeInTheDocument();
|
expect(screen.getByRole('heading', { name: 'Sign In' })).toBeInTheDocument();
|
||||||
expect(screen.getByPlaceholderText('Email Address')).toBeInTheDocument();
|
expect(screen.getByPlaceholderText('Email Address')).toBeInTheDocument();
|
||||||
expect(screen.getByPlaceholderText('Password')).toBeInTheDocument();
|
expect(screen.getByPlaceholderText('Password')).toBeInTheDocument();
|
||||||
|
|||||||
@@ -56,13 +56,28 @@ const CardTitle = styled.h2`
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const BrandBlock = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
`;
|
||||||
|
|
||||||
const BrandMark = styled.img`
|
const BrandMark = styled.img`
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const BrandWordmark = styled.h1`
|
||||||
|
margin: 0.85rem 0 0;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
`;
|
||||||
|
|
||||||
const StyledInput = styled.input`
|
const StyledInput = styled.input`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
@@ -243,7 +258,10 @@ const SignIn = (): JSX.Element => {
|
|||||||
<ParticleBackground />
|
<ParticleBackground />
|
||||||
<ContentWrapper>
|
<ContentWrapper>
|
||||||
<GlassCard>
|
<GlassCard>
|
||||||
<BrandMark src={hesychiaMark} alt="Hesychia" />
|
<BrandBlock>
|
||||||
|
<BrandMark src={hesychiaMark} alt="" />
|
||||||
|
<BrandWordmark>Hesychia.ai</BrandWordmark>
|
||||||
|
</BrandBlock>
|
||||||
<CardTitle>Sign In</CardTitle>
|
<CardTitle>Sign In</CardTitle>
|
||||||
{errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
|
{errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
|
||||||
<Formik
|
<Formik
|
||||||
|
|||||||