From a081c6da5e6fd75b6705665dadc6ecc6fa99c026 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 14 Oct 2019 10:38:05 +0300
Subject: [PATCH] handle no notifications case

---
 .../NotificationsList/NotificationsList.js    | 10 +++++---
 .../NotificationsList/styles.less             | 24 +++++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js b/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js
index 7b2c933f0..82560f08f 100644
--- a/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js
+++ b/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js
@@ -1,6 +1,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
+const Icon = require('stremio-icons/dom');
 const Notification = require('./Notification');
 const useMetaItems = require('./useMetaItems');
 const styles = require('./styles');
@@ -10,7 +11,7 @@ const NotificationsList = ({ className, metaItems }) => {
     return (
         <div className={classnames(className, styles['notifications-list-scroll-container'])}>
             {
-                notifications.length > 0 ?
+                notifications.length === 0 ?
                     notifications.map((notification) => (
                         notification.videos.length === 1 ?
                             <Notification
@@ -35,8 +36,11 @@ const NotificationsList = ({ className, metaItems }) => {
                     ))
                     :
                     <React.Fragment>
-                        <div className={styles['no-notifications-label']}>
-                            No new notifications.
+                        <div className={styles['no-notifications-container']}>
+                            <Icon className={styles['icon']} icon={'ic_bell'} />
+                            <div className={styles['label']}>
+                                No new notifications
+                            </div>
                         </div>
                     </React.Fragment>
             }
diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/styles.less b/src/common/NavBar/NotificationsMenu/NotificationsList/styles.less
index 8a176666f..feac19be9 100644
--- a/src/common/NavBar/NotificationsMenu/NotificationsList/styles.less
+++ b/src/common/NavBar/NotificationsMenu/NotificationsList/styles.less
@@ -2,8 +2,32 @@
     flex: 1;
     align-self: stretch;
     overflow-y: auto;
+    background-color: var(--color-surfacelighter);
 
     .notification {
         width: var(--item-size);
     }
+
+    .no-notifications-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: var(--item-size);
+        height: 100%;
+        padding: 1rem;
+
+        .icon {
+            width: 6rem;
+            height: 6rem;
+            margin-bottom: 2rem;
+            fill: var(--color-surfacedark);
+        }
+
+        .label {
+            font-size: 1.2rem;
+            text-align: center;
+            color: var(--color-surfacedark);
+        }
+    }
 }
\ No newline at end of file