From 7e702aa107e61e67ae1637f8ec6bcf81ff0c7070 Mon Sep 17 00:00:00 2001
From: Yehor Butko <crawter@hotmail.com>
Date: Fri, 30 Aug 2019 14:34:51 +0300
Subject: [PATCH] web/satellite: navigation, button and project members unit
 tests (#2907)

---
 .../src/components/common/Button.vue          |   3 +-
 .../components/navigation/NavigationArea.vue  |  12 +-
 .../components/navigation/navigationArea.html |   1 -
 .../components/notifications/Notification.vue |   2 +-
 .../src/components/team/HeaderArea.vue        |  23 +-
 .../components/team/ProjectMembersArea.vue    |  13 +-
 web/satellite/src/store/modules/projects.ts   |   5 +-
 web/satellite/src/types/projectMembers.ts     |  12 +
 web/satellite/src/views/Dashboard.vue         |  10 +-
 web/satellite/src/views/register/Register.vue |   2 +-
 .../tests/unit/common/Button.spec.ts          |  29 +-
 .../navigation/TabNavigation.spec.ts          |   1 -
 .../__snapshots__/navigationArea.spec.ts.snap | 185 ++++++++++
 .../navigation/navigationArea.spec.ts         |  77 ++++
 web/satellite/tests/unit/mock/api/credits.ts  |  19 +
 .../tests/unit/mock/api/projectMembers.ts     |  28 ++
 web/satellite/tests/unit/mock/api/projects.ts |  34 ++
 web/satellite/tests/unit/mock/api/users.ts    |  23 ++
 .../unit/projectMembers/HeaderArea.spec.ts    | 332 ++++++------------
 .../projectMembers/ProjectMembersArea.spec.ts |  75 ++--
 .../__snapshots__/HeaderArea.spec.ts.snap     |  82 ++++-
 .../ProjectMembersArea.spec.ts.snap           |  63 +++-
 .../unit/referralStats/referralStats.spec.ts  |  24 +-
 web/satellite/tslint.json                     |   1 +
 24 files changed, 737 insertions(+), 319 deletions(-)
 create mode 100644 web/satellite/tests/unit/components/navigation/__snapshots__/navigationArea.spec.ts.snap
 create mode 100644 web/satellite/tests/unit/components/navigation/navigationArea.spec.ts
 create mode 100644 web/satellite/tests/unit/mock/api/credits.ts
 create mode 100644 web/satellite/tests/unit/mock/api/projectMembers.ts
 create mode 100644 web/satellite/tests/unit/mock/api/projects.ts
 create mode 100644 web/satellite/tests/unit/mock/api/users.ts

diff --git a/web/satellite/src/components/common/Button.vue b/web/satellite/src/components/common/Button.vue
index 5706d1213..873318b83 100644
--- a/web/satellite/src/components/common/Button.vue
+++ b/web/satellite/src/components/common/Button.vue
@@ -29,8 +29,7 @@
         private readonly isDeletion: boolean;
         @Prop({default: false})
         private isDisabled: boolean;
-        // TODO: improve default implementation
-        @Prop({default: () => console.error('onPress is not reinitialized')})
+        @Prop({default: () => { return; }})
         private readonly onPress: Function;
         
         public get style(): Object {
diff --git a/web/satellite/src/components/navigation/NavigationArea.vue b/web/satellite/src/components/navigation/NavigationArea.vue
index 64c080b55..60fbd9075 100644
--- a/web/satellite/src/components/navigation/NavigationArea.vue
+++ b/web/satellite/src/components/navigation/NavigationArea.vue
@@ -5,16 +5,10 @@
 
 <script lang="ts">
     import { Component, Vue } from 'vue-property-decorator';
-    import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
-    import AddUserPopup from '@/components/team/AddUserPopup.vue';
     import { NavigationLink } from '@/types/navigation';
     import { RouteConfig } from '@/router';
 
-    @Component({
-        components: {
-            AddUserPopup,
-        }
-    })
+    @Component
     export default class NavigationArea extends Vue {
         // TODO: Use SvgLoaderComponent to reduce markup lines
         public readonly navigation: NavigationLink[] = [
@@ -61,10 +55,6 @@
             location.reload();
         }
 
-        public get isAddTeamMembersPopupShown(): boolean {
-            return this.$store.state.appStateModule.appState.isAddTeamMembersPopupShown;
-        }
-
         public get isProjectNotSelected(): boolean {
             return this.$store.state.projectsModule.selectedProject.id === '';
         }
diff --git a/web/satellite/src/components/navigation/navigationArea.html b/web/satellite/src/components/navigation/navigationArea.html
index 5ac7ccb30..3491b2b62 100644
--- a/web/satellite/src/components/navigation/navigationArea.html
+++ b/web/satellite/src/components/navigation/navigationArea.html
@@ -49,5 +49,4 @@
             </div>
         </a>
     </div>
-    <AddUserPopup v-if="isAddTeamMembersPopupShown"/>
 </div>
diff --git a/web/satellite/src/components/notifications/Notification.vue b/web/satellite/src/components/notifications/Notification.vue
index 2fbc6ce28..effb22b4f 100644
--- a/web/satellite/src/components/notifications/Notification.vue
+++ b/web/satellite/src/components/notifications/Notification.vue
@@ -24,7 +24,7 @@
 
     @Component
     export default class Notification extends Vue {
-        @Prop({default: () => new DelayedNotification(new Function(), '', '')})
+        @Prop({default: () => new DelayedNotification(() => { return; }, '', '')})
         private notification: DelayedNotification;
 
         public isClassActive = false;
diff --git a/web/satellite/src/components/team/HeaderArea.vue b/web/satellite/src/components/team/HeaderArea.vue
index b3c5ca78a..66071a1a7 100644
--- a/web/satellite/src/components/team/HeaderArea.vue
+++ b/web/satellite/src/components/team/HeaderArea.vue
@@ -15,7 +15,7 @@
                     <Button class="button" label="Cancel" width="122px" height="48px" isWhite="true" :onPress="onClearSelection"/>
                 </div>
                 <div class="header-after-delete-click" v-if="headerState === 1 && isDeleteClicked">
-                    <span>Are you sure you want to delete {{selectedProjectMembers}} {{userCountTitle}} ?</span>
+                    <span>Are you sure you want to delete {{selectedProjectMembersCount}} {{userCountTitle}}?</span>
                     <div class="header-after-delete-click__button-area">
                         <Button class="button deletion" label="Delete" width="122px" height="48px" :onPress="onDelete"/>
                         <Button class="button" label="Cancel" width="122px" height="48px" isWhite="true" :onPress="onClearSelection"/>
@@ -25,6 +25,7 @@
             <div class="blur-content" v-if="isDeleteClicked"></div>
             <div class="blur-search" v-if="isDeleteClicked"></div>
 	    </div>
+        <AddUserPopup v-if="isAddTeamMembersPopupShown"/>
     </div>
 </template>
 
@@ -34,7 +35,8 @@
     import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
     import Button from '@/components/common/Button.vue';
     import HeaderComponent from '@/components/common/HeaderComponent.vue';
-    import { ProjectMember } from '@/types/projectMembers';
+    import { ProjectMember, ProjectMemberHeaderState } from '@/types/projectMembers';
+    import AddUserPopup from '@/components/team/AddUserPopup.vue';
 
     declare interface ClearSearch {
         clearSearch: () => void;
@@ -44,24 +46,25 @@
         components: {
             Button,
             HeaderComponent,
+            AddUserPopup,
         }
     })
     export default class HeaderArea extends Vue {
+        @Prop({default: ProjectMemberHeaderState.DEFAULT})
+        private readonly headerState: ProjectMemberHeaderState;
         @Prop({default: 0})
-        private readonly headerState: number;
-        @Prop({default: 0})
-        private readonly selectedProjectMembers: number;
+        public readonly selectedProjectMembersCount: number;
 
         private FIRST_PAGE = 1;
 
-        private isDeleteClicked: boolean = false;
+        public isDeleteClicked: boolean = false;
 
         public $refs!: {
             headerComponent: HeaderComponent & ClearSearch
         };
 
         public get userCountTitle(): string {
-            if (this.selectedProjectMembers === 1) {
+            if (this.selectedProjectMembersCount === 1) {
                 return 'user';
             }
 
@@ -84,7 +87,7 @@
         }
 
         public async onDelete(): Promise<void> {
-            const projectMemberEmails = this.$store.getters.selectedProjectMembers.map((member: ProjectMember) => {
+            const projectMemberEmails: string[] = this.$store.getters.selectedProjectMembers.map((member: ProjectMember) => {
                 return member.user.email;
             });
 
@@ -110,6 +113,10 @@
                 this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Unable to fetch project members. ${err.message}`);
             }
         }
+
+        public get isAddTeamMembersPopupShown(): boolean {
+            return this.$store.state.appStateModule.appState.isAddTeamMembersPopupShown;
+        }
     }
 </script>
 
diff --git a/web/satellite/src/components/team/ProjectMembersArea.vue b/web/satellite/src/components/team/ProjectMembersArea.vue
index 2923758d5..3a95284ba 100644
--- a/web/satellite/src/components/team/ProjectMembersArea.vue
+++ b/web/satellite/src/components/team/ProjectMembersArea.vue
@@ -4,7 +4,7 @@
 <template>
     <div class="team-area">
         <div class="team-area__header">
-            <HeaderArea :headerState="headerState" :selectedProjectMembers="selectedProjectMembers.length"/>
+            <HeaderArea :headerState="headerState" :selectedProjectMembersCount="selectedProjectMembers.length"/>
         </div>
         <div class="team-area__container" id="team-container" v-if="projectMembersCount > 0 || projectMembersTotalCount > 0">
             <SortingListHeader :onHeaderClickCallback="onHeaderSectionClickCallback"/>
@@ -64,15 +64,10 @@
     import HeaderArea from '@/components/team/HeaderArea.vue';
     import ProjectMemberListItem from '@/components/team/ProjectMemberListItem.vue';
     import SortingListHeader from '@/components/team/SortingListHeader.vue';
-    import { ProjectMember, ProjectMemberOrderBy } from '@/types/projectMembers';
+    import { ProjectMember, ProjectMemberHeaderState, ProjectMemberOrderBy } from '@/types/projectMembers';
     import { SortDirection } from '@/types/common';
     import { NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
 
-    enum HeaderState {
-        DEFAULT = 0,
-        ON_SELECT,
-    }
-
     @Component({
         components: {
             HeaderArea,
@@ -114,10 +109,10 @@
 
         public get headerState(): number {
             if (this.selectedProjectMembers.length > 0) {
-                return HeaderState.ON_SELECT;
+                return ProjectMemberHeaderState.ON_SELECT;
             }
 
-            return HeaderState.DEFAULT;
+            return ProjectMemberHeaderState.DEFAULT;
         }
 
         public async onPageClick(index: number):Promise<void> {
diff --git a/web/satellite/src/store/modules/projects.ts b/web/satellite/src/store/modules/projects.ts
index 1a136782e..2aec219a8 100644
--- a/web/satellite/src/store/modules/projects.ts
+++ b/web/satellite/src/store/modules/projects.ts
@@ -1,8 +1,7 @@
 // Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-import { ProjectsApiGql } from '@/api/projects';
-import { CreateProjectModel, Project, UpdateProjectModel } from '@/types/projects';
+import { CreateProjectModel, Project, ProjectsApi, UpdateProjectModel } from '@/types/projects';
 import { StoreModule } from '@/store';
 
 export const PROJECTS_ACTIONS = {
@@ -48,7 +47,7 @@ const {
     CLEAR_PROJECTS,
 } = PROJECTS_MUTATIONS;
 
-export function makeProjectsModule(api: ProjectsApiGql): StoreModule<ProjectsState> {
+export function makeProjectsModule(api: ProjectsApi): StoreModule<ProjectsState> {
     return {
         state: new ProjectsState(),
         mutations: {
diff --git a/web/satellite/src/types/projectMembers.ts b/web/satellite/src/types/projectMembers.ts
index 6e7b5f6ee..ff2e72db8 100644
--- a/web/satellite/src/types/projectMembers.ts
+++ b/web/satellite/src/types/projectMembers.ts
@@ -13,6 +13,18 @@ export enum ProjectMemberOrderBy {
     CREATED_AT,
 }
 
+/**
+ * Contains values of project members header component state
+ * used in ProjectMembersArea and HeaderArea.
+ */
+export enum ProjectMemberHeaderState {
+    DEFAULT = 0,
+    /**
+     * Used when some project members selected
+     */
+    ON_SELECT,
+}
+
 /**
  * ProjectMembersApi is a graphql implementation of ProjectMembers API.
  * Exposes all ProjectMembers-related functionality
diff --git a/web/satellite/src/views/Dashboard.vue b/web/satellite/src/views/Dashboard.vue
index f7786f2a4..2d81719f6 100644
--- a/web/satellite/src/views/Dashboard.vue
+++ b/web/satellite/src/views/Dashboard.vue
@@ -81,20 +81,20 @@
             await this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, '');
             try {
                 await this.$store.dispatch(PM_ACTIONS.FETCH, 1);
-            } catch (err) {
-                this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Unable to fetch project members. ${err.message}`);
+            } catch (error) {
+                this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Unable to fetch project members. ${error.message}`);
             }
 
             try {
                 await this.$store.dispatch(API_KEYS_ACTIONS.FETCH);
-            } catch {
+            } catch (error) {
                 this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch api keys');
             }
 
             try {
                 await this.$store.dispatch(PROJECT_USAGE_ACTIONS.FETCH_CURRENT_ROLLUP);
-            } catch (e) {
-                await this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Unable to fetch project usage. ${e.message}`);
+            } catch (error) {
+                await this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Unable to fetch project usage. ${error.message}`);
             }
 
             try {
diff --git a/web/satellite/src/views/register/Register.vue b/web/satellite/src/views/register/Register.vue
index f6613298e..e939028c3 100644
--- a/web/satellite/src/views/register/Register.vue
+++ b/web/satellite/src/views/register/Register.vue
@@ -55,7 +55,7 @@
             let decoded = '';
             try {
                 decoded = atob(ids);
-            } catch {
+            } catch (error) {
                 this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Invalid Referral URL');
                 this.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY;
 
diff --git a/web/satellite/tests/unit/common/Button.spec.ts b/web/satellite/tests/unit/common/Button.spec.ts
index 42c0c9c62..398a1ca7b 100644
--- a/web/satellite/tests/unit/common/Button.spec.ts
+++ b/web/satellite/tests/unit/common/Button.spec.ts
@@ -8,17 +8,20 @@ import * as sinon from 'sinon';
 describe('Button.vue', () => {
 
     it('renders correctly', () => {
-
-        const wrapper = shallowMount(Button);
+        const wrapper = shallowMount(Button, {
+            propsData: {
+                onPress: () => { return; },
+            },
+        });
 
         expect(wrapper).toMatchSnapshot();
     });
 
     it('renders correctly with isWhite prop', () => {
-
         const wrapper = shallowMount(Button, {
             propsData: {
-                isWhite: true
+                isWhite: true,
+                onPress: () => { return; },
             }
         });
 
@@ -26,10 +29,10 @@ describe('Button.vue', () => {
     });
 
     it('renders correctly with isDisabled prop', () => {
-
         const wrapper = shallowMount(Button, {
             propsData: {
-                isDisabled: true
+                isDisabled: true,
+                onPress: () => { return; },
             }
         });
 
@@ -42,7 +45,12 @@ describe('Button.vue', () => {
         let height = '20px';
 
         const wrapper = shallowMount(Button, {
-            propsData: {label, width, height},
+            propsData: {
+                label,
+                width,
+                height,
+                onPress: () => { return; },
+            },
         });
 
         expect(wrapper.element.style.width).toMatch(width);
@@ -51,8 +59,11 @@ describe('Button.vue', () => {
     });
 
     it('renders correctly with default props', () => {
-
-        const wrapper = shallowMount(Button);
+        const wrapper = shallowMount(Button, {
+            propsData: {
+                onPress: () => { return; },
+            },
+        });
 
         expect(wrapper.element.style.width).toMatch('inherit');
         expect(wrapper.element.style.height).toMatch('inherit');
diff --git a/web/satellite/tests/unit/components/navigation/TabNavigation.spec.ts b/web/satellite/tests/unit/components/navigation/TabNavigation.spec.ts
index 333c0484e..e027934d2 100644
--- a/web/satellite/tests/unit/components/navigation/TabNavigation.spec.ts
+++ b/web/satellite/tests/unit/components/navigation/TabNavigation.spec.ts
@@ -17,7 +17,6 @@ const navigation: NavigationLink[] = [
 ];
 
 describe('TabNavigation', () => {
-
     it('snapshot not changed', () => {
         const wrapper = shallowMount(TabNavigation, {
             localVue,
diff --git a/web/satellite/tests/unit/components/navigation/__snapshots__/navigationArea.spec.ts.snap b/web/satellite/tests/unit/components/navigation/__snapshots__/navigationArea.spec.ts.snap
new file mode 100644
index 000000000..f6996f23f
--- /dev/null
+++ b/web/satellite/tests/unit/components/navigation/__snapshots__/navigationArea.spec.ts.snap
@@ -0,0 +1,185 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavigationArea snapshot not changed with project 1`] = `
+<div class="navigation-area">
+  <div class="navigation-area__wrap">
+    <div class="navigation-area__logo"><svg width="54" height="60" viewBox="0 0 54 60" fill="none" xmlns="http://www.w3.org/2000/svg" class="navigation-area__logo__img">
+        <path d="M54 17.4399C53.9172 19.3141 53.0892 20.6993 51.5161 21.6771C51.1849 21.8401 51.1021 22.003 51.1021 22.329C51.1021 27.4625 51.1021 32.596 51.1021 37.7295C51.1021 38.0555 51.1849 38.2184 51.4333 38.3814C53.2548 39.4407 54.2484 41.3963 53.9172 43.4334C53.586 45.389 52.0129 47.0187 49.9429 47.3447C48.7837 47.5891 47.6246 47.4262 46.5482 46.7743C46.217 46.6113 45.9686 46.6113 45.7202 46.7743C41.2491 49.3003 36.7781 51.9078 32.307 54.4338C31.9758 54.5968 31.893 54.7597 31.893 55.1672C31.893 57.6117 29.9887 59.8118 27.5875 59.9747C25.0208 60.2192 22.7025 58.671 22.2057 56.145C22.1229 55.7376 22.1229 55.4116 22.1229 55.0042C22.1229 54.7597 22.0401 54.5968 21.7917 54.4338C17.2378 51.8263 12.6839 49.3003 8.13005 46.6928C7.88166 46.5298 7.71606 46.5298 7.46767 46.6928C4.48695 48.4854 0.678253 46.7743 0.0986687 43.5149C-0.31532 41.4778 0.595455 39.5222 2.41701 38.3814C2.7482 38.2184 2.83099 38.0555 2.83099 37.648C2.83099 32.5145 2.83099 27.381 2.83099 22.2475C2.83099 21.9216 2.7482 21.7586 2.4998 21.5956C0.595455 20.5363 -0.31532 18.6622 0.0986687 16.5436C0.42986 14.425 2.08581 12.8768 4.23856 12.6323C5.39772 12.4694 6.4741 12.7138 7.46767 13.2842C7.71606 13.4472 7.88166 13.4472 8.13005 13.2842C12.6839 10.6767 17.155 8.15071 21.7089 5.54321C21.9573 5.38024 22.1229 5.21727 22.1229 4.89133C22.1229 2.03938 24.3584 -0.0792115 27.2563 0.00227286C29.4919 0.0837572 31.5618 1.87641 31.893 4.07649C31.893 4.23946 31.9758 4.40243 31.9758 4.64688C31.9758 5.21727 32.2242 5.54321 32.6382 5.78766C37.0265 8.23219 41.4147 10.7582 45.803 13.2842C46.1342 13.4472 46.2998 13.4472 46.631 13.2842C49.6117 11.573 53.2548 13.2027 53.9172 16.5436C54 16.8695 54 17.1955 54 17.4399ZM15.1679 35.0405C15.0851 35.0405 15.0851 35.122 15.0851 35.122C12.6011 36.5073 10.1172 37.8925 7.63326 39.3592C7.46767 39.4407 7.21927 39.4407 7.05368 39.3592C6.3913 38.9518 5.72892 38.7073 4.90094 38.7073C2.33421 38.6258 0.843848 40.663 0.761051 42.4556C0.761051 44.4927 2.33421 46.6113 4.90094 46.6113C7.13648 46.6113 8.87523 44.8187 8.87523 42.6186C8.87523 42.2112 8.95803 41.9667 9.37202 41.8037C12.0215 40.337 14.5883 38.8703 17.2378 37.3221C17.4862 37.1591 17.7346 37.1591 17.983 37.2406C19.6389 37.974 21.2949 38.1369 23.0336 37.648C23.1992 37.5665 23.4476 37.648 23.6132 37.7295C24.11 37.974 24.6068 38.2184 25.1036 38.3814C25.4348 38.4629 25.5176 38.6258 25.5176 38.9518C25.5176 43.026 25.5176 47.0187 25.5176 51.0929C25.5176 51.3374 25.4348 51.5004 25.1864 51.6633C23.7788 52.3152 22.7852 54.0264 23.0336 55.819C23.3648 57.9376 25.5176 59.4858 27.6703 59.0784C29.5747 58.7525 30.7338 57.4487 31.065 55.5746C31.2306 54.2708 30.5682 52.5597 28.9123 51.6633C28.6639 51.5819 28.5811 51.4189 28.5811 51.1744C28.5811 47.2632 28.5811 43.3519 28.5811 39.4407C28.5811 39.1147 28.7467 39.0333 29.0779 38.9518C29.9059 38.7888 30.7338 38.6258 31.479 38.4629C31.8102 38.3814 32.1414 38.3814 32.4726 38.4629C34.2113 39.1962 35.9501 39.1147 37.606 38.1369C37.8544 37.974 38.02 37.974 38.2684 38.1369C40.4212 39.3592 42.5739 40.5815 44.7267 41.8037C45.0578 41.9667 45.2234 42.2112 45.2234 42.6186C44.975 44.9001 47.1278 46.7743 49.5289 46.5298C51.9301 46.2854 53.586 44.0038 53.0064 41.7222C52.344 38.9518 49.3633 37.7295 46.8794 39.1962C46.631 39.3592 46.4654 39.3592 46.1342 39.1962C44.0643 37.974 41.9943 36.8332 39.9244 35.6924C39.5932 35.5294 39.5932 35.3665 39.676 35.0405C40.3384 33.0034 39.8416 31.1293 38.3512 29.5811C38.02 29.2551 36.6953 27.1366 36.4469 26.7291C36.2813 26.4032 36.3641 26.2402 36.6953 26.0773C39.8416 24.2846 42.9879 22.5734 46.0514 20.7808C46.2998 20.6178 46.4654 20.6178 46.7138 20.7808C47.6246 21.3512 48.6181 21.5141 49.6117 21.3512C51.5989 21.0252 53.0892 19.2326 52.9236 17.114C52.758 14.8324 50.4397 13.1212 48.1214 13.6102C46.1342 14.0176 44.8094 15.5658 44.8922 17.6029C44.8922 17.9288 44.8094 18.1733 44.4783 18.3362C41.3319 20.1289 38.1028 21.9216 34.9565 23.7142C34.7081 23.8772 34.5425 23.8772 34.2941 23.6327C32.8038 22.2475 30.9822 21.4326 28.9951 21.1882C28.3327 21.1067 28.3327 21.1067 28.3327 20.3734C28.3327 16.7066 28.3327 13.0398 28.3327 9.37297C28.3327 8.88406 28.4155 8.55813 28.9123 8.31367C30.651 7.33586 31.3134 5.21727 30.5682 3.34313C29.7403 1.55048 27.6703 0.491179 25.766 1.14305C24.0272 1.63196 23.0336 2.93571 22.868 4.64688C22.7025 6.03211 23.3648 7.58031 25.0208 8.39516C25.2692 8.55813 25.4348 8.63961 25.4348 8.96555C25.4348 13.0398 25.4348 17.0325 25.4348 21.1067C25.4348 21.4326 25.2692 21.5141 25.0208 21.6771C24.1928 22.0845 23.3648 22.4105 22.7025 22.9809C21.9573 23.6327 21.2121 23.9587 20.1357 23.9587C20.0529 23.9587 19.9701 23.9587 19.8873 23.9587C19.6389 23.9587 19.3077 23.9587 19.0594 23.7957C15.8302 22.003 12.6839 20.2104 9.45481 18.4177C8.95803 18.1733 8.79243 17.8473 8.87523 17.3584C8.87523 17.114 8.87523 16.951 8.79243 16.7066C8.46124 14.7509 6.55689 13.1212 4.23856 13.5287C1.92022 13.9361 0.512657 15.9732 0.843848 18.0918C1.34063 20.8623 4.56975 22.2475 6.97088 20.7808C7.21927 20.6178 7.46767 20.6178 7.71606 20.7808C10.1172 22.166 12.5183 23.5512 15.0023 24.9365C15.4163 25.1809 15.8302 25.4254 16.2442 25.6698C13.5119 28.5218 13.1807 31.6182 15.1679 35.0405Z" fill="#2683FF"></path>
+        <path d="M22.4933 25.5491C23.1511 25.6323 23.3978 25.3828 23.8912 24.9671C25.8648 23.0547 28.2495 22.5558 30.7987 23.3873C33.3479 24.2188 34.9103 26.048 35.4037 28.7088C35.4859 29.2077 35.7326 29.5403 36.1438 29.7898C37.4595 30.5381 38.1996 32.2011 37.9529 33.5315C37.624 35.2776 36.4727 36.5249 34.8281 36.7743C33.9235 36.9406 33.1012 36.7743 32.3611 36.3586C32.0322 36.1091 31.7855 36.1923 31.3743 36.3586C29.0718 37.3564 26.9338 37.1901 24.7958 35.8597C24.4668 35.6934 24.2201 35.6102 23.8912 35.7765C20.9308 36.7743 17.8882 35.0282 17.1482 32.1179C16.3258 28.7088 19.0395 25.3828 22.4933 25.5491Z" fill="#2683FF"></path>
+        <path d="M48 43C48 42.4286 48.4286 42 49 42C49.5714 42 50 42.4286 50 43C50 43.5 49.5 44 49 44C48.4286 44 48 43.5714 48 43Z" fill="#2683FF"></path>
+        <path d="M26 5C26 4.42857 26.4444 4 27.037 4C27.5556 4 28 4.42857 28 5C28 5.5 27.5556 6 26.963 6C26.4444 5.92857 26 5.5 26 5Z" fill="#2683FF"></path>
+        <path d="M6 43C6 43.5714 5.57143 44 5 44C4.5 44 4 43.5 4 43C4 42.5 4.5 42 5 42C5.57143 42 6 42.4286 6 43Z" fill="#2683FF"></path>
+        <path d="M27 54C27.5714 54 28 54.6667 28 55.5556C28 56.4444 27.5714 57 27 57C26.4286 57 26 56.3333 26 55.4444C26 54.6667 26.4286 54 27 54Z" fill="#2683FF"></path>
+        <path d="M5 19C4.42857 19 4 18.3333 4 17.5556C4 16.7778 4.42857 16 5 16C5.57143 16 6 16.5556 6 17.4444C5.92857 18.3333 5.57143 19 5 19Z" fill="#2683FF"></path>
+        <path d="M48.9327 19C48.3635 19 47.9366 18.3333 48.0078 17.4444C48.0078 16.5556 48.4347 16 49.0039 16C49.5731 16 50 16.6667 50 17.5556C49.9288 18.3333 49.4308 19 48.9327 19Z" fill="#2683FF"></path>
+      </svg> <svg width="69" height="16" viewBox="0 0 69 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="navigation-area__logo__text">
+        <path d="M4.5974 3.50249C4.28571 3.7413 4.12986 4.1393 4.12986 4.61692C4.12986 5.09453 4.36363 5.41293 4.75324 5.65174C5.14285 5.89055 6.07792 6.20896 7.48052 6.60697C8.88311 7.00498 10.0519 7.48259 10.8312 8.19901C11.6104 8.91542 12 9.95025 12 11.3831C12 12.7363 11.4545 13.8507 10.4416 14.7264C9.42857 15.602 8.10389 16 6.46753 16C4.05194 16 1.94805 15.1244 0 13.2935L2.02597 10.7463C3.66233 12.1791 5.14285 12.8955 6.54545 12.8955C7.16883 12.8955 7.63636 12.7363 8.02597 12.4975C8.41558 12.2587 8.57143 11.8607 8.57143 11.3831C8.57143 10.9055 8.41558 10.5871 8.02597 10.2687C7.63636 10.0299 6.93506 9.71144 5.76623 9.47264C3.97402 9.07463 2.72727 8.51741 1.94805 7.801C1.16883 7.08458 0.701294 6.04975 0.701294 4.61692C0.701294 3.18408 1.24675 1.99005 2.25974 1.19403C3.27272 0.39801 4.59739 0 6.07792 0C7.0909 0 8.1039 0.159205 9.11688 0.557215C10.1299 0.875623 10.987 1.43283 11.7662 2.06965L10.0519 4.61692C8.72727 3.58209 7.4026 3.10448 6 3.10448C5.37662 3.10448 4.90909 3.26368 4.5974 3.50249Z" fill="#2683FF"></path>
+        <path d="M21.3268 3.13402V16H17.6732V3.13402H13V0H26V3.13402H21.3268Z" fill="#2683FF"></path>
+        <path d="M40.5594 13.68C38.8762 15.2 36.8564 16 34.5 16C32.1436 16 30.0396 15.2 28.4406 13.68C26.7574 12.16 26 10.24 26 8C26 5.76 26.8416 3.84 28.4406 2.32C30.1238 0.800001 32.1436 0 34.5 0C36.9406 0 38.9604 0.800001 40.5594 2.32C42.2426 3.84 43 5.76 43 8C43 10.24 42.2426 12.16 40.5594 13.68ZM39.297 8C39.297 6.64 38.7921 5.44 37.8663 4.48C36.9406 3.52 35.7624 3.04 34.4158 3.04C33.0693 3.04 31.8911 3.52 30.9653 4.48C30.0396 5.44 29.5347 6.64 29.5347 8C29.5347 9.36 30.0396 10.56 30.9653 11.52C31.8911 12.48 33.0693 12.96 34.4158 12.96C35.7624 12.96 36.9406 12.48 37.8663 11.52C38.8762 10.56 39.297 9.36 39.297 8Z" fill="#2683FF"></path>
+        <path d="M58.0059 5.36082C58.0059 7.91752 57.0118 9.56701 54.9408 10.3093L59 16H54.6095L51.0473 10.8866H48.5621V16H45V0H51.0473C53.5325 0 55.355 0.412371 56.3491 1.23711C57.5089 2.14433 58.0059 3.46392 58.0059 5.36082ZM53.6982 7.25773C54.1124 6.84536 54.3609 6.26804 54.3609 5.36082C54.3609 4.45361 54.1124 3.87629 53.6982 3.62887C53.2012 3.29897 52.4556 3.13402 51.2959 3.13402H48.645V7.83505H51.2959C52.4556 7.83505 53.284 7.58763 53.6982 7.25773Z" fill="#2683FF"></path>
+        <path d="M60.92 3.11795V0H69V10.3385C69 12.2256 68.52 13.6205 67.56 14.6051C66.6 15.5077 65.4 16 63.88 16C62.04 16 60.36 15.2615 59 13.7846L60.76 11.241C61.72 12.3077 62.68 12.8 63.72 12.8C64.2 12.8 64.6 12.6359 65 12.2256C65.32 11.8154 65.56 11.241 65.56 10.5026V3.0359L60.92 3.11795Z" fill="#2683FF"></path>
+      </svg></div>
+    <router-link-stub to="/project-overview/details" tag="a" event="click" class="navigation-area__item-container">
+      <div class="navigation-area__item-container__link-container">
+        <div><svg class="svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M22.073 5.3913C21.8382 5.15652 21.5252 5 21.2121 5H6.89038C6.26429 5 5.71647 5.54783 5.79473 6.09565L2.19473 6.01739C1.80342 6.09565 1.49038 6.17391 1.2556 6.48696C1.09908 6.72174 0.942555 7.03478 1.02082 7.42609L3.13386 18.4609C3.21212 19.0087 3.68169 19.4 4.22951 19.4H19.0991C19.6469 19.4 20.1165 19.0087 20.1947 18.4609L22.3078 6.33043C22.386 6.01739 22.3078 5.62609 22.073 5.3913ZM19.6469 14.7826L18.7078 9.38261C18.6295 8.75652 18.0034 8.28696 17.3773 8.28696H8.4556C8.37734 8.28696 8.29908 8.2087 8.29908 8.13043L8.14256 7.34783C8.14256 6.8 7.75125 6.33043 7.28169 6.17391L21.2121 6.09565L19.6469 14.7826Z" fill="#363840"></path>
+          </svg></div>
+        <h1>Project Details</h1>
+      </div>
+    </router-link-stub>
+    <router-link-stub to="/project-members" tag="a" event="click" class="navigation-area__item-container">
+      <div class="navigation-area__item-container__link-container">
+        <div><svg class="svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0)">
+              <path d="M19.6621 11.1388C19.8233 10.8971 19.9039 10.6553 19.9845 10.333C20.5485 10.0913 20.8709 9.52718 20.9515 8.72136C21.032 7.99612 20.7097 7.43204 20.3068 7.10971C20.2262 5.01456 19.5816 3 16.6 3C13.6184 3 12.9738 5.01456 12.8126 7.10971C12.4097 7.43204 12.0874 8.0767 12.168 8.72136C12.2485 9.4466 12.6515 10.0913 13.135 10.333C13.2155 10.5748 13.3767 10.8971 13.4573 11.1388C12.9738 11.3 12.4903 11.4612 12.0874 11.6223C11.6845 11.4612 11.201 11.2194 10.7175 11.1388C10.8786 10.8971 10.9592 10.6553 11.0398 10.333C11.6039 10.0913 11.9262 9.52718 12.0068 8.72136C12.0874 7.99612 11.765 7.43204 11.3621 7.10971C11.201 5.01456 10.6369 3 7.57476 3C4.5932 3 3.94854 5.01456 3.78738 7.10971C3.38447 7.43204 3.06214 8.0767 3.14272 8.72136C3.2233 9.4466 3.62621 10.0913 4.10971 10.333C4.19029 10.5748 4.35146 10.8971 4.43204 11.1388C1.53107 11.9447 0 13.6369 0 16.2155C0 16.4573 0.161165 16.6184 0.32233 16.699C2.09515 17.5049 4.75437 17.9883 7.49418 17.9883C9.10583 17.9883 10.6369 17.8272 12.0068 17.5049C13.3767 17.8272 14.9078 17.9883 16.5194 17.9883C19.2592 17.9883 21.9184 17.5049 23.6913 16.699C23.8524 16.6184 24.0136 16.3767 24.0136 16.2155C24.0942 13.6369 22.5631 11.9447 19.6621 11.1388Z" fill="#354049"></path>
+              <path d="M13.7532 12.8937C13.1891 13.1354 12.5445 13.2966 11.8192 13.4577C11.094 13.2966 10.4493 13.1354 9.88525 12.8937C9.96584 11.6043 10.6105 10.5568 11.8192 9.91211C13.1086 10.5568 13.6726 11.5238 13.7532 12.8937Z" fill="#2683FF"></path>
+              <path class="white" d="M14.3174 13.832C17.0572 14.4767 19.0717 15.8466 19.0717 18.7476C17.1378 19.634 14.3174 20.0369 11.8193 20.0369C9.32126 20.0369 6.42029 19.634 4.56689 18.7476C4.56689 15.8466 6.50087 14.4767 9.32126 13.832" fill="white"></path>
+              <path d="M11.7389 20.6001C8.8379 20.6001 6.01751 20.1166 4.24469 19.2302C4.08353 19.2302 3.92236 18.9884 3.92236 18.8273C3.92236 16.0069 5.6146 14.1535 9.07964 13.3477L9.32139 14.3952C6.58159 15.0399 5.21168 16.3292 5.05052 18.4244C6.74275 19.1496 9.24081 19.5525 11.8195 19.5525C14.3981 19.5525 16.8156 19.1496 18.5884 18.4244C18.4272 16.3292 17.0573 15.0399 14.3175 14.3952L14.5593 13.3477C17.9437 14.1535 19.7165 16.0069 19.7165 18.8273C19.7165 19.069 19.5554 19.2302 19.3942 19.3108C17.4602 20.1166 14.6398 20.6001 11.7389 20.6001Z" fill="#354049"></path>
+              <path class="white" d="M11.7388 15.3628C10.5301 15.3628 9.16018 13.9929 8.5961 12.1395C8.11261 12.1395 7.79028 11.5754 7.7097 10.9308C7.62911 10.2861 7.95144 9.72205 8.35436 9.56088C8.43494 6.98224 9.16018 5.45117 11.7388 5.45117C14.3175 5.45117 15.0427 6.98224 15.1233 9.56088C15.5262 9.64146 15.8485 10.2055 15.7679 10.8502C15.6874 11.4949 15.365 12.0589 14.8815 12.0589C14.398 13.9929 12.9476 15.3628 11.7388 15.3628Z" fill="white"></path>
+              <path d="M11.7387 15.926C10.2882 15.926 8.83776 14.5561 8.11251 12.6221C7.54844 12.3804 7.14552 11.7357 7.06494 11.0105C7.06494 10.2047 7.38727 9.56 7.79018 9.23767C7.95135 7.06194 8.59601 4.9668 11.7387 4.9668C14.8814 4.9668 15.5261 7.06194 15.6873 9.23767C16.1708 9.56 16.4125 10.2047 16.3319 10.9299C16.2513 11.7357 15.8484 12.3804 15.2844 12.5416C14.7203 14.4755 13.1892 15.926 11.7387 15.926ZM11.7387 6.01437C9.72416 6.01437 8.99892 6.98136 8.83776 9.56C8.83776 9.80175 8.67659 10.0435 8.43484 10.0435C8.35426 10.0435 8.1931 10.3658 8.1931 10.7687C8.1931 11.2522 8.43484 11.494 8.51543 11.494C8.75717 11.494 8.99892 11.6551 8.99892 11.8969C9.48242 13.6697 10.7717 14.7173 11.6581 14.7173C12.5446 14.7173 13.7533 13.6697 14.3174 11.8969C14.398 11.6551 14.5591 11.494 14.8009 11.494C14.8814 11.494 15.1232 11.2522 15.1232 10.7687C15.1232 10.2852 14.962 10.0435 14.8814 10.0435C14.6397 9.96291 14.4785 9.80175 14.4785 9.56C14.4785 6.98136 13.7533 6.01437 11.7387 6.01437Z" fill="#354049"></path>
+            </g>
+            <defs>
+              <clipPath id="clip0">
+                <rect width="24" height="24" fill="white"></rect>
+              </clipPath>
+            </defs>
+          </svg></div>
+        <h1>Team</h1>
+      </div>
+    </router-link-stub>
+    <router-link-stub to="/api-keys" tag="a" event="click" class="navigation-area__item-container">
+      <div class="navigation-area__item-container__link-container">
+        <div><svg class="svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0)">
+              <path d="M18.6059 9.10806C18.6059 8.85201 18.6912 8.51062 18.6912 8.25458C18.6912 4.24322 15.3626 1 11.3513 1C7.33993 1 4.0967 4.24322 4.0967 8.25458C4.0967 8.51062 4.0967 8.85201 4.18205 9.10806C1.87766 9.27875 0 11.1564 0 13.5462C0 16.0212 1.963 17.9842 4.4381 17.9842H7.76667V21.9103L6.82784 21.0568C6.57179 20.8007 6.14506 20.8007 5.88901 21.0568C5.63297 21.3128 5.63297 21.7396 5.88901 21.9956L8.27875 24.2147L10.6685 21.9956C10.9245 21.7396 10.9245 21.3128 10.6685 21.0568C10.4125 20.8007 9.98571 20.8007 9.72967 21.0568L8.79084 21.9103V17.9842H13.3143V12.0952L12.3755 12.9487C12.1194 13.2048 11.6927 13.2048 11.4366 12.9487C11.1806 12.6927 11.1806 12.2659 11.4366 12.0099L13.8264 9.79084L16.2161 12.0099C16.4722 12.2659 16.4722 12.6927 16.2161 12.9487C16.1308 13.1194 15.8747 13.1194 15.704 13.1194C15.5333 13.1194 15.3626 13.0341 15.2773 12.9487L14.3385 12.0952V17.9842H17.8377C17.9231 17.9842 18.0084 17.9842 18.0084 17.8989C20.2275 17.6429 22.0198 15.7652 22.0198 13.4608C22.6172 11.2418 20.8249 9.3641 18.6059 9.10806Z" fill="#354049"></path>
+            </g>
+            <defs>
+              <clipPath id="clip0">
+                <rect width="24" height="24" fill="white"></rect>
+              </clipPath>
+            </defs>
+          </svg></div>
+        <h1>API Keys</h1>
+      </div>
+    </router-link-stub>
+    <router-link-stub to="/buckets" tag="a" event="click" class="navigation-area__item-container">
+      <div class="navigation-area__item-container__link-container">
+        <div><svg class="svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1 12.4548V20.273C1 21.273 1.81116 22.0003 2.71245 22.0003H20.1974C21.1888 22.0003 21.9099 21.1821 21.9099 20.273V12.4548C21.9099 11.4548 21.0987 10.7275 20.1974 10.7275H2.71245C1.81116 10.7275 1 11.4548 1 12.4548ZM14.97 14.0912H7.75966C7.30901 14.0912 6.85837 13.7275 6.85837 13.1821C6.85837 12.7275 7.21888 12.273 7.75966 12.273H14.97C15.4206 12.273 15.8712 12.6366 15.8712 13.1821C15.8712 13.7275 15.5107 14.0912 14.97 14.0912Z" fill="#354049"></path>
+            <path d="M2.53227 9.81792C2.17175 9.81792 1.90137 9.54519 1.90137 9.18155V5.90882C1.90137 5.54519 2.17175 5.27246 2.53227 5.27246H20.4679C20.8284 5.27246 21.0988 5.54519 21.0988 5.90882V8.99973C21.0988 9.36337 20.8284 9.6361 20.4679 9.6361C20.1074 9.6361 19.837 9.36337 19.837 8.99973V6.54519H3.16317V9.18155C3.16317 9.54519 2.89278 9.81792 2.53227 9.81792Z" fill="#354049"></path>
+            <path d="M20.4679 4.27273H2.53227C2.17175 4.27273 1.90137 4 1.90137 3.63636C1.90137 3.27273 2.17175 3 2.53227 3H20.4679C20.8284 3 21.0988 3.27273 21.0988 3.63636C21.0988 4 20.8284 4.27273 20.4679 4.27273Z" fill="#354049"></path>
+          </svg></div>
+        <h1>Buckets</h1>
+      </div>
+    </router-link-stub> <a href="https://github.com/storj/docs/blob/master/Vanguard-Release-Setup-Instructions.md" target="_blank" class="navigation-area__item-container">
+      <div class="navigation-area__item-container__link-container"><svg width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
+          <path d="M17.975 5.74811C17.9448 5.71786 17.9448 5.68878 17.9157 5.65853L17.8854 5.62828L17.8261 5.56895C17.7959 5.53871 17.7668 5.50962 17.7365 5.47937L13.0017 0.744565C12.9715 0.714318 12.9424 0.685233 12.9121 0.654985C12.9121 0.656149 12.8819 0.625901 12.8528 0.625901L12.8226 0.595654C12.7923 0.565407 12.7632 0.565407 12.733 0.536321C12.2862 0.179171 11.7209 0 11.1543 0H3.35157C1.92178 0 0.760742 1.16104 0.760742 2.59083V20.7277C0.760742 22.1575 1.92178 23.3186 3.35157 23.3186H15.9195C17.3493 23.3186 18.5103 22.1575 18.5103 20.7277L18.5115 7.32683C18.5115 6.76144 18.3032 6.19486 17.9751 5.74812L17.975 5.74811ZM16.2183 20.6986C16.2183 20.8475 16.0997 20.9964 15.9205 20.9964H3.35143C3.20252 20.9964 3.05361 20.8777 3.05361 20.6986V2.59177C3.05361 2.44286 3.17227 2.29395 3.35143 2.29395H10.1117V5.77819C10.1117 7.20799 11.2728 8.36902 12.7026 8.36902H16.1868L16.188 20.6983L16.2183 20.6986Z" fill="#354049"></path>
+          <path d="M7.46108 12.5629C7.46108 13.3151 7.25209 13.88 6.85591 14.2795C6.46064 14.679 5.8791 14.8912 5.15762 14.8912H3.73828V10.4238H5.27393C5.97178 10.4238 6.52969 10.6121 6.90224 10.9648C7.27571 11.3405 7.46106 11.8814 7.46106 12.5629L7.46108 12.5629ZM6.22893 12.6107C6.22893 12.2111 6.15897 11.9053 5.99632 11.694C5.83367 11.4828 5.60105 11.3882 5.27483 11.3882L4.92591 11.3873V13.8801H5.18216C5.55472 13.8801 5.81004 13.7625 5.97268 13.5513C6.13533 13.3391 6.22893 13.0571 6.22893 12.6108V12.6107Z" fill="#354049"></path>
+          <path d="M11.9283 12.6459C11.9283 13.3788 11.7339 13.9292 11.3696 14.3185C11.0054 14.7077 10.4231 14.8912 9.69462 14.8912C8.96618 14.8912 8.40752 14.7077 8.0433 14.3185C7.65441 13.9292 7.46094 13.3788 7.46094 12.6459C7.46094 11.9129 7.65538 11.3626 8.0433 10.9966C8.43219 10.6073 8.98988 10.4238 9.71832 10.4238C10.4468 10.4238 11.0054 10.6073 11.3933 10.9966C11.7338 11.3626 11.9283 11.9129 11.9283 12.6459H11.9283ZM8.74794 12.6459C8.74794 13.4933 9.06379 13.9059 9.67082 13.9059C9.98667 13.9059 10.2295 13.8146 10.3746 13.6079C10.5207 13.4021 10.5927 13.0808 10.5927 12.6459C10.5927 12.211 10.5197 11.8897 10.3499 11.6839C10.1802 11.478 9.96104 11.3635 9.66986 11.3635C9.06283 11.3859 8.74793 11.7984 8.74793 12.6459L8.74794 12.6459Z" fill="#354049"></path>
+          <path d="M14.173 11.3808C13.8773 11.3808 13.6307 11.4948 13.4583 11.7227C13.2859 11.9506 13.2117 12.2693 13.2117 12.6575C13.2117 13.4783 13.5565 13.911 14.2472 13.911C14.4446 13.911 14.6662 13.8878 14.8386 13.8424C15.036 13.797 15.2335 13.7285 15.43 13.6599V14.6401C15.0351 14.7995 14.592 14.8912 14.0988 14.8912C13.3841 14.8912 12.8409 14.7087 12.471 14.3214C12.1011 13.9333 11.9287 13.3635 11.9287 12.6566C11.9287 12.2008 12.027 11.8135 12.2003 11.4717C12.3728 11.1298 12.6444 10.8787 12.9892 10.6971C13.334 10.5146 13.729 10.4238 14.1971 10.4238C14.6902 10.4238 15.1834 10.5146 15.6515 10.7203L15.2566 11.6319C15.0842 11.5634 14.9118 11.4948 14.7384 11.4494C14.5669 11.4031 14.3695 11.3809 14.173 11.3809L14.173 11.3808Z" fill="#354049"></path>
+        </svg>
+        <h1>Docs</h1>
+      </div>
+    </a> <a href="mailto:support@storj.io" target="_blank" class="navigation-area__item-container">
+      <div class="navigation-area__item-container__link-container"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
+          <path d="M18.8333 3.56068H7.0359C5.11538 3.56068 3.56068 5.11538 3.56068 7.0359V16.7299L1.91453 18.1932V6.85299C1.91453 4.1094 4.1094 2.00598 6.85299 2.00598H16.1812C16.7299 2.00598 17.1872 2.18889 17.6444 2.46325C17.8274 2.64615 18.1932 2.5547 18.3761 2.37179C18.559 2.18889 18.4675 1.82308 18.2846 1.64017C17.6444 1.18291 17.0043 1 16.2727 1H6.94444C3.65214 1 1 3.65214 1 6.85299V19.2906C1 19.4735 1.09145 19.6564 1.27436 19.7479C1.45726 19.8393 1.64017 19.7479 1.82308 19.6564L3.56068 18.1017V21.8513C3.56068 22.0342 3.65214 22.2171 3.83504 22.3085C3.9265 22.3085 3.9265 22.3085 4.01795 22.3085C4.1094 22.3085 4.29231 22.3085 4.38376 22.2171L7.31026 19.565C7.40171 19.4735 7.49316 19.3821 7.58462 19.3821C7.76752 19.2906 7.85897 19.1077 7.85897 19.1077C7.85897 19.1077 8.04188 19.1077 8.22479 19.1077C8.31624 19.1077 8.40769 19.1077 8.5906 19.1077H18.7419C20.6624 19.1077 22.2171 17.553 22.2171 15.6325V7.0359C22.2171 5.11538 20.7538 3.56068 18.8333 3.56068ZM17.7359 14.0778C17.2786 14.9009 16.6385 15.2667 16.1812 14.9923L15.541 14.7179C15.2667 14.9009 14.9923 15.0838 14.6265 15.2667L14.535 16.0897C14.535 16.6385 13.8949 16.9128 12.9803 16.9128C12.0658 16.9128 11.4256 16.547 11.4256 16.0897L11.3342 15.2667C10.9684 15.1752 10.694 14.9923 10.4197 14.7179L9.68803 15.0838C9.50513 15.1752 9.13932 15.2667 8.7735 14.9009C8.5906 14.7179 8.31624 14.4436 8.22479 14.1692C7.76752 13.3462 7.67607 12.6145 8.13333 12.3402L8.7735 11.8829C8.7735 11.7 8.7735 11.5171 8.7735 11.3342C8.7735 11.1513 8.7735 10.9684 8.7735 10.7855L8.13333 10.3282C7.67607 10.0538 7.76752 9.32222 8.22479 8.49915C8.40769 8.22479 8.5906 7.95043 8.7735 7.76752C9.23077 7.40171 9.50513 7.49316 9.68803 7.58462L10.4197 7.95043C10.694 7.76752 10.9684 7.58462 11.3342 7.40171L11.4256 6.57863C11.4256 6.02991 12.0658 5.75556 12.9803 5.75556C13.9863 5.75556 14.535 6.12137 14.535 6.57863L14.6265 7.40171C14.9923 7.58462 15.2667 7.67607 15.541 7.95043L16.2727 7.58462C16.7299 7.31026 17.2786 7.67607 17.8274 8.49915C18.0103 8.7735 18.1017 9.13932 18.1932 9.41368C18.2846 9.96239 18.1017 10.2368 17.9188 10.3282L17.2786 10.7855C17.2786 10.9684 17.2786 11.1513 17.2786 11.3342C17.2786 11.5171 17.2786 11.7 17.2786 11.8829L17.9188 12.3402C18.2846 12.6145 18.2846 13.2547 17.7359 14.0778Z" fill="#354049"></path>
+          <path d="M12.8893 13.2551C13.9499 13.2551 14.8098 12.3952 14.8098 11.3346C14.8098 10.2739 13.9499 9.41406 12.8893 9.41406C11.8286 9.41406 10.9688 10.2739 10.9688 11.3346C10.9688 12.3952 11.8286 13.2551 12.8893 13.2551Z" fill="#354049"></path>
+        </svg>
+        <h1>Support</h1>
+      </div>
+    </a>
+  </div>
+</div>
+`;
+
+exports[`NavigationArea snapshot not changed without project 1`] = `
+<div class="navigation-area">
+  <div class="navigation-area__wrap">
+    <div class="navigation-area__logo"><svg width="54" height="60" viewBox="0 0 54 60" fill="none" xmlns="http://www.w3.org/2000/svg" class="navigation-area__logo__img">
+        <path d="M54 17.4399C53.9172 19.3141 53.0892 20.6993 51.5161 21.6771C51.1849 21.8401 51.1021 22.003 51.1021 22.329C51.1021 27.4625 51.1021 32.596 51.1021 37.7295C51.1021 38.0555 51.1849 38.2184 51.4333 38.3814C53.2548 39.4407 54.2484 41.3963 53.9172 43.4334C53.586 45.389 52.0129 47.0187 49.9429 47.3447C48.7837 47.5891 47.6246 47.4262 46.5482 46.7743C46.217 46.6113 45.9686 46.6113 45.7202 46.7743C41.2491 49.3003 36.7781 51.9078 32.307 54.4338C31.9758 54.5968 31.893 54.7597 31.893 55.1672C31.893 57.6117 29.9887 59.8118 27.5875 59.9747C25.0208 60.2192 22.7025 58.671 22.2057 56.145C22.1229 55.7376 22.1229 55.4116 22.1229 55.0042C22.1229 54.7597 22.0401 54.5968 21.7917 54.4338C17.2378 51.8263 12.6839 49.3003 8.13005 46.6928C7.88166 46.5298 7.71606 46.5298 7.46767 46.6928C4.48695 48.4854 0.678253 46.7743 0.0986687 43.5149C-0.31532 41.4778 0.595455 39.5222 2.41701 38.3814C2.7482 38.2184 2.83099 38.0555 2.83099 37.648C2.83099 32.5145 2.83099 27.381 2.83099 22.2475C2.83099 21.9216 2.7482 21.7586 2.4998 21.5956C0.595455 20.5363 -0.31532 18.6622 0.0986687 16.5436C0.42986 14.425 2.08581 12.8768 4.23856 12.6323C5.39772 12.4694 6.4741 12.7138 7.46767 13.2842C7.71606 13.4472 7.88166 13.4472 8.13005 13.2842C12.6839 10.6767 17.155 8.15071 21.7089 5.54321C21.9573 5.38024 22.1229 5.21727 22.1229 4.89133C22.1229 2.03938 24.3584 -0.0792115 27.2563 0.00227286C29.4919 0.0837572 31.5618 1.87641 31.893 4.07649C31.893 4.23946 31.9758 4.40243 31.9758 4.64688C31.9758 5.21727 32.2242 5.54321 32.6382 5.78766C37.0265 8.23219 41.4147 10.7582 45.803 13.2842C46.1342 13.4472 46.2998 13.4472 46.631 13.2842C49.6117 11.573 53.2548 13.2027 53.9172 16.5436C54 16.8695 54 17.1955 54 17.4399ZM15.1679 35.0405C15.0851 35.0405 15.0851 35.122 15.0851 35.122C12.6011 36.5073 10.1172 37.8925 7.63326 39.3592C7.46767 39.4407 7.21927 39.4407 7.05368 39.3592C6.3913 38.9518 5.72892 38.7073 4.90094 38.7073C2.33421 38.6258 0.843848 40.663 0.761051 42.4556C0.761051 44.4927 2.33421 46.6113 4.90094 46.6113C7.13648 46.6113 8.87523 44.8187 8.87523 42.6186C8.87523 42.2112 8.95803 41.9667 9.37202 41.8037C12.0215 40.337 14.5883 38.8703 17.2378 37.3221C17.4862 37.1591 17.7346 37.1591 17.983 37.2406C19.6389 37.974 21.2949 38.1369 23.0336 37.648C23.1992 37.5665 23.4476 37.648 23.6132 37.7295C24.11 37.974 24.6068 38.2184 25.1036 38.3814C25.4348 38.4629 25.5176 38.6258 25.5176 38.9518C25.5176 43.026 25.5176 47.0187 25.5176 51.0929C25.5176 51.3374 25.4348 51.5004 25.1864 51.6633C23.7788 52.3152 22.7852 54.0264 23.0336 55.819C23.3648 57.9376 25.5176 59.4858 27.6703 59.0784C29.5747 58.7525 30.7338 57.4487 31.065 55.5746C31.2306 54.2708 30.5682 52.5597 28.9123 51.6633C28.6639 51.5819 28.5811 51.4189 28.5811 51.1744C28.5811 47.2632 28.5811 43.3519 28.5811 39.4407C28.5811 39.1147 28.7467 39.0333 29.0779 38.9518C29.9059 38.7888 30.7338 38.6258 31.479 38.4629C31.8102 38.3814 32.1414 38.3814 32.4726 38.4629C34.2113 39.1962 35.9501 39.1147 37.606 38.1369C37.8544 37.974 38.02 37.974 38.2684 38.1369C40.4212 39.3592 42.5739 40.5815 44.7267 41.8037C45.0578 41.9667 45.2234 42.2112 45.2234 42.6186C44.975 44.9001 47.1278 46.7743 49.5289 46.5298C51.9301 46.2854 53.586 44.0038 53.0064 41.7222C52.344 38.9518 49.3633 37.7295 46.8794 39.1962C46.631 39.3592 46.4654 39.3592 46.1342 39.1962C44.0643 37.974 41.9943 36.8332 39.9244 35.6924C39.5932 35.5294 39.5932 35.3665 39.676 35.0405C40.3384 33.0034 39.8416 31.1293 38.3512 29.5811C38.02 29.2551 36.6953 27.1366 36.4469 26.7291C36.2813 26.4032 36.3641 26.2402 36.6953 26.0773C39.8416 24.2846 42.9879 22.5734 46.0514 20.7808C46.2998 20.6178 46.4654 20.6178 46.7138 20.7808C47.6246 21.3512 48.6181 21.5141 49.6117 21.3512C51.5989 21.0252 53.0892 19.2326 52.9236 17.114C52.758 14.8324 50.4397 13.1212 48.1214 13.6102C46.1342 14.0176 44.8094 15.5658 44.8922 17.6029C44.8922 17.9288 44.8094 18.1733 44.4783 18.3362C41.3319 20.1289 38.1028 21.9216 34.9565 23.7142C34.7081 23.8772 34.5425 23.8772 34.2941 23.6327C32.8038 22.2475 30.9822 21.4326 28.9951 21.1882C28.3327 21.1067 28.3327 21.1067 28.3327 20.3734C28.3327 16.7066 28.3327 13.0398 28.3327 9.37297C28.3327 8.88406 28.4155 8.55813 28.9123 8.31367C30.651 7.33586 31.3134 5.21727 30.5682 3.34313C29.7403 1.55048 27.6703 0.491179 25.766 1.14305C24.0272 1.63196 23.0336 2.93571 22.868 4.64688C22.7025 6.03211 23.3648 7.58031 25.0208 8.39516C25.2692 8.55813 25.4348 8.63961 25.4348 8.96555C25.4348 13.0398 25.4348 17.0325 25.4348 21.1067C25.4348 21.4326 25.2692 21.5141 25.0208 21.6771C24.1928 22.0845 23.3648 22.4105 22.7025 22.9809C21.9573 23.6327 21.2121 23.9587 20.1357 23.9587C20.0529 23.9587 19.9701 23.9587 19.8873 23.9587C19.6389 23.9587 19.3077 23.9587 19.0594 23.7957C15.8302 22.003 12.6839 20.2104 9.45481 18.4177C8.95803 18.1733 8.79243 17.8473 8.87523 17.3584C8.87523 17.114 8.87523 16.951 8.79243 16.7066C8.46124 14.7509 6.55689 13.1212 4.23856 13.5287C1.92022 13.9361 0.512657 15.9732 0.843848 18.0918C1.34063 20.8623 4.56975 22.2475 6.97088 20.7808C7.21927 20.6178 7.46767 20.6178 7.71606 20.7808C10.1172 22.166 12.5183 23.5512 15.0023 24.9365C15.4163 25.1809 15.8302 25.4254 16.2442 25.6698C13.5119 28.5218 13.1807 31.6182 15.1679 35.0405Z" fill="#2683FF"></path>
+        <path d="M22.4933 25.5491C23.1511 25.6323 23.3978 25.3828 23.8912 24.9671C25.8648 23.0547 28.2495 22.5558 30.7987 23.3873C33.3479 24.2188 34.9103 26.048 35.4037 28.7088C35.4859 29.2077 35.7326 29.5403 36.1438 29.7898C37.4595 30.5381 38.1996 32.2011 37.9529 33.5315C37.624 35.2776 36.4727 36.5249 34.8281 36.7743C33.9235 36.9406 33.1012 36.7743 32.3611 36.3586C32.0322 36.1091 31.7855 36.1923 31.3743 36.3586C29.0718 37.3564 26.9338 37.1901 24.7958 35.8597C24.4668 35.6934 24.2201 35.6102 23.8912 35.7765C20.9308 36.7743 17.8882 35.0282 17.1482 32.1179C16.3258 28.7088 19.0395 25.3828 22.4933 25.5491Z" fill="#2683FF"></path>
+        <path d="M48 43C48 42.4286 48.4286 42 49 42C49.5714 42 50 42.4286 50 43C50 43.5 49.5 44 49 44C48.4286 44 48 43.5714 48 43Z" fill="#2683FF"></path>
+        <path d="M26 5C26 4.42857 26.4444 4 27.037 4C27.5556 4 28 4.42857 28 5C28 5.5 27.5556 6 26.963 6C26.4444 5.92857 26 5.5 26 5Z" fill="#2683FF"></path>
+        <path d="M6 43C6 43.5714 5.57143 44 5 44C4.5 44 4 43.5 4 43C4 42.5 4.5 42 5 42C5.57143 42 6 42.4286 6 43Z" fill="#2683FF"></path>
+        <path d="M27 54C27.5714 54 28 54.6667 28 55.5556C28 56.4444 27.5714 57 27 57C26.4286 57 26 56.3333 26 55.4444C26 54.6667 26.4286 54 27 54Z" fill="#2683FF"></path>
+        <path d="M5 19C4.42857 19 4 18.3333 4 17.5556C4 16.7778 4.42857 16 5 16C5.57143 16 6 16.5556 6 17.4444C5.92857 18.3333 5.57143 19 5 19Z" fill="#2683FF"></path>
+        <path d="M48.9327 19C48.3635 19 47.9366 18.3333 48.0078 17.4444C48.0078 16.5556 48.4347 16 49.0039 16C49.5731 16 50 16.6667 50 17.5556C49.9288 18.3333 49.4308 19 48.9327 19Z" fill="#2683FF"></path>
+      </svg> <svg width="69" height="16" viewBox="0 0 69 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="navigation-area__logo__text">
+        <path d="M4.5974 3.50249C4.28571 3.7413 4.12986 4.1393 4.12986 4.61692C4.12986 5.09453 4.36363 5.41293 4.75324 5.65174C5.14285 5.89055 6.07792 6.20896 7.48052 6.60697C8.88311 7.00498 10.0519 7.48259 10.8312 8.19901C11.6104 8.91542 12 9.95025 12 11.3831C12 12.7363 11.4545 13.8507 10.4416 14.7264C9.42857 15.602 8.10389 16 6.46753 16C4.05194 16 1.94805 15.1244 0 13.2935L2.02597 10.7463C3.66233 12.1791 5.14285 12.8955 6.54545 12.8955C7.16883 12.8955 7.63636 12.7363 8.02597 12.4975C8.41558 12.2587 8.57143 11.8607 8.57143 11.3831C8.57143 10.9055 8.41558 10.5871 8.02597 10.2687C7.63636 10.0299 6.93506 9.71144 5.76623 9.47264C3.97402 9.07463 2.72727 8.51741 1.94805 7.801C1.16883 7.08458 0.701294 6.04975 0.701294 4.61692C0.701294 3.18408 1.24675 1.99005 2.25974 1.19403C3.27272 0.39801 4.59739 0 6.07792 0C7.0909 0 8.1039 0.159205 9.11688 0.557215C10.1299 0.875623 10.987 1.43283 11.7662 2.06965L10.0519 4.61692C8.72727 3.58209 7.4026 3.10448 6 3.10448C5.37662 3.10448 4.90909 3.26368 4.5974 3.50249Z" fill="#2683FF"></path>
+        <path d="M21.3268 3.13402V16H17.6732V3.13402H13V0H26V3.13402H21.3268Z" fill="#2683FF"></path>
+        <path d="M40.5594 13.68C38.8762 15.2 36.8564 16 34.5 16C32.1436 16 30.0396 15.2 28.4406 13.68C26.7574 12.16 26 10.24 26 8C26 5.76 26.8416 3.84 28.4406 2.32C30.1238 0.800001 32.1436 0 34.5 0C36.9406 0 38.9604 0.800001 40.5594 2.32C42.2426 3.84 43 5.76 43 8C43 10.24 42.2426 12.16 40.5594 13.68ZM39.297 8C39.297 6.64 38.7921 5.44 37.8663 4.48C36.9406 3.52 35.7624 3.04 34.4158 3.04C33.0693 3.04 31.8911 3.52 30.9653 4.48C30.0396 5.44 29.5347 6.64 29.5347 8C29.5347 9.36 30.0396 10.56 30.9653 11.52C31.8911 12.48 33.0693 12.96 34.4158 12.96C35.7624 12.96 36.9406 12.48 37.8663 11.52C38.8762 10.56 39.297 9.36 39.297 8Z" fill="#2683FF"></path>
+        <path d="M58.0059 5.36082C58.0059 7.91752 57.0118 9.56701 54.9408 10.3093L59 16H54.6095L51.0473 10.8866H48.5621V16H45V0H51.0473C53.5325 0 55.355 0.412371 56.3491 1.23711C57.5089 2.14433 58.0059 3.46392 58.0059 5.36082ZM53.6982 7.25773C54.1124 6.84536 54.3609 6.26804 54.3609 5.36082C54.3609 4.45361 54.1124 3.87629 53.6982 3.62887C53.2012 3.29897 52.4556 3.13402 51.2959 3.13402H48.645V7.83505H51.2959C52.4556 7.83505 53.284 7.58763 53.6982 7.25773Z" fill="#2683FF"></path>
+        <path d="M60.92 3.11795V0H69V10.3385C69 12.2256 68.52 13.6205 67.56 14.6051C66.6 15.5077 65.4 16 63.88 16C62.04 16 60.36 15.2615 59 13.7846L60.76 11.241C61.72 12.3077 62.68 12.8 63.72 12.8C64.2 12.8 64.6 12.6359 65 12.2256C65.32 11.8154 65.56 11.241 65.56 10.5026V3.0359L60.92 3.11795Z" fill="#2683FF"></path>
+      </svg></div>
+    <router-link-stub to="/project-overview/details" tag="a" event="click" class="navigation-area__item-container disabled">
+      <div class="navigation-area__item-container__link-container">
+        <div><svg class="svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M22.073 5.3913C21.8382 5.15652 21.5252 5 21.2121 5H6.89038C6.26429 5 5.71647 5.54783 5.79473 6.09565L2.19473 6.01739C1.80342 6.09565 1.49038 6.17391 1.2556 6.48696C1.09908 6.72174 0.942555 7.03478 1.02082 7.42609L3.13386 18.4609C3.21212 19.0087 3.68169 19.4 4.22951 19.4H19.0991C19.6469 19.4 20.1165 19.0087 20.1947 18.4609L22.3078 6.33043C22.386 6.01739 22.3078 5.62609 22.073 5.3913ZM19.6469 14.7826L18.7078 9.38261C18.6295 8.75652 18.0034 8.28696 17.3773 8.28696H8.4556C8.37734 8.28696 8.29908 8.2087 8.29908 8.13043L8.14256 7.34783C8.14256 6.8 7.75125 6.33043 7.28169 6.17391L21.2121 6.09565L19.6469 14.7826Z" fill="#363840"></path>
+          </svg></div>
+        <h1>Project Details</h1>
+      </div>
+    </router-link-stub>
+    <router-link-stub to="/project-members" tag="a" event="click" class="navigation-area__item-container disabled">
+      <div class="navigation-area__item-container__link-container">
+        <div><svg class="svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0)">
+              <path d="M19.6621 11.1388C19.8233 10.8971 19.9039 10.6553 19.9845 10.333C20.5485 10.0913 20.8709 9.52718 20.9515 8.72136C21.032 7.99612 20.7097 7.43204 20.3068 7.10971C20.2262 5.01456 19.5816 3 16.6 3C13.6184 3 12.9738 5.01456 12.8126 7.10971C12.4097 7.43204 12.0874 8.0767 12.168 8.72136C12.2485 9.4466 12.6515 10.0913 13.135 10.333C13.2155 10.5748 13.3767 10.8971 13.4573 11.1388C12.9738 11.3 12.4903 11.4612 12.0874 11.6223C11.6845 11.4612 11.201 11.2194 10.7175 11.1388C10.8786 10.8971 10.9592 10.6553 11.0398 10.333C11.6039 10.0913 11.9262 9.52718 12.0068 8.72136C12.0874 7.99612 11.765 7.43204 11.3621 7.10971C11.201 5.01456 10.6369 3 7.57476 3C4.5932 3 3.94854 5.01456 3.78738 7.10971C3.38447 7.43204 3.06214 8.0767 3.14272 8.72136C3.2233 9.4466 3.62621 10.0913 4.10971 10.333C4.19029 10.5748 4.35146 10.8971 4.43204 11.1388C1.53107 11.9447 0 13.6369 0 16.2155C0 16.4573 0.161165 16.6184 0.32233 16.699C2.09515 17.5049 4.75437 17.9883 7.49418 17.9883C9.10583 17.9883 10.6369 17.8272 12.0068 17.5049C13.3767 17.8272 14.9078 17.9883 16.5194 17.9883C19.2592 17.9883 21.9184 17.5049 23.6913 16.699C23.8524 16.6184 24.0136 16.3767 24.0136 16.2155C24.0942 13.6369 22.5631 11.9447 19.6621 11.1388Z" fill="#354049"></path>
+              <path d="M13.7532 12.8937C13.1891 13.1354 12.5445 13.2966 11.8192 13.4577C11.094 13.2966 10.4493 13.1354 9.88525 12.8937C9.96584 11.6043 10.6105 10.5568 11.8192 9.91211C13.1086 10.5568 13.6726 11.5238 13.7532 12.8937Z" fill="#2683FF"></path>
+              <path class="white" d="M14.3174 13.832C17.0572 14.4767 19.0717 15.8466 19.0717 18.7476C17.1378 19.634 14.3174 20.0369 11.8193 20.0369C9.32126 20.0369 6.42029 19.634 4.56689 18.7476C4.56689 15.8466 6.50087 14.4767 9.32126 13.832" fill="white"></path>
+              <path d="M11.7389 20.6001C8.8379 20.6001 6.01751 20.1166 4.24469 19.2302C4.08353 19.2302 3.92236 18.9884 3.92236 18.8273C3.92236 16.0069 5.6146 14.1535 9.07964 13.3477L9.32139 14.3952C6.58159 15.0399 5.21168 16.3292 5.05052 18.4244C6.74275 19.1496 9.24081 19.5525 11.8195 19.5525C14.3981 19.5525 16.8156 19.1496 18.5884 18.4244C18.4272 16.3292 17.0573 15.0399 14.3175 14.3952L14.5593 13.3477C17.9437 14.1535 19.7165 16.0069 19.7165 18.8273C19.7165 19.069 19.5554 19.2302 19.3942 19.3108C17.4602 20.1166 14.6398 20.6001 11.7389 20.6001Z" fill="#354049"></path>
+              <path class="white" d="M11.7388 15.3628C10.5301 15.3628 9.16018 13.9929 8.5961 12.1395C8.11261 12.1395 7.79028 11.5754 7.7097 10.9308C7.62911 10.2861 7.95144 9.72205 8.35436 9.56088C8.43494 6.98224 9.16018 5.45117 11.7388 5.45117C14.3175 5.45117 15.0427 6.98224 15.1233 9.56088C15.5262 9.64146 15.8485 10.2055 15.7679 10.8502C15.6874 11.4949 15.365 12.0589 14.8815 12.0589C14.398 13.9929 12.9476 15.3628 11.7388 15.3628Z" fill="white"></path>
+              <path d="M11.7387 15.926C10.2882 15.926 8.83776 14.5561 8.11251 12.6221C7.54844 12.3804 7.14552 11.7357 7.06494 11.0105C7.06494 10.2047 7.38727 9.56 7.79018 9.23767C7.95135 7.06194 8.59601 4.9668 11.7387 4.9668C14.8814 4.9668 15.5261 7.06194 15.6873 9.23767C16.1708 9.56 16.4125 10.2047 16.3319 10.9299C16.2513 11.7357 15.8484 12.3804 15.2844 12.5416C14.7203 14.4755 13.1892 15.926 11.7387 15.926ZM11.7387 6.01437C9.72416 6.01437 8.99892 6.98136 8.83776 9.56C8.83776 9.80175 8.67659 10.0435 8.43484 10.0435C8.35426 10.0435 8.1931 10.3658 8.1931 10.7687C8.1931 11.2522 8.43484 11.494 8.51543 11.494C8.75717 11.494 8.99892 11.6551 8.99892 11.8969C9.48242 13.6697 10.7717 14.7173 11.6581 14.7173C12.5446 14.7173 13.7533 13.6697 14.3174 11.8969C14.398 11.6551 14.5591 11.494 14.8009 11.494C14.8814 11.494 15.1232 11.2522 15.1232 10.7687C15.1232 10.2852 14.962 10.0435 14.8814 10.0435C14.6397 9.96291 14.4785 9.80175 14.4785 9.56C14.4785 6.98136 13.7533 6.01437 11.7387 6.01437Z" fill="#354049"></path>
+            </g>
+            <defs>
+              <clipPath id="clip0">
+                <rect width="24" height="24" fill="white"></rect>
+              </clipPath>
+            </defs>
+          </svg></div>
+        <h1>Team</h1>
+      </div>
+    </router-link-stub>
+    <router-link-stub to="/api-keys" tag="a" event="click" class="navigation-area__item-container disabled">
+      <div class="navigation-area__item-container__link-container">
+        <div><svg class="svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0)">
+              <path d="M18.6059 9.10806C18.6059 8.85201 18.6912 8.51062 18.6912 8.25458C18.6912 4.24322 15.3626 1 11.3513 1C7.33993 1 4.0967 4.24322 4.0967 8.25458C4.0967 8.51062 4.0967 8.85201 4.18205 9.10806C1.87766 9.27875 0 11.1564 0 13.5462C0 16.0212 1.963 17.9842 4.4381 17.9842H7.76667V21.9103L6.82784 21.0568C6.57179 20.8007 6.14506 20.8007 5.88901 21.0568C5.63297 21.3128 5.63297 21.7396 5.88901 21.9956L8.27875 24.2147L10.6685 21.9956C10.9245 21.7396 10.9245 21.3128 10.6685 21.0568C10.4125 20.8007 9.98571 20.8007 9.72967 21.0568L8.79084 21.9103V17.9842H13.3143V12.0952L12.3755 12.9487C12.1194 13.2048 11.6927 13.2048 11.4366 12.9487C11.1806 12.6927 11.1806 12.2659 11.4366 12.0099L13.8264 9.79084L16.2161 12.0099C16.4722 12.2659 16.4722 12.6927 16.2161 12.9487C16.1308 13.1194 15.8747 13.1194 15.704 13.1194C15.5333 13.1194 15.3626 13.0341 15.2773 12.9487L14.3385 12.0952V17.9842H17.8377C17.9231 17.9842 18.0084 17.9842 18.0084 17.8989C20.2275 17.6429 22.0198 15.7652 22.0198 13.4608C22.6172 11.2418 20.8249 9.3641 18.6059 9.10806Z" fill="#354049"></path>
+            </g>
+            <defs>
+              <clipPath id="clip0">
+                <rect width="24" height="24" fill="white"></rect>
+              </clipPath>
+            </defs>
+          </svg></div>
+        <h1>API Keys</h1>
+      </div>
+    </router-link-stub>
+    <router-link-stub to="/buckets" tag="a" event="click" class="navigation-area__item-container disabled">
+      <div class="navigation-area__item-container__link-container">
+        <div><svg class="svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1 12.4548V20.273C1 21.273 1.81116 22.0003 2.71245 22.0003H20.1974C21.1888 22.0003 21.9099 21.1821 21.9099 20.273V12.4548C21.9099 11.4548 21.0987 10.7275 20.1974 10.7275H2.71245C1.81116 10.7275 1 11.4548 1 12.4548ZM14.97 14.0912H7.75966C7.30901 14.0912 6.85837 13.7275 6.85837 13.1821C6.85837 12.7275 7.21888 12.273 7.75966 12.273H14.97C15.4206 12.273 15.8712 12.6366 15.8712 13.1821C15.8712 13.7275 15.5107 14.0912 14.97 14.0912Z" fill="#354049"></path>
+            <path d="M2.53227 9.81792C2.17175 9.81792 1.90137 9.54519 1.90137 9.18155V5.90882C1.90137 5.54519 2.17175 5.27246 2.53227 5.27246H20.4679C20.8284 5.27246 21.0988 5.54519 21.0988 5.90882V8.99973C21.0988 9.36337 20.8284 9.6361 20.4679 9.6361C20.1074 9.6361 19.837 9.36337 19.837 8.99973V6.54519H3.16317V9.18155C3.16317 9.54519 2.89278 9.81792 2.53227 9.81792Z" fill="#354049"></path>
+            <path d="M20.4679 4.27273H2.53227C2.17175 4.27273 1.90137 4 1.90137 3.63636C1.90137 3.27273 2.17175 3 2.53227 3H20.4679C20.8284 3 21.0988 3.27273 21.0988 3.63636C21.0988 4 20.8284 4.27273 20.4679 4.27273Z" fill="#354049"></path>
+          </svg></div>
+        <h1>Buckets</h1>
+      </div>
+    </router-link-stub> <a href="https://github.com/storj/docs/blob/master/Vanguard-Release-Setup-Instructions.md" target="_blank" class="navigation-area__item-container">
+      <div class="navigation-area__item-container__link-container"><svg width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
+          <path d="M17.975 5.74811C17.9448 5.71786 17.9448 5.68878 17.9157 5.65853L17.8854 5.62828L17.8261 5.56895C17.7959 5.53871 17.7668 5.50962 17.7365 5.47937L13.0017 0.744565C12.9715 0.714318 12.9424 0.685233 12.9121 0.654985C12.9121 0.656149 12.8819 0.625901 12.8528 0.625901L12.8226 0.595654C12.7923 0.565407 12.7632 0.565407 12.733 0.536321C12.2862 0.179171 11.7209 0 11.1543 0H3.35157C1.92178 0 0.760742 1.16104 0.760742 2.59083V20.7277C0.760742 22.1575 1.92178 23.3186 3.35157 23.3186H15.9195C17.3493 23.3186 18.5103 22.1575 18.5103 20.7277L18.5115 7.32683C18.5115 6.76144 18.3032 6.19486 17.9751 5.74812L17.975 5.74811ZM16.2183 20.6986C16.2183 20.8475 16.0997 20.9964 15.9205 20.9964H3.35143C3.20252 20.9964 3.05361 20.8777 3.05361 20.6986V2.59177C3.05361 2.44286 3.17227 2.29395 3.35143 2.29395H10.1117V5.77819C10.1117 7.20799 11.2728 8.36902 12.7026 8.36902H16.1868L16.188 20.6983L16.2183 20.6986Z" fill="#354049"></path>
+          <path d="M7.46108 12.5629C7.46108 13.3151 7.25209 13.88 6.85591 14.2795C6.46064 14.679 5.8791 14.8912 5.15762 14.8912H3.73828V10.4238H5.27393C5.97178 10.4238 6.52969 10.6121 6.90224 10.9648C7.27571 11.3405 7.46106 11.8814 7.46106 12.5629L7.46108 12.5629ZM6.22893 12.6107C6.22893 12.2111 6.15897 11.9053 5.99632 11.694C5.83367 11.4828 5.60105 11.3882 5.27483 11.3882L4.92591 11.3873V13.8801H5.18216C5.55472 13.8801 5.81004 13.7625 5.97268 13.5513C6.13533 13.3391 6.22893 13.0571 6.22893 12.6108V12.6107Z" fill="#354049"></path>
+          <path d="M11.9283 12.6459C11.9283 13.3788 11.7339 13.9292 11.3696 14.3185C11.0054 14.7077 10.4231 14.8912 9.69462 14.8912C8.96618 14.8912 8.40752 14.7077 8.0433 14.3185C7.65441 13.9292 7.46094 13.3788 7.46094 12.6459C7.46094 11.9129 7.65538 11.3626 8.0433 10.9966C8.43219 10.6073 8.98988 10.4238 9.71832 10.4238C10.4468 10.4238 11.0054 10.6073 11.3933 10.9966C11.7338 11.3626 11.9283 11.9129 11.9283 12.6459H11.9283ZM8.74794 12.6459C8.74794 13.4933 9.06379 13.9059 9.67082 13.9059C9.98667 13.9059 10.2295 13.8146 10.3746 13.6079C10.5207 13.4021 10.5927 13.0808 10.5927 12.6459C10.5927 12.211 10.5197 11.8897 10.3499 11.6839C10.1802 11.478 9.96104 11.3635 9.66986 11.3635C9.06283 11.3859 8.74793 11.7984 8.74793 12.6459L8.74794 12.6459Z" fill="#354049"></path>
+          <path d="M14.173 11.3808C13.8773 11.3808 13.6307 11.4948 13.4583 11.7227C13.2859 11.9506 13.2117 12.2693 13.2117 12.6575C13.2117 13.4783 13.5565 13.911 14.2472 13.911C14.4446 13.911 14.6662 13.8878 14.8386 13.8424C15.036 13.797 15.2335 13.7285 15.43 13.6599V14.6401C15.0351 14.7995 14.592 14.8912 14.0988 14.8912C13.3841 14.8912 12.8409 14.7087 12.471 14.3214C12.1011 13.9333 11.9287 13.3635 11.9287 12.6566C11.9287 12.2008 12.027 11.8135 12.2003 11.4717C12.3728 11.1298 12.6444 10.8787 12.9892 10.6971C13.334 10.5146 13.729 10.4238 14.1971 10.4238C14.6902 10.4238 15.1834 10.5146 15.6515 10.7203L15.2566 11.6319C15.0842 11.5634 14.9118 11.4948 14.7384 11.4494C14.5669 11.4031 14.3695 11.3809 14.173 11.3809L14.173 11.3808Z" fill="#354049"></path>
+        </svg>
+        <h1>Docs</h1>
+      </div>
+    </a> <a href="mailto:support@storj.io" target="_blank" class="navigation-area__item-container">
+      <div class="navigation-area__item-container__link-container"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
+          <path d="M18.8333 3.56068H7.0359C5.11538 3.56068 3.56068 5.11538 3.56068 7.0359V16.7299L1.91453 18.1932V6.85299C1.91453 4.1094 4.1094 2.00598 6.85299 2.00598H16.1812C16.7299 2.00598 17.1872 2.18889 17.6444 2.46325C17.8274 2.64615 18.1932 2.5547 18.3761 2.37179C18.559 2.18889 18.4675 1.82308 18.2846 1.64017C17.6444 1.18291 17.0043 1 16.2727 1H6.94444C3.65214 1 1 3.65214 1 6.85299V19.2906C1 19.4735 1.09145 19.6564 1.27436 19.7479C1.45726 19.8393 1.64017 19.7479 1.82308 19.6564L3.56068 18.1017V21.8513C3.56068 22.0342 3.65214 22.2171 3.83504 22.3085C3.9265 22.3085 3.9265 22.3085 4.01795 22.3085C4.1094 22.3085 4.29231 22.3085 4.38376 22.2171L7.31026 19.565C7.40171 19.4735 7.49316 19.3821 7.58462 19.3821C7.76752 19.2906 7.85897 19.1077 7.85897 19.1077C7.85897 19.1077 8.04188 19.1077 8.22479 19.1077C8.31624 19.1077 8.40769 19.1077 8.5906 19.1077H18.7419C20.6624 19.1077 22.2171 17.553 22.2171 15.6325V7.0359C22.2171 5.11538 20.7538 3.56068 18.8333 3.56068ZM17.7359 14.0778C17.2786 14.9009 16.6385 15.2667 16.1812 14.9923L15.541 14.7179C15.2667 14.9009 14.9923 15.0838 14.6265 15.2667L14.535 16.0897C14.535 16.6385 13.8949 16.9128 12.9803 16.9128C12.0658 16.9128 11.4256 16.547 11.4256 16.0897L11.3342 15.2667C10.9684 15.1752 10.694 14.9923 10.4197 14.7179L9.68803 15.0838C9.50513 15.1752 9.13932 15.2667 8.7735 14.9009C8.5906 14.7179 8.31624 14.4436 8.22479 14.1692C7.76752 13.3462 7.67607 12.6145 8.13333 12.3402L8.7735 11.8829C8.7735 11.7 8.7735 11.5171 8.7735 11.3342C8.7735 11.1513 8.7735 10.9684 8.7735 10.7855L8.13333 10.3282C7.67607 10.0538 7.76752 9.32222 8.22479 8.49915C8.40769 8.22479 8.5906 7.95043 8.7735 7.76752C9.23077 7.40171 9.50513 7.49316 9.68803 7.58462L10.4197 7.95043C10.694 7.76752 10.9684 7.58462 11.3342 7.40171L11.4256 6.57863C11.4256 6.02991 12.0658 5.75556 12.9803 5.75556C13.9863 5.75556 14.535 6.12137 14.535 6.57863L14.6265 7.40171C14.9923 7.58462 15.2667 7.67607 15.541 7.95043L16.2727 7.58462C16.7299 7.31026 17.2786 7.67607 17.8274 8.49915C18.0103 8.7735 18.1017 9.13932 18.1932 9.41368C18.2846 9.96239 18.1017 10.2368 17.9188 10.3282L17.2786 10.7855C17.2786 10.9684 17.2786 11.1513 17.2786 11.3342C17.2786 11.5171 17.2786 11.7 17.2786 11.8829L17.9188 12.3402C18.2846 12.6145 18.2846 13.2547 17.7359 14.0778Z" fill="#354049"></path>
+          <path d="M12.8893 13.2551C13.9499 13.2551 14.8098 12.3952 14.8098 11.3346C14.8098 10.2739 13.9499 9.41406 12.8893 9.41406C11.8286 9.41406 10.9688 10.2739 10.9688 11.3346C10.9688 12.3952 11.8286 13.2551 12.8893 13.2551Z" fill="#354049"></path>
+        </svg>
+        <h1>Support</h1>
+      </div>
+    </a>
+  </div>
+</div>
+`;
diff --git a/web/satellite/tests/unit/components/navigation/navigationArea.spec.ts b/web/satellite/tests/unit/components/navigation/navigationArea.spec.ts
new file mode 100644
index 000000000..1021c2e85
--- /dev/null
+++ b/web/satellite/tests/unit/components/navigation/navigationArea.spec.ts
@@ -0,0 +1,77 @@
+// Copyright (C) 2019 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import NavigationArea from '@/components/navigation/NavigationArea.vue';
+import { makeProjectsModule } from '@/store/modules/projects';
+import { ProjectsApiMock } from '../../mock/api/projects';
+import { Project } from '@/types/projects';
+import { NavigationLink } from '@/types/navigation';
+import { RouteConfig } from '@/router';
+
+const api = new ProjectsApiMock();
+api.setMockProject(new Project('1'));
+const projectsModule = makeProjectsModule(api);
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+const store = new Vuex.Store({ modules: { projectsModule } });
+
+const expectedLinks: NavigationLink[] = [
+    RouteConfig.ProjectOverview.with(RouteConfig.ProjectDetails),
+    RouteConfig.Team,
+    RouteConfig.ApiKeys,
+    RouteConfig.Buckets,
+];
+
+describe('NavigationArea', () => {
+    it('snapshot not changed without project', () => {
+        const wrapper = shallowMount(NavigationArea, {
+            store,
+            localVue,
+        });
+
+        const navigationElements = wrapper.findAll('.navigation-area__item-container');
+        const disabledElements = wrapper.findAll('.navigation-area__item-container.disabled');
+
+        expect(navigationElements.length).toBe(6);
+        expect(disabledElements.length).toBe(4);
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('snapshot not changed with project', async () => {
+        const projects = await store.dispatch('fetchProjects');
+        await store.dispatch('selectProject', projects[0].id);
+
+        const wrapper = shallowMount(NavigationArea, {
+            store,
+            localVue,
+        });
+
+        const navigationElements = wrapper.findAll('.navigation-area__item-container');
+        const disabledElements = wrapper.findAll('.navigation-area__item-container.disabled');
+
+        expect(navigationElements.length).toBe(6);
+        expect(disabledElements.length).toBe(0);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('navigation links are correct', () => {
+        const wrapper = shallowMount(NavigationArea, {
+            store,
+            localVue,
+        });
+
+        const navigationLinks = (wrapper.vm as any).navigation;
+
+        expect(navigationLinks.length).toBe(expectedLinks.length);
+
+        expectedLinks.forEach((link, i) => {
+            expect(navigationLinks[i].name).toBe(expectedLinks[i].name);
+            expect(navigationLinks[i].path).toBe(expectedLinks[i].path);
+        });
+    });
+});
diff --git a/web/satellite/tests/unit/mock/api/credits.ts b/web/satellite/tests/unit/mock/api/credits.ts
new file mode 100644
index 000000000..643045932
--- /dev/null
+++ b/web/satellite/tests/unit/mock/api/credits.ts
@@ -0,0 +1,19 @@
+// Copyright (C) 2019 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+import { CreditsApi, CreditUsage } from '@/types/credits';
+
+/**
+ * Mock for CreditsApi
+ */
+export class CreditsApiMock implements CreditsApi {
+    private mockCredits: CreditUsage;
+
+    get(): Promise<CreditUsage> {
+        return Promise.resolve(this.mockCredits);
+    }
+
+    public setMockCredits(mockCredits: CreditUsage): void {
+        this.mockCredits = mockCredits;
+    }
+}
diff --git a/web/satellite/tests/unit/mock/api/projectMembers.ts b/web/satellite/tests/unit/mock/api/projectMembers.ts
new file mode 100644
index 000000000..cabe81eea
--- /dev/null
+++ b/web/satellite/tests/unit/mock/api/projectMembers.ts
@@ -0,0 +1,28 @@
+// Copyright (C) 2019 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+import { ProjectMemberCursor, ProjectMembersApi, ProjectMembersPage } from '@/types/projectMembers';
+
+/**
+ * Mock for ProjectMembersApi
+ */
+export class ProjectMembersApiMock implements ProjectMembersApi {
+    public cursor: ProjectMemberCursor;
+    public page: ProjectMembersPage;
+
+    public setMockPage(page: ProjectMembersPage): void {
+        this.page = page;
+    }
+
+    add(projectId: string, emails: string[]): Promise<void> {
+        throw new Error('not implemented');
+    }
+
+    delete(projectId: string, emails: string[]): Promise<void> {
+        throw new Error('not implemented');
+    }
+
+    get(projectId: string, cursor: ProjectMemberCursor): Promise<ProjectMembersPage> {
+        return Promise.resolve(this.page);
+    }
+}
diff --git a/web/satellite/tests/unit/mock/api/projects.ts b/web/satellite/tests/unit/mock/api/projects.ts
new file mode 100644
index 000000000..cba10f3ea
--- /dev/null
+++ b/web/satellite/tests/unit/mock/api/projects.ts
@@ -0,0 +1,34 @@
+// Copyright (C) 2019 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+import { ProjectsApi, Project, CreateProjectModel } from '@/types/projects';
+
+/**
+ * Mock for CreditsApi
+ */
+export class ProjectsApiMock implements ProjectsApi {
+    private mockProject: Project;
+
+    public setMockProject(mockCredits: Project): void {
+        this.mockProject = mockCredits;
+    }
+
+    create(createProjectModel: CreateProjectModel): Promise<Project> {
+        throw new Error('not implemented');
+    }
+
+    delete(projectId: string): Promise<void> {
+        throw new Error('not implemented');
+    }
+
+    get(): Promise<Project[]> {
+        const result = Array<Project>();
+        result.push(this.mockProject);
+
+        return Promise.resolve(result);
+    }
+
+    update(projectId: string, description: string): Promise<void> {
+        throw new Error('not implemented');
+    }
+}
diff --git a/web/satellite/tests/unit/mock/api/users.ts b/web/satellite/tests/unit/mock/api/users.ts
new file mode 100644
index 000000000..34406348f
--- /dev/null
+++ b/web/satellite/tests/unit/mock/api/users.ts
@@ -0,0 +1,23 @@
+// Copyright (C) 2019 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+import { UpdatedUser, User, UsersApi } from '@/types/users';
+
+/**
+ * Mock for UsersApi
+ */
+export class UsersApiMock implements UsersApi {
+    private mockUser: User;
+
+    public setMockUser(mockUser: User): void {
+        this.mockUser = mockUser;
+    }
+
+    public get(): Promise<User> {
+        return Promise.resolve(this.mockUser);
+    }
+
+    public update(user: UpdatedUser): Promise<void> {
+        throw new Error('not implemented');
+    }
+}
diff --git a/web/satellite/tests/unit/projectMembers/HeaderArea.spec.ts b/web/satellite/tests/unit/projectMembers/HeaderArea.spec.ts
index ec0606b4b..964950868 100644
--- a/web/satellite/tests/unit/projectMembers/HeaderArea.spec.ts
+++ b/web/satellite/tests/unit/projectMembers/HeaderArea.spec.ts
@@ -1,243 +1,145 @@
 // Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-import sinon from 'sinon';
-import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
-
+import { appStateModule } from '@/store/modules/appState';
+import { makeProjectMembersModule } from '@/store/modules/projectMembers';
+import { makeNotificationsModule } from '@/store/modules/notifications';
 import HeaderArea from '@/components/team/HeaderArea.vue';
-import { ProjectMember } from '@/types/projectMembers';
+import { ProjectMember, ProjectMemberHeaderState, ProjectMembersPage } from '@/types/projectMembers';
+import { ProjectMembersApiMock } from '../mock/api/projectMembers';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 
 const localVue = createLocalVue();
 
+const projectMembers: ProjectMember[] = [
+    new ProjectMember('f1', 's1', '1@example.com', '', '1'),
+    new ProjectMember('f2', 's2', '2@example.com', '', '2'),
+    new ProjectMember('f3', 's3', '3@example.com', '', '3'),
+];
+
+const api = new ProjectMembersApiMock();
+api.setMockPage(new ProjectMembersPage(projectMembers));
+
+const notificationsModule = makeNotificationsModule();
+const projectMembersModule = makeProjectMembersModule(api);
+
 localVue.use(Vuex);
 
-describe('appState Actions', () => {
-    let store;
-    let actions;
+const store = new Vuex.Store({ modules: { appStateModule, projectMembersModule, notificationsModule } });
 
-    beforeEach(() => {
-        actions = {
-            toggleAddTeamMembersPopup: jest.fn()
-        };
-
-        store = new Vuex.Store({
-            modules: {
-                appStateModule: {
-                    actions
-                }
-            }
-        });
-    });
-
-    it('action on onAddUsersClick works correctly', () => {
-        const wrapper = mount(HeaderArea, { store, localVue });
-
-        wrapper.vm.onAddUsersClick();
-
-        expect(actions.toggleAddTeamMembersPopup.mock.calls).toHaveLength(1);
-    });
-});
-
-describe('projectMembers/notification Actions', () => {
-    let store;
-    let actions;
-    let getters;
-    let state;
-    let teamMember = new ProjectMember('test', 'test', 'test@test.test', 'test');
-    let teamMember1 = new ProjectMember('test1', 'test1', 'test1@test.test', 'test1');
-    let searchQuery = 'test';
-
-    beforeEach(() => {
-        getters = {
-            selectedProjectMembers: () => [teamMember, teamMember1]
-        };
-
-        state = {
-            searchParameters: {
-                searchQuery: ''
-            },
-        };
-
-        actions = {
-            clearProjectMemberSelection: jest.fn(),
-            deleteProjectMembers: async () => {
-                return {
-                    errorMessage: '',
-                    isSuccess: true,
-                    data: null
-                };
-            },
-            fetchProjectMembers: async () => {
-                return {
-                    errorMessage: '',
-                    isSuccess: true,
-                    data: [teamMember, teamMember1]
-                };
-            },
-            setProjectMembersSearchQuery: () => {
-                state.searchParameters.searchQuery = searchQuery;
-            },
-            success: jest.fn()
-        };
-
-        store = new Vuex.Store({
-            modules: {
-                module: {
-                    actions,
-                    getters,
-                    state
-                },
-            }
-        });
-    });
-
-    it('action on onClearSelection works correctly', () => {
-        let clearSearchSpy = sinon.spy();
-
-        const wrapper = mount(HeaderArea, { store, localVue });
-
-        wrapper.vm.$refs.headerComponent.clearSearch = clearSearchSpy;
-        wrapper.vm.onClearSelection();
-
-        expect(actions.clearProjectMemberSelection.mock.calls).toHaveLength(1);
-        expect(wrapper.vm.$data.isDeleteClicked).toBe(false);
-        expect(clearSearchSpy.callCount).toBe(1);
-    });
-
-    it('actions on onDelete works correctly', async () => {
-        let clearSearchSpy = sinon.spy();
-
-        const wrapper = mount(HeaderArea, {
-            store,
-            localVue
-        });
-
-        wrapper.vm.$data.headerState = 1;
-        wrapper.vm.$data.isDeleteClicked = true;
-        wrapper.vm.$refs.headerComponent.clearSearch = clearSearchSpy;
-
-        await wrapper.vm.onDelete();
-
-        const projectMembersEmails = await store.getters.selectedProjectMembers.map((member) => {
-            return member.user.email;
-        });
-
-        expect(projectMembersEmails).toHaveLength(2);
-        expect(actions.deleteProjectMembers).resolves;
-        expect(actions.success.mock.calls).toHaveLength(1);
-        expect(wrapper.vm.$data.isDeleteClicked).toBe(false);
-        expect(clearSearchSpy.callCount).toBe(1);
-    });
-
-    it('action on processSearchQuery works correctly', async () => {
-        const wrapper = mount(HeaderArea, {
-            store,
-            localVue
-        });
-
-        await wrapper.vm.processSearchQuery(searchQuery);
-
-        expect(state.searchParameters.searchQuery).toMatch('test');
-        expect(actions.fetchProjectMembers).resolves;
-    });
-});
-
-describe('error conditions', () => {
-    let store;
-    let actions;
-    let getters;
-    let searchQuery = 'test';
-
-    beforeEach(() => {
-        getters = {
-            selectedProjectMembers: () => []
-        };
-
-        actions = {
-            deleteProjectMembers: async () => {
-                throw new Error('testError');
-            },
-            fetchProjectMembers: async () => {
-                throw new Error('testError');
-            },
-            setProjectMembersSearchQuery: () => {
-                return;
-            },
-            error: jest.fn()
-        };
-
-        store = new Vuex.Store({
-            modules: {
-                module: {
-                    actions,
-                    getters
-                }
-            }
-        });
-    });
-
-    it('function customUserCount if there is only 1 selected user', () => {
-        const wrapper = mount(HeaderArea, { store, localVue });
-
-        wrapper.vm.$data.selectedProjectMembers = 1;
-
-        expect(wrapper.vm.userCountTitle).toMatch('user');
-    });
-
-    it('function onDelete if delete is not successful', async () => {
-        const wrapper = mount(HeaderArea, {
-            store,
-            localVue
-        });
-
-        wrapper.vm.$data.headerState = 1;
-        wrapper.vm.$data.isDeleteClicked = true;
-
-        await wrapper.vm.onDelete();
-
-        expect(actions.error.mock.calls).toHaveLength(1);
-    });
-
-    it('function processSearchQuery if fetch is not successful', async () => {
-        const wrapper = mount(HeaderArea, {
-            store,
-            localVue
-        });
-
-        await wrapper.vm.processSearchQuery(searchQuery);
-
-        expect(actions.error.mock.calls).toHaveLength(1);
-    });
-});
-
-describe('HeaderArea.vue', () => {
+describe('Team HeaderArea', () => {
     it('renders correctly', () => {
-        const wrapper = shallowMount(HeaderArea);
+        const wrapper = shallowMount(HeaderArea, {
+            store,
+            localVue,
+        });
+
+        const addNewTemMemberPopup = wrapper.findAll('adduserpopup-stub');
 
         expect(wrapper).toMatchSnapshot();
+        expect(addNewTemMemberPopup.length).toBe(0);
+        expect(wrapper.findAll('.header-default-state').length).toBe(1);
+        expect(wrapper.findAll('.blur-content').length).toBe(0);
+        expect(wrapper.findAll('.blur-search').length).toBe(0);
+        expect(wrapper.vm.isDeleteClicked).toBe(false);
     });
 
-    it('renders correctly with default props', () => {
-        const wrapper = mount(HeaderArea);
+    it('renders correctly with opened Add team member popup', () => {
+        store.dispatch(APP_STATE_ACTIONS.TOGGLE_TEAM_MEMBERS);
 
-        expect(wrapper.vm.$props.headerState).toBe(0);
-        expect(wrapper.vm.$props.selectedProjectMembers).toBe(0);
+        const wrapper = shallowMount(HeaderArea, {
+            store,
+            localVue,
+        });
+
+        const addNewTemMemberPopup = wrapper.findAll('adduserpopup-stub');
+
+        expect(wrapper).toMatchSnapshot();
+        expect(addNewTemMemberPopup.length).toBe(1);
+        expect(wrapper.findAll('.header-default-state').length).toBe(1);
+        expect(wrapper.vm.isDeleteClicked).toBe(false);
+        expect(wrapper.findAll('.blur-content').length).toBe(0);
+        expect(wrapper.findAll('.blur-search').length).toBe(0);
+
+        store.dispatch(APP_STATE_ACTIONS.TOGGLE_TEAM_MEMBERS);
     });
 
-    it('function customUserCount work correctly', () => {
-        const wrapper = mount(HeaderArea);
+    it('renders correctly with selected users', () => {
+        store.dispatch(APP_STATE_ACTIONS.TOGGLE_TEAM_MEMBERS);
 
-        expect(wrapper.vm.userCountTitle).toMatch('users');
+        const selectedUsersCount = 2;
+
+        const wrapper = shallowMount(HeaderArea, {
+            store,
+            localVue,
+            propsData: {
+                selectedProjectMembersCount: selectedUsersCount,
+                headerState: ProjectMemberHeaderState.ON_SELECT,
+            },
+        });
+
+        expect(wrapper.findAll('.header-selected-members').length).toBe(1);
+
+        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.vm.selectedProjectMembersCount).toBe(selectedUsersCount);
+        expect(wrapper.vm.isDeleteClicked).toBe(false);
+        expect(wrapper.findAll('.blur-content').length).toBe(0);
+        expect(wrapper.findAll('.blur-search').length).toBe(0);
     });
 
-    it('function onFirstDeleteClick work correctly', () => {
-        const wrapper = mount(HeaderArea);
+    it('renders correctly with 2 selected users and delete clicked once', () => {
+        store.dispatch(APP_STATE_ACTIONS.TOGGLE_TEAM_MEMBERS);
+
+        const selectedUsersCount = 2;
+
+        const wrapper = shallowMount(HeaderArea, {
+            store,
+            localVue,
+            propsData: {
+                selectedProjectMembersCount: selectedUsersCount,
+                headerState: ProjectMemberHeaderState.ON_SELECT,
+            },
+        });
 
         wrapper.vm.onFirstDeleteClick();
 
-        expect(wrapper.vm.$data.isDeleteClicked).toBe(true);
+        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.vm.selectedProjectMembersCount).toBe(selectedUsersCount);
+        expect(wrapper.vm.userCountTitle).toBe('users');
+        expect(wrapper.vm.isDeleteClicked).toBe(true);
+        expect(wrapper.findAll('.blur-content').length).toBe(1);
+        expect(wrapper.findAll('.blur-search').length).toBe(1);
+
+        const expectedSectionRendered = wrapper.find('.header-after-delete-click');
+        expect(expectedSectionRendered.text()).toBe(`Are you sure you want to delete ${selectedUsersCount} users?`);
     });
 
-});
+    it('renders correctly with 1 selected user and delete clicked once', () => {
+        store.dispatch(APP_STATE_ACTIONS.TOGGLE_TEAM_MEMBERS);
 
+        const selectedUsersCount = 1;
+
+        const wrapper = shallowMount(HeaderArea, {
+            store,
+            localVue,
+            propsData: {
+                selectedProjectMembersCount: selectedUsersCount,
+                headerState: ProjectMemberHeaderState.ON_SELECT,
+            },
+        });
+
+        wrapper.vm.onFirstDeleteClick();
+
+        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.vm.selectedProjectMembersCount).toBe(selectedUsersCount);
+        expect(wrapper.vm.userCountTitle).toBe('user');
+        expect(wrapper.vm.isDeleteClicked).toBe(true);
+        expect(wrapper.findAll('.blur-content').length).toBe(1);
+        expect(wrapper.findAll('.blur-search').length).toBe(1);
+
+        const expectedSectionRendered = wrapper.find('.header-after-delete-click');
+        expect(expectedSectionRendered.text()).toBe(`Are you sure you want to delete ${selectedUsersCount} user?`);
+    });
+});
diff --git a/web/satellite/tests/unit/projectMembers/ProjectMembersArea.spec.ts b/web/satellite/tests/unit/projectMembers/ProjectMembersArea.spec.ts
index 9aeb26fe0..b71ff9f8e 100644
--- a/web/satellite/tests/unit/projectMembers/ProjectMembersArea.spec.ts
+++ b/web/satellite/tests/unit/projectMembers/ProjectMembersArea.spec.ts
@@ -1,13 +1,13 @@
 // Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
-
 import { ProjectMembersApiGql } from '@/api/projectMembers';
 import ProjectMembersArea from '@/components/team/ProjectMembersArea.vue';
 import { makeProjectMembersModule, PROJECT_MEMBER_MUTATIONS } from '@/store/modules/projectMembers';
 import { ProjectMember, ProjectMembersPage } from '@/types/projectMembers';
+import { appStateModule } from '@/store/modules/appState';
 
 const localVue = createLocalVue();
 
@@ -20,7 +20,7 @@ describe('ProjectMembersArea.vue', () => {
     const pmApi = new ProjectMembersApiGql();
     const projectMembersModule = makeProjectMembersModule(pmApi);
 
-    const store = new Vuex.Store({modules: { projectMembersModule }});
+    const store = new Vuex.Store({modules: { projectMembersModule, appStateModule }});
 
     it('renders correctly', () => {
         const wrapper = shallowMount(ProjectMembersArea, {
@@ -31,6 +31,21 @@ describe('ProjectMembersArea.vue', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
+    it('empty search result area render correctly', function () {
+        const wrapper = shallowMount(ProjectMembersArea, {
+            store,
+            localVue
+        });
+
+        const emptySearchResultArea = wrapper.findAll('.team-area__empty-search-result-area');
+        expect(emptySearchResultArea.length).toBe(1);
+
+        const teamContainer = wrapper.findAll('.team-area__container');
+        expect(teamContainer.length).toBe(0);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
     it('function fetchProjectMembers works correctly', () => {
         const testProjectMembersPage = new ProjectMembersPage();
         testProjectMembersPage.projectMembers = [projectMember1];
@@ -39,33 +54,39 @@ describe('ProjectMembersArea.vue', () => {
 
         store.commit(PROJECT_MEMBER_MUTATIONS.FETCH, testProjectMembersPage);
 
-        const wrapper = mount(ProjectMembersArea, {
+        const wrapper = shallowMount(ProjectMembersArea, {
             store,
             localVue,
-            mocks: {
-                $route: {
-                    query: {
-                        pageNumber: null
-                    }
-                },
-                $router: {
-                    replace: () => false
-                }
-            }
         });
 
         expect(wrapper.vm.projectMembers.length).toBe(1);
     });
 
+    it('team area renders correctly', function () {
+        const wrapper = shallowMount(ProjectMembersArea, {
+            store,
+            localVue
+        });
+
+        const emptySearchResultArea = wrapper.findAll('.team-area__empty-search-result-area');
+        expect(emptySearchResultArea.length).toBe(0);
+
+        const teamContainer = wrapper.findAll('.team-area__container');
+        expect(teamContainer.length).toBe(1);
+
+        const sortingListHeaderStub = wrapper.findAll('sortinglistheader-stub');
+        expect(sortingListHeaderStub.length).toBe(1);
+
+        const listStub = wrapper.findAll('list-stub');
+        expect(listStub.length).toBe(1);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
     it('action on toggle works correctly', () => {
-        const wrapper = mount(ProjectMembersArea, {
+        const wrapper = shallowMount(ProjectMembersArea, {
             store,
             localVue,
-            mocks: {
-                $route: {
-                    query: {}
-                }
-            }
         });
 
         wrapper.vm.onMemberClick(projectMember1);
@@ -74,14 +95,9 @@ describe('ProjectMembersArea.vue', () => {
     });
 
     it('clear selection works correctly', () => {
-        const wrapper = mount(ProjectMembersArea, {
+        const wrapper = shallowMount(ProjectMembersArea, {
             store,
             localVue,
-            mocks: {
-                $route: {
-                    query: {}
-                }
-            }
         });
 
         wrapper.vm.onMemberClick(projectMember1);
@@ -97,14 +113,9 @@ describe('ProjectMembersArea.vue', () => {
 
         store.commit(PROJECT_MEMBER_MUTATIONS.FETCH, testProjectMembersPage);
 
-        const wrapper = mount(ProjectMembersArea, {
+        const wrapper = shallowMount(ProjectMembersArea, {
             store,
             localVue,
-            mocks: {
-                $route: {
-                    query: {}
-                }
-            }
         });
 
         expect(wrapper.vm.projectMembers[0].user.id).toBe(projectMember1.user.id);
diff --git a/web/satellite/tests/unit/projectMembers/__snapshots__/HeaderArea.spec.ts.snap b/web/satellite/tests/unit/projectMembers/__snapshots__/HeaderArea.spec.ts.snap
index fccfeeeee..dbbf958f6 100644
--- a/web/satellite/tests/unit/projectMembers/__snapshots__/HeaderArea.spec.ts.snap
+++ b/web/satellite/tests/unit/projectMembers/__snapshots__/HeaderArea.spec.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HeaderArea.vue renders correctly 1`] = `
+exports[`Team HeaderArea renders correctly 1`] = `
 <div class="team-header-container">
   <h1>Project Members</h1>
   <div class="team-header-container__wrapper">
@@ -14,5 +14,85 @@ exports[`HeaderArea.vue renders correctly 1`] = `
     <!---->
     <!---->
   </div>
+  <!---->
+</div>
+`;
+
+exports[`Team HeaderArea renders correctly with 1 selected user and delete clicked once 1`] = `
+<div class="team-header-container">
+  <h1>Project Members</h1>
+  <div class="team-header-container__wrapper">
+    <headercomponent-stub placeholder="Team Members" search="function () { [native code] }">
+      <!---->
+      <!---->
+      <div class="header-after-delete-click"><span>Are you sure you want to delete 1 user?</span>
+        <div class="header-after-delete-click__button-area">
+          <button-stub label="Delete" width="122px" height="48px" onpress="function () { [native code] }" class="button deletion"></button-stub>
+          <button-stub label="Cancel" width="122px" height="48px" iswhite="true" onpress="function () { [native code] }" class="button"></button-stub>
+        </div>
+      </div>
+    </headercomponent-stub>
+    <div class="blur-content"></div>
+    <div class="blur-search"></div>
+  </div>
+  <adduserpopup-stub></adduserpopup-stub>
+</div>
+`;
+
+exports[`Team HeaderArea renders correctly with 2 selected users and delete clicked once 1`] = `
+<div class="team-header-container">
+  <h1>Project Members</h1>
+  <div class="team-header-container__wrapper">
+    <headercomponent-stub placeholder="Team Members" search="function () { [native code] }">
+      <!---->
+      <!---->
+      <div class="header-after-delete-click"><span>Are you sure you want to delete 2 users?</span>
+        <div class="header-after-delete-click__button-area">
+          <button-stub label="Delete" width="122px" height="48px" onpress="function () { [native code] }" class="button deletion"></button-stub>
+          <button-stub label="Cancel" width="122px" height="48px" iswhite="true" onpress="function () { [native code] }" class="button"></button-stub>
+        </div>
+      </div>
+    </headercomponent-stub>
+    <div class="blur-content"></div>
+    <div class="blur-search"></div>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`Team HeaderArea renders correctly with opened Add team member popup 1`] = `
+<div class="team-header-container">
+  <h1>Project Members</h1>
+  <div class="team-header-container__wrapper">
+    <headercomponent-stub placeholder="Team Members" search="function () { [native code] }">
+      <div class="header-default-state"><span>The only project role currently available is Admin, which gives <b>full access</b> to the project.</span>
+        <button-stub label="+Add" width="122px" height="48px" onpress="function () { [native code] }" class="button"></button-stub>
+      </div>
+      <!---->
+      <!---->
+    </headercomponent-stub>
+    <!---->
+    <!---->
+  </div>
+  <adduserpopup-stub></adduserpopup-stub>
+</div>
+`;
+
+exports[`Team HeaderArea renders correctly with selected users 1`] = `
+<div class="team-header-container">
+  <h1>Project Members</h1>
+  <div class="team-header-container__wrapper">
+    <headercomponent-stub placeholder="Team Members" search="function () { [native code] }">
+      <!---->
+      <div class="header-selected-members">
+        <button-stub label="Delete" width="122px" height="48px" onpress="function () { [native code] }" class="button deletion"></button-stub>
+        <button-stub label="Cancel" width="122px" height="48px" iswhite="true" onpress="function () { [native code] }" class="button"></button-stub>
+      </div>
+      <!---->
+    </headercomponent-stub>
+    <!---->
+    <!---->
+  </div>
+  <adduserpopup-stub></adduserpopup-stub>
 </div>
 `;
diff --git a/web/satellite/tests/unit/projectMembers/__snapshots__/ProjectMembersArea.spec.ts.snap b/web/satellite/tests/unit/projectMembers/__snapshots__/ProjectMembersArea.spec.ts.snap
index 0fa9b2d2e..16ee96087 100644
--- a/web/satellite/tests/unit/projectMembers/__snapshots__/ProjectMembersArea.spec.ts.snap
+++ b/web/satellite/tests/unit/projectMembers/__snapshots__/ProjectMembersArea.spec.ts.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ProjectMembersArea.vue renders correctly 1`] = `
+exports[`ProjectMembersArea.vue empty search result area render correctly 1`] = `
 <div class="team-area">
   <div class="team-area__header">
-    <headerarea-stub headerstate="0" selectedprojectmembers="0"></headerarea-stub>
+    <headerarea-stub headerstate="0" selectedprojectmemberscount="0"></headerarea-stub>
   </div>
   <!---->
   <div class="team-area__empty-search-result-area">
@@ -40,3 +40,62 @@ exports[`ProjectMembersArea.vue renders correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`ProjectMembersArea.vue renders correctly 1`] = `
+<div class="team-area">
+  <div class="team-area__header">
+    <headerarea-stub headerstate="0" selectedprojectmemberscount="0"></headerarea-stub>
+  </div>
+  <!---->
+  <div class="team-area__empty-search-result-area">
+    <h1>No results found</h1> <svg width="380" height="295" viewBox="0 0 380 295" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M168 295C246.997 295 311 231.2 311 152.5C311 73.8 246.997 10 168 10C89.0028 10 25 73.8 25 152.5C25 231.2 89.0028 295 168 295Z" fill="#E8EAF2"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M23.3168 98C21.4071 98 20 96.5077 20 94.6174C20.9046 68.9496 31.8599 45.769 49.0467 28.7566C66.2335 11.7442 89.6518 0.900089 115.583 0.00470057C117.492 -0.094787 119 1.39753 119 3.28779V32.4377C119 34.2284 117.593 35.6213 115.784 35.7208C99.7025 36.5167 85.2294 43.3813 74.4751 53.927C63.8213 64.5722 56.8863 78.8984 56.0822 94.8164C55.9817 96.6072 54.5746 98 52.7655 98H23.3168Z" fill="#B0B6C9"></path>
+      <path d="M117.5 30C124.404 30 130 25.0751 130 19C130 12.9249 124.404 8 117.5 8C110.596 8 105 12.9249 105 19C105 25.0751 110.596 30 117.5 30Z" fill="#8F96AD"></path>
+      <path d="M112.5 97C116.09 97 119 94.3137 119 91C119 87.6863 116.09 85 112.5 85C108.91 85 106 87.6863 106 91C106 94.3137 108.91 97 112.5 97Z" fill="#B0B6C9"></path>
+      <path d="M15.0005 282C23.226 282 30 274.575 30 265.5C30 256.425 23.226 249 15.0005 249C6.77499 249 0.00102409 256.425 0.00102409 265.5C-0.0957468 274.678 6.67822 282 15.0005 282Z" fill="#8F96AD"></path>
+      <path d="M15.5 274C19.0286 274 22 270.9 22 267C22 263.2 19.1214 260 15.5 260C11.9714 260 9 263.1 9 267C9 270.9 11.8786 274 15.5 274Z" fill="white"></path>
+      <path d="M282.587 111H307.413C309.906 111 312 108.955 312 106.5C312 104.045 309.906 102 307.413 102H282.587C280.094 102 278 104.045 278 106.5C278 108.955 280.094 111 282.587 111Z" fill="white"></path>
+      <path d="M282.585 93H289.415C291.951 93 294 91.02 294 88.5C294 85.98 291.951 84 289.415 84H282.585C280.049 84 278 85.98 278 88.5C278 91.02 279.951 93 282.585 93Z" fill="#E8EAF2"></path>
+      <path d="M252.872 92H260.128C262.823 92 265 90.4091 265 88.5C265 86.5909 262.823 85 260.128 85H252.872C250.177 85 248 86.5909 248 88.5C248 90.4091 250.177 92 252.872 92Z" fill="#363840"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M45 166C48.8182 166 52 162.818 52 159C52 155.182 48.8182 152 45 152C41.1818 152 38 155.182 38 159C38 162.818 41.1818 166 45 166Z" fill="#B0B6C9"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M217 232C220.818 232 224 228.818 224 225C224 221.182 220.818 218 217 218C213.182 218 210 221.182 210 225C210 228.818 213.182 232 217 232Z" fill="#2683FF"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M26 142C29.8182 142 33 139.045 33 135.5C33 131.955 29.8182 129 26 129C22.1818 129 19 131.955 19 135.5C19 139.045 22.1818 142 26 142Z" fill="white"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M45 142C48.8182 142 52 139.045 52 135.5C52 131.955 48.8182 129 45 129C41.1818 129 38 131.955 38 135.5C38 139.045 41.1818 142 45 142Z" fill="#E8EAF2"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M64 142C67.8182 142 71 139.045 71 135.5C71 131.955 67.8182 129 64 129C60.1818 129 57 131.955 57 135.5C57 139.045 60.1818 142 64 142Z" fill="white"></path>
+      <path d="M107.014 129.651C107.014 129.651 152.017 118.395 199.527 125.169C212.857 127.061 224.785 134.831 232.001 146.186C245.031 166.606 263.374 203.062 259.465 241.112L239.018 246.093C239.018 246.093 224.885 200.97 209.049 182.643C209.049 182.643 190.205 225.275 191.208 248.683C191.208 249.38 191.308 249.977 191.308 250.575C193.513 273.485 101 254.858 101 254.858L107.014 129.651Z" fill="#F5F6FA"></path>
+      <path d="M143 89.7894L145.01 121.569C145.211 124.568 147.12 127.066 149.833 127.865C156.063 129.664 167.821 131.863 179.276 127.266C181.387 126.466 182.492 123.968 181.789 121.669L166.514 73L143 89.7894Z" fill="#8F96AD"></path>
+      <path d="M189 61.014C189 61.014 186.474 85.2772 181.219 95.8484C175.964 106.42 174.448 114.272 161.412 109.641C148.376 105.01 141.707 93.5328 142.01 80.2434C142.01 80.2434 142.414 59.7052 147.972 54.3692C153.631 49.0333 189 61.014 189 61.014Z" fill="#B0B6C9"></path>
+      <path d="M150.596 75.686L152.115 76.4754C152.115 76.4754 153.128 60.6872 159.814 61.4766C166.5 62.266 190.609 69.8641 199.625 64.9303C208.235 60.1938 191.521 44.2082 180.074 40.4585C163.866 35.0313 150.798 35.5247 144.822 45.2936C144.416 45.8857 143.606 45.8857 143.201 45.2936C142.492 44.0108 128.209 53.9772 132.97 65.917C133.172 66.5091 138.946 83.4815 140.567 83.9748C140.972 84.0735 141.479 83.8762 141.681 83.4815L146.24 74.4032C146.442 73.9098 147.05 73.7125 147.557 74.0085L150.596 75.686Z" fill="#0F002D"></path>
+      <path d="M149.877 78.0283C149.877 78.0283 154.31 62.6808 145.56 63.0051C136.81 63.3293 139.844 79.7576 144.744 83L149.877 78.0283Z" fill="#B0B6C9"></path>
+      <path d="M106.635 221.07C104.63 206.983 119.272 186.154 125.289 178.305C126.994 176.092 127.996 173.274 127.996 170.457C128.197 150.433 119.773 137.553 106.335 129C106.335 129 57.5953 185.953 70.0308 229.724C71.3345 234.453 73.4406 238.478 76.048 242C78.0538 225.397 97.1082 221.875 106.635 221.07Z" fill="#F5F6FA"></path>
+      <path d="M107.966 215L106 214.798C107.655 200.851 120.172 183.67 125.448 177L127 178.112C121.828 184.681 109.621 201.559 107.966 215Z" fill="#0F002D"></path>
+      <path d="M107.128 221.954C106.926 221.337 106.825 220.617 106.725 220C97.054 220.823 78.0147 224.423 76 241.29C97.8599 270.808 158 260.111 158 260.111V248.592C158.101 248.695 111.862 239.953 107.128 221.954Z" fill="#B0B6C9"></path>
+      <path d="M152 257C152 257 160.863 236.189 176.575 243.593C192.187 250.997 190.978 255.799 190.978 255.799L152 257Z" fill="#B0B6C9"></path>
+      <path d="M271.213 238H136.787C134.194 238 132 235.787 132 233.172V139.828C132 137.213 134.194 135 136.787 135H271.213C273.806 135 276 137.213 276 139.828V233.172C276 235.787 273.906 238 271.213 238Z" fill="#363840"></path>
+      <path d="M217.252 258H195.744C193.109 258 191 256 191 253.5V190.5C191 188 193.109 186 195.744 186H217.252C219.888 186 221.996 188 221.996 190.5V253.5C222.102 255.9 219.888 258 217.252 258Z" fill="#363840"></path>
+      <path d="M246.189 254H150.811C149.305 254 148 255.444 148 257.111V258.889C148 260.556 149.305 262 150.811 262H246.189C247.695 262 249 260.556 249 258.889V257.111C249 255.444 247.795 254 246.189 254Z" fill="#363840"></path>
+      <path d="M350.452 224.555C349.952 224.555 349.553 224.555 349.154 224.654C348.355 224.754 347.557 224.256 347.257 223.56C337.873 206.543 319.705 195 298.742 195C279.775 195 263.004 204.454 253.121 218.883C252.622 219.579 251.724 219.878 250.925 219.778C248.429 219.281 245.834 218.982 243.239 218.982C223.772 219.082 208 234.605 208 253.91C208 253.91 208 253.91 208 254.01C208 255.104 208.898 256 210.096 256H377.904C379.002 256 380 255.104 380 254.01V253.91C379.8 237.591 366.623 224.555 350.452 224.555Z" fill="#B0B6C9"></path>
+      <path d="M206 195C210.418 195 214 191.194 214 186.5C214 181.806 210.418 178 206 178C201.582 178 198 181.806 198 186.5C198 191.194 201.582 195 206 195Z" fill="white"></path>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`ProjectMembersArea.vue team area renders correctly 1`] = `
+<div class="team-area">
+  <div class="team-area__header">
+    <headerarea-stub headerstate="0" selectedprojectmemberscount="0"></headerarea-stub>
+  </div>
+  <div id="team-container" class="team-area__container">
+    <sortinglistheader-stub onheaderclickcallback="function () { [native code] }"></sortinglistheader-stub>
+    <div class="team-area__container__content">
+      <list-stub itemcomponent="function VueComponent (options) {
+      this._init(options);
+    }" onitemclick="function () { [native code] }" dataset="[object Object]"></list-stub>
+    </div>
+    <pagination-stub totalpagecount="1" onpageclickcallback="function () { [native code] }" class="pagination-area"></pagination-stub>
+  </div>
+  <!---->
+</div>
+`;
diff --git a/web/satellite/tests/unit/referralStats/referralStats.spec.ts b/web/satellite/tests/unit/referralStats/referralStats.spec.ts
index d1f6c64c7..b8cdd02e7 100644
--- a/web/satellite/tests/unit/referralStats/referralStats.spec.ts
+++ b/web/satellite/tests/unit/referralStats/referralStats.spec.ts
@@ -4,10 +4,12 @@
 import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import ReferralStats from '@/components/referral/ReferralStats.vue';
-import { CreditsApi, CreditUsage } from '@/types/credits';
-import { UpdatedUser, User, UsersApi } from '@/types/users';
+import { CreditUsage } from '@/types/credits';
+import { User } from '@/types/users';
 import { makeCreditsModule } from '@/store/modules/credits';
 import { makeUsersModule, USER_ACTIONS } from '@/store/modules/users';
+import { UsersApiMock } from '../mock/api/users';
+import { CreditsApiMock } from '../mock/api/credits';
 
 const {
     GET,
@@ -19,24 +21,10 @@ localVue.use(Vuex);
 const mockUser = new User('1', 'full name', 'short name');
 const mockCredits = new CreditUsage(1, 2, 3);
 
-class UsersApiMock implements UsersApi {
-    get(): Promise<User> {
-        return Promise.resolve(mockUser);
-    }
-
-    update(user: UpdatedUser): Promise<void> {
-        throw new Error('not implemented');
-    }
-
-}
-class CreditsApiMock implements CreditsApi {
-    get(): Promise<CreditUsage> {
-        return Promise.resolve(mockCredits);
-    }
-}
-
 const creditsApi = new CreditsApiMock();
+creditsApi.setMockCredits(mockCredits);
 const usersApi = new UsersApiMock();
+usersApi.setMockUser(mockUser);
 
 const usersModule = makeUsersModule(usersApi);
 const creditsModule = makeCreditsModule(creditsApi);
diff --git a/web/satellite/tslint.json b/web/satellite/tslint.json
index 52bed7c88..57209244a 100644
--- a/web/satellite/tslint.json
+++ b/web/satellite/tslint.json
@@ -11,6 +11,7 @@
     ]
   },
   "rules": {
+    "function-constructor": true,
     // Enforces vertical alignment.
     "align": [true, "parameters", "statements"],
     // Enforces use of T[] if T is a simple type.