cynarAI/evOo-local
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Greet with the header's ev-eyes wordmark and a calmer welcome type scale (#184)

Browse Source 
Welcome and sign-in now show the same animated wordmark as the sidebar header
("ev" plus the Oo eyes) instead of the teal face. The welcome tagline, subline and
buttons drop to the shared title and body sizes.


Claude-Session: https://claude.ai/code/session_01Tgvrj34NMnaqvtgvruYQZZ

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
cynarAI 2026-10-09 16:13:38 +02:00 committed by GitHub
parent 45d3f1ae11
commit 4b814c9a17
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 16 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web/e2e/welcome.spec.ts
View File

@ -1,16 +1,17 @@
import { expect, test } from "@playwright/test";
import { captureScreenshot } from "./helpers";
test("the welcome and sign-in screens carry the same evOo logo", async ({ page }, testInfo) => {
test("the welcome and sign-in screens carry the evOo wordmark from the header", async ({
page,
}, testInfo) => {
await page.setViewportSize({ width: 390, height: 844 });
for (const scheme of ["dark", "light"] as const) {
await page.emulateMedia({ colorScheme: scheme });
await page.goto("/", { waitUntil: "domcontentloaded" });
await expect(page.getByText("evOo", { exact: true })).toBeVisible();
await expect(page.locator('img[src="/evoo-logo.svg"]')).toBeVisible();
await expect(page.locator(".evoo-mascot-container")).toBeVisible();
await captureScreenshot(page, testInfo, `phone-welcome-${scheme}`);
await page.goto("/sign-in", { waitUntil: "domcontentloaded" });
await expect(page.locator('img[src="/evoo-logo.svg"]')).toBeVisible();
await expect(page.locator(".evoo-mascot-container")).toBeVisible();
await captureScreenshot(page, testInfo, `phone-sign-in-${scheme}`);
}
});

4
apps/web/src/pages/Auth.tsx
View File

@ -1,6 +1,6 @@
import { Trans, useLingui } from "@lingui/react/macro";
import { readBoundedJsonResponse, signupRequiresEmailVerification } from "@rakazo/core";
import { Button, Input, Label } from "@rakazo/ui-web";
import { Button, EvooMascot, Input, Label } from "@rakazo/ui-web";
import { Eye, EyeOff } from "lucide-react";
import { useEffect, useState } from "react";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
@ -337,7 +337,7 @@ function AuthFrame({
return (
<div className="flex min-h-full items-center justify-center bg-background px-6 py-16 text-foreground">
<form onSubmit={onSubmit} className="flex w-[460px] flex-col items-center">
<img src="/evoo-logo.svg" alt="" className="size-[74px]" />
<EvooMascot size={56} showWordmark />
<h1 aria-live="polite" className="mb-9 mt-7 text-4xl font-medium tracking-tight">
{title}
</h1>

22
apps/web/src/pages/Welcome.tsx
View File

@ -1,4 +1,5 @@
import { Trans } from "@lingui/react/macro";
import { EvooMascot } from "@rakazo/ui-web";
import { useNavigate } from "react-router-dom";
import { WindowChrome } from "./WindowChrome";
@ -9,33 +10,28 @@ export function WelcomePage() {
<div className="app-drag flex gap-2 px-5 py-[18px]">
<WindowChrome />
</div>
<div className="flex flex-1 flex-col items-center justify-center gap-10 px-6 pb-[90px]">
<div className="flex flex-col items-center gap-6 sm:flex-row sm:gap-[26px]">
<img src="/evoo-logo.svg" alt="" className="size-[88px]" />
<div className="text-[76px] leading-none tracking-[-0.03em] text-foreground font-['EvOo_Display',sans-serif]">
evOo
</div>
</div>
<div className="max-w-[520px] space-y-3 text-center">
<p className="text-balance text-[27px] leading-[1.35] text-foreground/90 font-medium">
<div className="flex flex-1 flex-col items-center justify-center gap-8 px-6 pb-[90px]">
<EvooMascot size={72} showWordmark interactive trackPointer="hover" />
<div className="max-w-[420px] space-y-2 text-center">
<p className="text-balance text-ui-title font-medium text-foreground/90">
<Trans>Your specialists. One calm place to talk.</Trans>
</p>
<p className="text-balance text-ui-title-sm leading-[1.5] text-foreground/60">
<p className="text-balance text-ui-body text-foreground/60">
<Trans>Simple to start. Expert when you need it.</Trans>
</p>
</div>
<div className="flex flex-col sm:flex-row items-center gap-4">
<div className="flex flex-col sm:flex-row items-center gap-3">
<button
type="button"
onClick={() => navigate("/sign-in")}
className="app-no-drag rounded-full bg-primary text-primary-foreground px-[34px] py-[15px] text-[19px] font-medium transition hover:scale-[1.04]"
className="app-no-drag rounded-full bg-primary text-primary-foreground px-7 py-3 text-ui-body font-medium transition hover:scale-[1.04]"
>
<Trans>Sign in</Trans>&nbsp;&nbsp;→
</button>
<button
type="button"
onClick={() => navigate("/sign-up")}
className="app-no-drag rounded-full bg-accent px-[34px] py-[15px] text-[19px] text-foreground transition hover:scale-[1.04]"
className="app-no-drag rounded-full bg-accent px-7 py-3 text-ui-body text-foreground transition hover:scale-[1.04]"
>
<Trans>Sign up</Trans>
</button>