rudimentary buttons

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

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;

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}

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
+				<Link to="/chessboard" className="btn btn-primary btn-large">
-					to="/chessboard"
-					className="rounded-3xl text-xl font-bold btn btn-primary"
-				>
 					Get Started
 				</Link>
 			</div>

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';
 

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);
+	}
+}