Generalise currently class page specific components for use on the test page

src/stylesheets/base/_typography.scss

@@ -12,7 +12,7 @@ a {
 	}
 }
 
-span.hl {
+.hl {
 	color: $primary-colour;
 	font-weight: bold;
 }

src/stylesheets/components/_admin.scss

@@ -76,3 +76,86 @@
 		padding: .5rem 1rem;
 	}
 }
+
+.adminOverview {
+	@include space-contents;
+
+	&__buttons {
+		display: flex;
+		justify-content: center;
+		gap: 1rem;
+
+		@include respond-to('medium') {
+			flex-direction: column;
+			justify-content: space-around;
+			text-align: center;
+		}
+	}
+
+	@include respond-to('medium') {
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+}
+
+.adminStats {
+	@include space-contents;
+
+	&__stats {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: .5rem;
+
+		div {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			text-align: center;
+			background: $admin-bg;
+			padding: .5rem;
+			border-radius: 10px;
+
+			h3 {
+				color: $primary-colour;
+				font-size: 1.3em;
+			}
+
+			&:nth-child(odd):last-child {
+				grid-column-end: span 2;
+
+				@include respond-to('medium') {
+					grid-column-end: span 1;
+				}
+			}
+		}
+
+		@include respond-to('medium') {
+			grid-template-columns: repeat(5, 1fr);
+		}
+
+	}
+
+	&__graphs {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+
+		div {
+			box-sizing: border-box;
+			background: $admin-bg;
+			padding: 10rem 0;
+			width: 100%;
+			text-align: center;
+			border-radius: 20px;
+		}
+
+		@include respond-to('medium') {
+			flex-direction: row;
+		}
+	}
+
+	@include respond-to('medium') {
+		@include space-contents(1rem);
+	}
+}

src/stylesheets/pages/_class.scss

@@ -3,11 +3,7 @@
 		font-size: 1.1em;
 	}
 
-	&__overview {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-
+	.adminOverview {
 		&__members {
 			display: grid;
 			grid-template-columns: 1fr 1fr;
@@ -16,85 +12,6 @@
 				gap: .5rem;
 			}
 		}
-
-		&__buttons {
-			display: flex;
-			justify-content: center;
-			gap: 1rem;
-
-			@include respond-to('medium') {
-				flex-direction: column;
-				justify-content: space-around;
-				text-align: center;
-			}
-		}
-
-		@include respond-to('medium') {
-			flex-direction: row;
-			justify-content: space-between;
-			align-items: center;
-		}
-	}
-
-	&__stats {
-		@include space-contents;
-
-		&__stats {
-			display: grid;
-			grid-template-columns: 1fr 1fr;
-			gap: .5rem;
-
-			div {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				text-align: center;
-				background: $admin-bg;
-				padding: .5rem;
-				border-radius: 10px;
-
-				h3 {
-					color: $primary-colour;
-					font-size: 1.3em;
-				}
-
-				&:nth-child(odd):last-child {
-					grid-column-end: span 2;
-
-					@include respond-to('medium') {
-						grid-column-end: span 1;
-					}
-				}
-			}
-
-			@include respond-to('medium') {
-				grid-template-columns: repeat(5, 1fr);
-			}
-
-		}
-
-		&__graphs {
-			display: flex;
-			flex-direction: column;
-			gap: 1rem;
-
-			div {
-				box-sizing: border-box;
-				background: $admin-bg;
-				padding: 10rem 0;
-				width: 100%;
-				text-align: center;
-				border-radius: 20px;
-			}
-
-			@include respond-to('medium') {
-				flex-direction: row;
-			}
-		}
-
-		@include respond-to('medium') {
-			@include space-contents(1rem);
-		}
 	}
 
 	&__tests {

views/class.hbs

@@ -2,18 +2,18 @@
 	<div class='adminSection'>
 		<div class='adminItem'>
 			<h2>Class Overview - {{ className }}</h2>
-			<div class='classPage__overview'>
-				<div class='classPage__overview__section'>
+			<div class='adminOverview'>
+				<div>
 					<h3>Teachers</h3>
 					{{#each teachers}}
 						{{> classTeacher name=shortName email=email }}
 					{{/each}}
 				</div>
-				<div class='classPage__overview__section'>
+				<div>
 					<h3>Members</h3>
 					{{> classMembers members=members }}
 				</div>
-				<div class='classPage__overview__section classPage__overview__buttons'>
+				<div class='adminOverview__buttons'>
 					{{> button style='full' colour='primary' to=contactLink content='Contact'}}
 					{{> button style='full' colour='primary' to=testsLink content='View Tests'}}
 				</div>
@@ -21,17 +21,17 @@
 		</div>
 	</div>
 	<div class='adminSection'>
-		<div class='adminItem classPage__stats'>
+		<div class='adminItem adminStats'>
 			<div class='adminItem__title'>
 				<h2>Statistics and Reports</h2>
 				{{> button style='full' colour='primary' to=reportsLink content='View All'}}
 			</div>
-			<div class='classPage__stats__stats'>
+			<div class='adminStats__stats'>
 				{{#each stats}}
-					{{> classStat value=value text=text }}
+					{{> adminStat value=value text=text }}
 				{{/each}}
 			</div>
-			<div class='classPage__stats__graphs'>
+			<div class='adminStats__graphs'>
 				{{> graph }}
 				{{> graph }}
 			</div>