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 (
{
- notifications.length > 0 ?
+ notifications.length === 0 ?
notifications.map((notification) => (
notification.videos.length === 1 ?
{
))
:
-
- No new notifications.
+
+
+
+ No new notifications
+
}
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