Merge pull request #2072 from hypothesis/fix-nested-buttons

Do not use `button` element in `Menu` label

src/sidebar/components/sort-menu.js

@@ -2,9 +2,9 @@ import { createElement } from 'preact';
 
 import useStore from '../store/use-store';
 
-import Button from './button';
 import Menu from './menu';
 import MenuItem from './menu-item';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  * A drop-down menu of sorting options for a collection of annotations.
@@ -35,12 +35,9 @@ export default function SortMenu() {
   });
 
   const menuLabel = (
-    <Button
-      className="top-bar__icon-button"
-      icon="sort"
-      title="Sort annotations"
-      useCompactStyle
-    />
+    <span className="top-bar__menu-label">
+      <SvgIcon name="sort" className="top-bar__menu-icon" />
+    </span>
   );
 
   return (

src/sidebar/components/user-menu.js

@@ -6,10 +6,10 @@ import serviceConfig from '../service-config';
 import { isThirdPartyUser } from '../util/account-id';
 import { withServices } from '../util/service-context';
 
-import Button from './button';
 import Menu from './menu';
 import MenuItem from './menu-item';
 import MenuSection from './menu-section';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  * A menu with user and account links.
@@ -44,12 +44,9 @@ function UserMenu({ auth, bridge, onLogout, serviceUrl, settings }) {
   })();
 
   const menuLabel = (
-    <Button
-      className="top-bar__icon-button"
-      icon="profile"
-      title="User menu"
-      useCompactStyle
-    />
+    <span className="top-bar__menu-label">
+      <SvgIcon name="profile" className="top-bar__menu-icon" />
+    </span>
   );
   return (
     <div className="user-menu">

src/styles/sidebar/components/top-bar.scss

@@ -17,7 +17,8 @@
   // the window is scrolled.
   transform: translate3d(0, 0, 0);
 
-  &__icon-button {
+  &__icon-button,
+  &__menu-icon {
     &.is-active {
       color: var.$grey-6;
 
@@ -34,6 +35,10 @@
       color: var.$brand;
     }
   }
+
+  &__menu-label {
+    padding: 0.25em;
+  }
 }
 
 .top-bar--theme-clean {