consistent menu button styles and minor css fixes: #5145

ui/component/notification/view.jsx

@@ -193,7 +193,7 @@ export default function Notification(props: Props) {
 
         <div className="notification__menu">
           <Menu>
-            <MenuButton className={'notification__menu-button'} onClick={(e) => e.stopPropagation()}>
+            <MenuButton className={'menu-button notification__menu-button'} onClick={(e) => e.stopPropagation()}>
               <Icon size={18} icon={ICONS.MORE_VERTICAL} />
             </MenuButton>
             <MenuList className="menu__list">

ui/scss/component/_claim-list.scss

@@ -265,7 +265,7 @@
 .claim-preview__title {
   font-weight: var(--font-weight-bold);
   font-size: var(--font-body);
-  margin-right: auto;
+  margin-right: var(--spacing-l);
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
@@ -538,7 +538,6 @@
 
   @media (min-width: $breakpoint-small) {
     min-height: 2.5rem;
-    padding-right: var(--spacing-m);
   }
 }
 
@@ -737,7 +736,6 @@
 
   .claim__menu-button {
     right: 0.2rem;
-    top: var(--spacing-s);
   }
 }
 
@@ -746,18 +744,6 @@
   top: var(--spacing-xs);
   right: var(--spacing-xs);
 
-  .icon {
-    stroke: var(--color-text);
-  }
-
-  &:focus {
-    opacity: 1;
-    .icon {
-      background-color: var(--color-button-alt-bg);
-      border-radius: var(--border-radius);
-    }
-  }
-
   @media (min-width: $breakpoint-small) {
     &:not(:focus):not([aria-expanded='true']) {
       opacity: 0;

ui/scss/component/_comments.scss

@@ -263,14 +263,6 @@ $thumbnailWidthSmall: 1rem;
 .comment__menu {
   align-self: flex-end;
   line-height: 1;
-
-  button {
-    border-radius: var(--border-radius);
-
-    &:focus {
-      @include linkFocus;
-    }
-  }
 }
 
 .comment__char-count {
@@ -295,14 +287,6 @@ $thumbnailWidthSmall: 1rem;
   }
 }
 
-.comment__menu-icon--hovering {
-  stroke: var(--color-comment-menu-hovering);
-}
-
-.comment__menu-icon {
-  stroke: var(--color-comment-menu);
-}
-
 .comment__menu-list {
   box-shadow: var(--card-box-shadow);
   border-radius: var(--card-radius);

ui/scss/component/_notification.scss

@@ -218,17 +218,6 @@ $contentMaxWidth: 60rem;
   .icon {
     stroke: var(--color-text-help);
   }
-
-  .notification__menu-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--border-radius);
-
-    &:focus {
-      @include linkFocus;
-    }
-  }
 }
 
 .notification__filter {

ui/scss/component/menu-button.scss

@@ -44,10 +44,25 @@
 }
 
 .menu__button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+  padding: 0.3rem;
+
+  .icon {
+    stroke: var(--color-comment-menu);
+  }
+
+  .comment__menu-icon--hovering {
+  }
+
+  &:focus,
   &:hover {
+    opacity: 1;
+    background-color: var(--color-button-alt-bg);
     .icon {
-      border-radius: var(--border-radius);
-      background-color: var(--color-card-background-highlighted);
+      stroke: var(--color-comment-menu-hovering);
     }
   }
 }