diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap index 290cdbe01773..d464e487dd57 100644 --- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap +++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap @@ -383,11 +383,11 @@ exports[`App Header should match snapshot 1`] = ` style="position: relative;" >

1

diff --git a/ui/components/multichain/notifications-tag-counter/index.scss b/ui/components/multichain/notifications-tag-counter/index.scss index f5c8b1fe1e03..328c4cb9728d 100644 --- a/ui/components/multichain/notifications-tag-counter/index.scss +++ b/ui/components/multichain/notifications-tag-counter/index.scss @@ -2,7 +2,12 @@ padding-left: 6px; padding-right: 6px; + &__text { + min-width: 13px; + } + &__unread-dot { + min-width: 16.5px; padding-left: 3px; padding-right: 3px; line-height: 1.4; diff --git a/ui/components/multichain/notifications-tag-counter/notifications-tag-counter.tsx b/ui/components/multichain/notifications-tag-counter/notifications-tag-counter.tsx index 39b2b0175db1..4964eb8e7a23 100644 --- a/ui/components/multichain/notifications-tag-counter/notifications-tag-counter.tsx +++ b/ui/components/multichain/notifications-tag-counter/notifications-tag-counter.tsx @@ -8,6 +8,7 @@ import { Display, TextColor, TextVariant, + TextAlign, } from '../../../helpers/constants/design-system'; type NotificationsTagCounterProps = { @@ -37,7 +38,7 @@ export const NotificationsTagCounter = ({ }} backgroundColor={BackgroundColor.errorDefault} borderStyle={BorderStyle.none} - borderRadius={BorderRadius.MD} + borderRadius={BorderRadius.LG} paddingTop={0} paddingBottom={0} paddingLeft={0} @@ -47,6 +48,7 @@ export const NotificationsTagCounter = ({ color={TextColor.errorInverse} variant={TextVariant.bodyXs} className="notifications-tag-counter__unread-dot" + textAlign={TextAlign.Center} > {notificationsCount > 10 ? '9+' : notificationsCount} @@ -58,7 +60,7 @@ export const NotificationsTagCounter = ({ {notificationsCount > 10 ? '9+' : notificationsCount}