From 65c0adfd769b9ef11b897c96a3634c61120055b8 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Mon, 8 Dec 2025 00:18:03 +0900
Subject: feat(client): redesign frontend with TailwindCSS v4
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace inline styles with TailwindCSS, implementing a cohesive Japanese-inspired
design system with custom colors (cream, teal primary), typography (Fraunces,
DM Sans), and animations. Update all pages and components with consistent styling,
improve accessibility by adding aria-hidden to decorative SVGs, and configure
Biome for Tailwind CSS syntax support.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/client/components/OfflineBanner.tsx | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

(limited to 'src/client/components/OfflineBanner.tsx')

diff --git a/src/client/components/OfflineBanner.tsx b/src/client/components/OfflineBanner.tsx
index faca3e7..bf94908 100644
--- a/src/client/components/OfflineBanner.tsx
+++ b/src/client/components/OfflineBanner.tsx
@@ -10,26 +10,27 @@ export function OfflineBanner() {
 	return (
 		<output
 			data-testid="offline-banner"
-			role="status"
 			aria-live="polite"
-			style={{
-				backgroundColor: "#6c757d",
-				color: "white",
-				padding: "0.5rem 1rem",
-				textAlign: "center",
-				fontSize: "0.875rem",
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
-				gap: "0.5rem",
-			}}
+			className="bg-slate text-white py-2 px-4 text-sm flex items-center justify-center gap-2"
 		>
-			<span aria-hidden="true">⚡</span>
+			<svg
+				className="w-4 h-4 text-warning"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				aria-hidden="true"
+			>
+				<path
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					strokeWidth={2}
+					d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
+				/>
+			</svg>
 			<span>
 				You're offline. Changes will sync when you reconnect.
 				{pendingCount > 0 && (
-					<span data-testid="offline-pending-count">
-						{" "}
+					<span data-testid="offline-pending-count" className="ml-1 opacity-80">
 						({pendingCount} pending)
 					</span>
 				)}
-- 
cgit v1.2.3-70-g09d2