color picker for custom colors

src/App.jsx

@@ -9,6 +9,7 @@ function App() {
 	const [error, setError] = useState();
 	const [roster, setRoster] = useState();
 	const [onePerPage, setOnePerPage] = useState(false);
+	const [primaryColor, setPrimaryColor] = useState();
 	const uploadRef = useRef();
 	async function handleFileSelect(event) {
 		const files = event?.target?.files;
@@ -89,6 +90,11 @@ function App() {
 			uploadRef.current?.removeAttribute("accept");
 		}
 	}, []);
+	useEffect(() => {
+		if (roster) {
+			setPrimaryColor(getPrimaryColor(roster.forces[0].catalog));
+		}
+	}, [roster]);
 
 	return (
 		<div className="App">
@@ -101,7 +107,13 @@ function App() {
 				</div>
 			</div>
 
-			<div className="body">
+			<div
+				className="body"
+				style={{
+					"--primary-color": primaryColor,
+					"--primary-color-transparent": primaryColor + "60",
+				}}
+			>
 				<div
 					className="print-display-none"
 					style={{ display: "flex", width: "100%", gap: 8 }}
@@ -134,7 +146,7 @@ function App() {
 				</div>
 				<div
 					className="print-display-none"
-					style={{ display: roster ? "" : "none", width: "100%" }}
+					style={{ display: roster ? "flex" : "none", width: "100%", gap: 16 }}
 				>
 					<label style={{ display: "flex", alignItems: "center", gap: 4 }}>
 						<input
@@ -143,6 +155,17 @@ function App() {
 						/>
 						One Datacard per Page when Printing
 					</label>
+					<label style={{ display: "flex", alignItems: "center", gap: 4 }}>
+						<input
+							type="color"
+							style={{ height: 24, width: 32, padding: "0 2px" }}
+							value={primaryColor}
+							onChange={(e) => {
+								setPrimaryColor(e.target.value);
+							}}
+						></input>
+						Custom Color
+					</label>
 				</div>
 				<div className="print-display-none" style={{ color: "red" }}>
 					{error}
@@ -191,4 +214,51 @@ function App() {
 	);
 }
 
+const getPrimaryColor = (catalog) => {
+	switch (catalog) {
+		case "Adeptus Astartes":
+			return "#536766";
+		case "Adeptus Custodes":
+			return "#536766";
+		case "Adeptus Mechanicus":
+			return "#536766";
+		case "Astra Militarum":
+			return "#375441";
+		case "Chaos Daemons":
+			return "#536766";
+		case "Chaos Space Marines":
+			return "#1d3138";
+		case "Death Guard":
+			return "#536766";
+		case "Drukhari":
+			return "#536766";
+		case "Genestealer Cults":
+			return "#536766";
+		case "Grey Knights":
+			return "#536766";
+		case "Harlequins":
+			return "#536766";
+		case "Imperial Knights":
+			return "#536766";
+		case "Necrons":
+			return "#005c2f";
+		case "Orks":
+			return "#4b6621";
+		case "Sisters of Battle":
+			return "#536766";
+		case "Space Marines":
+			return "#536766";
+		case "Tau Empire":
+			return "#536766";
+		case "Thousand Sons":
+			return "#536766";
+		case "Tyranids":
+			return "#44264C";
+		case "Ynnari":
+			return "#536766";
+		default:
+			return "#536766";
+	}
+};
+
 export default App;

src/Roster.jsx

@@ -10,13 +10,10 @@ export const Roster = ({ roster, onePerPage }) => {
 		return null;
 	}
 	const { name, cost, forces } = roster;
-	const primaryColor = getPrimaryColor(forces[0].catalog);
 	return (
 		<div
 			style={{
 				position: "relative",
-				"--primary-color": primaryColor,
-				"--primary-color-transparent": primaryColor + "60",
 			}}
 		>
 			<div
@@ -39,53 +36,6 @@ export const Roster = ({ roster, onePerPage }) => {
 	);
 };
 
-const getPrimaryColor = (catalog) => {
-	switch (catalog) {
-		case "Adeptus Astartes":
-			return "#536766";
-		case "Adeptus Custodes":
-			return "#536766";
-		case "Adeptus Mechanicus":
-			return "#536766";
-		case "Astra Militarum":
-			return "#375441";
-		case "Chaos Daemons":
-			return "#536766";
-		case "Chaos Space Marines":
-			return "#1d3138";
-		case "Death Guard":
-			return "#536766";
-		case "Drukhari":
-			return "#536766";
-		case "Genestealer Cults":
-			return "#536766";
-		case "Grey Knights":
-			return "#536766";
-		case "Harlequins":
-			return "#536766";
-		case "Imperial Knights":
-			return "#536766";
-		case "Necrons":
-			return "#005c2f";
-		case "Orks":
-			return "#4b6621";
-		case "Sisters of Battle":
-			return "#536766";
-		case "Space Marines":
-			return "#536766";
-		case "Tau Empire":
-			return "#536766";
-		case "Thousand Sons":
-			return "#536766";
-		case "Tyranids":
-			return "#44264C";
-		case "Ynnari":
-			return "#536766";
-		default:
-			return "#536766";
-	}
-};
-
 const Force = ({ force, onePerPage }) => {
 	const { units, rules, catalog } = force;
 
@@ -173,9 +123,12 @@ const Unit = ({ unit, index, catalog, onePerPage }) => {
 				marginBottom: 32,
 			}}
 		>
-			<label className="print-display-none">
+			<label
+				className="print-display-none"
+				style={{ display: "flex", alignItems: "center" }}
+			>
 				<input type="checkbox" onChange={() => setHide(!hide)} />
-				Don't print this card.
+				<span className="print-display-none">Don't print this card.</span>
 			</label>
 			<div
 				style={{
@@ -251,7 +204,7 @@ const Unit = ({ unit, index, catalog, onePerPage }) => {
 					</div>
 					<div
 						style={{
-							width: "calc(100% - 32px)",
+							width: "100%",
 							display: "flex",
 							flexDirection: "column",
 							gap: 6,
@@ -340,8 +293,7 @@ const Unit = ({ unit, index, catalog, onePerPage }) => {
 				</div>
 				<div
 					style={{
-						padding: 20,
-						paddingBottom: 50,
+						padding: "var(--size-20) var(--size-20) 50px var(--size-20)",
 						flex: "1",
 						maxWidth: 400,
 						position: "relative",
@@ -719,7 +671,10 @@ const Psyker = ({ psyker, index }) => {
 
 const Spells = ({ title, spells }) => {
 	return (
-		<table className="weapons-table" style={{ width: "100%", marginTop: 20 }}>
+		<table
+			className="weapons-table"
+			style={{ width: "100%", marginTop: "var(--size-20)" }}
+		>
 			{spells.length > 0 && (
 				<thead>
 					<tr
@@ -823,7 +778,7 @@ const ForceRules = ({ rules, onePerPage }) => {
 				display: "flex",
 				flexDirection: "column",
 				gap: 8,
-				padding: "20px 20px",
+				padding: "var(--size-20)",
 				backgroundColor: "#dfe0e2",
 				border: "2px solid var(--primary-color)",
 			}}

src/index.css

@@ -14,6 +14,10 @@
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-text-size-adjust: 100%;
+
+	--size-20: 20px;
+	--size-24: 24px;
+	--size-32: 32px;
 }
 
 * {
@@ -33,7 +37,7 @@ a:hover {
 
 body {
 	margin: 0;
-	min-width: 700px;
+	min-width: 600px;
 	min-height: 100vh;
 }
 
@@ -67,7 +71,7 @@ button:focus-visible {
 	align-items: center;
 	justify-content: center;
 	gap: 8px;
-	padding: 24px 32px;
+	padding: var(--size-24) var(--size-32);
 	max-width: 1100px;
 	margin-left: auto;
 	margin-right: auto;
@@ -174,3 +178,12 @@ button:focus-visible {
 		min-width: 1000px;
 	}
 }
+
+@media screen and (max-width: 800px) {
+	:root {
+		font-size: 11px;
+		--size-20: 8px;
+		--size-24: 12px;
+		--size-32: 16px;
+	}
+}