From 917e4b81d3e48c478db195e44bbca5bef04f5345 Mon Sep 17 00:00:00 2001
From: Vitalii Shpital <takur12345@gmail.com>
Date: Tue, 27 Apr 2021 15:21:13 +0300
Subject: [PATCH] web/satellite: regular header reworked

WHAT:
removed unnecessary templates splitting
fixed resources dropdown margins
fixes close navigation button responsiveness
aligned logo
added loader for projects dropdown and removed redundant request on dropdown closing
added satellite name to header's right side

WHY:
bug fixes/better user experience

Change-Id: I7ed30f882a1f5484efbf3e0e21ee5d637ef83bf2
---
 web/satellite/.gitignore                      |   6 +
 .../src/components/common/VLoader.vue         |  39 ++++
 .../src/components/header/HeaderArea.vue      | 185 +++++++++++++++++-
 .../src/components/header/headerArea.html     |  31 ---
 .../src/components/header/headerArea.scss     | 102 ----------
 .../projectsDropdown/ProjectDropdown.vue      |  24 ++-
 .../projectsDropdown/ProjectSelection.vue     |   9 +-
 .../resourcesDropdown/ResourcesDropdown.vue   |  76 ++++++-
 .../resourcesDropdown/resourcesDropdown.html  |  35 ----
 .../resourcesDropdown/resourcesDropdown.scss  |  44 -----
 .../src/components/objects/BucketsView.vue    |  27 +--
 .../src/components/objects/WarningView.vue    |   1 -
 .../static/images/header/checkmark.svg        |   4 +
 13 files changed, 341 insertions(+), 242 deletions(-)
 create mode 100644 web/satellite/src/components/common/VLoader.vue
 delete mode 100644 web/satellite/src/components/header/headerArea.html
 delete mode 100644 web/satellite/src/components/header/headerArea.scss
 delete mode 100644 web/satellite/src/components/header/resourcesDropdown/resourcesDropdown.html
 delete mode 100644 web/satellite/src/components/header/resourcesDropdown/resourcesDropdown.scss
 create mode 100644 web/satellite/static/images/header/checkmark.svg

diff --git a/web/satellite/.gitignore b/web/satellite/.gitignore
index f17f073f5..f95433400 100644
--- a/web/satellite/.gitignore
+++ b/web/satellite/.gitignore
@@ -4,6 +4,12 @@ dist
 coverage
 temp
 
+# wasm related files
+wasm_exec.js
+wasm_exec.js.br
+*.wasm
+*.wasm.br
+
 # local env files
 .env.local
 .env.*.local
diff --git a/web/satellite/src/components/common/VLoader.vue b/web/satellite/src/components/common/VLoader.vue
new file mode 100644
index 000000000..73a59a899
--- /dev/null
+++ b/web/satellite/src/components/common/VLoader.vue
@@ -0,0 +1,39 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div :style="style" class="loader"/>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class VLoader extends Vue {
+    @Prop({ default: 'inherit' })
+    private readonly width: string;
+    @Prop({ default: 'inherit' })
+    private readonly height: string;
+
+    /**
+     * Returns loader's width and height from props.
+     */
+    public get style(): Object {
+        return { width: this.width, height: this.height };
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .loader {
+        border: 16px solid #f3f3f3;
+        border-top: 16px solid #3498db;
+        border-radius: 50%;
+        animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+</style>
diff --git a/web/satellite/src/components/header/HeaderArea.vue b/web/satellite/src/components/header/HeaderArea.vue
index a81c85e5c..37d2de729 100644
--- a/web/satellite/src/components/header/HeaderArea.vue
+++ b/web/satellite/src/components/header/HeaderArea.vue
@@ -1,7 +1,44 @@
-// Copyright (C) 2019 Storj Labs, Inc.
+// Copyright (C) 2021 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-<template src="./headerArea.html"></template>
+<template>
+    <div class="header-container">
+        <div class="header-container__left-area">
+            <div class="header-container__left-area__logo-area">
+                <NavigationMenuIcon
+                    class="header-container__left-area__logo-area__menu-button"
+                    v-if="!isNavigationVisible && !isOnboardingTour"
+                    @click.stop="toggleNavigationVisibility"
+                />
+                <div class="header-container__left-area__logo-area__close-button" v-if="isNavigationVisible" @click.stop="toggleNavigationVisibility">
+                    <NavigationCloseIcon/>
+                    <p class="header-container__left-area__logo-area__close-button__title">Close</p>
+                </div>
+                <LogoIcon
+                    class="logo"
+                    @click.stop="onLogoClick"
+                />
+            </div>
+            <ProjectSelection class="project-selection"/>
+            <ResourcesSelection class="resources-selection"/>
+            <SettingsSelection class="settings-selection"/>
+        </div>
+        <div class="header-container__right-area">
+            <div class="header-container__right-area__satellite-area">
+                <div class="header-container__right-area__satellite-area__checkmark">
+                    <CheckmarkIcon/>
+                </div>
+                <p class="header-container__right-area__satellite-area__name">{{ satelliteName }}</p>
+            </div>
+            <AccountButton class="header-container__right-area__account-button"/>
+        </div>
+        <NavigationArea
+            class="adapted-navigation"
+            v-if="isNavigationVisible"
+        />
+        <div class="navigation-blur" v-if="isNavigationVisible" @click.self.stop="toggleNavigationVisibility"/>
+    </div>
+</template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
@@ -12,6 +49,7 @@ import SettingsSelection from '@/components/header/settingsDropdown/SettingsSele
 import NavigationArea from '@/components/navigation/NavigationArea.vue';
 
 import LogoIcon from '@/../static/images/dcs-logo.svg';
+import CheckmarkIcon from '@/../static/images/header/checkmark.svg';
 import NavigationCloseIcon from '@/../static/images/header/navigationClose.svg';
 import NavigationMenuIcon from '@/../static/images/header/navigationMenu.svg';
 
@@ -26,6 +64,7 @@ import AccountButton from './accountDropdown/AccountButton.vue';
         NavigationMenuIcon,
         NavigationCloseIcon,
         LogoIcon,
+        CheckmarkIcon,
         ProjectSelection,
         ResourcesSelection,
         SettingsSelection,
@@ -57,7 +96,147 @@ export default class HeaderArea extends Vue {
     public get isOnboardingTour(): boolean {
         return this.$route.path.includes(RouteConfig.OnboardingTour.path);
     }
+
+    /**
+     * Returns satellite name from config.
+     */
+    public get satelliteName(): string {
+        return this.$store.state.appStateModule.satelliteName;
+    }
 }
 </script>
 
-<style src="./headerArea.scss" scoped lang="scss"></style>
+<style scoped lang="scss">
+    .header-container {
+        font-family: 'font_regular', sans-serif;
+        min-height: 62px;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 30px 0 10px;
+        position: relative;
+
+        &__left-area {
+            display: flex;
+            align-items: center;
+
+            &__logo-area {
+                width: 220px;
+                margin-right: 20px;
+
+                &__menu-button {
+                    display: none;
+                }
+
+                &__close-button {
+                    display: flex;
+                    align-items: center;
+                    cursor: pointer;
+
+                    &__title {
+                        margin-left: 13px;
+                        font-size: 16px;
+                        line-height: 23px;
+                        color: #a9b5c1;
+                    }
+                }
+            }
+        }
+
+        &__right-area {
+            display: flex;
+            align-items: center;
+
+            &__satellite-area {
+                height: 36px;
+                background: #f6f6fa;
+                border-radius: 58px;
+                display: flex;
+                align-items: center;
+                padding: 0 10px 0 5px;
+                margin-right: 20px;
+
+                &__checkmark {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 22px;
+                    height: 22px;
+                    background: #fff;
+                    border-radius: 11px;
+                }
+
+                &__name {
+                    font-weight: 500;
+                    font-size: 14px;
+                    line-height: 18px;
+                    color: #000;
+                }
+            }
+        }
+    }
+
+    .logo {
+        cursor: pointer;
+    }
+
+    .adapted-navigation {
+        position: absolute;
+        top: 62px;
+        left: 0;
+        z-index: 100;
+        height: 100vh;
+        background: #e6e9ef;
+    }
+
+    .navigation-blur {
+        height: 100vh;
+        width: 100%;
+        position: absolute;
+        top: 62px;
+        left: 220px;
+        z-index: 100;
+        background: rgba(134, 134, 148, 0.4);
+    }
+
+    .project-selection,
+    .resources-selection {
+        margin-right: 35px;
+    }
+
+    @media screen and (min-width: 1281px) {
+
+        .adapted-navigation,
+        .navigation-blur,
+        .header-container__left-area__logo-area__close-button {
+            display: none;
+        }
+    }
+
+    @media screen and (max-width: 1280px) {
+
+        .header-container {
+            padding: 0 40px;
+
+            &__left-area {
+
+                &__logo-area {
+
+                    &__menu-button {
+                        display: block;
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+
+        .logo {
+            display: none;
+        }
+
+        /deep/ .edit-project {
+            margin-left: 0;
+        }
+    }
+</style>
diff --git a/web/satellite/src/components/header/headerArea.html b/web/satellite/src/components/header/headerArea.html
deleted file mode 100644
index 079871c0d..000000000
--- a/web/satellite/src/components/header/headerArea.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--Copyright (C) 2019 Storj Labs, Inc.-->
-<!--See LICENSE for copying information.-->
-
-<div class="header-container">
-    <div class="header-container__left-area">
-        <div class="header-container__left-area__logo-area">
-            <NavigationMenuIcon
-                class="header-container__left-area__logo-area__menu-button"
-                v-if="!isNavigationVisible && !isOnboardingTour"
-                @click.stop="toggleNavigationVisibility"
-            />
-            <div class="header-container__left-area__logo-area__close-button" v-if="isNavigationVisible" @click.stop="toggleNavigationVisibility">
-                <NavigationCloseIcon/>
-                <p class="header-container__left-area__logo-area__close-button__title">Close</p>
-            </div>
-            <LogoIcon
-                class="logo"
-                @click.stop="onLogoClick"
-            />
-        </div>
-        <ProjectSelection class="project-selection"/>
-        <ResourcesSelection class="resources-selection"/>
-        <SettingsSelection class="settings-selection"/>
-    </div>
-    <AccountButton class="header-container__account-button"/>
-    <NavigationArea
-        class="adapted-navigation"
-        v-if="isNavigationVisible"
-    />
-    <div class="navigation-blur" v-if="isNavigationVisible" @click.self.stop="toggleNavigationVisibility"></div>
-</div>
diff --git a/web/satellite/src/components/header/headerArea.scss b/web/satellite/src/components/header/headerArea.scss
deleted file mode 100644
index 3521fe9c8..000000000
--- a/web/satellite/src/components/header/headerArea.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-// Copyright (C) 2019 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-.header-container {
-    font-family: 'font_regular', sans-serif;
-    min-height: 62px;
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 30px;
-    position: relative;
-
-    &__left-area {
-        display: flex;
-        align-items: center;
-
-        &__logo-area {
-            width: 220px;
-
-            &__menu-button {
-                display: none;
-            }
-
-            &__close-button {
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-
-                &__title {
-                    margin-left: 13px;
-                    font-size: 16px;
-                    line-height: 23px;
-                    color: #a9b5c1;
-                }
-            }
-        }
-    }
-}
-
-.logo {
-    cursor: pointer;
-}
-
-.adapted-navigation {
-    position: absolute;
-    top: 62px;
-    left: 0;
-    z-index: 100;
-    height: 100vh;
-    background: #e6e9ef;
-}
-
-.navigation-blur {
-    height: 100vh;
-    width: 100%;
-    position: absolute;
-    top: 62px;
-    left: 220px;
-    z-index: 100;
-    background: rgba(134, 134, 148, 0.4);
-}
-
-.project-selection,
-.resources-selection {
-    margin-right: 35px;
-}
-
-@media screen and (min-width: 1281px) {
-
-    .adapted-navigation,
-    .navigation-blur,
-    .header-container__left-area__close-button {
-        display: none;
-    }
-}
-
-@media screen and (max-width: 1280px) {
-
-    .header-container {
-        padding: 0 40px;
-
-        &__left-area {
-
-            &__logo-area {
-
-                &__menu-button {
-                    display: block;
-                    cursor: pointer;
-                }
-            }
-        }
-    }
-
-    .logo {
-        display: none;
-    }
-
-    /deep/ .edit-project {
-        margin-left: 0;
-    }
-}
diff --git a/web/satellite/src/components/header/projectsDropdown/ProjectDropdown.vue b/web/satellite/src/components/header/projectsDropdown/ProjectDropdown.vue
index 0b8710be8..25783a18c 100644
--- a/web/satellite/src/components/header/projectsDropdown/ProjectDropdown.vue
+++ b/web/satellite/src/components/header/projectsDropdown/ProjectDropdown.vue
@@ -3,7 +3,13 @@
 
 <template>
     <div class="project-dropdown">
-        <div class="project-dropdown__wrap">
+        <div class="project-dropdown__loader-container" v-if="isLoading">
+            <VLoader
+                width="30px"
+                height="30px"
+            />
+        </div>
+        <div class="project-dropdown__wrap" v-else>
             <div class="project-dropdown__wrap__choice" @click.prevent.stop="closeDropdown">
                 <div class="project-dropdown__wrap__choice__mark-container">
                     <SelectionIcon
@@ -34,7 +40,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+import VLoader from '@/components/common/VLoader.vue';
 
 import SelectionIcon from '@/../static/images/header/selection.svg';
 
@@ -51,9 +59,13 @@ import { LocalData } from '@/utils/localData';
 @Component({
     components: {
         SelectionIcon,
+        VLoader,
     },
 })
 export default class ProjectDropdown extends Vue {
+    @Prop({ default: false })
+    public readonly isLoading: boolean;
+
     private FIRST_PAGE = 1;
 
     /**
@@ -137,6 +149,14 @@ export default class ProjectDropdown extends Vue {
         border-radius: 6px;
         background-color: #fff;
         padding-top: 6px;
+        min-width: 300px;
+
+        &__loader-container {
+            margin: 10px 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
 
         &__wrap {
             overflow-y: scroll;
diff --git a/web/satellite/src/components/header/projectsDropdown/ProjectSelection.vue b/web/satellite/src/components/header/projectsDropdown/ProjectSelection.vue
index d146b95e8..463a6d990 100644
--- a/web/satellite/src/components/header/projectsDropdown/ProjectSelection.vue
+++ b/web/satellite/src/components/header/projectsDropdown/ProjectSelection.vue
@@ -15,6 +15,7 @@
             />
             <ProjectDropdown
                 v-show="isDropdownShown"
+                :is-loading="isLoading"
                 @close="closeDropdown"
                 v-click-outside="closeDropdown"
             />
@@ -74,7 +75,11 @@ export default class ProjectSelection extends Vue {
      * Fetches projects related information and than toggles selection popup.
      */
     public async toggleSelection(): Promise<void> {
-        if (this.isLoading || this.isOnboardingTour) return;
+        if (this.isOnboardingTour) return;
+
+        this.toggleDropdown();
+
+        if (this.isLoading || !this.isDropdownShown) return;
 
         this.isLoading = true;
 
@@ -83,10 +88,8 @@ export default class ProjectSelection extends Vue {
             await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, this.$store.getters.selectedProject.id);
         } catch (error) {
             await this.$notify.error(error.message);
-            this.isLoading = false;
         }
 
-        this.toggleDropdown();
         this.isLoading = false;
     }
 
diff --git a/web/satellite/src/components/header/resourcesDropdown/ResourcesDropdown.vue b/web/satellite/src/components/header/resourcesDropdown/ResourcesDropdown.vue
index eb03697d2..b9348844c 100644
--- a/web/satellite/src/components/header/resourcesDropdown/ResourcesDropdown.vue
+++ b/web/satellite/src/components/header/resourcesDropdown/ResourcesDropdown.vue
@@ -1,7 +1,37 @@
 // Copyright (C) 2020 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-<template src="./resourcesDropdown.html"></template>
+<template>
+    <div class="resources-dropdown">
+        <a
+            class="resources-dropdown__item-container"
+            href="https://docs.storj.io/"
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            <DocsIcon class="resources-dropdown__item-container__image"/>
+            <p class="resources-dropdown__item-container__title">Docs</p>
+        </a>
+        <a
+            class="resources-dropdown__item-container"
+            href="https://forum.storj.io/"
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            <CommunityIcon class="resources-dropdown__item-container__image"/>
+            <p class="resources-dropdown__item-container__title">Community</p>
+        </a>
+        <a
+            class="resources-dropdown__item-container"
+            href="https://supportdcs.storj.io/hc/en-us"
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            <SupportIcon class="resources-dropdown__item-container__image"/>
+            <p class="resources-dropdown__item-container__title">Support</p>
+        </a>
+    </div>
+</template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
@@ -45,4 +75,46 @@ export default class ResourcesDropdown extends Vue {
 }
 </script>
 
-<style src="./resourcesDropdown.scss" scoped lang="scss"></style>
+<style scoped lang="scss">
+    .resources-dropdown {
+        position: absolute;
+        top: 50px;
+        left: 0;
+        padding: 6px 0;
+        background-color: #f5f6fa;
+        z-index: 1120;
+        font-family: 'font_regular', sans-serif;
+        min-width: 255px;
+        box-shadow: 0 20px 34px rgba(10, 27, 44, 0.28);
+        border-radius: 6px;
+
+        &__item-container {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            padding: 0 20px;
+
+            &__image {
+                min-width: 20px;
+                object-fit: cover;
+            }
+
+            &__title {
+                margin: 8px 0 14px 13px;
+                font-size: 14px;
+                line-height: 20px;
+                color: #1b2533;
+            }
+
+            &:hover {
+                font-family: 'font_bold', sans-serif;
+
+                .docs-svg-path,
+                .community-svg-path,
+                .support-svg-path {
+                    fill: #2d75d2 !important;
+                }
+            }
+        }
+    }
+</style>
diff --git a/web/satellite/src/components/header/resourcesDropdown/resourcesDropdown.html b/web/satellite/src/components/header/resourcesDropdown/resourcesDropdown.html
deleted file mode 100644
index c372fbdf8..000000000
--- a/web/satellite/src/components/header/resourcesDropdown/resourcesDropdown.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!--Copyright (C) 2020 Storj Labs, Inc.-->
-<!--See LICENSE for copying information.-->
-
-<div class="resources-dropdown">
-    <a
-        class="resources-dropdown__item-container"
-        href="https://docs.storj.io/node"
-        target="_blank"
-        rel="noopener noreferrer"
-        @click="onDocsIconClick"
-    >
-        <DocsIcon class="resources-dropdown__item-container__image"/>
-        <p class="resources-dropdown__item-container__title">Docs</p>
-    </a>
-    <a
-        class="resources-dropdown__item-container"
-        href="https://storj.io/community/"
-        target="_blank"
-        rel="noopener noreferrer"
-        @click="onCommunityIconClick"
-    >
-        <CommunityIcon class="resources-dropdown__item-container__image"/>
-        <p class="resources-dropdown__item-container__title">Community</p>
-    </a>
-    <a
-        class="resources-dropdown__item-container"
-        href="mailto:support@storj.io"
-        target="_blank"
-        rel="noopener noreferrer"
-        @click="onSupportIconClick"
-    >
-        <SupportIcon class="resources-dropdown__item-container__image"/>
-        <p class="resources-dropdown__item-container__title">Support</p>
-    </a>
-</div>
diff --git a/web/satellite/src/components/header/resourcesDropdown/resourcesDropdown.scss b/web/satellite/src/components/header/resourcesDropdown/resourcesDropdown.scss
deleted file mode 100644
index 1f96d41ef..000000000
--- a/web/satellite/src/components/header/resourcesDropdown/resourcesDropdown.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-.resources-dropdown {
-    position: absolute;
-    top: 50px;
-    left: 0;
-    padding: 6px 0;
-    background-color: #f5f6fa;
-    z-index: 1120;
-    font-family: 'font_regular', sans-serif;
-    min-width: 255px;
-    box-shadow: 0 20px 34px rgba(10, 27, 44, 0.28);
-    border-radius: 6px;
-
-    &__item-container {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        padding: 0 20px;
-
-        &__image {
-            min-width: 20px;
-            object-fit: cover;
-        }
-
-        &__title {
-            margin: 8px 0 14px 13px;
-            font-size: 14px;
-            line-height: 20px;
-            color: #1b2533;
-        }
-
-        &:hover {
-            font-family: 'font_bold', sans-serif;
-
-            .docs-svg-path,
-            .community-svg-path,
-            .support-svg-path {
-                fill: #2d75d2 !important;
-            }
-        }
-    }
-}
diff --git a/web/satellite/src/components/objects/BucketsView.vue b/web/satellite/src/components/objects/BucketsView.vue
index 12fe23244..9e70a5211 100644
--- a/web/satellite/src/components/objects/BucketsView.vue
+++ b/web/satellite/src/components/objects/BucketsView.vue
@@ -10,7 +10,12 @@
                 <p class="buckets-view__title-area__button__label">New Bucket</p>
             </div>
         </div>
-        <div class="buckets-view__loader" v-if="isLoading"/>
+        <VLoader
+            width="120px"
+            height="120px"
+            class="buckets-view__loader"
+            v-if="isLoading"
+        />
         <p class="buckets-view__no-buckets" v-if="!(isLoading || bucketsList.length)">No Buckets</p>
         <div class="buckets-view__list" v-if="!isLoading && bucketsList.length">
             <div class="buckets-view__list__sorting-header">
@@ -59,6 +64,7 @@
 import { Bucket } from 'aws-sdk/clients/s3';
 import { Component, Vue } from 'vue-property-decorator';
 
+import VLoader from '@/components/common/VLoader.vue';
 import BucketItem from '@/components/objects/BucketItem.vue';
 import ObjectsPopup from '@/components/objects/ObjectsPopup.vue';
 
@@ -76,6 +82,7 @@ import { Validator } from '@/utils/validation';
         BucketIcon,
         ObjectsPopup,
         BucketItem,
+        VLoader,
     },
 })
 export default class BucketsView extends Vue {
@@ -342,13 +349,6 @@ export default class BucketsView extends Vue {
     private get passphrase(): string {
         return this.$store.state.objectsModule.passphrase;
     }
-
-    /**
-     * Returns access grant from store.
-     */
-    private get accessGrantFromStore(): string {
-        return this.$store.state.objectsModule.accessGrant;
-    }
 }
 </script>
 
@@ -404,12 +404,6 @@ export default class BucketsView extends Vue {
 
         &__loader {
             margin-top: 100px;
-            border: 16px solid #f3f3f3;
-            border-top: 16px solid #3498db;
-            border-radius: 50%;
-            width: 120px;
-            height: 120px;
-            animation: spin 2s linear infinite;
         }
 
         &__no-buckets {
@@ -461,9 +455,4 @@ export default class BucketsView extends Vue {
         background-color: #dadde5;
         border-color: #dadde5;
     }
-
-    @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
 </style>
diff --git a/web/satellite/src/components/objects/WarningView.vue b/web/satellite/src/components/objects/WarningView.vue
index 736a88045..f881ee23a 100644
--- a/web/satellite/src/components/objects/WarningView.vue
+++ b/web/satellite/src/components/objects/WarningView.vue
@@ -38,7 +38,6 @@ import VButton from '@/components/common/VButton.vue';
 
 import { RouteConfig } from '@/router';
 
-
 @Component({
     components: {
         VButton,
diff --git a/web/satellite/static/images/header/checkmark.svg b/web/satellite/static/images/header/checkmark.svg
new file mode 100644
index 000000000..58cf9cfd2
--- /dev/null
+++ b/web/satellite/static/images/header/checkmark.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1.17423 8.83244C0.634669 8.29287 0.634669 7.41807 1.17423 6.8785C1.7138 6.33894 2.5886 6.33894 3.12817 6.8785L6.38473 10.1351C6.92429 10.6746 6.92429 11.5494 6.38473 12.089C5.84516 12.6286 4.97036 12.6286 4.43079 12.089L1.17423 8.83244Z" fill="#2683FF"/>
+    <path d="M6.38473 12.089C5.84516 12.6286 4.97036 12.6286 4.43079 12.089C3.89123 11.5494 3.89123 10.6746 4.43079 10.1351L10.2926 4.27325C10.8322 3.73369 11.707 3.73369 12.2465 4.27325C12.7861 4.81282 12.7861 5.68762 12.2465 6.22719L6.38473 12.089Z" fill="#2683FF"/>
+</svg>