diff options
| author | nsfisis <nsfisis@gmail.com> | 2025-12-08 00:18:03 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2025-12-08 00:18:03 +0900 |
| commit | 65c0adfd769b9ef11b897c96a3634c61120055b8 (patch) | |
| tree | 74668feef8f134c1b132beaab125e42fa9d77b2e /src/client/components/OfflineBanner.tsx | |
| parent | 7cf55a3b7e37971ea0835118a26f032d895ff71f (diff) | |
| download | kioku-65c0adfd769b9ef11b897c96a3634c61120055b8.tar.gz kioku-65c0adfd769b9ef11b897c96a3634c61120055b8.tar.zst kioku-65c0adfd769b9ef11b897c96a3634c61120055b8.zip | |
feat(client): redesign frontend with TailwindCSS v4
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>
Diffstat (limited to 'src/client/components/OfflineBanner.tsx')
| -rw-r--r-- | src/client/components/OfflineBanner.tsx | 31 |
1 files changed, 16 insertions, 15 deletions
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> )} |