From eb1ab935c538bb6230d9840d7ea4dc71074a88d7 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Thu, 15 Jul 2021 00:40:40 -0500
Subject: [PATCH] consistent menu button styles and minor css fixes: #5145

---
 ui/component/notification/view.jsx   |  2 +-
 ui/scss/component/_claim-list.scss   | 16 +---------------
 ui/scss/component/_comments.scss     | 16 ----------------
 ui/scss/component/_notification.scss | 11 -----------
 ui/scss/component/menu-button.scss   | 19 +++++++++++++++++--
 5 files changed, 19 insertions(+), 45 deletions(-)

diff --git a/ui/component/notification/view.jsx b/ui/component/notification/view.jsx
index 8a6d9e181..a372c299d 100644
--- a/ui/component/notification/view.jsx
+++ b/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">
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index b15e29568..a1a71ec0b 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/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;
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index ef181b5f4..e463de58d 100644
--- a/ui/scss/component/_comments.scss
+++ b/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);
diff --git a/ui/scss/component/_notification.scss b/ui/scss/component/_notification.scss
index f600afbde..f092095c4 100644
--- a/ui/scss/component/_notification.scss
+++ b/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 {
diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss
index cb96d4c81..8b2f9348e 100644
--- a/ui/scss/component/menu-button.scss
+++ b/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);
     }
   }
 }