Polish /report-bug's visual design and refine bug report semantics
Design pass on the bug report page, staying inside the site's existing design system (tokens, IBM Plex Sans, card/badge/pill components, stroke icon set) rather than introducing a new one: - A slim top bar (brand mark + back-to-home pill button + language switcher) replaces the bare floating heading, so the page reads as part of the product instead of an orphaned form. - The "write in English" notice moves inside the form card, right above the field it applies to, and switches from the amber "needs attention" tone to an accent-tinted info tone, so it doesn't visually collide with the bug-status badges' own use of amber for "not read yet". - "Your reports" is promoted to a proper labeled section with a cleaner row layout (truncated description with a title tooltip, compact date). - A character counter on the description field. - The back-to-home control is now a bordered pill with an arrow icon instead of a bare text link with a hardcoded "←", which also meant dropping that hardcoded arrow from all 7 translations. Also, two content refinements based on feedback: - Max description length dropped from 5000 to 2000 characters, enforced on both the textarea and the API's Pydantic validator. - The "read" status is relabeled from a passive "read"/"letta" to an active "acknowledged"/"presa in carico" (and each other language's own equivalent helpdesk term) — it communicates a team is on it, not just that someone glanced at it. Only the label changed; the underlying "read" status value in the API/DB is untouched. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
+74
-10
@@ -254,28 +254,92 @@ button.link:hover, a.link:hover { filter: none; color: var(--color-foreground);
|
||||
.toast.error { background: var(--color-destructive-bg); color: var(--color-destructive); }
|
||||
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
.lang-bar { display: flex; justify-content: flex-end; margin-bottom: 4px; }
|
||||
/* --- /report-bug: a standalone page (no logged-in navbar), so it gets its
|
||||
own slim top bar rather than the app's bottom tab bar / sticky header. --- */
|
||||
.app-shell-bugreport { padding-bottom: 32px; }
|
||||
|
||||
.english-notice {
|
||||
background: #FEF3C7; color: #92400E; border: 1px solid #F59E0B;
|
||||
border-radius: var(--radius-sm); padding: 10px 12px; font-size: 0.85rem; font-weight: 500;
|
||||
.bugreport-topbar {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
||||
padding: 4px 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.bugreport-topbar .brand {
|
||||
display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem;
|
||||
letter-spacing: -0.01em; color: var(--color-foreground); text-decoration: none;
|
||||
}
|
||||
.bugreport-topbar .brand-mark { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: block; }
|
||||
.bugreport-topbar-right { display: flex; align-items: center; gap: 12px; }
|
||||
|
||||
/* Pill button, same idiom as .trust-pill / .chain-status-pill elsewhere on the
|
||||
site: a bordered chip rather than a bare text link, so "go back" reads as an
|
||||
actual control instead of fading into the surrounding copy. */
|
||||
.back-home-btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
font-size: 0.8rem; font-weight: 500; color: var(--color-muted-foreground);
|
||||
background: var(--color-surface); border: 1px solid var(--color-border);
|
||||
padding: 6px 12px 6px 10px; border-radius: 999px; text-decoration: none;
|
||||
transition: color 150ms, border-color 150ms, background 150ms;
|
||||
}
|
||||
.back-home-btn .icon { width: 15px; height: 15px; }
|
||||
.back-home-btn:hover {
|
||||
color: var(--color-foreground); background: var(--color-surface-inset);
|
||||
border-color: color-mix(in srgb, var(--color-ring) 40%, var(--color-border));
|
||||
}
|
||||
.back-home-btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
|
||||
|
||||
.bugreport-hero { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
|
||||
.bugreport-hero-icon {
|
||||
width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
|
||||
color: var(--color-primary);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.bugreport-hero-icon .icon { width: 22px; height: 22px; }
|
||||
.bugreport-hero h1 { font-size: 1.3rem; font-weight: 700; margin: 2px 0 4px; text-wrap: balance; }
|
||||
.bugreport-hero p { color: var(--color-muted-foreground); font-size: 0.9rem; margin: 0; max-width: 46ch; }
|
||||
|
||||
/* Info callout, anchored inside the form card right above the field it
|
||||
applies to — not a warning (that's what the amber status badges below are
|
||||
for), so it gets the accent hue instead, keeping the two meanings visually
|
||||
distinct. */
|
||||
.field-note {
|
||||
display: flex; align-items: flex-start; gap: 10px;
|
||||
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
|
||||
color: color-mix(in srgb, var(--color-accent) 75%, var(--color-foreground));
|
||||
border-radius: var(--radius-sm); padding: 10px 12px; font-size: 0.82rem; line-height: 1.4;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.field-note .icon { width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; }
|
||||
|
||||
.char-count {
|
||||
font-variant-numeric: tabular-nums; text-align: right;
|
||||
font-size: 0.75rem; color: var(--color-muted-foreground); margin-top: 4px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 2px 8px;
|
||||
border-radius: 999px; background: var(--color-background); border: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.badge.bug-status-open { background: #FEF3C7; color: #92400E; border-color: #F59E0B; }
|
||||
.badge.bug-status-open { background: color-mix(in srgb, var(--color-primary) 16%, transparent); color: #92400E; border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); }
|
||||
.badge.bug-status-read { background: var(--color-background); color: var(--color-muted-foreground); }
|
||||
.badge.bug-status-resolved { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success); }
|
||||
|
||||
.my-report-row {
|
||||
.report-row {
|
||||
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
|
||||
padding: 10px 0; border-bottom: 1px solid var(--color-border);
|
||||
padding: 12px 0; border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.my-report-row:last-child { border-bottom: none; }
|
||||
.my-report-desc { flex: 1 1 200px; font-size: 0.9rem; }
|
||||
.my-report-date { font-size: 0.8rem; color: var(--color-muted-foreground); white-space: nowrap; }
|
||||
.report-row:first-child { padding-top: 0; }
|
||||
.report-row:last-child { padding-bottom: 0; border-bottom: none; }
|
||||
.report-row-desc {
|
||||
flex: 1 1 200px; font-size: 0.88rem;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.report-row-date {
|
||||
font-size: 0.78rem; color: var(--color-muted-foreground); white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.report-empty { margin: 0; }
|
||||
|
||||
/* --- landing hero (shown only when logged out) --- */
|
||||
body {
|
||||
|
||||
Reference in New Issue
Block a user