From 4ae74b82ae6785b6f4cb85a5609e2ca365d8fe54 Mon Sep 17 00:00:00 2001
From: aawan <aawan@mindgrub.com>
Date: Tue, 8 Feb 2022 19:32:39 -0500
Subject: [PATCH] Update Favorite Icon Style (#12622): Colors matched,
 class/toggle-class modified

---
 .../Panels/Buttons/FavoritesButton.vue          |  2 +-
 .../Panels/Buttons/PanelViewButton.vue          |  1 +
 client/src/style/scss/base.scss                 | 17 +++++++++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Panels/Buttons/FavoritesButton.vue b/client/src/components/Panels/Buttons/FavoritesButton.vue
index b2283cb6947..17e61e8ee90 100644
--- a/client/src/components/Panels/Buttons/FavoritesButton.vue
+++ b/client/src/components/Panels/Buttons/FavoritesButton.vue
@@ -1,6 +1,6 @@
 <template>
     <a
-        class="panel-header-button"
+        class="panel-header-button-toolbox"
         @click="onFavorites"
         v-b-tooltip.hover
         :title="tooltipText"
diff --git a/client/src/components/Panels/Buttons/PanelViewButton.vue b/client/src/components/Panels/Buttons/PanelViewButton.vue
index 5963b25aa12..7d2e455e4e5 100644
--- a/client/src/components/Panels/Buttons/PanelViewButton.vue
+++ b/client/src/components/Panels/Buttons/PanelViewButton.vue
@@ -7,6 +7,7 @@
         variant="link"
         aria-label="View all tool panel configurations"
         class="tool-panel-dropdown float-right"
+        toggle-class = "panel-header-button-toolbox float-right"
         size="sm"
         v-b-tooltip.hover>
         <template v-slot:button-content>
diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index 91fc073a390..745af72d731 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -225,10 +225,12 @@ body {
         min-width: max-content;
         align-items: center;
         justify-content: space-between;
+        display: flex;
     }
     .panel-header-buttons {
         @extend .float-right;
         order: 9999;
+        display: flex;
         .panel-header-button {
             text-align: center;
             &:not(:last-child) {
@@ -238,6 +240,21 @@ body {
                 color: $brand-info;
             }
         }
+        .panel-header-button-toolbox {
+            color: $brand-dark;
+            flex: 1;
+            padding: 6px;
+            text-align: center;
+            font-size: 17px;
+            align-items: center;
+            &:hover {
+                color: $brand-info;
+                background-color: $brand-light;
+                text-decoration: none !important;
+                border-color: $brand-light;
+            }
+            text-decoration: none !important;
+        }
     }
 }
 .unified-panel-controls {