Merge pull request #15057 from grafana/hugoh/sidemenu-dropdown-looks-funky-in-light-theme

Makes the clickable side menu header look great in light theme again

public/app/core/components/sidemenu/SideMenuDropDown.tsx

@@ -10,7 +10,7 @@ const SideMenuDropDown: FC<Props> = props => {
   return (
   return (
     <ul className="dropdown-menu dropdown-menu--sidemenu" role="menu">
     <ul className="dropdown-menu dropdown-menu--sidemenu" role="menu">
       <li className="side-menu-header">
       <li className="side-menu-header">
-        <a href={link.url}>
+        <a className="side-menu-header-link" href={link.url}>
           <span className="sidemenu-item-text">{link.text}</span>
           <span className="sidemenu-item-text">{link.text}</span>
         </a>
         </a>
       </li>
       </li>

public/app/core/components/sidemenu/__snapshots__/SideMenuDropDown.test.tsx.snap

@@ -8,7 +8,9 @@ exports[`Render should render children 1`] = `
   <li
   <li
     className="side-menu-header"
     className="side-menu-header"
   >
   >
-    <a>
+    <a
+      className="side-menu-header-link"
+    >
       <span
       <span
         className="sidemenu-item-text"
         className="sidemenu-item-text"
       >
       >
@@ -51,7 +53,9 @@ exports[`Render should render component 1`] = `
   <li
   <li
     className="side-menu-header"
     className="side-menu-header"
   >
   >
-    <a>
+    <a
+      className="side-menu-header-link"
+    >
       <span
       <span
         className="sidemenu-item-text"
         className="sidemenu-item-text"
       >
       >

public/sass/components/_sidemenu.scss

@@ -149,12 +149,19 @@
   color: #ebedf2;
   color: #ebedf2;
 }
 }
 
 
-.side-menu-header > a {
+.side-menu-header-link {
   // Removes left-brand-border-gradient from link
   // Removes left-brand-border-gradient from link
+  color: #ebedf2 !important;
   border: none !important;
   border: none !important;
   padding: 0 !important;
   padding: 0 !important;
 }
 }
 
 
+.dropdown-menu--sidemenu > li > .side-menu-header-link:hover {
+  // Makes sure it looks good on light theme
+  color: #fff !important;
+  background-color: $side-menu-item-hover-bg !important;
+}
+
 .sidemenu-subtitle {
 .sidemenu-subtitle {
   padding: 0.5rem 1rem 0.5rem;
   padding: 0.5rem 1rem 0.5rem;
   font-size: $font-size-sm;
   font-size: $font-size-sm;