From aeb55de1fe58a2fe2ef451a91a455d31c09ccfd5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 22 Dec 2022 14:41:25 -0500
Subject: [PATCH] Remove duplicate theme from sample file, prioritize active
 over hover highlighting to avoid flickering

---
 client/src/components/Masthead/Masthead.vue    | 18 ++----------------
 .../src/style/scss/custom_theme_variables.scss |  2 +-
 client/src/style/scss/theme/blue.scss          |  2 +-
 .../config/sample/themes_conf.yml.sample       | 15 ---------------
 4 files changed, 4 insertions(+), 33 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 443fd6cdf3f..3524f89f0d0 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -74,8 +74,8 @@ onMounted(() => {
     <b-navbar id="masthead" type="dark" role="navigation" aria-label="Main" class="justify-content-between">
         <b-navbar-nav>
             <b-navbar-brand
-                class="ml-2 mr-1"
                 v-b-tooltip.hover
+                class="ml-2 mr-1"
                 title="Home"
                 aria-label="homepage"
                 :href="safePath(logoUrl)">
@@ -116,10 +116,8 @@ onMounted(() => {
     margin-bottom: 0;
     background: var(--masthead-color);
     height: $masthead-height;
-
     &:deep(.navbar-nav) {
         height: $masthead-height;
-
         & > li {
             // This allows the background color to fill the full height of the
             // masthead, while still keeping the contents centered (using flex)
@@ -127,37 +125,26 @@ onMounted(() => {
             display: flex;
             align-items: center;
             background: var(--masthead-link-color);
-
             &:hover {
-                background: var(--masthead-link-hover) !important;
+                background: var(--masthead-link-hover);
             }
-
             &.show,
             &.active {
                 background: var(--masthead-link-active);
-
                 .nav-link {
                     color: var(--masthead-text-active);
                 }
             }
-
             .nav-link {
                 position: relative;
                 cursor: pointer;
                 text-decoration: none;
                 color: var(--masthead-text-color);
-
-                &:focus-visible {
-                    outline: 2px solid var(--masthead-text-hover);
-                }
-
                 &:hover {
                     color: var(--masthead-text-hover);
                 }
-
                 &.nav-icon {
                     font-size: 1.3em;
-
                     .nav-note {
                         position: absolute;
                         left: 1.9rem;
@@ -166,7 +153,6 @@ onMounted(() => {
                         font-weight: bold;
                     }
                 }
-
                 &.toggle {
                     color: var(--masthead-text-hover);
                 }
diff --git a/client/src/style/scss/custom_theme_variables.scss b/client/src/style/scss/custom_theme_variables.scss
index 64edf68d83c..bcf04723bd3 100644
--- a/client/src/style/scss/custom_theme_variables.scss
+++ b/client/src/style/scss/custom_theme_variables.scss
@@ -7,5 +7,5 @@ html {
     --masthead-text-active: #{$masthead-text-active};
     --masthead-link-color: #{$masthead-link-color};
     --masthead-link-hover: #{$masthead-link-hover};
-    --masthead-link-active: #{$masthead-link-background};
+    --masthead-link-active: #{$masthead-link-active};
 }
diff --git a/client/src/style/scss/theme/blue.scss b/client/src/style/scss/theme/blue.scss
index 54d07115ce8..f2c39fdaac0 100644
--- a/client/src/style/scss/theme/blue.scss
+++ b/client/src/style/scss/theme/blue.scss
@@ -16,7 +16,7 @@ $masthead-text-active: lighten($brand-light, 15%);
 $masthead-text-hover: $brand-toggle;
 $masthead-link-color: transparent;
 $masthead-link-hover: transparent;
-$masthead-link-background: darken($masthead-color, 10%);
+$masthead-link-active: darken($masthead-color, 10%);
 
 // Text colors
 $text-color: $brand-dark;
diff --git a/lib/galaxy/config/sample/themes_conf.yml.sample b/lib/galaxy/config/sample/themes_conf.yml.sample
index 4c219042177..a0ecfe94867 100644
--- a/lib/galaxy/config/sample/themes_conf.yml.sample
+++ b/lib/galaxy/config/sample/themes_conf.yml.sample
@@ -13,21 +13,6 @@ blue:
       img: "/static/favicon.svg"
       img-secondary: null
 
-blue:
-  masthead:
-    color: "#2c3143"
-    text:
-      color: "#f8f9fa"
-      hover: gold
-      active: white
-    link:
-      color: transparent
-      hover: transparent
-      active: "#181a24"
-    logo:
-      img: "/static/favicon.svg"
-      img-secondary: null
-
 pride:
   masthead:
       color: >