feat: add style to buttons

src/routes/+page.svelte

@@ -10,6 +10,8 @@
 	let workout_type = $state("");
 	let duration_minutes = $state(0);
 
+	let selected_cell: `${number}:${number}` | undefined = $state(undefined);
+
 	onMount(() => {
 		const today = new Date();
 		date = today.toISOString().split("T")[0];
@@ -79,7 +81,7 @@
 					/>
 				</td>
 				<td>
-					<button type="submit">
+					<button type="submit" class="button button-save">
 						<Save color="green" />
 					</button>
 				</td>
@@ -97,14 +99,18 @@
 						<td>{wk.workout_type}</td>
 						<td>{wk.duration_minutes}</td>
 						<td>
-							<button
-								type="button"
+							<a
+								class="button button-delete"
+								role="button"
+								tabindex={i}
 								onclick={(e) => {
 									e.stopPropagation();
 									e.preventDefault();
 									deleteRow(i);
-								}}><Trash2 color="red" /></button
+								}}
 							>
+								<Trash2 color="red" />
+							</a>
 						</td>
 					</tr>
 				{/each}
@@ -136,7 +142,7 @@
 		padding: 16px;
 	}
 
-	tbody tr:nth-child(even) {
+	tr:nth-child(even) {
 		background-color: #f2f2f2;
 		color: #000;
 	}
@@ -144,7 +150,6 @@
 	tbody tr:hover {
 		background-color: #c2c2c2;
 		color: #000;
-		font-weight: bold;
 	}
 
 	th {
@@ -155,17 +160,45 @@
 		font-size: 0.95rem;
 	}
 
-	button {
+	.button {
 		width: 3rem;
 		height: 2rem;
 		cursor: pointer;
-		border: none;
 		border-radius: 5px;
-		background-color: transparent;
+		background-color: white;
+		border: solid;
+		border-width: 2px;
 	}
-	button:hover {
-		background-color: #fff;
+
+	.button-delete {
+		display: flex;
+		justify-content: center;
+		text-align: center;
+		align-items: center;
+		vertical-align: middle;
+		border-color: red;
+		color: red;
 	}
+
+	.button-save {
+		background-color: white;
+		border-color: green;
+		color: green;
+	}
+
+	.button-save:hover {
+		background-color: green;
+		border-color: green;
+	}
+	.button-delete:hover {
+		background-color: red;
+		border-color: red;
+	}
+
+	:global .button:hover svg {
+		stroke: white;
+	}
+
 	input[type="text"] {
 		width: 100%;
 		padding: 8px;