diff --git a/src/components/Icons/Notifications/CounterIcons/Numbers.tsx b/src/components/Icons/Notifications/CounterIcons/Numbers.tsx new file mode 100644 index 00000000..8f39514c --- /dev/null +++ b/src/components/Icons/Notifications/CounterIcons/Numbers.tsx @@ -0,0 +1,105 @@ +import React from 'react' + +export const Number1 = (props: React.SVGAttributes) => ( + + + + +) + +export const Number2 = (props: React.SVGAttributes) => ( + + + + +) + +export const Number3 = (props: React.SVGAttributes) => ( + + + + +) + +export const Number4 = (props: React.SVGAttributes) => ( + + + + +) + +export const Number5 = (props: React.SVGAttributes) => ( + + + + +) + +export const Number6 = (props: React.SVGAttributes) => ( + + + + +) + +export const Number7 = (props: React.SVGAttributes) => ( + + + + +) + +export const Number8 = (props: React.SVGAttributes) => ( + + + + +) + +export const Number9 = (props: React.SVGAttributes) => ( + + + + +) + +export const Number9Plus = (props: React.SVGAttributes) => ( + + + + + +) diff --git a/src/components/Icons/Notifications/CounterIcons/index.tsx b/src/components/Icons/Notifications/CounterIcons/index.tsx new file mode 100644 index 00000000..c2311deb --- /dev/null +++ b/src/components/Icons/Notifications/CounterIcons/index.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import * as Numbers from './Numbers' + +type CounterProps = React.SVGAttributes & { + count: number +} + +const MAX_COUNT = 9 + +const Counter = ({ count, ...rest }: CounterProps) => { + if (count <= 0) { + return null + } + + const Component = Numbers[`Number${count <= MAX_COUNT ? count : '9Plus'}`] + + return +} + +export default Counter diff --git a/src/components/Notifications/Notifications.css b/src/components/Notifications/Notifications.css index 301550c4..47ae9c16 100644 --- a/src/components/Notifications/Notifications.css +++ b/src/components/Notifications/Notifications.css @@ -23,15 +23,9 @@ } .dcl.notifications-counter { - width: 15px; - height: 15px; - border-radius: 50%; - font-size: 11px; - background-color: var(--primary); + width: 16px; + height: 16px; position: relative; - top: -21px; + top: -24px; left: 19px; - display: flex; - justify-content: center; - align-items: center; } diff --git a/src/components/Notifications/Notifications.tsx b/src/components/Notifications/Notifications.tsx index 0c46caa4..41688276 100644 --- a/src/components/Notifications/Notifications.tsx +++ b/src/components/Notifications/Notifications.tsx @@ -9,9 +9,10 @@ import { import NotificationBell from '../Icons/Notifications/NotificationBell' import NotificationBellActive from '../Icons/Notifications/NotificationBellActive' +import { ModalProps } from '../Modal/Modal' +import Counter from '../Icons/Notifications/CounterIcons' import './Notifications.css' -import { ModalProps } from '../Modal/Modal' export interface NotificationsProps { isOpen: boolean @@ -56,7 +57,7 @@ export default function Notifications({ {!isOpen && newNotificationsCount > 0 && (
- {newNotificationsCount > 9 ? '9+' : newNotificationsCount} +
)} diff --git a/src/components/Notifications/NotificationsFeed.css b/src/components/Notifications/NotificationsFeed.css index 15deeaea..b01657ac 100644 --- a/src/components/Notifications/NotificationsFeed.css +++ b/src/components/Notifications/NotificationsFeed.css @@ -8,7 +8,7 @@ z-index: 100; border-radius: 8px; background: var(--background); - box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2); + box-shadow: 0px 8px 16px 12px rgba(0, 0, 0, 0.8); transition: opacity 0.3s ease; }