9961/Red-Bull-Tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): view-by-view UX redesign and accessibility pass

Browse Source 
- Overview: limits hero with progress states, spend pill, primary quick-add, mobile FAB
- Logbook: day-grouped entries with subtotals, unified filter bar, Log again,
  human source labels
- Trends: unified chart cards, tick thinning, chart aria summaries, radiogroup
  forecast control
- Settings: sectioned layout with separated danger zone, ThemePicker aria fix
- EntryModal: fieldset grouping, Field primitive, safe date validation
- AuthView: autoComplete, password visibility toggle
- StatHint popover replacing title-only tooltips; mobile stacked import preview
- Remaining inline hex styles converted to theme tokens
This commit is contained in:
nh9961
2026-07-19 20:34:10 +00:00
parent 733c6cbae8
commit 3706021326
19 changed files with 945 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/AuthView.tsx
+33 -5
View File
@@ -1,4 +1,4 @@
import { Loader2, LogIn } from "lucide-react";
import { Eye, EyeOff, Loader2, LogIn } from "lucide-react";
import { useState, type CSSProperties, type FormEvent } from "react";
import { LegalFootnote } from "../LegalFootnote";
import { ShellBackdrop } from "../ShellBackdrop";
@@ -31,6 +31,7 @@ export function AuthView({
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
function submit(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
@@ -71,20 +72,47 @@ export function AuthView({
{mode === "signup" && (
<label className="field-label">
Name
<input className="field-control" type="text" value={name} onChange={(event) => setName(event.target.value)} placeholder="Ned" />
<input className="field-control" type="text" autoComplete="name" value={name} onChange={(event) => setName(event.target.value)} placeholder="Ned" />
</label>
)}
<label className="field-label">
Email
<input className="field-control" type="email" value={email} onChange={(event) => setEmail(event.target.value)} placeholder="you@example.com" required />
<input className="field-control" type="email" autoComplete="email" value={email} onChange={(event) => setEmail(event.target.value)} placeholder="you@example.com" required />
</label>
<label className="field-label">
Password
<input className="field-control" minLength={8} type="password" value={password} onChange={(event) => setPassword(event.target.value)} placeholder="8+ characters" required />
<span className="relative block">
<input
className="field-control pr-12"
minLength={8}
type={showPassword ? "text" : "password"}
autoComplete={mode === "signup" ? "new-password" : "current-password"}
value={password}
onChange={(event) => setPassword(event.target.value)}
placeholder="8+ characters"
required
/>
<button
className="password-toggle"
type="button"
aria-label={showPassword ? "Hide password" : "Show password"}
aria-pressed={showPassword}
onClick={() => setShowPassword((current) => !current)}
>
{showPassword ? <EyeOff size={17} aria-hidden="true" /> : <Eye size={17} aria-hidden="true" />}
</button>
</span>
</label>
{authError && (
<div className="rounded-md px-3 py-2 text-sm" style={{ border: "1px solid #ffc9c2", background: "#fff3f1", color: "#9f1c16" }}>
<div
className="rounded-md px-3 py-2 text-sm"
style={{
border: "1px solid color-mix(in srgb, var(--error) 35%, transparent)",
background: "var(--error-container)",
color: "var(--on-error-container)",
}}
>
{authError}
</div>
)}