PM-2133 - update desktop styles

Author: vas3a

src/libs/shared/lib/components/notifications/Notifications.container.tsx

@@ -3,12 +3,13 @@ import { FC } from 'react'
 import { Notification } from '~/libs/ui'
 
 import { NotificationContextType, useNotification } from './Notifications.context'
+import styles from './NotificationsContainer.module.scss'
 
 const NotificationsContainer: FC = () => {
     const { notifications, removeNotification }: NotificationContextType = useNotification()
 
     return (
-        <div>
+        <div className={styles.wrap}>
             {notifications.map(n => (
                 <Notification key={n.id} notification={n} onClose={removeNotification} />
             ))}

src/libs/shared/lib/components/notifications/Notifications.context.tsx

@@ -9,6 +9,7 @@ export type NotificationType = 'success' | 'error' | 'info' | 'warning' | 'banne
 export interface Notification {
     id: string;
     type: NotificationType;
+    icon?: ReactNode
     message: string;
     duration?: number; // in ms
 }

src/libs/shared/lib/components/notifications/NotificationsContainer.module.scss

@@ -0,0 +1,7 @@
+@import "@libs/ui/styles/includes";
+
+.wrap {
+    position: relative;
+    width: 100%;
+    z-index: 1000;
+}

src/libs/ui/lib/components/notification/Notification.tsx

@@ -1,9 +1,14 @@
-import { FC, useCallback } from 'react'
+import { FC, ReactNode, useCallback } from 'react'
 
 import { NotificationBanner } from './banner'
 
 interface NotificationProps {
-    notification: { message: string; id: string; type: string }
+    notification: {
+        icon?: ReactNode;
+        id: string;
+        message: string;
+        type: string;
+}
     onClose: (id: string, save?: boolean) => void
 }
 
@@ -15,6 +20,7 @@ const Notification: FC<NotificationProps> = props => {
     if (props.notification.type === 'banner') {
         return (
             <NotificationBanner
+                icon={props.notification.icon}
                 content={props.notification.message}
                 onClose={handleClose}
             />

src/libs/ui/lib/components/notification/banner/NotificationBanner.module.scss

@@ -4,23 +4,35 @@
     background: #60267D;
     color: $tc-white;
 
+    font-family: "Nunito Sans", sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+
     .inner {
         max-width: $xxl-min;
-        padding: $sp-3 0;
+        padding: $sp-2 0;
         @include pagePaddings;
         margin: 0 auto;
         width: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
-        @include ltemd {
-            display: block;
-            position: relative;
-        }
     }
 }
 
 .close {
     cursor: pointer;
     color: $tc-white;
+    flex: 0 0;
+    margin-left: auto;
+    border-radius: 50%;
+    border: 2px solid white;
+    @include ltemd {
+        margin-left: $sp-3;
+    }
+}
+
+.icon {
+    flex: 0 0;
+    margin-right: $sp-2;
 }

src/libs/ui/lib/components/notification/banner/NotificationBanner.tsx

@@ -1,6 +1,8 @@
 import { FC, ReactNode, useCallback } from 'react'
 
-import { InformationCircleIcon, XCircleIcon } from '@heroicons/react/outline'
+import { InformationCircleIcon } from '@heroicons/react/outline'
+
+import { IconOutline } from '../../svgs'
 
 import styles from './NotificationBanner.module.scss'
 
@@ -20,7 +22,7 @@ const NotificationBanner: FC<NotificationBannerProps> = props => {
         <div className={styles.wrap}>
             <div className={styles.inner}>
                 {props.icon || (
-                    <div>
+                    <div className={styles.icon}>
                         <InformationCircleIcon className='icon-xl' />
                     </div>
                 )}
@@ -29,7 +31,7 @@ const NotificationBanner: FC<NotificationBannerProps> = props => {
 
                 {!props.persistent && (
                     <div className={styles.close} onClick={handleClose}>
-                        <XCircleIcon className='icon-xl' />
+                        <IconOutline.XIcon className='icon-lg' />
                     </div>
                 )}
             </div>