Update Favorite Icon Style (#12622): Colors matched, class/toggle-class modified

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"

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>

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 {