web/satellite: dashboard template simplified, project selection moved to nav bar

WHAT:
project selection moved to navigation panel

WHY:
preparing for multiple project state

Change-Id: I434c73c25b3fec85fc7226a8400cf280b379b537

web/satellite/src/App.vue

@@ -26,10 +26,6 @@ export default class App extends Vue {
     private ids: string[] = [
                 'accountDropdown',
                 'accountDropdownButton',
-                'projectDropdown',
-                'projectDropdownButton',
-                'sortTeamMemberByDropdown',
-                'sortTeamMemberByDropdownButton',
                 'notificationArea',
                 'paymentSelectButton',
                 'paymentSelect',

web/satellite/src/api/payments.ts

@@ -260,7 +260,7 @@ export class PaymentsHttpApi implements PaymentsApi {
      * @param userId
      * @throws Error
      */
-    public async getPaywallEnabledStatus(userId: string): Promise<boolean> {
+    public async getPaywallStatus(userId: string): Promise<boolean> {
         const path = `${this.ROOT_PATH}/paywall-enabled/${userId}`;
         const response = await this.client.get(path);
 

web/satellite/src/components/account/billing/BillingArea.vue

@@ -204,7 +204,6 @@ export default class BillingArea extends Vue {
 
 <style scoped lang="scss">
     .account-billing-area {
-        padding-bottom: 55px;
 
         &__title-area {
             display: flex;

web/satellite/src/components/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.vue

@@ -4,7 +4,7 @@
 <template>
     <div class="usage-charges-item-container">
         <div class="usage-charges-item-container__summary" @click="toggleDetailedInfo">
-            <div class="usage-charges-item-container__summary__name-container" >
+            <div class="usage-charges-item-container__summary__name-container">
                 <ChargesExpandIcon v-if="isDetailedInfoShown"/>
                 <ChargesHideIcon v-else/>
                 <span>{{ projectName }}</span>
@@ -204,7 +204,6 @@ export default class UsageAndChargesItem extends Vue {
             }
 
             &__amount {
-                width: 100%;
                 font-size: 16px;
                 line-height: 21px;
                 text-align: right;

web/satellite/src/components/apiKeys/NoApiKeysArea.vue

@@ -72,7 +72,7 @@ export default class NoApiKeysArea extends Vue {
     .no-api-keys-area {
         width: auto;
         height: calc(100% - 130px);
-        padding: 65px;
+        padding: 65px 65px 0 65px;
         display: flex;
         flex-direction: column;
         align-items: center;

web/satellite/src/components/header/HeaderArea.vue

@@ -7,7 +7,6 @@
 import { Component, Vue } from 'vue-property-decorator';
 
 import NewProjectArea from '@/components/header/NewProjectArea.vue';
-import ProjectSelectionArea from '@/components/header/projectSelection/ProjectSelectionArea.vue';
 import NavigationArea from '@/components/navigation/NavigationArea.vue';
 import ProjectCreationSuccessPopup from '@/components/project/ProjectCreationSuccessPopup.vue';
 
@@ -20,7 +19,6 @@ import AccountButton from './AccountButton.vue';
 @Component({
     components: {
         ProjectCreationSuccessPopup,
-        ProjectSelectionArea,
         NewProjectArea,
         AccountButton,
         NavigationArea,

web/satellite/src/components/header/headerArea.html

@@ -12,7 +12,6 @@
             <NavigationCloseIcon/>
             <p class="dashboard-header-container__left-area__close-button__title">Close</p>
         </div>
-        <ProjectSelectionArea class="dashboard-header-container__left-area__project-selection"/>
     </div>
     <LogoIcon
         class="storj-title"

web/satellite/src/components/header/headerArea.scss

@@ -77,10 +77,6 @@
 
         &__left-area {
 
-            &__project-selection {
-                display: none;
-            }
-
             &__menu-button {
                 display: block;
                 cursor: pointer;

web/satellite/src/components/header/projectSelection/ProjectDropdown.vue

@@ -2,25 +2,25 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="project-selection-choice-container" id="projectDropdown">
+    <div class="project-dropdown">
-        <div class="project-selection-overflow-container">
+        <div class="project-dropdown__wrap">
-            <div class="project-selection-overflow-container__project-choice" @click="closeDropdown">
+            <div class="project-dropdown__wrap__choice" @click.prevent.stop="closeDropdown">
-                <div class="project-selection-overflow-container__project-choice__mark-container">
+                <div class="project-dropdown__wrap__choice__mark-container">
                     <ProjectSelectionIcon
-                        class="project-selection-overflow-container__project-choice__mark-container__image"
+                        class="project-dropdown__wrap__choice__mark-container__image"
                     />
                 </div>
-                <p class="project-selection-overflow-container__project-choice__selected">
+                <p class="project-dropdown__wrap__choice__selected">
                     {{ selectedProject.name }}
                 </p>
             </div>
             <div
-                class="project-selection-overflow-container__project-choice"
+                class="project-dropdown__wrap__choice"
-                @click="onProjectSelected(project.id)"
+                @click.prevent.stop="onProjectSelected(project.id)"
                 v-for="project in projects"
                 :key="project.id"
             >
-                <p class="project-selection-overflow-container__project-choice__unselected">{{ project.name }}</p>
+                <p class="project-dropdown__wrap__choice__unselected">{{ project.name }}</p>
             </div>
         </div>
     </div>
@@ -36,17 +36,14 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { Project } from '@/types/projects';
-import {
+import { PM_ACTIONS } from '@/utils/constants/actionNames';
-    APP_STATE_ACTIONS,
-    PM_ACTIONS,
-} from '@/utils/constants/actionNames';
 
 @Component({
     components: {
         ProjectSelectionIcon,
     },
 })
-export default class ProjectSelectionDropdown extends Vue {
+export default class ProjectDropdown extends Vue {
     private FIRST_PAGE = 1;
 
     /**
@@ -107,7 +104,7 @@ export default class ProjectSelectionDropdown extends Vue {
      * Closes dropdown.
      */
     public closeDropdown(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_PROJECTS);
+        this.$emit('close');
     }
 }
 </script>
@@ -120,62 +117,59 @@ export default class ProjectSelectionDropdown extends Vue {
         width: 0;
     }
 
-    .project-selection-choice-container {
+    .project-dropdown {
         position: absolute;
-        top: 65px;
+        left: -3px;
-        left: -5px;
+        top: 60px;
-        background-color: #fff;
-        z-index: 1120;
         border: 1px solid #c5cbdb;
         box-shadow: 0 8px 34px rgba(161, 173, 185, 0.41);
         border-radius: 6px;
-    }
 
-    .project-selection-overflow-container {
+        &__wrap {
-        position: relative;
+            width: auto;
-        min-width: 226px;
+            overflow-y: scroll;
-        width: auto;
+            height: auto;
-        overflow-y: scroll;
+            min-width: 195px;
-        height: auto;
+            max-height: 240px;
-        max-height: 240px;
+            background-color: #fff;
-        background-color: #fff;
+            border-radius: 6px;
-        font-family: 'font_regular', sans-serif;
+            font-family: 'font_regular', sans-serif;
-        border-radius: 6px;
 
-        &__project-choice {
+            &__choice {
-            display: flex;
+                display: flex;
-            align-items: center;
+                align-items: center;
-            justify-content: flex-start;
+                justify-content: flex-start;
-            padding: 0 25px;
+                padding: 0 25px;
 
-            &__selected,
+                &__selected,
-            &__unselected {
+                &__unselected {
-                margin: 12px 0;
+                    margin: 12px 0;
-                font-size: 14px;
+                    font-size: 14px;
-                line-height: 20px;
+                    line-height: 20px;
-                color: #7e8b9c;
+                    color: #7e8b9c;
-                word-break: break-all;
+                    word-break: break-all;
-            }
-
-            &__selected {
-                font-family: 'font_bold', sans-serif;
-                color: #494949;
-            }
-
-            &:hover {
-                background-color: #f2f2f6;
-
-                .project-selection-overflow-container__project-choice__unselected {
-                    color: #354049;
                 }
-            }
 
-            &__mark-container {
+                &__selected {
-                width: 10px;
+                    font-family: 'font_bold', sans-serif;
-                margin-right: 12px;
+                    color: #494949;
+                }
 
-                &__image {
+                &:hover {
-                    object-fit: cover;
+                    background-color: #f2f2f6;
+
+                    .project-dropdown__wrap__choice__unselected {
+                        color: #354049;
+                    }
+                }
+
+                &__mark-container {
+                    width: 10px;
+                    margin-right: 12px;
+
+                    &__image {
+                        object-fit: cover;
+                    }
                 }
             }
         }
@@ -184,11 +178,4 @@ export default class ProjectSelectionDropdown extends Vue {
     .arrow {
         padding-right: 25px;
     }
-
-    @media screen and (max-width: 1280px) {
-
-        .project-selection-choice-container {
-            top: 50px;
-        }
-    }
 </style>

web/satellite/src/components/header/projectSelection/ProjectSelection.vue

@@ -2,17 +2,16 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="project-selection-container" :class="{ default: !hasProjects }" id="projectDropdownButton">
+    <div class="project-selection" :class="{ default: !hasProjects }">
-        <p class="project-selection-container__no-projects-text" v-if="!hasProjects">You have no projects</p>
+        <p class="project-selection__no-projects-text" v-if="!hasProjects">You have no projects</p>
         <div
-            class="project-selection-toggle-container"
+            class="project-selection__toggle-container"
             :class="{ default: isOnboardingTour }"
-            @click="toggleSelection"
+            @click.stop="toggleSelection"
             v-if="hasProjects"
         >
-            <p class="project-selection-toggle-container__common" :class="{ default: isOnboardingTour }">Project:</p>
+            <h1 class="project-selection__toggle-container__name">{{name}}</h1>
-            <h1 class="project-selection-toggle-container__name">{{name}}</h1>
+            <div class="project-selection__toggle-container__expander-area" v-if="!isOnboardingTour">
-            <div class="project-selection-toggle-container__expander-area" v-if="!isOnboardingTour">
                 <ExpandIcon
                     v-if="!isDropdownShown"
                     alt="Arrow down (expand)"
@@ -22,8 +21,12 @@
                     alt="Arrow up (hide)"
                 />
             </div>
+            <ProjectDropdown
+                v-show="isDropdownShown"
+                @close="closeDropdown"
+                v-click-outside="closeDropdown"
+            />
         </div>
-        <ProjectSelectionDropdown v-if="isDropdownShown"/>
     </div>
 </template>
 
@@ -36,19 +39,19 @@ import HideIcon from '@/../static/images/common/BlueHide.svg';
 import { RouteConfig } from '@/router';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { Project } from '@/types/projects';
-import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 
-import ProjectSelectionDropdown from './ProjectSelectionDropdown.vue';
+import ProjectDropdown from './ProjectDropdown.vue';
 
 @Component({
     components: {
-        ProjectSelectionDropdown,
+        ProjectDropdown,
         ExpandIcon,
         HideIcon,
     },
 })
-export default class ProjectSelectionArea extends Vue {
+export default class ProjectSelection extends Vue {
     private isLoading: boolean = false;
+    public isDropdownShown: boolean = false;
 
     /**
      * Fetches projects related information and than toggles selection popup.
@@ -66,7 +69,7 @@ export default class ProjectSelectionArea extends Vue {
             this.isLoading = false;
         }
 
-        await this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_PROJECTS);
+        this.toggleDropdown();
         this.isLoading = false;
     }
 
@@ -79,13 +82,6 @@ export default class ProjectSelectionArea extends Vue {
         return selectedProject.id ? selectedProject.name : 'Choose project';
     }
 
-    /**
-     * Indicates if project selection dropdown should be rendered.
-     */
-    public get isDropdownShown(): boolean {
-        return this.$store.state.appStateModule.appState.isProjectsDropdownShown;
-    }
-
     /**
      * Indicates if user has projects.
      */
@@ -99,14 +95,28 @@ export default class ProjectSelectionArea extends Vue {
     public get isOnboardingTour(): boolean {
         return this.$route.name === RouteConfig.OnboardingTour.name;
     }
+
+    /**
+     * Toggles project dropdown visibility.
+     */
+    public toggleDropdown(): void {
+        this.isDropdownShown = !this.isDropdownShown;
+    }
+
+    /**
+     * Closes project dropdown.
+     */
+    public closeDropdown(): void {
+        this.isDropdownShown = false;
+    }
 }
 </script>
 
 <style scoped lang="scss">
-    .project-selection-container {
+    .project-selection {
-        position: relative;
         background-color: #fff;
         cursor: pointer;
+        margin-right: 20px;
 
         &__no-projects-text {
             font-family: 'font_medium', sans-serif;
@@ -116,42 +126,43 @@ export default class ProjectSelectionArea extends Vue {
             opacity: 0.7;
             cursor: default !important;
         }
-    }
 
-    .project-selection-toggle-container {
+        &__toggle-container {
-        display: flex;
+            position: relative;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-start;
-        width: 100%;
-        height: 50px;
-
-        &__common {
-            font-family: 'font_medium', sans-serif;
-            font-size: 16px;
-            line-height: 23px;
-            color: rgba(56, 75, 101, 0.4);
-            opacity: 0.7;
-            cursor: pointer;
-            margin-right: 5px;
-        }
-
-        &__name {
-            font-family: 'font_medium', sans-serif;
-            font-size: 16px;
-            line-height: 23px;
-            color: #354049;
-            transition: opacity 0.2s ease-in-out;
-            word-break: break-all;
-        }
-
-        &__expander-area {
-            margin-left: 12px;
             display: flex;
+            flex-direction: row;
             align-items: center;
-            justify-content: center;
+            justify-content: flex-start;
-            width: 28px;
+            width: 100%;
-            height: 28px;
+            height: 50px;
+
+            &__common {
+                font-family: 'font_medium', sans-serif;
+                font-size: 16px;
+                line-height: 23px;
+                color: rgba(56, 75, 101, 0.4);
+                opacity: 0.7;
+                cursor: pointer;
+                margin-right: 5px;
+            }
+
+            &__name {
+                font-family: 'font_medium', sans-serif;
+                font-size: 16px;
+                line-height: 23px;
+                color: #354049;
+                transition: opacity 0.2s ease-in-out;
+                word-break: break-all;
+            }
+
+            &__expander-area {
+                margin-left: 11px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 28px;
+                height: 28px;
+            }
         }
     }
 
@@ -161,17 +172,16 @@ export default class ProjectSelectionArea extends Vue {
 
     @media screen and (max-width: 1280px) {
 
-        .project-selection-container {
+        .project-selection {
             margin-right: 30px;
-            padding-right: 10px;
-        }
 
-        .project-selection-toggle-container {
+            &__toggle-container {
-            justify-content: space-between;
+                justify-content: space-between;
-            margin-left: 10px;
+                padding-left: 10px;
 
-            &__common {
+                &__common {
-                display: none;
+                    display: none;
+                }
             }
         }
     }

web/satellite/src/components/navigation/NavigationArea.vue

@@ -6,7 +6,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import ProjectSelectionArea from '@/components/header/projectSelection/ProjectSelectionArea.vue';
+import ProjectSelection from '@/components/header/projectSelection/ProjectSelection.vue';
 
 import ApiKeysIcon from '@/../static/images/navigation/apiKeys.svg';
 import DashboardIcon from '@/../static/images/navigation/dashboard.svg';
@@ -21,7 +21,7 @@ import { NavigationLink } from '@/types/navigation';
 
 @Component({
     components: {
-        ProjectSelectionArea,
+        ProjectSelection,
         LogoIcon,
         LogoTextIcon,
         DocsIcon,

web/satellite/src/components/navigation/navigationArea.html

@@ -7,8 +7,8 @@
             <LogoIcon class="navigation-area__logo__img"/>
             <LogoTextIcon class="navigation-area__logo__text"/>
         </router-link>
-        <ProjectSelectionArea class="project-selection-area"/>
         <p class="navigation-area__project-title">PROJECT</p>
+        <ProjectSelection class="project-selection"/>
         <router-link
             :aria-label="navItem.name"
             class="navigation-area__item-container"

web/satellite/src/components/navigation/navigationArea.scss

@@ -22,14 +22,12 @@ a {
 }
 
 .navigation-area {
-    position: relative;
     min-width: 280px;
     max-width: 280px;
     height: calc(100vh - 140px);
     overflow-y: scroll;
-    left: 0;
+    overflow-x: hidden;
     background-color: #fff;
-    flex: 1 1 auto;
     padding: 20px 0 120px 0;
     display: flex;
     flex-direction: column;
@@ -41,8 +39,8 @@ a {
         flex-direction: row;
         align-items: center;
         cursor: pointer;
-        margin-bottom: 60px;
         margin-left: 60px;
+        flex: 0 0 auto;
 
         &__img {
             width: 54px;
@@ -63,13 +61,21 @@ a {
         color: #505872;
         margin: 0 0 20px 65px;
         font-weight: 600;
+        flex: 0 0 auto;
+    }
+
+    &__project-title {
+        margin: 40px 0 15px 65px;
+        padding-top: 20px;
     }
 
     &__resources-title {
+        flex: 0 0 auto;
         margin: 35px 0 20px 65px;
     }
 
     &__item-container {
+        flex: 0 0 auto;
         height: 52px;
         padding-left: 60px;
         border-left: 3px solid transparent;
@@ -128,8 +134,8 @@ a {
     opacity: 0.6;
 }
 
-.project-selection-area {
+.project-selection {
-    display: none;
+    margin: 10px 0 0 65px;
 }
 
 @media screen and (max-width: 1280px) {
@@ -157,17 +163,14 @@ a {
         }
 
         &__project-title {
-            border-top: 1px solid rgba(169, 181, 193, 0.3);
+            margin-top: 0;
-            padding-top: 20px;
-            margin-top: 5px;
         }
 
         &__logo {
             display: none;
         }
 
-        .project-selection-area {
+        .project-selection {
-            display: block;
             margin-left: 35px;
         }
     }

web/satellite/src/components/project/ProjectDashboard.vue

@@ -66,7 +66,7 @@ export default class ProjectDashboard extends Vue {
 
 <style scoped lang="scss">
     .dashboard-area {
-        padding: 40px 30px 80px 30px;
+        padding: 40px 30px;
         font-family: 'font_regular', sans-serif;
 
         &__title-area {

web/satellite/src/store/modules/appState.ts

@@ -13,7 +13,6 @@ export const appStateModule = {
             fetchState: AppState.LOADING,
             isAddTeamMembersPopupShown: false,
             isNewProjectPopupShown: false,
-            isProjectsDropdownShown: false,
             isAccountDropdownShown: false,
             isDeleteProjectPopupShown: false,
             isDeleteAccountPopupShown: false,
@@ -44,11 +43,6 @@ export const appStateModule = {
             state.appState.isSaveApiKeyModalShown = !state.appState.isSaveApiKeyModalShown;
         },
 
-        // Mutation changing project dropdown visibility
-        [APP_STATE_MUTATIONS.TOGGLE_PROJECT_DROPDOWN](state: any): void {
-            state.appState.isProjectsDropdownShown = !state.appState.isProjectsDropdownShown;
-        },
-
         // Mutation changing account dropdown visibility
         [APP_STATE_MUTATIONS.TOGGLE_ACCOUNT_DROPDOWN](state: any): void {
             state.appState.isAccountDropdownShown = !state.appState.isAccountDropdownShown;
@@ -95,7 +89,6 @@ export const appStateModule = {
         // Mutation that closes each popup/dropdown
         [APP_STATE_MUTATIONS.CLOSE_ALL](state: any): void {
             state.appState.isAccountDropdownShown = false;
-            state.appState.isProjectsDropdownShown = false;
             state.appState.isSortProjectMembersByPopupShown = false;
         },
         [APP_STATE_MUTATIONS.CHANGE_STATE](state: any, newFetchState: AppState): void {
@@ -133,13 +126,6 @@ export const appStateModule = {
 
             commit(APP_STATE_MUTATIONS.TOGGLE_SAVE_API_KEY_MODAL);
         },
-        [APP_STATE_ACTIONS.TOGGLE_PROJECTS]: function ({commit, state}: any): void {
-            if (!state.appState.isProjectsDropdownShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_PROJECT_DROPDOWN);
-        },
         [APP_STATE_ACTIONS.TOGGLE_ACCOUNT]: function ({commit, state}: any): void {
             if (!state.appState.isAccountDropdownShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);

web/satellite/src/store/modules/payments.ts

@@ -153,8 +153,8 @@ export function makePaymentsModule(api: PaymentsApi): StoreModule<PaymentsState>
 
                 state.priceSummary = usageItemSummaries.reduce((accumulator, current) => accumulator + current);
             },
-            [SET_PAYWALL_ENABLED_STATUS](state: PaymentsState, paywallEnabledStatus: boolean): void {
+            [SET_PAYWALL_ENABLED_STATUS](state: PaymentsState, isPaywallEnabled: boolean): void {
-                state.isPaywallEnabled = paywallEnabledStatus;
+                state.isPaywallEnabled = isPaywallEnabled;
             },
             [CLEAR](state: PaymentsState) {
                 state.balance = new AccountBalance();
@@ -238,9 +238,9 @@ export function makePaymentsModule(api: PaymentsApi): StoreModule<PaymentsState>
                 commit(SET_PRICE_SUMMARY, usageAndCharges);
             },
             [GET_PAYWALL_ENABLED_STATUS]: async function({commit, rootGetters}: any): Promise<void> {
-                const paywallEnabledStatus: boolean = await api.getPaywallEnabledStatus(rootGetters.user.id);
+                const isPaywallEnabled: boolean = await api.getPaywallStatus(rootGetters.user.id);
 
-                commit(SET_PAYWALL_ENABLED_STATUS, paywallEnabledStatus);
+                commit(SET_PAYWALL_ENABLED_STATUS, isPaywallEnabled);
             },
         },
         getters: {

web/satellite/src/store/mutationConstants.ts

@@ -12,7 +12,6 @@ export const NOTIFICATION_MUTATIONS = {
 export const APP_STATE_MUTATIONS = {
     TOGGLE_ADD_TEAMMEMBER_POPUP: 'TOGGLE_ADD_TEAMMEMBER_POPUP',
     TOGGLE_NEW_PROJECT_POPUP: 'TOGGLE_NEW_PROJECT_POPUP',
-    TOGGLE_PROJECT_DROPDOWN: 'TOGGLE_PROJECT_DROPDOWN',
     TOGGLE_ACCOUNT_DROPDOWN: 'TOGGLE_ACCOUNT_DROPDOWN',
     TOGGLE_SAVE_API_KEY_MODAL: 'TOGGLE_SAVE_API_KEY_MODAL',
     TOGGLE_DELETE_PROJECT_DROPDOWN: 'TOGGLE_DELETE_PROJECT_DROPDOWN',

web/satellite/src/types/payments.ts

@@ -76,7 +76,7 @@ export interface PaymentsApi {
      * @param userId
      * @throws Error
     */
-    getPaywallEnabledStatus(userId: string): Promise<boolean>;
+    getPaywallStatus(userId: string): Promise<boolean>;
 }
 
 export class AccountBalance {

web/satellite/src/utils/constants/actionNames.ts

@@ -5,7 +5,6 @@ export const APP_STATE_ACTIONS = {
     TOGGLE_TEAM_MEMBERS: 'toggleAddTeamMembersPopup',
     TOGGLE_NEW_PROJ : 'toggleNewProjectPopup',
     TOGGLE_SAVE_API_KEY_MODAL: 'toggleSaveApiKeyModal',
-    TOGGLE_PROJECTS: 'toggleProjectsDropdown',
     TOGGLE_ACCOUNT: 'toggleAccountDropdown',
     TOGGLE_DEL_PROJ: 'toggleDeleteProjectPopup',
     TOGGLE_DEL_ACCOUNT: 'toggleDeleteAccountPopup',

web/satellite/src/views/DashboardArea.vue

@@ -8,11 +8,11 @@
         </div>
         <NoPaywallInfoBar v-if="isNoPaywallInfoBarShown && !isLoading"/>
         <div v-if="!isLoading" class="dashboard-container__wrap">
-            <NavigationArea class="regular-navigation"/>
+            <NavigationArea class="dashboard-container__wrap__regular-navigation"/>
             <div class="dashboard-container__wrap__column">
                 <DashboardHeader/>
-                <div class="dashboard-container__main-area" :class="{ extended: isNoPaywallInfoBarShown }">
+                <div class="dashboard-container__wrap__column__main-area">
-                    <div class="dashboard-container__main-area__bar-area">
+                    <div class="dashboard-container__wrap__column__main-area__bar-area">
                         <VInfoBar
                             v-if="isInfoBarShown"
                             :first-value="storageRemaining"
@@ -24,7 +24,7 @@
                             link-label="Request Limit Increase ->"
                         />
                     </div>
-                    <div class="dashboard-container__main-area__content">
+                    <div class="dashboard-container__wrap__column__main-area__content">
                         <router-view/>
                     </div>
                 </div>
@@ -277,55 +277,6 @@ export default class DashboardArea extends Vue {
 </script>
 
 <style scoped lang="scss">
-    .dashboard-container {
-        position: fixed;
-        max-width: 100%;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        background-color: #f5f6fa;
-        z-index: 10;
-
-        &__wrap {
-            display: flex;
-
-            &__column {
-                display: flex;
-                flex-direction: column;
-                width: 100%;
-            }
-        }
-
-        &__main-area {
-            position: relative;
-            width: 100%;
-            height: calc(100vh - 50px);
-            overflow-y: scroll;
-            display: flex;
-            flex-direction: column;
-
-            &__bar-area {
-                flex: 0 1 auto;
-            }
-
-            &__content {
-                flex: 1 1 auto;
-            }
-        }
-    }
-
-    .extended {
-        height: calc(100vh - 90px);
-    }
-
-    @media screen and (max-width: 1280px) {
-
-        .regular-navigation {
-            display: none;
-        }
-    }
-
     .loading-overlay {
         display: flex;
         justify-content: center;
@@ -334,8 +285,7 @@ export default class DashboardArea extends Vue {
         top: 0;
         left: 0;
         right: 0;
-        height: 100vh;
+        bottom: 0;
-        z-index: 100;
         background-color: rgba(134, 134, 148, 1);
         visibility: hidden;
         opacity: 0;
@@ -343,14 +293,60 @@ export default class DashboardArea extends Vue {
         -moz-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
         transition: all 0.5s linear;
-
-        .loading-image {
-            z-index: 200;
-        }
     }
 
     .loading-overlay.active {
         visibility: visible;
         opacity: 1;
     }
+
+    .dashboard-container {
+        position: fixed;
+        max-width: 100%;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #f5f6fa;
+        display: flex;
+        flex-direction: column;
+
+        &__wrap {
+            display: flex;
+            height: 100%;
+
+            &__column {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                height: 100%;
+
+                &__main-area {
+                    position: relative;
+                    width: 100%;
+                    height: calc(100vh - 50px);
+                    overflow-y: scroll;
+                    display: flex;
+                    flex-direction: column;
+
+                    &__bar-area {
+                        flex: 0 0 auto;
+                    }
+
+                    &__content {
+                        flex: 0 0 auto;
+                    }
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 1280px) {
+
+        .dashboard-container__wrap__regular-navigation {
+            display: none;
+        }
+    }
 </style>

web/satellite/static/resetPassword/resetPassword.css

@@ -212,34 +212,6 @@ input {
     z-index: -100;
 }
 
-.loading-overlay {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 100vh;
-    z-index: 100;
-    background-color: rgba(134, 134, 148, 0.7);
-    visibility: hidden;
-    opacity: 0;
-    -webkit-transition: all 0.5s linear;
-    -moz-transition: all 0.5s linear;
-    -o-transition: all 0.5s linear;
-    transition: all 0.5s linear;
-}
-
-.loading-overlay img {
-    z-index: 200;
-}
-
-.loading-overlay.active {
-    visibility: visible;
-    opacity: 1;
-}
-
 .image {
     position: fixed;
     right: 0;

web/satellite/tests/unit/components/header/ProjectDropdown.spec.ts

@@ -3,7 +3,7 @@
 
 import Vuex from 'vuex';
 
-import ProjectSelectionDropdown from '@/components/header/projectSelection/ProjectSelectionDropdown.vue';
+import ProjectDropdown from '@/components/header/projectSelection/ProjectDropdown.vue';
 
 import { makeProjectsModule, PROJECTS_MUTATIONS } from '@/store/modules/projects';
 import { Project } from '@/types/projects';
@@ -21,12 +21,12 @@ const project2 = new Project('testId2', 'testName2', '');
 
 const store = new Vuex.Store({ modules: { projectsModule }});
 
-describe('ProjectSelectionDropdown', () => {
+describe('ProjectDropdown', () => {
     it('renders correctly', () => {
         store.commit(PROJECTS_MUTATIONS.SET_PROJECTS, [project1, project2]);
         store.commit(PROJECTS_MUTATIONS.SELECT_PROJECT, project1.id);
 
-        const wrapper = shallowMount(ProjectSelectionDropdown, {
+        const wrapper = shallowMount(ProjectDropdown, {
             store,
             localVue,
         });

web/satellite/tests/unit/components/header/__snapshots__/ProjectDropdown.spec.ts.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProjectDropdown renders correctly 1`] = `
+<div class="project-dropdown">
+  <div class="project-dropdown__wrap">
+    <div class="project-dropdown__wrap__choice">
+      <div class="project-dropdown__wrap__choice__mark-container">
+        <projectselectionicon-stub class="project-dropdown__wrap__choice__mark-container__image"></projectselectionicon-stub>
+      </div>
+      <p class="project-dropdown__wrap__choice__selected">
+        testName1
+      </p>
+    </div>
+    <div class="project-dropdown__wrap__choice">
+      <p class="project-dropdown__wrap__choice__unselected">testName2</p>
+    </div>
+  </div>
+</div>
+`;

web/satellite/tests/unit/components/header/__snapshots__/ProjectSelectionDropdown.spec.ts.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ProjectSelectionDropdown renders correctly 1`] = `
-<div id="projectDropdown" class="project-selection-choice-container">
-  <div class="project-selection-overflow-container">
-    <div class="project-selection-overflow-container__project-choice">
-      <div class="project-selection-overflow-container__project-choice__mark-container">
-        <projectselectionicon-stub class="project-selection-overflow-container__project-choice__mark-container__image"></projectselectionicon-stub>
-      </div>
-      <p class="project-selection-overflow-container__project-choice__selected">
-        testName1
-      </p>
-    </div>
-    <div class="project-selection-overflow-container__project-choice">
-      <p class="project-selection-overflow-container__project-choice__unselected">testName2</p>
-    </div>
-  </div>
-</div>
-`;

web/satellite/tests/unit/components/navigation/__snapshots__/navigationArea.spec.ts.snap

@@ -7,8 +7,8 @@ exports[`NavigationArea snapshot not changed with project 1`] = `
       <logoicon-stub class="navigation-area__logo__img"></logoicon-stub>
       <logotexticon-stub class="navigation-area__logo__text"></logotexticon-stub>
     </router-link-stub>
-    <projectselectionarea-stub class="project-selection-area"></projectselectionarea-stub>
     <p class="navigation-area__project-title">PROJECT</p>
+    <projectselection-stub class="project-selection"></projectselection-stub>
     <router-link-stub to="/project-dashboard" tag="a" event="click" aria-label="Dashboard" class="navigation-area__item-container">
       <div class="navigation-area__item-container__link-container">
         <anonymous-stub></anonymous-stub>
@@ -61,8 +61,8 @@ exports[`NavigationArea snapshot not changed without project 1`] = `
       <logoicon-stub class="navigation-area__logo__img"></logoicon-stub>
       <logotexticon-stub class="navigation-area__logo__text"></logotexticon-stub>
     </router-link-stub>
-    <projectselectionarea-stub class="project-selection-area"></projectselectionarea-stub>
     <p class="navigation-area__project-title">PROJECT</p>
+    <projectselection-stub class="project-selection"></projectselection-stub>
     <router-link-stub to="/project-dashboard" tag="a" event="click" aria-label="Dashboard" class="navigation-area__item-container disabled">
       <div class="navigation-area__item-container__link-container">
         <anonymous-stub></anonymous-stub>

web/satellite/tests/unit/mock/api/payments.ts

@@ -50,7 +50,7 @@ export class PaymentsMock implements PaymentsApi {
         return Promise.resolve(new TokenDeposit(amount, 'testAddress', 'testLink'));
     }
 
-    getPaywallEnabledStatus(userId: string): Promise<boolean> {
+    getPaywallStatus(userId: string): Promise<boolean> {
         throw new Error('Method not implemented');
     }
 }

web/satellite/tests/unit/views/__snapshots__/DashboardArea.spec.ts.snap

@@ -5,14 +5,14 @@ exports[`Dashboard renders correctly when data is loaded 1`] = `
   <!---->
   <!---->
   <div class="dashboard-container__wrap">
-    <navigationarea-stub class="regular-navigation"></navigationarea-stub>
+    <navigationarea-stub class="dashboard-container__wrap__regular-navigation"></navigationarea-stub>
     <div class="dashboard-container__wrap__column">
       <dashboardheader-stub></dashboardheader-stub>
-      <div class="dashboard-container__main-area">
+      <div class="dashboard-container__wrap__column__main-area">
-        <div class="dashboard-container__main-area__bar-area">
+        <div class="dashboard-container__wrap__column__main-area__bar-area">
           <!---->
         </div>
-        <div class="dashboard-container__main-area__content">
+        <div class="dashboard-container__wrap__column__main-area__content">
           <router-view-stub name="default"></router-view-stub>
         </div>
       </div>