## 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
This commit was merged in pull request #50.
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
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 () => {
|
||||
renderSignIn();
|
||||
|
||||
expect(screen.getByRole('heading', { name: 'Hesychia.ai' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('heading', { name: 'Sign In' })).toBeInTheDocument();
|
||||
expect(screen.getByPlaceholderText('Email Address')).toBeInTheDocument();
|
||||
expect(screen.getByPlaceholderText('Password')).toBeInTheDocument();
|
||||
|
||||
@@ -56,13 +56,28 @@ const CardTitle = styled.h2`
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const BrandBlock = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 1.25rem;
|
||||
`;
|
||||
|
||||
const BrandMark = styled.img`
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin-bottom: 1.25rem;
|
||||
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`
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
@@ -243,7 +258,10 @@ const SignIn = (): JSX.Element => {
|
||||
<ParticleBackground />
|
||||
<ContentWrapper>
|
||||
<GlassCard>
|
||||
<BrandMark src={hesychiaMark} alt="Hesychia" />
|
||||
<BrandBlock>
|
||||
<BrandMark src={hesychiaMark} alt="" />
|
||||
<BrandWordmark>Hesychia.ai</BrandWordmark>
|
||||
</BrandBlock>
|
||||
<CardTitle>Sign In</CardTitle>
|
||||
{errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
|
||||
<Formik
|
||||
|
||||
Reference in New Issue
Block a user