From a9614e704e5ad237ef9094d2402fc437e60e7278 Mon Sep 17 00:00:00 2001
From: Forbes <forbes@kindred-systems.com>
Date: Fri, 13 Feb 2026 13:23:08 -0600
Subject: [PATCH] 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
---
 web/src/components/AppShell.tsx               |  2 +-
 web/src/components/audit/AuditDetailPanel.tsx |  2 +-
 web/src/components/audit/AuditSummaryBar.tsx  | 10 +++-------
 web/src/components/audit/AuditTable.tsx       |  2 +-
 web/src/components/items/CategoryPicker.tsx   |  4 ++--
 web/src/components/items/FileDropZone.tsx     | 16 +++++++++-------
 6 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/web/src/components/AppShell.tsx b/web/src/components/AppShell.tsx
index 41b21fd..92d291b 100644
--- a/web/src/components/AppShell.tsx
+++ b/web/src/components/AppShell.tsx
@@ -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}
diff --git a/web/src/components/audit/AuditDetailPanel.tsx b/web/src/components/audit/AuditDetailPanel.tsx
index dc83757..ba5819a 100644
--- a/web/src/components/audit/AuditDetailPanel.tsx
+++ b/web/src/components/audit/AuditDetailPanel.tsx
@@ -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",
           }}
         />
diff --git a/web/src/components/audit/AuditSummaryBar.tsx b/web/src/components/audit/AuditSummaryBar.tsx
index 93021d6..503037d 100644
--- a/web/src/components/audit/AuditSummaryBar.tsx
+++ b/web/src/components/audit/AuditSummaryBar.tsx
@@ -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
diff --git a/web/src/components/audit/AuditTable.tsx b/web/src/components/audit/AuditTable.tsx
index 4e2d089..c71e095 100644
--- a/web/src/components/audit/AuditTable.tsx
+++ b/web/src/components/audit/AuditTable.tsx
@@ -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)
diff --git a/web/src/components/items/CategoryPicker.tsx b/web/src/components/items/CategoryPicker.tsx
index 48858c7..4b64592 100644
--- a/web/src/components/items/CategoryPicker.tsx
+++ b/web/src/components/items/CategoryPicker.tsx
@@ -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)
diff --git a/web/src/components/items/FileDropZone.tsx b/web/src/components/items/FileDropZone.tsx
index 93455a8..c6585a1 100644
--- a/web/src/components/items/FileDropZone.tsx
+++ b/web/src/components/items/FileDropZone.tsx
@@ -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"
       >