message notifications working

src/components/notifications/NotificationBubble/index.tsx

@@ -2,28 +2,37 @@ import React, { FC, createElement } from 'react';
 import { INotification, NOTIFICATION_TYPES } from '~/redux/types';
 import styles from './styles.scss';
 import { NotificationMessage } from '../NotificationMessage';
+import { Icon } from '~/components/input/Icon';
 
 interface IProps {
   notifications: INotification[];
+  onClick: (notification: INotification) => void;
 }
 
 const NOTIFICATION_RENDERERS = {
   [NOTIFICATION_TYPES.message]: NotificationMessage,
 };
 
-const NotificationBubble: FC<IProps> = ({ notifications }) => {
+const NotificationBubble: FC<IProps> = ({ notifications, onClick }) => {
   return (
     <div className={styles.wrap}>
       <div className={styles.list}>
-        {notifications
-          .filter(notification => notification.type && NOTIFICATION_RENDERERS[notification.type])
-          .map(notification =>
-            createElement(NOTIFICATION_RENDERERS[notification.type], {
-              notification,
-              onClick: console.log,
-              key: notification.content.id,
-            })
-          )}
+        {notifications.length === 0 && (
+          <div className={styles.placeholder}>
+            <Icon icon="bell_ring" />
+            <div>НЕТ УВЕДОМЛЕНИЙ</div>
+          </div>
+        )}
+        {notifications.length > 0 &&
+          notifications
+            .filter(notification => notification.type && NOTIFICATION_RENDERERS[notification.type])
+            .map(notification =>
+              createElement(NOTIFICATION_RENDERERS[notification.type], {
+                notification,
+                onClick,
+                key: notification.content.id,
+              })
+            )}
       </div>
     </div>
   );

src/components/notifications/NotificationBubble/styles.scss

@@ -1,3 +1,5 @@
+$notification_color: darken($content_bg, 2%);
+
 @keyframes appear {
   0% {
     opacity: 0;
@@ -6,15 +8,16 @@
     opacity: 1;
   }
 }
+
 .wrap {
   position: absolute;
-  position: absolute;
-  background: $content_bg;
-  top: 50px;
+  background: $notification_color;
+  top: 42px;
   left: 50%;
   transform: translate(-50%, 0);
   border-radius: $radius;
-  animation: appear 0.5s forwards;
+  animation: appear 0.25s forwards;
+  z-index: 2;
 
   &::before {
     content: ' ';
@@ -22,7 +25,7 @@
     height: 0;
     border-style: solid;
     border-width: 0 0 16px 16px;
-    border-color: transparent transparent $content_bg transparent;
+    border-color: transparent transparent $notification_color transparent;
     position: absolute;
     left: 50%;
     top: -16px;
@@ -45,6 +48,7 @@
   flex-direction: column;
   padding: $gap;
   min-width: 0;
+  cursor: pointer;
 
   svg {
     fill: white;
@@ -74,3 +78,23 @@
   padding-left: 30px;
   overflow: hidden;
 }
+
+.placeholder {
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-transform: uppercase;
+  font: $font_16_semibold;
+
+  svg {
+    width: 120px;
+    height: 120px;
+    opacity: 0.05;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}