Sign-in branding: Hesychia.ai + transparent logo (#49) (#50)
Deploy Beta / unit-tests (push) Successful in 12s
Unit Tests / test (push) Successful in 13s
Deploy Beta / deploy-beta (push) Successful in 3m12s

## 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:
2026-07-28 04:42:36 -07:00
parent ab5243abff
commit 86bfbcdb6d
6 changed files with 21 additions and 2 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 872 KiB

After

Width:  |  Height:  |  Size: 823 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 697 KiB

After

Width:  |  Height:  |  Size: 1.4 MiB

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();
+20 -2
View File
@@ -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