Equal message sizes and one evOo logo on the way in (#183)
* Read agent replies at the size of the user's own messages Chat markdown set its own 17px reading size scaled for phones, so agent replies rendered at about 19px while the user's bubbles on the same phone read at 16px. The markdown now takes size and leading from the bubble around it. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Tgvrj34NMnaqvtgvruYQZZ * Show the same evOo logo on the welcome and sign-in screens The welcome screen showed the eyes-only mascot over an "EvOo" title, while sign-in and sign-up showed the teal face (the favicon and app icon) through a CSS override of the old two-pill markup. Both screens now render the teal logo directly, the title reads "evOo", and the CSS override is gone. The welcome lines balance so no word sits alone. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Tgvrj34NMnaqvtgvruYQZZ * Run the autopilot auto-merge job on Linux runners again The macOS runners that joined the evoo-ci pool have no gh on the runner's PATH, so the job died with "gh: command not found" whenever one of them picked it up. The job takes seconds, so it gains nothing from the extra runners. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Tgvrj34NMnaqvtgvruYQZZ --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
cynarAI
GitHub
parent
8ae3764b05
commit
45d3f1ae11
2
.github/workflows/autopilot-auto-merge.yml
vendored
2
.github/workflows/autopilot-auto-merge.yml
vendored
@ -21,7 +21,7 @@ concurrency:
|
||||
jobs:
|
||||
auto-merge:
|
||||
name: Autopilot auto-merge
|
||||
runs-on: [self-hosted, evoo-ci]
|
||||
runs-on: [self-hosted, evoo-ci, Linux]
|
||||
steps:
|
||||
- name: Resolve pull request
|
||||
id: pr
|
||||
|
||||
@ -28,6 +28,9 @@ test("phone widths read text at 16px and up while desktop keeps its sizes", asyn
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await expect.poll(() => fontSize(smallText)).toBeCloseTo(16, 1);
|
||||
expect(await fontSize(composer)).toBeGreaterThanOrEqual(16);
|
||||
const userText = page.getByTestId("message-user-bubble").last();
|
||||
const replyText = reply.locator(".rk-chat-markdown p").first();
|
||||
expect(await fontSize(replyText)).toBe(await fontSize(userText));
|
||||
|
||||
await page.emulateMedia({ colorScheme: "dark" });
|
||||
await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
|
||||
|
||||
16
apps/web/e2e/welcome.spec.ts
Normal file
16
apps/web/e2e/welcome.spec.ts
Normal file
@ -0,0 +1,16 @@
|
||||
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) => {
|
||||
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 captureScreenshot(page, testInfo, `phone-welcome-${scheme}`);
|
||||
await page.goto("/sign-in", { waitUntil: "domcontentloaded" });
|
||||
await expect(page.locator('img[src="/evoo-logo.svg"]')).toBeVisible();
|
||||
await captureScreenshot(page, testInfo, `phone-sign-in-${scheme}`);
|
||||
}
|
||||
});
|
||||
@ -1,24 +1,3 @@
|
||||
/* EvOo-Branding: ersetzt das Rakazo-Logo (runder Kreis mit zwei gleichen Pillen-Augen)
|
||||
ueberall durch das Oo-Logo - Welcome, Anmelden, Registrieren und jede weitere Stelle,
|
||||
an der Rakazo dieses Markup rendert:
|
||||
<div class="flex h-[..] w-[..] items-center justify-center gap-[..] rounded-full bg-*">
|
||||
<span class="h-* w-[..px] rounded-full bg-*"></span> x2
|
||||
</div>
|
||||
Rein per CSS (:has), damit es Bundle-Updates mit neuen Datei-Hashes uebersteht. */
|
||||
div.rounded-full.items-center.justify-center:has(
|
||||
> span.rounded-full:first-child:nth-last-child(2)
|
||||
):has(> span.rounded-full:last-child:nth-child(2)) {
|
||||
background: url("/evoo-logo.svg") center / contain no-repeat;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
div.rounded-full.items-center.justify-center:has(
|
||||
> span.rounded-full:first-child:nth-last-child(2)
|
||||
):has(> span.rounded-full:last-child:nth-child(2))
|
||||
> span {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Display-Font fuer Headlines: Bagel Fat One (SIL OFL 1.1, selbst gehostet, Latin-Subset, 23 KB).
|
||||
Ultrafett und teigig-rund - die O sind pralle Ringe wie die Oo-Augen. Plakat-Charakter, setzt sich klar
|
||||
von der UI-Schrift (Geist/System) ab. EIN Schnitt (400): nie fett synthetisieren, nur fuer Headlines. */
|
||||
|
||||
@ -337,10 +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">
|
||||
<div className="flex h-[74px] w-[74px] items-center justify-center gap-[11px] rounded-full bg-muted">
|
||||
<span className="h-5 w-[9px] rounded-full bg-primary" />
|
||||
<span className="h-5 w-[9px] rounded-full bg-primary" />
|
||||
</div>
|
||||
<img src="/evoo-logo.svg" alt="" className="size-[74px]" />
|
||||
<h1 aria-live="polite" className="mb-9 mt-7 text-4xl font-medium tracking-tight">
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { Trans } from "@lingui/react/macro";
|
||||
import { EvooMascot } from "@rakazo/ui-web";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { WindowChrome } from "./WindowChrome";
|
||||
|
||||
@ -12,16 +11,16 @@ export function WelcomePage() {
|
||||
</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]">
|
||||
<EvooMascot size={88} pose="greeting" interactive trackPointer="hover" />
|
||||
<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
|
||||
evOo
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-w-[520px] space-y-3 text-center">
|
||||
<p className="text-[27px] leading-[1.35] text-foreground/90 font-medium">
|
||||
<p className="text-balance text-[27px] leading-[1.35] text-foreground/90 font-medium">
|
||||
<Trans>Your specialists. One calm place to talk.</Trans>
|
||||
</p>
|
||||
<p className="text-ui-title-sm leading-[1.5] text-foreground/60">
|
||||
<p className="text-balance text-ui-title-sm leading-[1.5] text-foreground/60">
|
||||
<Trans>Simple to start. Expert when you need it.</Trans>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -96,10 +96,10 @@ body,
|
||||
}
|
||||
|
||||
/* Gemini-Grade Accessible Typography (Apple-like with Inter Variable).
|
||||
Heading, code and quote colors come from the shared @rakazo/chat-ui markdown styles. */
|
||||
Heading, code and quote colors come from the shared @rakazo/chat-ui markdown styles.
|
||||
Size and leading come from the surrounding bubble, so a reply reads at the size of the
|
||||
message it answers. */
|
||||
.rk-chat-markdown {
|
||||
font-size: calc(var(--font-size-reading) * var(--font-scale));
|
||||
line-height: var(--line-height-reading);
|
||||
color: var(--foreground);
|
||||
letter-spacing: -0.011em;
|
||||
font-weight: 400;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user