From 19c2951cc33980c1cf0286b99d18bb486f69613e Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Tue, 2 Jun 2026 21:02:46 +0200
Subject: [PATCH] rudimentary buttons

---
 TODO                         |  1 +
 src/components/PgnViewer.tsx |  1 +
 src/pages/Chessboard.tsx     |  6 +++---
 src/pages/index.tsx          |  5 +----
 src/styles.css               |  1 +
 src/styles/_button.css       | 41 ++++++++++++++++++++++++++++++++++++
 6 files changed, 48 insertions(+), 7 deletions(-)
 create mode 100644 src/styles/_button.css

diff --git a/TODO b/TODO
index 63cf8c6..16cd01b 100644
--- a/TODO
+++ b/TODO
@@ -4,6 +4,7 @@ Env Vars
 API base URL
 
 - style clear/save buttons
+- rearrange buttons / header space - collapse on smaller screens
 
 - add / edit headers
 - custom headers - title etc
diff --git a/src/components/PgnViewer.tsx b/src/components/PgnViewer.tsx
index 3d6e50c..a7199de 100644
--- a/src/components/PgnViewer.tsx
+++ b/src/components/PgnViewer.tsx
@@ -11,6 +11,7 @@ const PgnViewer = ({ gamePgn, handlePlyChange }: IProps) => {
 	const containerRef = useRef<HTMLDivElement | null>(null);
 	const viewerRef = useRef(null);
 
+	// TODO make thin, and pull functions out
 	useEffect(() => {
 		const element: HTMLElement | null = document.querySelector(".lpv-board");
 		if (!element) return;
diff --git a/src/pages/Chessboard.tsx b/src/pages/Chessboard.tsx
index 69a0605..9169322 100644
--- a/src/pages/Chessboard.tsx
+++ b/src/pages/Chessboard.tsx
@@ -33,7 +33,7 @@ const Chessboard = () => {
 
 			<div className="flex gap-4">
 				<button
-					className="cursor-pointer"
+					className="btn btn-primary"
 					type="button"
 					onClick={handleClearGame}
 				>
@@ -41,7 +41,7 @@ const Chessboard = () => {
 				</button>
 
 				<button
-					className="cursor-pointer"
+					className="btn btn-secondary"
 					type="button"
 					onClick={handleSavePgn}
 					disabled={!gameState.pgn}
@@ -50,7 +50,7 @@ const Chessboard = () => {
 				</button>
 
 				<button
-					className="cursor-pointer"
+					className="btn btn-secondary"
 					type="button"
 					onClick={handleSavePdf}
 					disabled={!gameState.pgn || generatingPdf}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0d43549..03e22c6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -23,10 +23,7 @@ const Home = () => (
 					Upload and convert your games into a book format, along with variation
 					and annotations.
 				</h2>
-				<Link
-					to="/chessboard"
-					className="rounded-3xl text-xl font-bold btn btn-primary"
-				>
+				<Link to="/chessboard" className="btn btn-primary btn-large">
 					Get Started
 				</Link>
 			</div>
diff --git a/src/styles.css b/src/styles.css
index 4b42a90..a08072c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "styles/_accordion.css";
 @import "./styles/_input.css";
+@import "./styles/_button.css";
 @import "./styles/_file-input.css";
 @import './styles/_pgn-viewer.css';
 
diff --git a/src/styles/_button.css b/src/styles/_button.css
new file mode 100644
index 0000000..d7746f6
--- /dev/null
+++ b/src/styles/_button.css
@@ -0,0 +1,41 @@
+.btn {
+	font-size: 1rem;
+	font-weight: bold;
+	cursor: pointer;
+	border-radius: 0.5rem;
+
+	transition: all 0.3s ease;
+
+	&:disabled {
+		cursor: default;
+		pointer-events: none;
+		opacity: 0.5;
+	}
+}
+
+.btn-large {
+	font-size: 1.25rem;
+	padding: 1rem 4rem;
+	border-radius: 1.5rem;
+}
+
+.btn-primary {
+	background-color: var(--accent);
+	color: var(--bg-base);
+
+	&:hover {
+		background-color: var(--bg-base);
+		color: var(--accent);
+	}
+}
+
+.btn-secondary {
+	background-color: var(--bg-base);
+	color: var(--accent);
+	border: 1px solid var(--accent);
+
+	&:hover {
+		background-color: var(--accent);
+		color: var(--bg-base);
+	}
+}