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) {
- e.stopPropagation()}> + e.stopPropagation()}> 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 {