add print button

src/App.jsx

@@ -84,6 +84,10 @@ function App() {
 			</div>
 
 			<div className="body">
+				<div
+					className="print-display-none"
+					style={{ display: "flex", width: "100%", gap: 8 }}
+				>
 					<input
 						type="file"
 						name="rosterUpload"
@@ -93,19 +97,24 @@ function App() {
 					/>
 					<label
 						htmlFor="rosterUpload"
-					className={
-						"print-display-none rosterUpload" +
-						" " +
-						(roster ? "rosterUploaded" : "")
-					}
+						className={"rosterUpload " + (roster ? "rosterUploaded" : "")}
 						id="rosterUploadContainer"
 					>
 						<div id="preloadContainer">
 							<span>Upload roster file (.ros, .rosz)</span>
 						</div>
 					</label>
-				<div style={{ color: "red" }}>{error}</div>
 
+					<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"

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