578 less media query breakpoints

ScottLogic · Feb 27, 2024 · e5471a8 · e5471a8
1 parent e82478e
commit e5471a8
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 74 deletions.
diff --git a/frontend/src/components/Overlay/MultipageOverlay.css b/frontend/src/components/Overlay/MultipageOverlay.css
@@ -32,24 +32,6 @@
 	padding: 0 4rem;
 }
 
-@media (width < 93.75rem) {
-	.overlay {
-		width: 55vw;
-	}
-
-	.multi-page-text-image-container {
-		grid-template-columns: 15% 85%;
-	}
-
-	.multi-page-content {
-		padding: 1rem;
-	}
-
-	.multi-page-speaker-text {
-		padding: 0 3rem;
-	}
-}
-
 @media (width < 87.5rem) {
 	.overlay {
 		width: 60vw;
@@ -63,6 +45,10 @@
 		padding: 0.5rem;
 	}
 
+	.multi-page-text-image-container {
+		grid-template-columns: 15% 85%;
+	}
+
 	.multi-page-speaker-text {
 		gap: 0.25rem;
 		padding: 0 1rem;

diff --git a/frontend/src/components/Overlay/OverlayChoice.css b/frontend/src/components/Overlay/OverlayChoice.css
@@ -10,9 +10,8 @@
 	margin-top: 0;
 }
 
-@media (width < 43.75rem) {
+@media (width < 62.5rem) {
 	.overlay-choice {
-		gap: 0;
-		padding: 0;
+		padding: 0.5rem;
 	}
 }
diff --git a/frontend/src/components/Overlay/OverlayHeader.css b/frontend/src/components/Overlay/OverlayHeader.css
@@ -41,12 +41,6 @@
 	height: 1.25rem;
 }
 
-@media (width < 93.75rem) {
-	.overlay-header {
-		height: 4rem;
-	}
-}
-
 @media (width < 87.5rem) {
 	.overlay-header {
 		height: 3rem;

diff --git a/frontend/src/components/Overlay/OverlayNav.css b/frontend/src/components/Overlay/OverlayNav.css
@@ -2,19 +2,12 @@
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
 	gap: 1rem;
-	height: 5rem;
-	padding: 0;
+	padding: 1.25rem;
 	border-bottom-right-radius: 0.625rem;
 	border-bottom-left-radius: 0.625rem;
 	background-color: var(--overlay-header-background-colour);
 }
 
-.overlay-nav div {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
 .overlay-nav .nav-buttons {
 	display: flex;
 	gap: 0.5rem;
@@ -34,40 +27,36 @@
 	background-color: var(--overlay-tab-colour);
 }
 
-.overlay-nav .previous-container {
-	justify-content: flex-end;
+.overlay-nav .previous {
+	grid-column: 1;
+	justify-self: end;
 }
 
-.overlay-nav .next-container {
-	justify-content: flex-start;
+.overlay-nav .next {
+	grid-column: 3;
+	justify-self: start;
 }
 
 .overlay-nav p {
 	display: flex;
+	grid-column: 2;
 	justify-content: center;
 	align-items: center;
 	margin: 0;
 	padding: 0;
 	font-weight: 700;
 }
 
-@media (width < 93.75rem) {
-	.overlay-nav {
-		height: 4rem;
-	}
-}
-
 @media (width <= 87.5rem) {
 	.overlay-nav {
-		height: 3rem;
+		padding: 0.3125rem;
 	}
 }
 
 @media (width <= 62.5rem) {
 	.overlay-nav {
 		height: fit-content;
 		margin: 0;
-		padding: 0.125rem;
 	}
 
 	.overlay-nav .nav-buttons {

diff --git a/frontend/src/components/Overlay/OverlayNav.tsx b/frontend/src/components/Overlay/OverlayNav.tsx
@@ -21,27 +21,23 @@ function OverlayNav({
 
 	return (
 		<nav className="overlay-nav">
-			<div className="previous-container">
-				{!previousDisabled && (
-					<button onClick={goToPreviousPage} className="nav-buttons">
-						<span aria-hidden className="button-icon">
-							◄
-						</span>
-						Previous
-					</button>
-				)}
-			</div>
+			{!previousDisabled && (
+				<button onClick={goToPreviousPage} className="nav-buttons previous">
+					<span aria-hidden className="button-icon">
+						◄
+					</span>
+					Previous
+				</button>
+			)}
 			<p>{pagination}</p>
-			<div className="next-container">
-				{!nextDisabled && (
-					<button onClick={goToNextPage} className="nav-buttons">
-						Next
-						<span aria-hidden className="button-icon">
-							►
-						</span>
-					</button>
-				)}
-			</div>
+			{!nextDisabled && (
+				<button onClick={goToNextPage} className="nav-buttons next">
+					Next
+					<span aria-hidden className="button-icon">
+						►
+					</span>
+				</button>
+			)}
 		</nav>
 	);
 }

diff --git a/frontend/src/components/ThemedButtons/ModeSelectButtons.css b/frontend/src/components/ThemedButtons/ModeSelectButtons.css
@@ -33,9 +33,3 @@
 .mode-selection-buttons button:focus-visible {
 	background-color: var(--overlay-tab-colour);
 }
-
-@media (width < 87.5rem) {
-	.mode-selection-buttons .mode-button {
-		padding: 0.5rem;
-	}
-}
diff --git a/frontend/src/components/ThemedButtons/OverlayButton.css b/frontend/src/components/ThemedButtons/OverlayButton.css
@@ -4,7 +4,8 @@
 	align-items: center;
 	align-self: center;
 	width: fit-content;
-	padding: 1rem 3rem;
+	margin: 0.5rem;
+	padding: 0.5rem 3rem;
 	border: 0.0625rem solid var(--overlay-tab-colour);
 	border-radius: 0.5rem;
 	background-color: var(--overlay-background-colour);