From 8ff7f801066484e98188336b19390c43ec50cc67 Mon Sep 17 00:00:00 2001
From: NilsUeter <nils.ueter@gmail.com>
Date: Sat, 15 Apr 2023 22:44:49 +0200
Subject: [PATCH] add print button

---
 src/App.jsx   | 49 +++++++++++++++++++++++++++++--------------------
 src/index.css |  5 ++++-
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index b637167..c651fc0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -84,28 +84,37 @@ function App() {
 			</div>
 
 			<div className="body">
-				<input
-					type="file"
-					name="rosterUpload"
-					id="rosterUpload"
-					onChange={handleFileSelect}
-					style={{ display: "none" }}
-				/>
-				<label
-					htmlFor="rosterUpload"
-					className={
-						"print-display-none rosterUpload" +
-						" " +
-						(roster ? "rosterUploaded" : "")
-					}
-					id="rosterUploadContainer"
+				<div
+					className="print-display-none"
+					style={{ display: "flex", width: "100%", gap: 8 }}
 				>
-					<div id="preloadContainer">
-						<span>Upload roster file (.ros, .rosz)</span>
-					</div>
-				</label>
-				<div style={{ color: "red" }}>{error}</div>
+					<input
+						type="file"
+						name="rosterUpload"
+						id="rosterUpload"
+						onChange={handleFileSelect}
+						style={{ display: "none" }}
+					/>
+					<label
+						htmlFor="rosterUpload"
+						className={"rosterUpload " + (roster ? "rosterUploaded" : "")}
+						id="rosterUploadContainer"
+					>
+						<div id="preloadContainer">
+							<span>Upload roster file (.ros, .rosz)</span>
+						</div>
+					</label>
 
+					<button
+						style={{ display: roster ? "" : "none" }}
+						onClick={() => window.print()}
+					>
+						Print roster
+					</button>
+				</div>
+				<div className="print-display-none" style={{ color: "red" }}>
+					{error}
+				</div>
 				<Roster roster={roster} />
 				<button
 					className="print-display-none"
diff --git a/src/index.css b/src/index.css
index b90bc44..1975923 100644
--- a/src/index.css
+++ b/src/index.css
@@ -54,6 +54,7 @@ button {
 }
 button:hover {
 	border-color: #536766;
+	background-color: #53676660;
 }
 button:focus,
 button:focus-visible {
@@ -89,6 +90,7 @@ button:focus-visible {
 }
 
 .rosterUpload {
+	flex: 1;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -151,7 +153,8 @@ button:focus-visible {
 }
 
 @media print {
-	.print-display-none {
+	.print-display-none,
+	.print-display-none > * {
 		display: none;
 	}