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/CreateDeckModal.tsx | 160 ++++++++++++++----------------
 1 file changed, 75 insertions(+), 85 deletions(-)

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

diff --git a/src/client/components/CreateDeckModal.tsx b/src/client/components/CreateDeckModal.tsx
index 85afb0c..4541a68 100644
--- a/src/client/components/CreateDeckModal.tsx
+++ b/src/client/components/CreateDeckModal.tsx
@@ -78,18 +78,7 @@ export function CreateDeckModal({
 			role="dialog"
 			aria-modal="true"
 			aria-labelledby="create-deck-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();
@@ -101,83 +90,84 @@ export function CreateDeckModal({
 				}
 			}}
 		>
-			<div
-				style={{
-					backgroundColor: "white",
-					padding: "1.5rem",
-					borderRadius: "8px",
-					width: "100%",
-					maxWidth: "400px",
-					margin: "1rem",
-				}}
-			>
-				<h2 id="create-deck-title" style={{ marginTop: 0 }}>
-					Create New Deck
-				</h2>
+			<div className="bg-white rounded-2xl shadow-xl w-full max-w-md animate-scale-in">
+				<div className="p-6">
+					<h2
+						id="create-deck-title"
+						className="font-display text-xl font-medium text-ink mb-6"
+					>
+						Create New Deck
+					</h2>
 
-				<form onSubmit={handleSubmit}>
-					{error && (
-						<div role="alert" style={{ color: "red", marginBottom: "1rem" }}>
-							{error}
-						</div>
-					)}
+					<form onSubmit={handleSubmit} className="space-y-4">
+						{error && (
+							<div
+								role="alert"
+								className="bg-error/5 text-error text-sm px-4 py-3 rounded-lg border border-error/20"
+							>
+								{error}
+							</div>
+						)}
 
-					<div style={{ marginBottom: "1rem" }}>
-						<label
-							htmlFor="deck-name"
-							style={{ display: "block", marginBottom: "0.25rem" }}
-						>
-							Name
-						</label>
-						<input
-							id="deck-name"
-							type="text"
-							value={name}
-							onChange={(e) => setName(e.target.value)}
-							required
-							maxLength={255}
-							disabled={isSubmitting}
-							style={{ width: "100%", boxSizing: "border-box" }}
-						/>
-					</div>
+						<div>
+							<label
+								htmlFor="deck-name"
+								className="block text-sm font-medium text-slate mb-1.5"
+							>
+								Name
+							</label>
+							<input
+								id="deck-name"
+								type="text"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+								required
+								maxLength={255}
+								disabled={isSubmitting}
+								className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed"
+								placeholder="My New Deck"
+							/>
+						</div>
 
-					<div style={{ marginBottom: "1rem" }}>
-						<label
-							htmlFor="deck-description"
-							style={{ display: "block", marginBottom: "0.25rem" }}
-						>
-							Description (optional)
-						</label>
-						<textarea
-							id="deck-description"
-							value={description}
-							onChange={(e) => setDescription(e.target.value)}
-							maxLength={1000}
-							disabled={isSubmitting}
-							rows={3}
-							style={{
-								width: "100%",
-								boxSizing: "border-box",
-								resize: "vertical",
-							}}
-						/>
-					</div>
+						<div>
+							<label
+								htmlFor="deck-description"
+								className="block text-sm font-medium text-slate mb-1.5"
+							>
+								Description{" "}
+								<span className="text-muted font-normal">(optional)</span>
+							</label>
+							<textarea
+								id="deck-description"
+								value={description}
+								onChange={(e) => setDescription(e.target.value)}
+								maxLength={1000}
+								disabled={isSubmitting}
+								rows={3}
+								className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed resize-none"
+								placeholder="What will you learn?"
+							/>
+						</div>
 
-					<div
-						style={{
-							display: "flex",
-							gap: "0.5rem",
-							justifyContent: "flex-end",
-						}}
-					>
-						<button type="button" onClick={handleClose} disabled={isSubmitting}>
-							Cancel
-						</button>
-						<button type="submit" disabled={isSubmitting || !name.trim()}>
-							{isSubmitting ? "Creating..." : "Create"}
-						</button>
-					</div>
-				</form>
+						<div className="flex gap-3 justify-end pt-2">
+							<button
+								type="button"
+								onClick={handleClose}
+								disabled={isSubmitting}
+								className="px-4 py-2 text-slate hover:bg-ivory rounded-lg transition-colors disabled:opacity-50"
+							>
+								Cancel
+							</button>
+							<button
+								type="submit"
+								disabled={isSubmitting || !name.trim()}
+								className="px-4 py-2 bg-primary hover:bg-primary-dark text-white font-medium rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+							>
+								{isSubmitting ? "Creating..." : "Create Deck"}
+							</button>
+						</div>
+					</form>
+				</div>
 			</div>
 		</div>
 	);
-- 
cgit v1.2.3-70-g09d2