DockedMegaMenu: More consistent spacing on active state (#76873)

* more consistent spacing on active state

* use correct secondary variant buttons

public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx

@@ -114,7 +114,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     },
   }),
   dockMenuButton: css({
-    color: theme.colors.text.disabled,
     display: 'none',
 
     [theme.breakpoints.up('md')]: {

public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx

@@ -36,7 +36,11 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
 
   return (
     <li className={styles.listItem}>
-      <div className={styles.menuItem}>
+      <div
+        className={cx(styles.menuItem, {
+          [styles.hasIcon]: Boolean(level === 0 && link.icon),
+        })}
+      >
         {level !== 0 && <Indent level={level === MAX_DEPTH ? level - 1 : level} spacing={3} />}
         {level === MAX_DEPTH && <div className={styles.itemConnector} />}
         <div className={styles.collapseButtonWrapper}>
@@ -47,6 +51,7 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
               onClick={() => setSectionExpanded(!sectionExpanded)}
               name={sectionExpanded ? 'angle-down' : 'angle-right'}
               size="md"
+              variant="secondary"
             />
           )}
         </div>
@@ -63,7 +68,6 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
             <div
               className={cx(styles.labelWrapper, {
                 [styles.hasActiveChild]: hasActiveChild,
-                [styles.hasIcon]: Boolean(level === 0 && link.icon),
               })}
             >
               {level === 0 && link.icon && (
@@ -112,6 +116,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     alignItems: 'center',
     gap: theme.spacing(1),
     height: theme.spacing(4),
+    paddingLeft: theme.spacing(1),
     position: 'relative',
   }),
   collapseButtonWrapper: css({
@@ -134,7 +139,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     },
   }),
   collapseButton: css({
-    color: theme.colors.text.disabled,
     margin: 0,
   }),
   collapsibleSectionWrapper: css({
@@ -148,7 +152,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(2),
-    paddingLeft: theme.spacing(1),
     minWidth: 0,
   }),
   hasIcon: css({

public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItemText.tsx

@@ -88,6 +88,7 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({
     display: 'flex',
     gap: '0.5rem',
     height: '100%',
+    paddingLeft: theme.spacing(1),
     width: '100%',
   }),
 });