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/DeleteCardModal.tsx | 122 +++++++++++++++---------------
 1 file changed, 62 insertions(+), 60 deletions(-)

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

diff --git a/src/client/components/DeleteCardModal.tsx b/src/client/components/DeleteCardModal.tsx
index 99abbd0..44a745d 100644
--- a/src/client/components/DeleteCardModal.tsx
+++ b/src/client/components/DeleteCardModal.tsx
@@ -81,18 +81,7 @@ export function DeleteCardModal({
 			role="dialog"
 			aria-modal="true"
 			aria-labelledby="delete-card-title"
-			style={{
-				position: "fixed",
-				top: 0,
-				left: 0,
-				right: 0,
-				bottom: 0,
-				backgroundColor: "rgba(0, 0, 0, 0.5)",
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
-				zIndex: 1000,
-			}}
+			className="fixed inset-0 bg-ink/40 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fade-in"
 			onClick={(e) => {
 				if (e.target === e.currentTarget) {
 					handleClose();
@@ -104,56 +93,69 @@ export function DeleteCardModal({
 				}
 			}}
 		>
-			<div
-				style={{
-					backgroundColor: "white",
-					padding: "1.5rem",
-					borderRadius: "8px",
-					width: "100%",
-					maxWidth: "400px",
-					margin: "1rem",
-				}}
-			>
-				<h2 id="delete-card-title" style={{ marginTop: 0 }}>
-					Delete Card
-				</h2>
-
-				{error && (
-					<div role="alert" style={{ color: "red", marginBottom: "1rem" }}>
-						{error}
+			<div className="bg-white rounded-2xl shadow-xl w-full max-w-md animate-scale-in">
+				<div className="p-6">
+					<div className="w-12 h-12 mx-auto mb-4 bg-error/10 rounded-full flex items-center justify-center">
+						<svg
+							className="w-6 h-6 text-error"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+							aria-hidden="true"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={2}
+								d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+							/>
+						</svg>
 					</div>
-				)}
-
-				<p>Are you sure you want to delete this card?</p>
-				<p style={{ color: "#666", fontStyle: "italic" }}>"{displayFront}"</p>
-				<p style={{ color: "#666" }}>This action cannot be undone.</p>
-
-				<div
-					style={{
-						display: "flex",
-						gap: "0.5rem",
-						justifyContent: "flex-end",
-						marginTop: "1.5rem",
-					}}
-				>
-					<button type="button" onClick={handleClose} disabled={isDeleting}>
-						Cancel
-					</button>
-					<button
-						type="button"
-						onClick={handleDelete}
-						disabled={isDeleting}
-						style={{
-							backgroundColor: "#dc3545",
-							color: "white",
-							border: "none",
-							padding: "0.5rem 1rem",
-							borderRadius: "4px",
-							cursor: isDeleting ? "not-allowed" : "pointer",
-						}}
+
+					<h2
+						id="delete-card-title"
+						className="font-display text-xl font-medium text-ink text-center mb-2"
 					>
-						{isDeleting ? "Deleting..." : "Delete"}
-					</button>
+						Delete Card
+					</h2>
+
+					{error && (
+						<div
+							role="alert"
+							className="bg-error/5 text-error text-sm px-4 py-3 rounded-lg border border-error/20 mb-4"
+						>
+							{error}
+						</div>
+					)}
+
+					<p className="text-slate text-center mb-2">
+						Are you sure you want to delete this card?
+					</p>
+					<p className="text-muted text-sm text-center italic mb-2">
+						"{displayFront}"
+					</p>
+					<p className="text-muted text-sm text-center mb-6">
+						This action cannot be undone.
+					</p>
+
+					<div className="flex gap-3 justify-center">
+						<button
+							type="button"
+							onClick={handleClose}
+							disabled={isDeleting}
+							className="px-4 py-2 text-slate hover:bg-ivory rounded-lg transition-colors disabled:opacity-50 min-w-[100px]"
+						>
+							Cancel
+						</button>
+						<button
+							type="button"
+							onClick={handleDelete}
+							disabled={isDeleting}
+							className="px-4 py-2 bg-error hover:bg-error/90 text-white font-medium rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed min-w-[100px]"
+						>
+							{isDeleting ? "Deleting..." : "Delete"}
+						</button>
+					</div>
 				</div>
 			</div>
 		</div>
-- 
cgit v1.2.3-70-g09d2