From 9414b8eb48e856b077cc8cb35e30801daa5bbf43 Mon Sep 17 00:00:00 2001
From: NikolaiYurchenko <nickolai.yurchenko@gmail.com>
Date: Wed, 22 Jan 2020 16:10:35 +0200
Subject: [PATCH] web/satellite: redundant scrolls fixed

Change-Id: I0677c3bd9ca13aaf788261af4edbc4921a3aa633
---
 .../src/components/account/AccountArea.vue        |  2 +-
 .../components/account/referral/ReferralArea.vue  | 10 +++++++++-
 .../src/components/apiKeys/ApiKeysArea.vue        | 15 ++++++++++++++-
 .../src/components/buckets/NoBucketsArea.vue      |  2 +-
 .../tests/unit/apiKeys/ApiKeysArea.spec.ts        |  6 +++++-
 .../__snapshots__/ApiKeysArea.spec.ts.snap        | 10 +++++-----
 6 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/web/satellite/src/components/account/AccountArea.vue b/web/satellite/src/components/account/AccountArea.vue
index 907f02d4f..ced1a62eb 100644
--- a/web/satellite/src/components/account/AccountArea.vue
+++ b/web/satellite/src/components/account/AccountArea.vue
@@ -32,7 +32,7 @@ export default class AccountArea extends Vue {}
 
     .account-area-container {
         padding: 0 65px;
-        height: 100%;
+        height: auto;
 
         &__navigation {
             position: absolute;
diff --git a/web/satellite/src/components/account/referral/ReferralArea.vue b/web/satellite/src/components/account/referral/ReferralArea.vue
index 32eff871b..5d3cf96a4 100644
--- a/web/satellite/src/components/account/referral/ReferralArea.vue
+++ b/web/satellite/src/components/account/referral/ReferralArea.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="referral-container">
+    <div class="referral-container" :class="{collapsed: isBannerShown}">
         <div class="referral-container__title-container">
             <p class="referral-container__title-container__text">Refer A Friend And Help Build The</p>
             <p class="referral-container__title-container__text">Decentralized Future</p>
@@ -46,6 +46,10 @@ export default class ReferralArea extends Vue {
         this.$notify.success('Link saved to clipboard');
     }
 
+    public get isBannerShown(): boolean {
+        return this.$store.state.paymentsModule.creditCards.length === 0;
+    }
+
     public get isAvailableLinks(): boolean {
         return this.$store.state.referralModule.referralTokens.length !== 0;
     }
@@ -157,4 +161,8 @@ export default class ReferralArea extends Vue {
             }
         }
     }
+
+    .collapsed {
+        height: auto !important;
+    }
 </style>
diff --git a/web/satellite/src/components/apiKeys/ApiKeysArea.vue b/web/satellite/src/components/apiKeys/ApiKeysArea.vue
index 72946c869..3290ba7b9 100644
--- a/web/satellite/src/components/apiKeys/ApiKeysArea.vue
+++ b/web/satellite/src/components/apiKeys/ApiKeysArea.vue
@@ -3,7 +3,7 @@
 
 <template>
     <div class="api-keys-area">
-        <h1 class="api-keys-area__title">API Keys</h1>
+        <h1 class="api-keys-area__title" v-if="isTitleShown">API Keys</h1>
         <div class="api-keys-area__container">
             <ApiKeysCreationPopup
                 @closePopup="closeNewApiKeyPopup"
@@ -93,6 +93,7 @@
                 <EmptySearchResultIcon class="empty-search-result-area__image"/>
             </div>
             <EmptyState
+                :class="{collapsed: isBannerShown}"
                 :on-button-click="onCreateApiKeyClick"
                 v-if="isEmptyStateShown"
                 main-title="Let's create your first API Key"
@@ -268,6 +269,14 @@ export default class ApiKeysArea extends Vue {
         return this.$store.getters.apiKeys.length === 0;
     }
 
+    public get isBannerShown(): boolean {
+        return this.$store.state.paymentsModule.creditCards.length === 0;
+    }
+
+    public get isTitleShown(): boolean {
+        return !this.isBannerShown && this.isEmpty;
+    }
+
     public get hasSearchQuery(): boolean {
         return this.$store.state.apiKeysModule.cursor.search;
     }
@@ -481,6 +490,10 @@ export default class ApiKeysArea extends Vue {
         }
     }
 
+    .collapsed {
+        margin-top: 0 !important;
+    }
+
     ::-webkit-scrollbar,
     ::-webkit-scrollbar-track,
     ::-webkit-scrollbar-thumb {
diff --git a/web/satellite/src/components/buckets/NoBucketsArea.vue b/web/satellite/src/components/buckets/NoBucketsArea.vue
index 688dc2892..6eda6f9ba 100644
--- a/web/satellite/src/components/buckets/NoBucketsArea.vue
+++ b/web/satellite/src/components/buckets/NoBucketsArea.vue
@@ -83,7 +83,7 @@ export default class NoBucketArea extends Vue {}
     }
 
     .no-buckets-area {
-        padding: 40px 180px 120px 180px;
+        padding: 40px 180px 0 180px;
         font-family: 'font_regular', sans-serif;
 
         &__header {
diff --git a/web/satellite/tests/unit/apiKeys/ApiKeysArea.spec.ts b/web/satellite/tests/unit/apiKeys/ApiKeysArea.spec.ts
index 3e73842ac..93a49572f 100644
--- a/web/satellite/tests/unit/apiKeys/ApiKeysArea.spec.ts
+++ b/web/satellite/tests/unit/apiKeys/ApiKeysArea.spec.ts
@@ -5,8 +5,10 @@ import Vuex from 'vuex';
 
 import ApiKeysArea from '@/components/apiKeys/ApiKeysArea.vue';
 
+import { PaymentsHttpApi } from '@/api/payments';
 import { API_KEYS_MUTATIONS, makeApiKeysModule } from '@/store/modules/apiKeys';
 import { makeNotificationsModule } from '@/store/modules/notifications';
+import { makePaymentsModule } from '@/store/modules/payments';
 import { makeProjectsModule } from '@/store/modules/projects';
 import { ApiKey, ApiKeysPage } from '@/types/apiKeys';
 import { Project } from '@/types/projects';
@@ -28,9 +30,11 @@ const apiKeysApi = new ApiKeysMock();
 const apiKeysModule = makeApiKeysModule(apiKeysApi);
 const projectsApi = new ProjectsApiMock();
 const projectsModule = makeProjectsModule(projectsApi);
+const paymentsApi = new PaymentsHttpApi();
+const paymentsModule = makePaymentsModule(paymentsApi);
 const notificationsModule = makeNotificationsModule();
 const { CLEAR, SET_PAGE } = API_KEYS_MUTATIONS;
-const store = new Vuex.Store({ modules: { projectsModule, apiKeysModule, notificationsModule }});
+const store = new Vuex.Store({ modules: { projectsModule, apiKeysModule, paymentsModule, notificationsModule }});
 
 describe('ApiKeysArea', () => {
     const project = new Project('id', 'projectName', 'projectDescription', 'test', 'testOwnerId', true);
diff --git a/web/satellite/tests/unit/apiKeys/__snapshots__/ApiKeysArea.spec.ts.snap b/web/satellite/tests/unit/apiKeys/__snapshots__/ApiKeysArea.spec.ts.snap
index a28d9c5c4..e0bda1855 100644
--- a/web/satellite/tests/unit/apiKeys/__snapshots__/ApiKeysArea.spec.ts.snap
+++ b/web/satellite/tests/unit/apiKeys/__snapshots__/ApiKeysArea.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`ApiKeysArea renders correctly 1`] = `
 <div class="api-keys-area">
-  <h1 class="api-keys-area__title">API Keys</h1>
+  <!---->
   <div class="api-keys-area__container">
     <apikeyscreationpopup-stub></apikeyscreationpopup-stub>
     <apikeyscopypopup-stub apikeysecret=""></apikeyscopypopup-stub>
@@ -31,14 +31,14 @@ exports[`ApiKeysArea renders correctly 1`] = `
     <path d=&quot;M141.606 146.546H143.707C145.522 146.546 147.051 144.922 147.051 143.011C147.051 141.005 145.618 139.477 143.707 139.477H141.606C139.791 139.477 138.262 141.101 138.262 143.011C138.358 145.017 139.791 146.546 141.606 146.546Z&quot; fill=&quot;#8F96AD&quot;/>
     <path d=&quot;M154.216 146.546H156.317C158.132 146.546 159.661 144.922 159.661 143.011C159.661 141.005 158.228 139.477 156.317 139.477H154.216C152.401 139.477 150.872 141.101 150.872 143.011C150.968 145.017 152.401 146.546 154.216 146.546Z&quot; fill=&quot;#8F96AD&quot;/>
     <path d=&quot;M126.229 158.861C125.787 158.861 125.433 158.861 125.079 158.949C124.372 159.037 123.665 158.598 123.4 157.983C115.091 142.97 99.0028 132.786 80.4398 132.786C63.6447 132.786 48.7943 141.127 40.0431 153.857C39.6011 154.471 38.8056 154.735 38.0984 154.647C35.8885 154.208 33.5903 153.944 31.292 153.944C13.9665 153.857 0 167.553 0 184.585C0 184.585 0 184.585 0 184.672C0 185.638 0.795558 186.428 1.8563 186.428H150.449C151.421 186.428 152.305 185.638 152.305 184.672V184.585C152.305 170.362 140.637 158.861 126.229 158.861Z&quot; fill=&quot;#B0B6C9&quot;/>
-    </svg>" isbuttonshown="true" onbuttonclick="function () { [native code] }" buttonlabel="Create an API Key"></emptystate-stub>
+    </svg>" isbuttonshown="true" onbuttonclick="function () { [native code] }" buttonlabel="Create an API Key" class="collapsed"></emptystate-stub>
   </div>
 </div>
 `;
 
 exports[`ApiKeysArea renders empty screen with add key prompt 1`] = `
 <div class="api-keys-area">
-  <h1 class="api-keys-area__title">API Keys</h1>
+  <!---->
   <div class="api-keys-area__container">
     <apikeyscreationpopup-stub></apikeyscreationpopup-stub>
     <apikeyscopypopup-stub apikeysecret=""></apikeyscopypopup-stub>
@@ -70,7 +70,7 @@ exports[`ApiKeysArea renders empty screen with add key prompt 1`] = `
 
 exports[`ApiKeysArea renders empty search state correctly 1`] = `
 <div class="api-keys-area">
-  <h1 class="api-keys-area__title">API Keys</h1>
+  <!---->
   <div class="api-keys-area__container">
     <apikeyscreationpopup-stub></apikeyscreationpopup-stub>
     <apikeyscopypopup-stub apikeysecret=""></apikeyscopypopup-stub>
@@ -99,7 +99,7 @@ exports[`ApiKeysArea renders empty search state correctly 1`] = `
     <path d=&quot;M141.606 146.546H143.707C145.522 146.546 147.051 144.922 147.051 143.011C147.051 141.005 145.618 139.477 143.707 139.477H141.606C139.791 139.477 138.262 141.101 138.262 143.011C138.358 145.017 139.791 146.546 141.606 146.546Z&quot; fill=&quot;#8F96AD&quot;/>
     <path d=&quot;M154.216 146.546H156.317C158.132 146.546 159.661 144.922 159.661 143.011C159.661 141.005 158.228 139.477 156.317 139.477H154.216C152.401 139.477 150.872 141.101 150.872 143.011C150.968 145.017 152.401 146.546 154.216 146.546Z&quot; fill=&quot;#8F96AD&quot;/>
     <path d=&quot;M126.229 158.861C125.787 158.861 125.433 158.861 125.079 158.949C124.372 159.037 123.665 158.598 123.4 157.983C115.091 142.97 99.0028 132.786 80.4398 132.786C63.6447 132.786 48.7943 141.127 40.0431 153.857C39.6011 154.471 38.8056 154.735 38.0984 154.647C35.8885 154.208 33.5903 153.944 31.292 153.944C13.9665 153.857 0 167.553 0 184.585C0 184.585 0 184.585 0 184.672C0 185.638 0.795558 186.428 1.8563 186.428H150.449C151.421 186.428 152.305 185.638 152.305 184.672V184.585C152.305 170.362 140.637 158.861 126.229 158.861Z&quot; fill=&quot;#B0B6C9&quot;/>
-    </svg>" isbuttonshown="true" onbuttonclick="function () { [native code] }" buttonlabel="Create an API Key"></emptystate-stub>
+    </svg>" isbuttonshown="true" onbuttonclick="function () { [native code] }" buttonlabel="Create an API Key" class="collapsed"></emptystate-stub>
   </div>
 </div>
 `;