From 9e4c5bcf8379e71c83b30634ad17599c85d545f5 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 23 Nov 2022 17:31:56 +0100
Subject: [PATCH 1/3] convert `state-color-<state>` to `hsla`, add hover color
 and add missing state `setting_metadata`

---
 client/src/style/scss/base.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index 4693894fccb..f33f4729905 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -398,6 +398,7 @@ $galaxy-state-border: (
     "error": $state-danger-border,
     "deleted": darken($state-default-border, 30%),
     "hidden": $state-default-border,
+    "setting_metadata": $state-warning-border,
 );
 
 $galaxy-state-bg: (
@@ -410,13 +411,18 @@ $galaxy-state-bg: (
     "error": $state-danger-bg,
     "deleted": darken($state-default-bg, 30%),
     "hidden": $state-default-bg,
+    "setting_metadata": $state-warning-bg,
 );
 
 @each $state in map-keys($galaxy-state-border) {
     .state-color-#{$state},
     [data-state="#{$state}"] {
         border-color: map-get($galaxy-state-border, $state);
-        background-color: map-get($galaxy-state-bg, $state);
+        background-color: change-color(map-get($galaxy-state-bg, $state), $alpha: 0.4, $lightness: 50%);
+
+        &:hover {
+            background-color: change-color(map-get($galaxy-state-bg, $state), $alpha: 0.4, $lightness: 60%);
+        }
 
         &:focus,
         &:focus-within {

From fac8ce408671bc5fa97617c5b5d4157c367a3bb6 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 23 Nov 2022 17:33:29 +0100
Subject: [PATCH 2/3] delete `content-item:hover` redundent css

---
 client/src/components/History/Content/ContentItem.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 79e4cf5aad0..efa21454e68 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -227,9 +227,6 @@ export default {
 };
 </script>
 <style lang="scss">
-.content-item:hover {
-    filter: brightness(105%);
-}
 .content-item {
     .name {
         word-break: break-all;

From d9e40710de13737922b343218a2e03dd4cb26072 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 28 Nov 2022 13:45:19 +0100
Subject: [PATCH 3/3] add `&:focus:hover` and `&:focus-within:hover` background
 color for history items

---
 client/src/style/scss/base.scss | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index f33f4729905..4da3950f752 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -421,12 +421,17 @@ $galaxy-state-bg: (
         background-color: change-color(map-get($galaxy-state-bg, $state), $alpha: 0.4, $lightness: 50%);
 
         &:hover {
-            background-color: change-color(map-get($galaxy-state-bg, $state), $alpha: 0.4, $lightness: 60%);
+            background-color: change-color(map-get($galaxy-state-bg, $state), $alpha: 0.4, $lightness: 66%);
         }
 
         &:focus,
         &:focus-within {
-            background-color: scale-color(map-get($galaxy-state-bg, $state), $lightness: -10%);
+            background-color: change-color(map-get($galaxy-state-bg, $state), $alpha: 0.4, $lightness: 33%);
+        }
+
+        &:focus:hover,
+        &:focus-within:hover {
+            background-color: change-color(map-get($galaxy-state-bg, $state), $alpha: 0.4, $lightness: 40%);
         }
 
         &.selected {