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/pages/StudyPage.test.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

(limited to 'src/client/pages/StudyPage.test.tsx')

diff --git a/src/client/pages/StudyPage.test.tsx b/src/client/pages/StudyPage.test.tsx
index bab9193..146322a 100644
--- a/src/client/pages/StudyPage.test.tsx
+++ b/src/client/pages/StudyPage.test.tsx
@@ -129,7 +129,8 @@ describe("StudyPage", () => {
 
 			renderWithProviders();
 
-			expect(screen.getByText("Loading study session...")).toBeDefined();
+			// Loading state shows spinner (svg with animate-spin class)
+			expect(document.querySelector(".animate-spin")).toBeDefined();
 		});
 
 		it("renders deck name and back link", async () => {
@@ -147,7 +148,7 @@ describe("StudyPage", () => {
 
 			await waitFor(() => {
 				expect(
-					screen.getByRole("heading", { name: /Study: Japanese Vocabulary/ }),
+					screen.getByRole("heading", { name: /Japanese Vocabulary/ }),
 				).toBeDefined();
 			});
 
@@ -229,7 +230,7 @@ describe("StudyPage", () => {
 
 			await waitFor(() => {
 				expect(
-					screen.getByRole("heading", { name: /Study: Japanese Vocabulary/ }),
+					screen.getByRole("heading", { name: /Japanese Vocabulary/ }),
 				).toBeDefined();
 			});
 		});
@@ -252,9 +253,9 @@ describe("StudyPage", () => {
 			await waitFor(() => {
 				expect(screen.getByTestId("no-cards")).toBeDefined();
 			});
-			expect(screen.getByText("No cards to study")).toBeDefined();
+			expect(screen.getByText("All caught up!")).toBeDefined();
 			expect(
-				screen.getByText("There are no due cards in this deck right now."),
+				screen.getByText("No cards due for review right now"),
 			).toBeDefined();
 		});
 	});
@@ -633,7 +634,7 @@ describe("StudyPage", () => {
 				expect(screen.getByTestId("session-complete")).toBeDefined();
 			});
 
-			expect(screen.getByText("Back to Deck")).toBeDefined();
+			expect(screen.getAllByText("Back to Deck").length).toBeGreaterThan(0);
 			expect(screen.getByText("All Decks")).toBeDefined();
 		});
 	});
-- 
cgit v1.2.3-70-g09d2

