fix(web): standardize transition durations to 0.15s ease (#73)

All inline transition properties now use 'all 0.15s ease'.

Files: AppShell, CategoryPicker, AuditDetailPanel,
AuditSummaryBar, AuditTable, FileDropZone

Closes #73
This commit is contained in:
Forbes
2026-02-13 13:23:08 -06:00
parent 289d488469
commit a9614e704e
6 changed files with 17 additions and 19 deletions

View File

@@ -73,7 +73,7 @@ export function AppShell() {
padding: "var(--d-nav-py) var(--d-nav-px)",
borderRadius: "var(--d-nav-radius)",
textDecoration: "none",
transition: "all 0.2s",
transition: "all 0.15s ease",
})}
>
{link.label}

View File

@@ -252,7 +252,7 @@ export function AuditDetailPanel({
height: "100%",
width: `${Math.min(audit.score * 100, 100)}%`,
backgroundColor: color,
transition: "width 0.3s, background-color 0.3s",
transition: "all 0.15s ease",
borderRadius: "0 3px 3px 0",
}}
/>

View File

@@ -54,7 +54,7 @@ export function AuditSummaryBar({
fontSize: "0.7rem",
fontWeight: 600,
color: "var(--ctp-crust)",
transition: "opacity 0.2s",
transition: "all 0.15s ease",
outline: isActive ? "2px solid var(--ctp-text)" : "none",
outlineOffset: -2,
}}
@@ -75,12 +75,8 @@ export function AuditSummaryBar({
color: "var(--ctp-subtext0)",
}}
>
<span>
{summary.total_items} items
</span>
<span>
Avg score: {(summary.avg_score * 100).toFixed(1)}%
</span>
<span>{summary.total_items} items</span>
<span>Avg score: {(summary.avg_score * 100).toFixed(1)}%</span>
{summary.manufactured_without_bom > 0 && (
<span style={{ color: "var(--ctp-red)" }}>
{summary.manufactured_without_bom} manufactured without BOM

View File

@@ -87,7 +87,7 @@ export function AuditTable({
backgroundColor: isSelected
? "rgba(203, 166, 247, 0.08)"
: "transparent",
transition: "background-color 0.15s",
transition: "all 0.15s ease",
}}
onMouseEnter={(e) => {
if (!isSelected)

View File

@@ -107,7 +107,7 @@ export function CategoryPicker({
color: isActive
? "var(--ctp-mauve)"
: "var(--ctp-subtext0)",
transition: "background-color 0.1s",
transition: "all 0.15s ease",
}}
>
<span style={{ fontFamily: "'JetBrains Mono', monospace" }}>
@@ -188,7 +188,7 @@ export function CategoryPicker({
: "transparent",
color: isSelected ? "var(--ctp-mauve)" : "var(--ctp-text)",
fontWeight: isSelected ? 600 : 400,
transition: "background-color 0.1s",
transition: "all 0.15s ease",
}}
onMouseEnter={(e) => {
if (!isSelected)

View File

@@ -72,10 +72,8 @@ export function FileDropZone({
padding: "1.25rem",
textAlign: "center",
cursor: "pointer",
backgroundColor: dragOver
? "rgba(203,166,247,0.05)"
: "transparent",
transition: "border-color 0.15s, background-color 0.15s",
backgroundColor: dragOver ? "rgba(203,166,247,0.05)" : "transparent",
transition: "all 0.15s ease",
}}
>
<div style={{ fontSize: "0.85rem", color: "var(--ctp-subtext1)" }}>
@@ -113,7 +111,11 @@ export function FileDropZone({
{files.length > 0 && (
<div style={{ marginTop: "0.5rem" }}>
{files.map((att, i) => (
<FileRow key={i} attachment={att} onRemove={() => onFileRemoved(i)} />
<FileRow
key={i}
attachment={att}
onRemove={() => onFileRemoved(i)}
/>
))}
</div>
)}
@@ -202,7 +204,7 @@ function FileRow({
width: `${attachment.uploadProgress}%`,
backgroundColor: "var(--ctp-mauve)",
borderRadius: 1,
transition: "width 0.15s",
transition: "all 0.15s ease",
}}
/>
</div>
@@ -235,7 +237,7 @@ function FileRow({
color: hovered ? "var(--ctp-red)" : "var(--ctp-overlay0)",
padding: "0 0.2rem",
flexShrink: 0,
transition: "color 0.15s",
transition: "all 0.15s ease",
}}
title="Remove"
>