fix: Table styling missing on lightmode

frontend/src/App.vue

@@ -1166,6 +1166,32 @@ button.delete:focus {
 	}
 }
 
+.table {
+	background-color: var(--white);
+	color: var(--dark-grey);
+	width: 100%;
+	border-collapse: collapse;
+	border-spacing: 0;
+	border-radius: 5px;
+
+	thead th {
+		padding: 5px 10px;
+		text-align: left;
+		font-weight: 600;
+		color: var(--grey-3);
+	}
+
+	tr {
+		&:nth-child(even) {
+			background-color: #fafafa;
+		}
+		&:hover,
+		&:focus {
+			background-color: var(--light-grey);
+		}
+	}
+}
+
 .button {
 	border: 1px solid var(--light-grey-2);
 	background-color: var(--white);

frontend/src/components/modals/EditNews.vue

@@ -96,7 +96,7 @@ export default {
 		marked.use({
 			renderer: {
 				table(header, body) {
-					return `<table class="table is-striped">
+					return `<table class="table">
 					<thead>${header}</thead>
 					<tbody>${body}</tbody>
 					</table>`;

frontend/src/components/modals/WhatIsNew.vue

@@ -54,7 +54,7 @@ export default {
 		marked.use({
 			renderer: {
 				table(header, body) {
-					return `<table class="table is-striped">
+					return `<table class="table">
 					<thead>${header}</thead>
 					<tbody>${body}</tbody>
 					</table>`;

frontend/src/pages/Admin/tabs/HiddenSongs.vue

@@ -110,7 +110,7 @@
 				<span>Loaded songs: {{ songs.length }}</span>
 			</p>
 			<br />
-			<table class="table is-striped">
+			<table class="table">
 				<thead>
 					<tr>
 						<td>Thumbnail</td>

frontend/src/pages/Admin/tabs/News.vue

@@ -7,7 +7,7 @@
 					Create News Item
 				</button>
 			</div>
-			<table class="table is-striped">
+			<table class="table">
 				<thead>
 					<tr>
 						<td>Status</td>

frontend/src/pages/Admin/tabs/Playlists.vue

@@ -44,7 +44,7 @@
 					</button>
 				</confirm>
 			</div>
-			<table class="table is-striped">
+			<table class="table">
 				<thead>
 					<tr>
 						<td>Display name</td>

frontend/src/pages/Admin/tabs/Punishments.vue

@@ -2,7 +2,7 @@
 	<div>
 		<page-metadata title="Admin | Punishments" />
 		<div class="container">
-			<table class="table is-striped">
+			<table class="table">
 				<thead>
 					<tr>
 						<td>Status</td>

frontend/src/pages/Admin/tabs/Reports.vue

@@ -2,7 +2,7 @@
 	<div>
 		<page-metadata title="Admin | Reports" />
 		<div class="container">
-			<table class="table is-striped">
+			<table class="table">
 				<thead>
 					<tr>
 						<td>Summary</td>

frontend/src/pages/Admin/tabs/Stations.vue

@@ -15,7 +15,7 @@
 					</button>
 				</confirm>
 			</div>
-			<table class="table is-striped">
+			<table class="table">
 				<thead>
 					<tr>
 						<td>ID</td>

frontend/src/pages/Admin/tabs/UnverifiedSongs.vue

@@ -110,7 +110,7 @@
 				<span>Loaded songs: {{ songs.length }}</span>
 			</p>
 			<br />
-			<table class="table is-striped">
+			<table class="table">
 				<thead>
 					<tr>
 						<td>Thumbnail</td>

frontend/src/pages/Admin/tabs/Users.vue

@@ -4,7 +4,7 @@
 		<div class="container">
 			<h2 v-if="dataRequests.length > 0">Data Requests</h2>
 
-			<table class="table is-striped" v-if="dataRequests.length > 0">
+			<table class="table" v-if="dataRequests.length > 0">
 				<thead>
 					<tr>
 						<td>User ID</td>
@@ -36,7 +36,7 @@
 
 			<h1 id="page-title">Users</h1>
 
-			<table class="table is-striped">
+			<table class="table">
 				<thead>
 					<tr>
 						<td class="ppRow">Profile Picture</td>

frontend/src/pages/Admin/tabs/VerifiedSongs.vue

@@ -120,7 +120,7 @@
 				<span>Loaded songs: {{ songs.length }}</span>
 			</p>
 			<br />
-			<table class="table is-striped">
+			<table class="table">
 				<thead>
 					<tr>
 						<td>Thumbnail</td>

frontend/src/pages/News.vue

@@ -62,7 +62,7 @@ export default {
 		marked.use({
 			renderer: {
 				table(header, body) {
-					return `<table class="table is-striped">
+					return `<table class="table">
 					<thead>${header}</thead>
 					<tbody>${body}</tbody>
 					</table>`;