From 6b21f0bfac9065f317344318c7155e9013b67e2b Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Tue, 2 Jun 2026 13:16:22 +0200
Subject: [PATCH] style diagram select checkbox and label text

---
 src/pages/Chessboard.tsx | 15 ++++++++++-----
 src/styles/_input.css    |  9 +++++++++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/pages/Chessboard.tsx b/src/pages/Chessboard.tsx
index 6813e7b..355e45a 100644
--- a/src/pages/Chessboard.tsx
+++ b/src/pages/Chessboard.tsx
@@ -66,19 +66,24 @@ const Chessboard = ({
 				</button>
 			</div>
 			<PgnViewer gamePgn={gameState.pgn || ""} />
-			<div className="flex justify-between max-w-150">
-				<div className="flex gap-2">
-					<label htmlFor="diagram-add">Select Diagram</label>
+			<div className="flex justify-between max-w-150 mt-2">
+				<div className="flex gap-2 items-center">
+					<label
+						htmlFor="diagram-add"
+						className="text-sm text-(--base-content)"
+					>
+						Select Diagram
+					</label>
 					<input
 						id="diagram-add"
 						name="diagram-add"
 						type="checkbox"
-						className="cursor-pointer"
+						className="checkbox-accent"
 						onChange={handleToggleDiagram}
 					/>
 				</div>
 
-				<label className="toggle">
+				<label className="toggle text-sm text-(--base-content)">
 					Render move times
 					<input
 						id="render-times"
diff --git a/src/styles/_input.css b/src/styles/_input.css
index b45a2f9..9a13b90 100644
--- a/src/styles/_input.css
+++ b/src/styles/_input.css
@@ -1,3 +1,12 @@
+/* Checkbox */
+.checkbox-accent {
+  accent-color: var(--accent);
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+
+/* Toggle */
 .toggle {
 	display: inline-flex;
 	align-items: center;