From c7767d1131dafdb4d39d1054f32119525d779b50 Mon Sep 17 00:00:00 2001
From: AAloshine-scottlogic
 <125262433+AAloshine-scottlogic@users.noreply.github.com>
Date: Fri, 9 Feb 2024 10:53:09 +0000
Subject: [PATCH] changes to css to change button color on selected/hover

---
 frontend/src/Theme.css                                   | 4 ++--
 .../components/LevelSelectionBox/LevelSelectionBox.css   | 9 +++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
index 9814b68d8..43efd0168 100644
--- a/frontend/src/Theme.css
+++ b/frontend/src/Theme.css
@@ -33,11 +33,11 @@
 	--action-button-disabled-text-colour: #111;
 
 	/* level buttons */
-	--level-button-colour: var(--main-text-colour);
+	--level-button-colour: var(--accent-background-colour);
 	--level-button-colour-disabled: #777;
 	--level-button-border-colour: var(--accent-border-colour);
 	--level-button-border-colour-disabled: #aaaaaa80;
-	--level-button-background-colour-selected: var(--accent-background-colour);
+	--level-button-background-colour-selected: var(--main-text-colour);
 	--level-button-background-colour-hover: #11484b;
 
 	/* level banner */
diff --git a/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css b/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css
index fba89269b..94fb71a42 100644
--- a/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css
+++ b/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css
@@ -11,8 +11,7 @@
 	padding: 1rem;
 	border: 0.125rem solid var(--level-button-border-colour);
 	border-radius: 0;
-	background-color: transparent;
-	color: var(--level-button-colour);
+	background-color: var(--level-button-colour);
 	font-size: 1.875rem;
 }
 
@@ -22,6 +21,7 @@
 
 .level-button.selected {
 	background-color: var(--level-button-background-colour-selected);
+	color: var(--level-button-colour);
 }
 
 .level-button.disabled {
@@ -33,3 +33,8 @@
 .level-button[aria-disabled='false']:hover {
 	background-color: var(--level-button-background-colour-hover);
 }
+
+.level-button.selected:hover {
+	background-color: var(--level-button-background-colour-selected);
+	color: var(--level-button-colour);
+}