647 add on hover colour change to all buttons (#765)

ScottLogic · Jan 17, 2024 · 9a2b8e2 · 9a2b8e2
1 parent e35d6cf
commit 9a2b8e2
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 0 deletions.
diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
@@ -26,6 +26,7 @@
 
 	/* action buttons */
 	--action-button-background-colour: var(--accent-background-colour);
+	--action-button-background-colour-hover: #11484b;
 	--action-button-text-colour: var(--main-text-colour);
 	--action-button-disabled-background-colour: #888;
 	--action-button-disabled-text-colour: #111;
@@ -36,10 +37,12 @@
 	--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-hover: #11484b;
 
 	/* level banner */
 	--level-banner-border-colour: #bbb;
 	--level-banner-background-colour: #ddd;
+	--level-banner-background-colour-hover: #fff;
 	--level-banner-text-colour: #444;
 
 	/* main input */
@@ -101,6 +104,7 @@
 	--chat-alerted-text-colour: teal;
 	--chat-triggered-text-colour: var(--error-colour);
 	--chat-button-background-colour: #eee;
+	--chat-button-background-colour-hover: #dedede;
 	--chat-button-border-colour: #ccc;
 	--chat-button-text-colour: #444;
 

diff --git a/frontend/src/components/LevelMissionInfoBanner/LevelMissionInfoBanner.css b/frontend/src/components/LevelMissionInfoBanner/LevelMissionInfoBanner.css
@@ -25,3 +25,7 @@
 	margin: 0;
 	font-size: 1rem;
 }
+
+.level-mission-info-banner:hover {
+	background-color: var(--level-banner-background-colour-hover);
+}
diff --git a/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css b/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css
@@ -29,3 +29,7 @@
 	background-color: transparent;
 	color: var(--level-button-colour-disabled);
 }
+
+.level-button[aria-disabled='false']:hover {
+	background-color: var(--level-button-background-colour-hover);
+}
diff --git a/frontend/src/components/ThemedButtons/ChatButton.css b/frontend/src/components/ThemedButtons/ChatButton.css
@@ -10,3 +10,7 @@
 	font-weight: 700;
 	font-size: 1rem;
 }
+
+.chat-button:hover {
+	background-color: var(--chat-button-background-colour-hover);
+}
diff --git a/frontend/src/components/ThemedButtons/ThemedButton.css b/frontend/src/components/ThemedButtons/ThemedButton.css
@@ -57,3 +57,7 @@
 .themed-button:focus + .themed-button-tooltip.show {
 	display: block;
 }
+
+.themed-button[aria-disabled='false']:hover {
+	background-color: var(--action-button-background-colour-hover);
+}