Andrei Laas
8016d317be
Zwei Dinge, die beim Ansehen aufgefallen sind.
**Das Rechteck auf dem Panel.** Das Logo bringt sein rosa Feld selbst mit, und
auf der rosa Flaeche stand es als Rechteck in leicht anderem Ton darauf. Der
Ton war dabei derselbe — verschoben hat ihn die Lichtblende, die ueber der
Panelflaeche liegt und unter dem Logo endete.
Das Manual kennt fuer den Schriftzug zwei Faelle, und sie brauchen
verschiedene Dateien: auf Weiss gehoert er nach §4.1 in ein rechteckiges rosa
Feld, in einem grossflaechigen rosa Umfeld dagegen wird er nach §3.1 nur mit
Freiraum integriert — die Flaeche ist ja schon da. Es gibt deshalb jetzt
manner-logo-auf-rosa.svg ohne eigenes Feld, und die rosa Flaechen benutzen es.
Damit bleibt nichts mehr uebrig, wo die Blende enden koennte.
Die Blende selbst ist weg. Sie war Weiss auf Rosa und hellte die Markenfarbe
so weit auf, dass sie kaum noch die Markenfarbe war; geblieben ist ein feines
Raster und eine leichte Tiefe zur unteren Ecke, beides aus ink.
**Schwarz auf der Marke.** "Uebersicht", "Berichte" und der Rest der Kopfzeile
standen in ink. Das traegt zwar (7.47:1), sieht aber aus wie Text, der aus
Versehen auf der Marke gelandet ist. Alles Geschriebene auf Rosa steht jetzt
in brand-700: 6.60:1, und es ist dieselbe Paarung, aus der der Schriftzug
selbst besteht — blaue Lettern auf rosa Feld.
Dabei noch eine Schwaeche gefunden: das Abzeichen an der Glocke kam als
danger-solid auf dem rosa Band nur auf 2.78:1 und blieb unter den 3:1, die
WCAG 1.4.11 fuer ein bedeutungstragendes Element verlangt. Mit danger-text
sind es 3.26:1, und die Ziffer darin steht mit 7.12:1 besser als vorher.
**Und ausgemistet.** Die Logodatei wog 74 kB, weil die Vorlage aus Seite 3 des
Manuals gezogen wurde und die ganze Seite mitgenommen hat: 219 Elemente, die
den Fliesstext jener Seite zeichnen ("Der Manner Schriftzug ... darf nicht
veraendert werden"), unsichtbar rosa auf Rosa oder ausserhalb des Beschnitts.
Das eigentliche Logo sind vier Pfade. Beide Fassungen wiegen jetzt 18,7 kB.
Lint, Typen, Schemaabgleich, 552 Tests und der Build sind sauber. Im Browser
nicht gesehen.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
80 lines
3.2 KiB
TypeScript
80 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { LogOut, Menu } from "lucide-react";
|
|
import { usePathname } from "next/navigation";
|
|
import { logout } from "@/actions/auth";
|
|
import type { OpenNote } from "@/lib/notes";
|
|
import { NewHireButton } from "./NewHireButton";
|
|
import { NotesBell } from "./NotesBell";
|
|
|
|
const TITLES: Record<string, string> = {
|
|
"/": "Übersicht",
|
|
"/employees": "Mitarbeiter:innen",
|
|
"/orgchart": "Organigramm",
|
|
"/positions": "Positionen",
|
|
"/reports": "Berichte",
|
|
"/audit": "Audit-Log",
|
|
};
|
|
|
|
function titleFor(pathname: string): string {
|
|
if (TITLES[pathname]) return TITLES[pathname];
|
|
const match = Object.keys(TITLES).find((key) => key !== "/" && pathname.startsWith(key));
|
|
return match ? TITLES[match] : "Alpenwerk HR";
|
|
}
|
|
|
|
type TopbarProps = {
|
|
userLabel: string;
|
|
openNotes: OpenNote[];
|
|
kollegen: { id: string; name: string; sichtbar: boolean }[];
|
|
onOpenNav: () => void;
|
|
};
|
|
|
|
export function Topbar({ userLabel, openNotes, kollegen, onOpenNav }: TopbarProps) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
// Sticky, with the notch inset added to its top padding: on an iPhone in
|
|
// landscape the bar would otherwise sit under the rounded corner.
|
|
//
|
|
// Rosa und nicht Weiss: zusammen mit dem Kopf der Seitenleiste bildet
|
|
// dieser Streifen das durchgehende Markenband ueber der Anwendung. Auf
|
|
// Weiss stand das Logo daneben als ausgeschnittenes Rechteck, weil es
|
|
// sein rosa Feld mitbringt; in einem rosa Band geht es darin auf.
|
|
//
|
|
// Geschrieben wird darauf in brand-700 und nicht in ink: Schwarz auf Rosa
|
|
// traegt zwar (7.47:1), sieht aber aus wie Text, der aus Versehen auf der
|
|
// Marke gelandet ist. Dunkelblau auf Rosa ist dieselbe Paarung, aus der
|
|
// der Schriftzug selbst besteht, und kommt auf 6.60:1.
|
|
//
|
|
// Gedaempftes gibt es hier nicht mehr: ink-muted liegt auf Rosa bei
|
|
// 2.33:1. Gestuft wird ueber Groesse und Gewicht.
|
|
<header className="sticky top-0 z-20 flex h-14 shrink-0 items-center justify-between border-b border-accent-600/40 bg-accent-500 px-3 pt-[env(safe-area-inset-top)] sm:px-6">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onOpenNav}
|
|
aria-label="Navigation öffnen"
|
|
className="-ml-1 rounded p-2 text-brand-700 hover:bg-accent-100 lg:hidden"
|
|
>
|
|
<Menu className="h-5 w-5" />
|
|
</button>
|
|
<h1 className="truncate text-base font-bold text-brand-700">{titleFor(pathname)}</h1>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-1 sm:gap-4">
|
|
<NotesBell notes={openNotes} kollegen={kollegen} />
|
|
<NewHireButton />
|
|
<div className="flex items-center gap-2 text-sm sm:border-l sm:border-brand-700/25 sm:pl-4">
|
|
{/* The name is the first thing worth dropping on a narrow screen —
|
|
the account is still reachable via the sign-out control. */}
|
|
<span className="hidden font-semibold text-brand-700 md:inline">{userLabel}</span>
|
|
<form action={logout}>
|
|
<button type="submit" aria-label="Abmelden" className="rounded p-2 text-brand-700 hover:bg-accent-100">
|
|
<LogOut className="h-4 w-4" />
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|