From 695343532d78f59535e6e7cb8acb805f5e6b00a1 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Wed, 14 Jul 2021 18:35:49 -0500
Subject: [PATCH] minor css fixes: #5145

---
 ui/component/notification/view.jsx   |  2 +-
 ui/scss/component/_claim-list.scss   | 22 +++++++++++-----------
 ui/scss/component/_notification.scss |  5 ++++-
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/ui/component/notification/view.jsx b/ui/component/notification/view.jsx
index 65d6a8cba..8a6d9e181 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 onClick={(e) => e.stopPropagation()}>
+            <MenuButton className={'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 d16439fe2..b15e29568 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -79,7 +79,7 @@
 
   &:hover {
     .claim__menu-button {
-      display: block;
+      opacity: 1 !important;
     }
   }
 }
@@ -471,7 +471,7 @@
     cursor: pointer;
 
     .claim__menu-button {
-      opacity: 1;
+      opacity: 1 !important;
     }
     .collection-preview__overlay-thumbs {
       opacity: 1;
@@ -738,14 +738,6 @@
   .claim__menu-button {
     right: 0.2rem;
     top: var(--spacing-s);
-
-    &:focus {
-      opacity: 1;
-      .icon {
-        background-color: var(--color-button-alt-bg);
-        border-radius: var(--border-radius);
-      }
-    }
   }
 }
 
@@ -758,8 +750,16 @@
     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([aria-expanded='true']) {
+    &:not(:focus):not([aria-expanded='true']) {
       opacity: 0;
     }
   }
diff --git a/ui/scss/component/_notification.scss b/ui/scss/component/_notification.scss
index ce8e17189..f600afbde 100644
--- a/ui/scss/component/_notification.scss
+++ b/ui/scss/component/_notification.scss
@@ -219,7 +219,10 @@ $contentMaxWidth: 60rem;
     stroke: var(--color-text-help);
   }
 
-  button {
+  .notification__menu-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border-radius: var(--border-radius);
 
     &:focus {