From 9f1de67f6f74475bc78600a43c9b2ac5ef21c882 Mon Sep 17 00:00:00 2001
From: NikolaiYurchenko <nickolai.yurchenko@gmail.com>
Date: Wed, 4 Dec 2019 17:38:43 +0200
Subject: [PATCH] web/storagenode: notification markup

Change-Id: Ie1eacd9a0f8c27a2450705833bb248ffe78e9257
---
 web/storagenode/src/app/App.vue               |  24 ++-
 .../src/app/components/SNOHeader.vue          |  94 +++++++++--
 .../notifications/NotificationsPopup.vue      | 102 ++++++++++++
 .../notifications/SNONotification.vue         | 148 +++++++++++++++++
 web/storagenode/src/app/router/index.ts       |   7 +
 .../src/app/utils/notificationIcons.ts        |  20 +++
 .../src/app/views/DashboardArea.vue           |  22 +--
 .../src/app/views/NotificationsArea.vue       | 157 ++++++++++++++++++
 .../images/notifications/EmptyState.png       | Bin 0 -> 9356 bytes
 .../static/images/notifications/backArrow.svg |   3 +
 .../static/images/notifications/bell.svg      |   3 +
 11 files changed, 543 insertions(+), 37 deletions(-)
 create mode 100644 web/storagenode/src/app/components/notifications/NotificationsPopup.vue
 create mode 100644 web/storagenode/src/app/components/notifications/SNONotification.vue
 create mode 100644 web/storagenode/src/app/utils/notificationIcons.ts
 create mode 100644 web/storagenode/src/app/views/NotificationsArea.vue
 create mode 100644 web/storagenode/static/images/notifications/EmptyState.png
 create mode 100644 web/storagenode/static/images/notifications/backArrow.svg
 create mode 100644 web/storagenode/static/images/notifications/bell.svg

diff --git a/web/storagenode/src/app/App.vue b/web/storagenode/src/app/App.vue
index 2aea177f4..ab82a77d9 100644
--- a/web/storagenode/src/app/App.vue
+++ b/web/storagenode/src/app/App.vue
@@ -3,14 +3,26 @@
 
 <template>
     <div id="app">
-        <router-view/>
+        <div class="container">
+            <SNOHeader/>
+            <router-view/>
+            <SNOFooter/>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-@Component
+import SNOFooter from '@/app/components/SNOFooter.vue';
+import SNOHeader from '@/app/components/SNOHeader.vue';
+
+@Component({
+    components: {
+        SNOHeader,
+        SNOFooter,
+    },
+})
 export default class App extends Vue {}
 </script>
 
@@ -21,6 +33,14 @@ export default class App extends Vue {}
         font-family: 'font_regular', sans-serif;
     }
 
+    .container {
+        background-color: #f4f6f9;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
     @font-face {
         font-display: swap;
         font-family: 'font_regular';
diff --git a/web/storagenode/src/app/components/SNOHeader.vue b/web/storagenode/src/app/components/SNOHeader.vue
index b663b22c9..683b84501 100644
--- a/web/storagenode/src/app/components/SNOHeader.vue
+++ b/web/storagenode/src/app/components/SNOHeader.vue
@@ -13,10 +13,21 @@
                     <RefreshIcon alt="refresh image"/>
                 </div>
             </div>
-            <div class="header__content-holder__node-id-container">
-                <b class="header__content-holder__node-id-container__title">Node ID:</b>
-                <p class="header__content-holder__node-id-container__id">{{this.nodeId}}</p>
+            <div class="header__content-holder__right-area">
+                <div class="header__content-holder__right-area__node-id-container">
+                    <b class="header__content-holder__right-area__node-id-container__title">Node ID:</b>
+                    <p class="header__content-holder__right-area__node-id-container__id">{{this.nodeId}}</p>
+                </div>
+                <div class="header__content-holder__right-area__bell-area" @click.stop="openNotificationPopup">
+                    <BellIcon />
+                    <span class="header__content-holder__right-area__bell-area__new-circle"></span>
+                </div>
             </div>
+            <NotificationsPopup
+                v-if="isNotificationPopupShown"
+                class="header__content-holder__right-area__bell-area__popup"
+                v-click-outside="closeNotificationPopup"
+            />
         </div>
     </div>
 </template>
@@ -24,6 +35,9 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import NotificationsPopup from '@/app/components/notifications/NotificationsPopup.vue';
+
+import BellIcon from '@/../static/images/notifications/bell.svg';
 import RefreshIcon from '@/../static/images/refresh.svg';
 import StorjIcon from '@/../static/images/storjIcon.svg';
 
@@ -36,11 +50,23 @@ const {
 
 @Component({
     components: {
+        NotificationsPopup,
         StorjIcon,
         RefreshIcon,
+        BellIcon,
     },
 })
 export default class SNOHeader extends Vue {
+    public isNotificationPopupShown: boolean = false;
+
+    public openNotificationPopup(): void {
+        this.isNotificationPopupShown = true;
+    }
+
+    public closeNotificationPopup(): void {
+        this.isNotificationPopupShown = false;
+    }
+
     public async onRefresh(): Promise<void> {
         const selectedSatellite = this.$store.state.node.selectedSatellite.id;
 
@@ -71,6 +97,7 @@ export default class SNOHeader extends Vue {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            position: relative;
 
             &__logo-area {
                 display: flex;
@@ -94,24 +121,59 @@ export default class SNOHeader extends Vue {
                 }
             }
 
-            &__node-id-container {
-                color: #535f77;
-                height: 44px;
-                padding: 0 14px 0 14px;
+            &__right-area {
                 display: flex;
                 align-items: center;
-                border: 1px solid #e8e8e8;
-                border-radius: 12px;
-                font-size: 14px;
+                justify-content: flex-end;
 
-                &__title {
-                    min-width: 55px;
-                    margin-right: 5px;
-                    user-select: none;
+                &__node-id-container {
+                    color: #535f77;
+                    height: 44px;
+                    padding: 0 14px 0 14px;
+                    display: flex;
+                    align-items: center;
+                    border: 1px solid #e8e8e8;
+                    border-radius: 12px;
+                    font-size: 14px;
+                    margin-right: 30px;
+
+                    &__title {
+                        min-width: 55px;
+                        margin-right: 5px;
+                        user-select: none;
+                    }
+
+                    &__id {
+                        font-size: 11px;
+                    }
                 }
 
-                &__id {
-                    font-size: 11px;
+                &__bell-area {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: relative;
+                    width: 26px;
+                    height: 32px;
+                    cursor: pointer;
+
+                    &__new-circle {
+                        position: absolute;
+                        top: 0;
+                        right: 0;
+                        display: inline-block;
+                        width: 6px;
+                        height: 6px;
+                        border-radius: 50%;
+                        background-color: #eb001b;
+                    }
+
+                    &__popup {
+                        position: absolute;
+                        top: 105px;
+                        right: 0;
+                        z-index: 100;
+                    }
                 }
             }
         }
diff --git a/web/storagenode/src/app/components/notifications/NotificationsPopup.vue b/web/storagenode/src/app/components/notifications/NotificationsPopup.vue
new file mode 100644
index 000000000..0862faca7
--- /dev/null
+++ b/web/storagenode/src/app/components/notifications/NotificationsPopup.vue
@@ -0,0 +1,102 @@
+// Copyright (C) 2019 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="notification-popup-container">
+        <div class="notification-popup-container__header">
+            <p class="notification-popup-container__header__title">Notifications</p>
+            <router-link :to="notificationsPath">
+                <p class="notification-popup-container__header__link">See All</p>
+            </router-link>
+        </div>
+        <div
+            class="notification-popup-container__content"
+            :class="{'collapsed': true}"
+            v-if="true"
+        ></div>
+        <div class="notification-popup-container__empty-state" v-if="true">
+            <img src="@/../static/images/notifications/EmptyState.png" alt="Empty state image">
+            <p class="notification-popup-container__empty-state__label">No notifications yet</p>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import SNONotification from '@/app/components/notifications/SNONotification.vue';
+
+import { RouteConfig } from '@/app/router';
+
+@Component({
+    components: {
+        SNONotification,
+    }
+})
+export default class NotificationsPopup extends Vue {
+    public readonly notificationsPath: string = RouteConfig.Notifications.path;
+
+    public get latestNotifications() {
+        return [];
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .notification-popup-container {
+        position: relative;
+        width: 400px;
+        height: auto;
+        max-height: 376px;
+        background-color: #fff;
+        border-radius: 12px;
+        padding: 27px 0 10px 0;
+        box-shadow: 0 7px 17px #e7ebee;
+
+        &__header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            &__title {
+                font-family: 'font_bold', sans-serif;
+                font-size: 24px;
+                line-height: 36px;
+                color: #384b65;
+                margin-left: 32px;
+            }
+
+            &__link {
+                font-family: 'font_regular', sans-serif;
+                font-size: 14px;
+                color: #224ca5;
+                margin-right: 20px;
+            }
+        }
+
+        &__content {
+            height: 300px;
+            overflow-y: scroll;
+        }
+
+        &__empty-state {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 46px 0;
+
+            &__label {
+                margin-top: 35px;
+                font-family: 'font_regular', sans-serif;
+                font-size: 16px;
+                color: #1c2a3e;
+            }
+        }
+    }
+
+    .collapsed {
+        height: auto !important;
+    }
+</style>
diff --git a/web/storagenode/src/app/components/notifications/SNONotification.vue b/web/storagenode/src/app/components/notifications/SNONotification.vue
new file mode 100644
index 000000000..c386ec260
--- /dev/null
+++ b/web/storagenode/src/app/components/notifications/SNONotification.vue
@@ -0,0 +1,148 @@
+// Copyright (C) 2019 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="notification-item">
+        <div class="row">
+            <div class="notification-item__new-indicator-container">
+                <span class="notification-item__new-indicator-container__circle"></span>
+            </div>
+            <div class="notification-item__icon-container">
+                <div class="icon" v-html="icon"></div>
+            </div>
+            <div class="notification-item__text-container">
+                <p
+                    class="notification-item__text-container__message"
+                    :class="{'small-font-size': isSmall}"
+                >
+                    Software Update Required: Your node software version 0.12.1 is out of date.
+                </p>
+                <p class="notification-item__text-container__date" v-if="isSmall">1 hour ago</p>
+            </div>
+        </div>
+        <div class="notification-item__date-container" v-if="!isSmall">
+            <p class="notification-item__date-container__date">1 hour ago</p>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+import { NotificationIcon } from '@/app/utils/notificationIcons';
+
+@Component
+export default class SNONotification extends Vue {
+    @Prop({default: () => ({})})
+    public notification: any;
+    @Prop({default: false})
+    public isSmall: boolean;
+
+    // TODO: move to notification entity.
+    public get icon(): string {
+        // switch (this.notification.type) {
+        //     case 1:
+        //         return NotificationIcon.FAIL;
+        //     case 2:
+        //         return NotificationIcon.DISQUALIFIED;
+        //     case 3:
+        //         return NotificationIcon.SOFTWARE_UPDATE;
+        //     default:
+        //         return NotificationIcon.INFO;
+        // }
+        return NotificationIcon.INFO;
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .notification-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: white;
+        padding: 17px 24px 18px 15px;
+        width: calc(100% - 24px - 15px);
+        font-family: 'font_regular', sans-serif;
+
+        &__new-indicator-container {
+            display: flex;
+            align-items: center;
+            justify-items: center;
+            width: 6px;
+            height: 6px;
+            min-width: 6px;
+            min-height: 6px;
+            margin-right: 11px;
+
+            &__circle {
+                display: inline-block;
+                border-radius: 50%;
+                background-color: #2683ff;
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        &__icon-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            background-color: #f3f4f9;
+            width: 40px;
+            height: 40px;
+            min-width: 40px;
+            min-height: 40px;
+            margin-right: 17px;
+        }
+
+        &__text-container {
+
+            &__message {
+                font-size: 15px;
+                color: #535f77;
+                text-align: left;
+            }
+
+            &__date {
+                margin-top: 6px;
+                font-size: 9px;
+                color: #9ca1b2;
+                text-align: left;
+            }
+        }
+
+        &__date-container {
+            margin-left: 20px;
+            min-width: 60px;
+
+            &__date {
+                font-size: 12px;
+                color: #586c86;
+                text-align: right;
+            }
+        }
+    }
+
+    .icon {
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .unread {
+        background-color: #f9fafd;
+    }
+
+    .small-font-size {
+        font-size: 12px;
+    }
+
+    .row {
+        display: flex;
+        align-items: center;
+    }
+</style>
diff --git a/web/storagenode/src/app/router/index.ts b/web/storagenode/src/app/router/index.ts
index c6dd52a38..8b6e5d16b 100644
--- a/web/storagenode/src/app/router/index.ts
+++ b/web/storagenode/src/app/router/index.ts
@@ -6,11 +6,13 @@ import Router from 'vue-router';
 
 import { NavigationLink } from '@/app/types/navigation';
 import DashboardArea from '@/app/views/DashboardArea.vue';
+import NotificationsArea from '@/app/views/NotificationsArea.vue';
 
 Vue.use(Router);
 
 export abstract class RouteConfig {
     public static Root = new NavigationLink('', 'Root');
+    public static Notifications = new NavigationLink('/notifications', 'Notifications');
 }
 
 const router = new Router({
@@ -21,6 +23,11 @@ const router = new Router({
             name: RouteConfig.Root.name,
             component: DashboardArea
         },
+        {
+            path: RouteConfig.Notifications.path,
+            name: RouteConfig.Notifications.name,
+            component: NotificationsArea
+        },
     ]
 });
 
diff --git a/web/storagenode/src/app/utils/notificationIcons.ts b/web/storagenode/src/app/utils/notificationIcons.ts
new file mode 100644
index 000000000..661726768
--- /dev/null
+++ b/web/storagenode/src/app/utils/notificationIcons.ts
@@ -0,0 +1,20 @@
+// Copyright (C) 2019 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+export class NotificationIcon {
+    public static readonly SOFTWARE_UPDATE: string = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.77228 9.83486C1.91418 10.3214 2.11111 10.7905 2.36016 11.2307L1.65065 12.1255C1.41898 12.418 1.44504 12.835 1.70568 13.0986L2.92776 14.3207C3.19129 14.5842 3.6083 14.6073 3.90079 14.3757L4.78984 13.6719C5.2474 13.9355 5.73392 14.1411 6.24071 14.2859L6.37392 15.4298C6.41736 15.8005 6.73012 16.0785 7.1008 16.0785H8.82967C9.20035 16.0785 9.51311 15.8004 9.55655 15.4298L9.68397 14.3264C10.2284 14.1845 10.7497 13.9731 11.2391 13.698L12.0992 14.3786C12.3917 14.6102 12.8087 14.5842 13.0722 14.3235L14.2943 13.1014C14.5578 12.8379 14.581 12.4209 14.3493 12.1284L13.6804 11.2799C13.9584 10.7991 14.1756 10.2866 14.3204 9.75085L15.3513 9.63212C15.722 9.58868 16 9.27592 16 8.90524V7.17636C16 6.80569 15.722 6.49292 15.3513 6.44949L14.3348 6.33075C14.1958 5.8008 13.9873 5.29401 13.7209 4.81908L14.3464 4.02849C14.5781 3.736 14.5521 3.31898 14.2914 3.05545L13.0722 1.83626C12.8087 1.57273 12.3917 1.54957 12.0992 1.78124L11.3318 2.38939C10.8337 2.0969 10.3008 1.87391 9.74192 1.72332L9.62608 0.730018C9.58264 0.359339 9.26988 0.0813293 8.8992 0.0813293H7.17033C6.79965 0.0813293 6.48689 0.359339 6.44345 0.730018L6.32761 1.72332C5.75422 1.87681 5.20689 2.10848 4.6972 2.41256L3.90082 1.78124C3.60833 1.54957 3.19132 1.57563 2.92779 1.83626L1.7057 3.05835C1.44217 3.32188 1.41901 3.73889 1.65068 4.03138L2.31675 4.8741C2.05032 5.35482 1.8476 5.8674 1.71439 6.40025L0.648689 6.52188C0.27801 6.56532 0 6.87808 0 7.24876V8.97764C0 9.34832 0.27801 9.66107 0.648689 9.70451L1.77228 9.83486ZM8.03618 5.15793C9.61157 5.15793 10.8945 6.44083 10.8945 8.01621C10.8945 9.5916 9.61157 10.8745 8.03618 10.8745C6.46082 10.8745 5.1779 9.5916 5.1779 8.01621C5.1779 6.44083 6.4608 5.15793 8.03618 5.15793Z" fill="#535F77"/>
+</svg>`;
+
+    public static readonly DISQUALIFIED: string = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6625 12.9324C15.441 12.5231 15.2181 12.1132 14.996 11.7019C14.5825 10.939 14.1698 10.1761 13.7571 9.41319C13.2614 8.49914 12.7671 7.58367 12.2721 6.66963C11.7939 5.78722 11.3172 4.90619 10.8391 4.02453C10.4875 3.37625 10.1374 2.72727 9.78581 2.07837C9.69089 1.90259 9.59596 1.72682 9.50105 1.55243C9.40261 1.36962 9.29855 1.19384 9.14949 1.04478C8.62918 0.520942 7.76574 0.420394 7.13997 0.816268C6.87137 0.986424 6.67732 1.2276 6.52826 1.50392C6.29975 1.92581 6.07122 2.34767 5.84271 2.77096C5.42646 3.54087 5.00951 4.31081 4.59326 5.08072C4.09192 5.99971 3.59482 6.92086 3.0956 7.84192C2.6231 8.71521 2.1499 9.58707 1.6767 10.4611C1.33076 11.1009 0.984114 11.7394 0.637488 12.3792C0.546082 12.5479 0.45468 12.7167 0.363276 12.8854C0.235307 13.1231 0.134766 13.3635 0.103122 13.6378C0.013826 14.4126 0.556632 15.1762 1.30687 15.3661C1.50516 15.4167 1.70062 15.4188 1.90102 15.4188H14.276H14.2957C14.7035 15.4104 15.0902 15.2571 15.3891 14.9793C15.6773 14.7122 15.8461 14.3465 15.8939 13.9598C15.9396 13.5956 15.8341 13.2511 15.6626 12.9325L15.6625 12.9324ZM7.29666 5.27876C7.29666 4.88501 7.6187 4.59321 7.99978 4.57564C8.37947 4.55806 8.70289 4.91174 8.70289 5.27876V10.2302C8.70289 10.6239 8.38085 10.9157 7.99978 10.9333C7.62008 10.9509 7.29666 10.5972 7.29666 10.2302V5.27876ZM7.99978 13.3282C7.60462 13.3282 7.28399 13.0083 7.28399 12.6124C7.28399 12.2172 7.6039 11.8966 7.99978 11.8966C8.39493 11.8966 8.71556 12.2165 8.71556 12.6124C8.71556 13.0075 8.39495 13.3282 7.99978 13.3282Z" fill="#535F77"/>
+</svg>`;
+    public static readonly FAIL: string = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="close-cross-svg-path" d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
+</svg>
+`;
+
+    public static readonly INFO: string = `<svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09394 2.14899C3.66843 2.80225 1.87523 5.10849 1.87523 7.85462V11.7819C1.87523 12.1437 1.59447 12.4364 1.25145 12.4364C0.560552 12.4364 0.000244141 13.0245 0.000244141 13.7455C0.000244141 14.469 0.560552 15.0546 1.25389 15.0546H13.7466C14.4387 15.0546 15.0002 14.4665 15.0002 13.7455C15.0002 13.0219 14.4375 12.4364 13.749 12.4364C13.4048 12.4364 13.1253 12.1449 13.1253 11.7819V7.85462C13.1253 5.1099 11.3333 2.80353 8.90655 2.14899V1.47272C8.90655 0.657093 8.27668 0 7.50031 0C6.72516 0 6.09407 0.659646 6.09407 1.47272L6.09394 2.14899ZM5.3127 15.7091H9.68766C9.68766 16.9747 8.70867 18 7.50018 18C6.29169 18 5.3127 16.9747 5.3127 15.7091Z" fill="#535F77"/>
+</svg>`;
+}
diff --git a/web/storagenode/src/app/views/DashboardArea.vue b/web/storagenode/src/app/views/DashboardArea.vue
index 1f03285c9..68f4d8d43 100644
--- a/web/storagenode/src/app/views/DashboardArea.vue
+++ b/web/storagenode/src/app/views/DashboardArea.vue
@@ -2,13 +2,9 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="page">
-        <SNOHeader/>
-        <div class="content">
-            <SNOContentTitle/>
-            <SNOContentFilling/>
-        </div>
-        <SNOFooter/>
+    <div class="content">
+        <SNOContentTitle/>
+        <SNOContentFilling/>
     </div>
 </template>
 
@@ -17,8 +13,6 @@ import { Component, Vue } from 'vue-property-decorator';
 
 import SNOContentFilling from '@/app/components/SNOContentFilling.vue';
 import SNOContentTitle from '@/app/components/SNOContentTitle.vue';
-import SNOFooter from '@/app/components/SNOFooter.vue';
-import SNOHeader from '@/app/components/SNOHeader.vue';
 
 import { NODE_ACTIONS } from '@/app/store/modules/node';
 
@@ -29,10 +23,8 @@ const {
 
 @Component ({
     components: {
-        SNOHeader,
         SNOContentTitle,
         SNOContentFilling,
-        SNOFooter,
     },
 })
 export default class Dashboard extends Vue {
@@ -44,14 +36,6 @@ export default class Dashboard extends Vue {
 </script>
 
 <style scoped lang="scss">
-    .page {
-        background-color: #f4f6f9;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-
     .content {
         width: 822px;
         padding-top: 28px;
diff --git a/web/storagenode/src/app/views/NotificationsArea.vue b/web/storagenode/src/app/views/NotificationsArea.vue
new file mode 100644
index 000000000..f970ed0df
--- /dev/null
+++ b/web/storagenode/src/app/views/NotificationsArea.vue
@@ -0,0 +1,157 @@
+// Copyright (C) 2019 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="notifications-container">
+        <div class="notifications-container__header">
+            <div class="notifications-container__header__left-area">
+                <router-link :to="'/'" class="notifications-container__header__back-link">
+                    <BackArrowIcon />
+                </router-link>
+                <p class="notifications-container__header__text">Notifications</p>
+            </div>
+            <div
+                class="notifications-container__header__button"
+                :class="{ 'disabled': isMarkAsReadPressed }"
+                @click="markAsRead"
+            >
+                <p class="notifications-container__header__button__label">Mark all as read</p>
+            </div>
+        </div>
+        <div class="notifications-container__content-area" v-if="false">
+<!--            <SNONotification class="notification"/>-->
+        </div>
+        <div class="notifications-container__empty-state" v-else>
+            <img src="@/../static/images/notifications/EmptyState.png" alt="Empty state image">
+            <p class="notifications-container__empty-state__label">No notifications yet</p>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import SNONotification from '@/app/components/notifications/SNONotification.vue';
+
+import BackArrowIcon from '@/../static/images/notifications/backArrow.svg';
+
+@Component ({
+    components: {
+        SNONotification,
+        BackArrowIcon,
+    },
+})
+export default class NotificationsArea extends Vue {
+    public isMarkAsReadPressed: boolean = false;
+
+    public markAsRead(): void {
+        this.isMarkAsReadPressed = true;
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .notifications-container {
+        width: 822px;
+        height: calc(100vh - 89px - 89px);
+
+        &__header {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 17px;
+
+            &__left-area {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                width: auto;
+            }
+
+            &__back-link {
+                width: 25px;
+                height: 25px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            &__text {
+                font-family: 'font_bold', sans-serif;
+                font-size: 24px;
+                line-height: 57px;
+                color: #535f77;
+                margin-left: 29px;
+                text-align: center;
+            }
+
+            &__button {
+                width: 140px;
+                height: 35px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border: 1px solid #c3cad8;
+                border-radius: 8px;
+                background-color: transparent;
+
+                &__label {
+                    font-family: 'font_regular', sans-serif;
+                    font-size: 14px;
+                    color: #535f77;
+                    text-align: left;
+                }
+
+                &:hover {
+                    border: 1px solid white;
+                    background-color: #fff;
+                    cursor: pointer;
+                }
+            }
+        }
+
+        &__content-area {
+            width: 100%;
+            height: auto;
+            max-height: 62vh;
+            background-color: #f3f4f9;
+            border-radius: 12px;
+            overflow-y: auto;
+        }
+
+        &__empty-state {
+            height: 62vh;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            &__label {
+                margin-top: 35px;
+                font-family: 'font_regular', sans-serif;
+                font-size: 16px;
+                color: #1c2a3e;
+            }
+        }
+    }
+
+    .notification {
+        margin-bottom: 1px;
+    }
+
+    .disabled {
+        border: 1px solid transparent;
+        background-color: #e8eaf2;
+        pointer-events: none;
+
+        .notifications-container__header__button__svg path {
+            fill: #979ba7 !important;
+        }
+
+        .notifications-container__header__button__label {
+            color: #979ba7 !important;
+        }
+    }
+</style>
diff --git a/web/storagenode/static/images/notifications/EmptyState.png b/web/storagenode/static/images/notifications/EmptyState.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4f79df7d64ba7a59da62b1e8b7bcbfb2a222540
GIT binary patch
literal 9356
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
GLSTaNBl1Q7

literal 0
HcmV?d00001

diff --git a/web/storagenode/static/images/notifications/backArrow.svg b/web/storagenode/static/images/notifications/backArrow.svg
new file mode 100644
index 000000000..ce064a1e1
--- /dev/null
+++ b/web/storagenode/static/images/notifications/backArrow.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5607 0.43934C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L5.12132 8H17.5C18.3284 8 19 8.67157 19 9.5C19 10.3284 18.3284 11 17.5 11H5.12132L10.5607 16.4393C11.1464 17.0251 11.1464 17.9749 10.5607 18.5607C9.97487 19.1464 9.02513 19.1464 8.43934 18.5607L0.43934 10.5607C-0.146447 9.97487 -0.146447 9.02513 0.43934 8.43934L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.43934Z" fill="#384B65"/>
+</svg>
diff --git a/web/storagenode/static/images/notifications/bell.svg b/web/storagenode/static/images/notifications/bell.svg
new file mode 100644
index 000000000..3ffa1156c
--- /dev/null
+++ b/web/storagenode/static/images/notifications/bell.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.1999 2.6265C5.09522 3.42494 2.7999 6.2437 2.7999 9.6001V14.4001C2.7999 14.8423 2.44053 15.2001 2.00146 15.2001C1.1171 15.2001 0.399902 15.9189 0.399902 16.8001C0.399902 17.6845 1.1171 18.4001 2.00458 18.4001H17.9954C18.8813 18.4001 19.6001 17.6813 19.6001 16.8001C19.6001 15.9157 18.8797 15.2001 17.9985 15.2001C17.5579 15.2001 17.2001 14.8438 17.2001 14.4001V9.6001C17.2001 6.24542 14.9063 3.4265 11.8001 2.6265V1.79994C11.8001 0.803059 10.9938 -6.10352e-05 10.0001 -6.10352e-05C9.00786 -6.10352e-05 8.20006 0.806179 8.20006 1.79994L8.1999 2.6265ZM7.1999 19.2001H12.7999C12.7999 20.747 11.5468 22.0001 9.9999 22.0001C8.45302 22.0001 7.1999 20.747 7.1999 19.2001Z" fill="#354049"/>
+</svg>