From 3fa9d78690b6350ac1a69954a1730b07f92a2a45 Mon Sep 17 00:00:00 2001
From: Nikolay Yurchenko <nickolai.yurchenko@gmail.com>
Date: Wed, 2 Jan 2019 15:46:55 +0200
Subject: [PATCH] [V3-964] Satellite api keys markup (#945)

* initial api keys markup

* Impemented api area markup and popups.
---
 .../src/components/apiKeys/AddApiKeyPopup.vue | 233 ++++++++++++++++++
 .../src/components/apiKeys/ApiKeysArea.vue    |  66 +++++
 .../components/apiKeys/ApiKeysDropdown.vue    |  96 ++++++++
 .../src/components/apiKeys/ApiKeysItem.vue    | 146 +++++++++++
 .../src/components/apiKeys/Dropdown.vue       | 102 ++++++++
 .../src/components/apiKeys/PaginationArea.vue | 136 ++++++++++
 .../apiKeys/headerArea/HeaderArea.vue         |  60 +++++
 .../apiKeys/headerArea/SearchArea.vue         |  73 ++++++
 .../apiKeys/headerArea/SortApiKeysHeader.vue  | 118 +++++++++
 .../src/components/common/Checkbox.vue        |   4 +-
 .../src/components/common/EmptyStateArea.vue  |   9 +-
 .../src/components/common/HeaderlessInput.vue |   4 +
 web/satellite/src/router/index.ts             |   6 +
 .../src/utils/constants/emptyStatesImages.ts  |  59 +++++
 14 files changed, 1107 insertions(+), 5 deletions(-)
 create mode 100644 web/satellite/src/components/apiKeys/AddApiKeyPopup.vue
 create mode 100644 web/satellite/src/components/apiKeys/ApiKeysArea.vue
 create mode 100644 web/satellite/src/components/apiKeys/ApiKeysDropdown.vue
 create mode 100644 web/satellite/src/components/apiKeys/ApiKeysItem.vue
 create mode 100644 web/satellite/src/components/apiKeys/Dropdown.vue
 create mode 100644 web/satellite/src/components/apiKeys/PaginationArea.vue
 create mode 100644 web/satellite/src/components/apiKeys/headerArea/HeaderArea.vue
 create mode 100644 web/satellite/src/components/apiKeys/headerArea/SearchArea.vue
 create mode 100644 web/satellite/src/components/apiKeys/headerArea/SortApiKeysHeader.vue

diff --git a/web/satellite/src/components/apiKeys/AddApiKeyPopup.vue b/web/satellite/src/components/apiKeys/AddApiKeyPopup.vue
new file mode 100644
index 000000000..090d5529e
--- /dev/null
+++ b/web/satellite/src/components/apiKeys/AddApiKeyPopup.vue
@@ -0,0 +1,233 @@
+// Copyright (C) 2018 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="add-api-key-popup-container">
+        <div v-if="isMacaroonPopupShown !== true" class="add-api-key-popup">
+            <div class="add-api-key-popup__info-panel-container">
+                <h2 class="add-api-key-popup__info-panel-container__main-label-text">New API Key</h2>
+                <div v-html="imageSource"></div>
+            </div>
+            <div class="add-api-key-popup__form-container">
+                <p>Name <span>Up To 20 Characters</span></p>
+                <HeaderlessInput 
+                    placeholder="Enter API Key Name"
+                    class="full-input"
+                    width="100%">
+                </HeaderlessInput>
+                <p>Bucket</p>
+                <HeaderlessInput 
+                    placeholder="Enter Bucket Name"
+                    class="full-input"
+                    width="100%">
+                </HeaderlessInput>
+                <p>Rights</p>
+                <ApiKeysDropdown />
+                <div class="add-api-key-popup__form-container__button-container">
+                    <Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite />
+                    <Button label="Create API Key" width="205px" height="48px" />
+                </div>
+            </div>
+            <div class="add-api-key-popup__close-cross-container">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="onCloseClick">
+                    <path d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
+                </svg>
+            </div>
+        </div>
+        <div v-if="isMacaroonPopupShown === true" class="macaroon-popup">
+            <div v-html="imageSource"></div>
+            <div class="macaroon-popup__content">
+                <h1 class="macaroon-popup__content__title">Macaroon</h1>
+                <p class="macaroon-popup__content__name">Name: <span>Kahmir</span></p>
+                <div class="macaroon-popup__content__copy-area">
+                    <p class="macaroon-popup__content__copy-area__macaroon">ab4923re124NSVDLkvdmsfv mwm45678gnhab4923rewm45678gn</p>
+                    <Button label="Copy" width="140px" height="48px" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
+import Button from '@/components/common/Button.vue';
+import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
+import ApiKeysDropdown from '@/components/apiKeys/ApiKeysDropdown.vue';
+
+@Component(
+    {
+        props: {
+            onClose: {
+                type: Function
+            },
+        },
+        data: function () {
+            return {
+                imageSource: EMPTY_STATE_IMAGES.ADD_API_KEY,
+                isMacaroonPopupShown: false,
+            };
+        },
+        methods: {
+            onCloseClick: function (): void {
+                // TODO: save popup states in store
+                this.$emit('onClose');
+            },
+        },
+        components: {
+            HeaderlessInput,
+            Button,
+            ApiKeysDropdown
+        }
+    }
+)
+
+export default class AddApiKeyPopup extends Vue {
+}
+</script>
+
+<style scoped lang="scss">
+    .macaroon-popup {
+        width: 100%;
+        max-width: 845px;
+        background-color: #FFFFFF;
+        border-radius: 6px;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        position: relative;
+        justify-content: space-between;
+        padding: 80px 100px 80px 50px;
+
+        &__content {
+            max-width: 555px;
+            margin-left: 70px;
+
+            &__name {
+                font-family: 'montserrat_medium';
+                font-size: 16px;
+                color: #AFB7C1;
+                display: flex;
+
+                span {
+                    color: #354049;
+                    margin-bottom: 20px;
+                    margin-left: 10px;;
+                    display: block;
+                }
+            }
+
+            &__title {
+                font-family: 'montserrat_medium';
+                font-size: 32px;
+            }
+
+            &__copy-area {
+                background: #F5F6FA;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 10px 20px;
+            }
+        }
+    }
+
+    .add-api-key-popup-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(134, 134, 148, 0.4);
+        z-index: 1000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .input-container.full-input {
+        width: 100%;
+    }
+    .add-api-key-popup {
+        width: 100%;
+        max-width: 845px;
+        background-color: #FFFFFF;
+        border-radius: 6px;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        position: relative;
+        justify-content: center;
+        padding: 80px 100px 80px 50px;
+
+        &__info-panel-container {
+             display: flex;
+             flex-direction: column;
+             justify-content: flex-start;
+             align-items: center;
+             margin-right: 55px;
+
+            &__main-label-text {
+                 font-family: 'montserrat_bold';
+                 font-size: 32px;
+                 line-height: 39px;
+                 color: #384B65;
+                 margin-bottom: 60px;
+                 margin-top: 0;
+            }
+        }
+
+        &__form-container {
+             width: 100%;
+             max-width: 440px;
+             margin-top: 10px;
+
+             p {
+                 font-family: 'montserrat_regular';
+                 font-size: 16px;
+                 margin-top: 20px;
+
+                 &:first-child {
+                     margin-top: 0;
+                 }
+             }
+
+            &__button-container {
+                 width: 100%;
+                 display: flex;
+                 flex-direction: row;
+                 justify-content: space-between;
+                 align-items: center;
+                 margin-top: 30px;
+            }
+        }
+
+        &__close-cross-container {
+             display: flex;
+             justify-content: center;
+             align-items: flex-start;
+             position: absolute;
+             right: 30px;
+            top: 40px;
+            svg {
+                cursor: pointer;
+            }
+        }
+    }
+
+    @media screen and (max-width: 720px) {
+        .add-api-key-popup {
+
+            &__info-panel-container {
+                 display: none;
+
+            }
+
+            &__form-container {
+
+                &__button-container {
+                     width: 100%;
+                }
+            }
+        }
+    }
+</style>
diff --git a/web/satellite/src/components/apiKeys/ApiKeysArea.vue b/web/satellite/src/components/apiKeys/ApiKeysArea.vue
new file mode 100644
index 000000000..16bfd3d9a
--- /dev/null
+++ b/web/satellite/src/components/apiKeys/ApiKeysArea.vue
@@ -0,0 +1,66 @@
+// Copyright (C) 2018 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div>
+        <div v-if="apiKeyItems > 0" class="api-keys-header">
+            <HeaderArea/>
+        </div>
+        <div v-if="apiKeyItems > 0" class="api-keys-container">
+            <div class="api-keys-container__content">
+                <ApiKeysItem />
+                <ApiKeysItem />
+                <ApiKeysItem />
+                <ApiKeysItem />
+                <ApiKeysItem />
+                <ApiKeysItem />
+            </div>
+            <PaginationArea />
+        </div>
+        <EmptyState
+            v-if="apiKeyItems === 0"
+            mainTitle="You have no API Keys yet"
+            :imageSource="emptyImage"
+            buttonLabel="New Api Key"
+            isButtonShown />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import EmptyState from '@/components/common/EmptyStateArea.vue';
+import HeaderArea from '@/components/apiKeys/headerArea/HeaderArea.vue';
+import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
+import ApiKeysItem from '@/components/apiKeys/ApiKeysItem.vue';
+import PaginationArea from '@/components/apiKeys/PaginationArea.vue';
+
+@Component({
+    data: function () {
+        return {
+            emptyImage: EMPTY_STATE_IMAGES.API_KEY,
+            apiKeyItems: 1,
+        };
+    },
+    methods: {},
+    computed: {},
+    components: {
+        EmptyState,
+        HeaderArea,
+        ApiKeysItem,
+        PaginationArea,
+    }
+})
+
+export default class ApiKeysArea extends Vue {
+}
+</script>
+
+<style scoped lang="scss">
+    .api-keys-header {
+        padding: 44px 40px 0 40px;
+    }
+
+    .api-keys-container {
+        padding: 0px 40px 0 60px;
+    }
+</style>
\ No newline at end of file
diff --git a/web/satellite/src/components/apiKeys/ApiKeysDropdown.vue b/web/satellite/src/components/apiKeys/ApiKeysDropdown.vue
new file mode 100644
index 000000000..4bf946673
--- /dev/null
+++ b/web/satellite/src/components/apiKeys/ApiKeysDropdown.vue
@@ -0,0 +1,96 @@
+// Copyright (C) 2018 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="dropdown-container" >
+        <div class="dropdown-toggle-container" v-on:click="toggleSelection" >
+            <h1 class="dropdown-toggle-container__dropdown-name">Read / Write</h1>
+            <div class="dropdown-toggle-container__expander-area">
+                <img v-if="!isChoiceShown" src="../../../static/images/register/BlueExpand.svg" />
+                <img v-if="isChoiceShown" src="../../../static/images/register/BlueHide.svg" />
+            </div>
+        </div>
+        <Dropdown v-if="isChoiceShown" @onClose="toggleSelection" />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import Dropdown from './Dropdown.vue';
+
+@Component(
+    {
+        data: function () {
+            return {
+                isChoiceShown: false
+            };
+        },
+        methods: {
+            toggleSelection: function (): void {
+                this.$data.isChoiceShown = !this.$data.isChoiceShown;
+            }
+        },
+        components: {
+            Dropdown
+        }
+    }
+)
+
+export default class ApiKeysDropdown extends Vue {
+}
+</script>
+
+<style scoped lang="scss">
+    a {
+        text-decoration: none;
+        outline: none;
+    }
+    .dropdown-container {
+        position: relative;
+        background-color: #FFFFFF;
+        cursor: pointer;
+        font-family: 'montserrat_regular';
+        font-size: 16px;
+        resize: none;
+        height: 50px;
+        width: 100%;
+        border: 1px solid rgba(56, 75, 101, 0.4);
+        border-radius: 6px;
+    }
+
+    .dropdown-toggle-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        height: 50px;
+
+        &__dropdown-name {
+            margin-left: 20px;
+            font-family: 'montserrat_medium';
+            font-size: 16px;
+            color: #384B65;
+            opacity: 0.4;
+        }
+
+        &__expander-area {
+            margin-left: 12px;
+            margin-right: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 28px;
+            height: 28px;
+        }
+    }
+
+    @media screen and (max-width: 720px) {
+
+        .dropdown-toggle-container {
+            &__dropdown-name {
+                display: none;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/web/satellite/src/components/apiKeys/ApiKeysItem.vue b/web/satellite/src/components/apiKeys/ApiKeysItem.vue
new file mode 100644
index 000000000..d7bcff92a
--- /dev/null
+++ b/web/satellite/src/components/apiKeys/ApiKeysItem.vue
@@ -0,0 +1,146 @@
+// Copyright (C) 2018 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <label v-bind:class="checked ? 'container selected' : 'container'">
+        <div>
+            <input type="checkbox" v-model="checked" @change="onChange">
+            <span v-bind:class="[isCheckboxError ? 'checkmark error': 'checkmark']"></span>
+        </div>
+        <p class="container__item">test</p>
+        <p class="container__item">test</p>
+        <p class="container__item">test</p>
+        <p class="container__item">test</p>
+        <p class="container__item">test</p>
+    </label>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// Custom checkbox component
+@Component(
+    {
+        data: () => {
+            return {
+                checked: false
+            };
+        },
+        methods: {
+            // Emits data to parent component
+            onChange() {
+                this.$emit('setData', this.$data.checked);
+            }
+        },
+        props: {
+            isCheckboxError: {
+                type: Boolean,
+                default: false
+            },
+        },
+    }
+)
+export default class ApiKeysItem extends Vue {}
+</script>
+
+<style scoped lang="scss">
+    .container {
+        display: grid;
+        grid-template-columns: 2% 20% 30% 20% 20% 8%;
+        cursor: pointer;
+        position: relative;
+        transition: box-shadow .2s ease-out;
+        padding: 35px 0px 35px 70px;
+        transition: all .2s ease;
+        margin-bottom: 10px;
+        border-radius: 6px;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        outline: none;
+
+        &:hover {
+            background: #fff;
+            box-shadow: 0px 4px 4px rgba(231, 232, 238, 0.6);
+        }
+
+        &__item {
+            width: 20%;
+            font-family: 'montserrat_medium';
+            font-size: 16px;
+            margin: 0;
+        }
+    }
+
+    .container.selected {
+        background: #2379EC;
+        box-shadow: 0px 6px 20px rgba(39, 132, 255, 0.4);
+
+        p {
+            color: #fff;
+        }
+    }
+
+    .container input {
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+    }
+
+    .checkmark {
+        position: absolute;
+        left: 25px;
+        top: 50%;
+        transform: translateY(-50%);
+        height: 25px;
+        width: 25px;
+        border: 1px solid rgba(56, 75, 101, 0.4);
+        border-radius: 4px;
+    }
+
+    .container:hover input ~ .checkmark {
+        background-color: #fff;
+    }
+
+    .container input:checked ~ .checkmark {
+        border: 1px solid #fff;
+        background-color: #fff;
+    }
+
+    .checkmark:after {
+        content: "";
+        position: absolute;
+        display: none;
+    }
+
+    .checkmark.error {
+        border-color: red;
+    }
+
+    .container input:checked ~ .checkmark:after {
+        display: block;
+    }
+
+    .container .checkmark:after {
+        left: 9px;
+        top: 5px;
+        width: 5px;
+        height: 10px;
+        border: solid #2379EC;
+        border-width: 0 3px 3px 0;
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        transform: rotate(45deg);
+    }
+
+    @media screen and (max-width: 1600px) {
+
+        .container {
+            grid-template-columns: 2% 20% 30% 20% 15% 13%;
+            padding: 20px 0px 20px 70px;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/web/satellite/src/components/apiKeys/Dropdown.vue b/web/satellite/src/components/apiKeys/Dropdown.vue
new file mode 100644
index 000000000..dca17d698
--- /dev/null
+++ b/web/satellite/src/components/apiKeys/Dropdown.vue
@@ -0,0 +1,102 @@
+// Copyright (C) 2018 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <!-- To close popup we need to use method onCloseClick -->
+    <div class="api-keys-dropdown-choice-container">
+        <div class="api-keys-dropdown-overflow-container">
+            <!-- TODO: add selection logic onclick -->
+            <div class="api-keys-dropdown-item-container" v-on:click="onSortUsersClick">
+                <h2>test</h2>
+            </div>
+            <div class="api-keys-dropdown-item-container" v-on:click="onSortUsersClick">
+                <h2>test</h2>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component(
+    {
+        data: function () {
+            return {};
+        },
+        props: {
+            onClose: {
+                type: Function
+            }
+        },
+        methods: {
+            onCloseClick: function (): void {
+                this.$emit('onClose');
+            },
+            onSortUsersClick: function (): void {
+                this.$emit('onClose');
+            }
+        },
+    }
+)
+
+export default class Dropdown extends Vue {
+}
+</script>
+
+<style scoped lang="scss">
+    .api-keys-dropdown-choice-container {
+        position: absolute;
+        width: 100%;
+        top: 70px;
+        left: 0px;
+        border-radius: 4px;
+        padding: 10px 0px 10px 0px;
+        box-shadow: 0px 4px rgba(231, 232, 238, 0.6);
+        background-color: #FFFFFF;
+        z-index: 800;
+    }
+
+    .api-keys-dropdown-overflow-container {
+        position: relative;
+        width: 100%;
+        height: auto;
+        background-color: #FFFFFF;
+    }
+
+    .api-keys-dropdown-item-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        padding-left: 20px;
+        padding-right: 20px;
+
+        h2 {
+            font-family: 'montserrat_regular';
+            margin-left: 20px;
+            font-size: 14px;
+            line-height: 20px;
+            color: #354049;
+        }
+
+        &:hover {
+            background-color: #F2F2F6;
+
+            path {
+                fill: #2683FF !important;
+            }
+        }
+
+    }
+
+    input {
+        outline: none;
+        box-shadow: none;
+    }
+
+    a {
+        text-decoration: none;
+        outline: none;
+    }
+</style>
\ No newline at end of file
diff --git a/web/satellite/src/components/apiKeys/PaginationArea.vue b/web/satellite/src/components/apiKeys/PaginationArea.vue
new file mode 100644
index 000000000..fbd32941b
--- /dev/null
+++ b/web/satellite/src/components/apiKeys/PaginationArea.vue
@@ -0,0 +1,136 @@
+// Copyright (C) 2018 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div>
+        <div class="pagination-container">
+            <div class="pagination-container__pages">
+                <div v-html="arrowLeft" class="pagination-container__button"></div>
+                <div class="pagination-container__items">
+                    <span v-bind:class="selected ? 'selected' : ''">1</span>
+                    <span v-bind:class="selected ? 'selected' : ''">2</span>
+                    <span v-bind:class="selected ? 'selected' : ''">3</span>
+                    <span v-bind:class="selected ? 'selected' : ''">4</span>
+                    <span v-bind:class="selected ? 'selected' : ''">5</span>
+                </div>
+                <div v-html="arrowRight" class="pagination-container__button"></div>
+            </div>
+            <div class="pagination-container__counter">
+                <p>Showing <span>1</span> to <span>6</span> of <span>90</span> entries.</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
+
+@Component({
+    data: function() {
+        return {
+            arrowLeft: EMPTY_STATE_IMAGES.ARROW_LEFT,
+            arrowRight: EMPTY_STATE_IMAGES.ARROW_RIGHT,
+            selected: false,
+        }
+    },
+})
+
+export default class PaginationArea extends Vue {
+}
+</script>
+
+<style scoped lang="scss">
+    .pagination-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-left: 25px;
+        margin-top: 25px;
+
+        &__pages {
+            display: flex;
+            align-items: center;
+        }
+
+        &__counter {
+            
+            p {
+                font-family: 'montserrat_medium';
+                font-size: 16px;
+                color: #AFB7C1;
+            }
+        }
+
+        &__button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            border: 1px solid #AFB7C1;
+            border-radius: 6px;
+            width: 30px;
+            height: 30px;
+
+            &:hover {
+
+                svg {
+
+                    path {
+                        fill: #fff !important;
+                    }
+                }
+            }
+        }
+
+        &__items {
+            margin: 0 20px;
+            display: flex;
+
+            .selected {
+                color: #2379EC;
+                font-family: 'montserrat_bold';
+
+                &:after {
+                    content: '';
+                    display: block;
+                    position: absolute;
+                    bottom: -4px;
+                    left: 0;
+                    width: 10px;
+                    height: 2px;
+                    background-color: #2379EC;
+                }
+            }
+
+            span {
+                font-family: 'montserrat_medium';
+                font-size: 16px;
+                margin-right: 15px;
+                cursor: pointer;
+                display: block;
+                position: relative;
+                transition: all .2s ease;
+
+                &:hover {
+                    color: #2379EC;
+
+                    &:after {
+                        content: '';
+                        display: block;
+                        position: absolute;
+                        bottom: -4px;
+                        left: 0;
+                        width: 100%;
+                        height: 2px;
+                        background-color: #2379EC;
+                    }
+                }
+
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/web/satellite/src/components/apiKeys/headerArea/HeaderArea.vue b/web/satellite/src/components/apiKeys/headerArea/HeaderArea.vue
new file mode 100644
index 000000000..30c7dd962
--- /dev/null
+++ b/web/satellite/src/components/apiKeys/headerArea/HeaderArea.vue
@@ -0,0 +1,60 @@
+// Copyright (C) 2018 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="api-keys-header-container">
+        <div class="api-keys-header-container__item">
+            <SearchArea />
+            <Button label="New API Key" width="240px" height="54px" :onPress="toggleSelection" />
+        </div>
+        <div class="api-keys-header-container__item">
+            <SortApiKeysHeader />
+        </div>
+        <AddApiKeyPopup v-if="isPopupShown" @onClose="toggleSelection" />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import SearchArea from './SearchArea.vue';
+import Button from '@/components/common/Button.vue';
+import SortApiKeysHeader from '@/components/apiKeys/headerArea/SortApiKeysHeader.vue';
+import AddApiKeyPopup from '@/components/apiKeys/AddApiKeyPopup.vue';
+
+@Component({
+    data: function() {
+        return {
+            isPopupShown: true,
+        }
+    },
+    components: {
+        SearchArea,
+        Button,
+        SortApiKeysHeader,
+        AddApiKeyPopup,
+    },
+    methods: {
+        toggleSelection: function () {
+            this.$data.isPopupShown = !this.$data.isPopupShown;
+        }
+    }
+})
+
+export default class HeaderArea extends Vue {
+}
+</script>
+
+<style scoped lang="scss">
+    .api-keys-header-container {
+
+        &__item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            &:last-child {
+                padding-left: 20px;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/web/satellite/src/components/apiKeys/headerArea/SearchArea.vue b/web/satellite/src/components/apiKeys/headerArea/SearchArea.vue
new file mode 100644
index 000000000..e2c858dd5
--- /dev/null
+++ b/web/satellite/src/components/apiKeys/headerArea/SearchArea.vue
@@ -0,0 +1,73 @@
+// Copyright (C) 2018 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="search-container">
+        <div class="search-container__wrap">
+            <label class="search-container__wrap__input">
+                <input placeholder="Search API" type="text">
+            </label>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({})
+
+export default class SearchArea extends Vue {
+}
+</script>
+
+<style scoped lang="scss">
+    .search-container {
+        width: 100%;
+        height: 56px;
+        margin: 0 24px;
+
+        &__wrap {
+            position: relative;
+
+            &::after {
+                content: '';
+                display: block;
+                position: absolute;
+                height: 20px;
+                top: 50%;
+                transform: translateY(-50%);
+                right: 20px;
+                width: 20px;
+                background-image: url('../../../../static/images/team/searchIcon.svg');
+                background-repeat: no-repeat;
+                background-size: cover;
+                z-index: 20;
+            }
+
+            &__input {
+
+                input {
+                    box-sizing: border-box;
+                    position: relative;
+                    box-shadow: 0px 4px 4px rgba(231, 232, 238, 0.6);
+                    border-radius: 6px;
+                    border: 1px solid #F2F2F2;
+                    width: 100%;
+                    height: 56px;
+                    padding-right: 20px;
+                    padding-left: 20px;
+                    font-family: 'montserrat_regular';
+                    font-size: 16px;
+                    color: #AFB7C1;
+                    outline: none;
+                    box-shadow: none;
+
+                }
+            }
+        }
+    }
+
+    ::-webkit-input-placeholder {
+        color: #AFB7C1;
+    }
+</style>
\ No newline at end of file
diff --git a/web/satellite/src/components/apiKeys/headerArea/SortApiKeysHeader.vue b/web/satellite/src/components/apiKeys/headerArea/SortApiKeysHeader.vue
new file mode 100644
index 000000000..c8e01e9b6
--- /dev/null
+++ b/web/satellite/src/components/apiKeys/headerArea/SortApiKeysHeader.vue
@@ -0,0 +1,118 @@
+// Copyright (C) 2018 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="sort-header-container">
+        <div class="sort-header-container__item">
+            <p>Name</p>
+            <div class="sort-header-container__item__arrows">
+                <span v-html="arrowUp"></span>
+                <span class="selected" v-html="arrowDown"></span>
+            </div>
+        </div>
+        <div class="sort-header-container__item">
+            <p>Macaroon</p>
+            <div class="sort-header-container__item__arrows">
+                <span v-html="arrowUp"></span>
+                <span v-html="arrowDown"></span>
+            </div>
+        </div>
+        <div class="sort-header-container__item">
+            <p>Bucket</p>
+            <div class="sort-header-container__item__arrows">
+                <span v-html="arrowUp"></span>
+                <span v-html="arrowDown"></span>
+            </div>
+        </div>
+        <div class="sort-header-container__item">
+            <p>Path</p>
+            <div class="sort-header-container__item__arrows">
+                <span v-html="arrowUp"></span>
+                <span v-html="arrowDown"></span>
+            </div>
+        </div>
+        <div class="sort-header-container__item">
+            <p>Rights</p>
+            <div class="sort-header-container__item__arrows">
+                <span v-html="arrowUp"></span>
+                <span v-html="arrowDown"></span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
+
+@Component({
+    data: function() {
+        return {
+            arrowUp: EMPTY_STATE_IMAGES.ARROW_UP,
+            arrowDown: EMPTY_STATE_IMAGES.ARROW_DOWN,
+        }
+    }
+})
+
+export default class SortApiKeysHeader extends Vue {
+}
+</script>
+
+<style scoped lang="scss">
+    .sort-header-container {
+        display: grid;
+        grid-template-columns: 24% 29% 19% 19% 14%;
+        width: 100%;
+        height: 80px;
+        transition: box-shadow .2s ease-out;
+        padding-left: 20px;
+
+        &__item {
+            width: 20%;
+            display: flex;
+            align-items: center;
+            margin: 0;
+            cursor: pointer;
+            margin-left: 6px;
+
+            &__arrows {
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-start;
+                padding-bottom: 12px;
+                margin-left: 10px;
+
+                span.selected {
+                    
+                    svg {
+
+                        path {
+                            fill: #2683FF !important;
+                        }
+                    }
+                }
+
+                span {
+                    height: 10px;
+                }
+            }
+
+            p {
+                font-family: 'montserrat_medium';
+                font-size: 16px;
+            }
+            
+            &:nth-child(1) {
+                margin-left: 0px;
+            }
+        }
+    }
+
+    @media screen and (max-width: 1600px) {
+
+        .sort-header-container {
+            grid-template-columns: 25% 28% 19% 15% 14%;
+            height: 65px;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/web/satellite/src/components/common/Checkbox.vue b/web/satellite/src/components/common/Checkbox.vue
index b32b516df..f75af9f2a 100644
--- a/web/satellite/src/components/common/Checkbox.vue
+++ b/web/satellite/src/components/common/Checkbox.vue
@@ -43,7 +43,8 @@ export default class Checkbox extends Vue {
         display: block;
         position: relative;
         padding-left: 35px;
-        margin-bottom: 12px;
+        height: 25px;
+        width: 25px;
         cursor: pointer;
         font-size: 22px;
         -webkit-user-select: none;
@@ -67,7 +68,6 @@ export default class Checkbox extends Vue {
         left: 0;
         height: 25px;
         width: 25px;
-        background-color: white;
         border: 2px solid rgba(56, 75, 101, 0.4);
         border-radius: 4px;
     }
diff --git a/web/satellite/src/components/common/EmptyStateArea.vue b/web/satellite/src/components/common/EmptyStateArea.vue
index 8be76fe6f..cd4274bfe 100644
--- a/web/satellite/src/components/common/EmptyStateArea.vue
+++ b/web/satellite/src/components/common/EmptyStateArea.vue
@@ -49,11 +49,14 @@ export default class EmptyStateProjectArea extends Vue {
         margin-top: 120px;
 
         &__wrap {
-             text-align: center;
-             margin-top: 30px;
+            text-align: center;
+            margin-top: 30px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
 
              &__img {
-                 margin-top: 90px;
+                margin-top: 90px;
              }
 
             h1 {
diff --git a/web/satellite/src/components/common/HeaderlessInput.vue b/web/satellite/src/components/common/HeaderlessInput.vue
index 1e2b7473d..4eedd84cf 100644
--- a/web/satellite/src/components/common/HeaderlessInput.vue
+++ b/web/satellite/src/components/common/HeaderlessInput.vue
@@ -105,6 +105,10 @@ input {
 	border-color: rgba(56, 75, 101, 0.4);
 	border-radius: 6px;
 }
+input::placeholder {
+    color: #384B65;
+    opacity: 0.4;
+}
 h3 {
 	font-family: 'montserrat_regular';
 	font-size: 16px;
diff --git a/web/satellite/src/router/index.ts b/web/satellite/src/router/index.ts
index 1a39fdcfc..4ea89dd50 100644
--- a/web/satellite/src/router/index.ts
+++ b/web/satellite/src/router/index.ts
@@ -11,6 +11,7 @@ import AccountArea from '@/components/dashboard/account/AccountArea.vue';
 import ProjectDetails from '@/components/projectDetails/ProjectDetailsArea.vue';
 import TeamArea from '@/components/team/TeamArea.vue';
 import Page404 from '@/components/errors/Page404.vue';
+import ApiKeysArea from '@/components/apiKeys/ApiKeysArea.vue';
 import { getToken } from '@/utils/tokenManager';
 
 Vue.use(Router);
@@ -50,6 +51,11 @@ let router = new Router({
 					path: '/team',
 					name: 'Team',
 					component: TeamArea
+				},
+				{
+					path: '/api-keys',
+					name: 'ApiKeys',
+					component: ApiKeysArea
 				}
 			]
 		},
diff --git a/web/satellite/src/utils/constants/emptyStatesImages.ts b/web/satellite/src/utils/constants/emptyStatesImages.ts
index 578a1b5d6..aa55d98d4 100644
--- a/web/satellite/src/utils/constants/emptyStatesImages.ts
+++ b/web/satellite/src/utils/constants/emptyStatesImages.ts
@@ -171,4 +171,63 @@ export const EMPTY_STATE_IMAGES = {
     <path d="M130.785 15.673H125.82C123.976 15.673 122.486 14.2545 122.486 12.5523C122.486 10.8501 123.976 9.43164 125.82 9.43164H130.785C132.629 9.43164 134.118 10.8501 134.118 12.5523C134.118 14.2545 132.629 15.673 130.785 15.673Z" fill="#363840"/>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M184.334 148.02C186.887 148.02 189.015 145.893 189.015 143.339C189.015 140.786 186.887 138.658 184.334 138.658C181.781 138.658 179.653 140.786 179.653 143.339C179.582 145.893 181.71 148.02 184.334 148.02Z" fill="#A5A9B5"/>
     </svg>`,
+    API_KEY: `<svg width="346" height="273" viewBox="0 0 346 273" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M199.593 272.163C274.583 272.163 335.34 211.215 335.34 136.034C335.34 60.8521 274.583 0 199.593 0C124.602 0 63.8457 60.9476 63.8457 136.129C63.8457 211.311 124.602 272.163 199.593 272.163Z" fill="#E8EAF2"/>
+    <path d="M274.391 209.88H126.512C120.016 209.88 114.666 204.53 114.666 198.034V80.5331C114.666 74.0371 120.016 68.6875 126.512 68.6875H274.295C280.791 68.6875 286.141 74.0371 286.141 80.5331V198.034C286.141 204.53 280.887 209.88 274.391 209.88Z" fill="#8F96AD"/>
+    <path d="M267.036 197.371H135.875C132.34 197.371 129.379 194.409 129.379 190.875V90.9511C129.379 87.4165 132.34 84.4551 135.875 84.4551H267.036C270.571 84.4551 273.532 87.4165 273.532 90.9511V190.875C273.532 194.409 270.571 197.371 267.036 197.371Z" fill="white"/>
+    <path d="M183.639 188.771C182.875 188.771 182.206 188.102 182.206 187.338V93.9105C182.206 93.1462 182.875 92.4775 183.639 92.4775C184.403 92.4775 185.072 93.1462 185.072 93.9105V187.338C185.072 188.102 184.403 188.771 183.639 188.771Z" fill="#ABB0C1"/>
+    <path d="M217.838 155.908L195.007 139.191L217.838 120.658C218.507 120.085 218.603 119.13 218.029 118.461C217.456 117.792 216.501 117.697 215.832 118.27L191.568 138.044C191.186 138.331 190.995 138.809 190.995 139.286C190.995 139.764 191.281 140.242 191.663 140.528L216.119 158.392C216.405 158.583 216.692 158.679 217.074 158.679C217.552 158.679 218.029 158.488 218.316 158.01C218.698 157.341 218.507 156.386 217.838 155.908Z" fill="#8F96AD"/>
+    <path d="M266.272 138.042L241.816 118.172C241.147 117.599 240.192 117.695 239.619 118.363C239.046 119.032 239.141 119.987 239.81 120.56L262.642 139.093L239.81 155.811C239.141 156.288 238.95 157.244 239.523 158.008C239.81 158.39 240.288 158.677 240.765 158.677C241.052 158.677 241.434 158.581 241.721 158.39L266.176 140.526C266.558 140.24 266.749 139.762 266.845 139.284C266.845 138.807 266.654 138.329 266.272 138.042Z" fill="#8F96AD"/>
+    <path d="M233.218 113.779C232.358 113.588 231.594 114.161 231.403 115.021L222.423 162.977C222.232 163.836 222.805 164.601 223.665 164.792C223.856 164.792 224.047 164.792 224.238 164.792C224.811 164.696 225.384 164.218 225.48 163.55L234.46 115.594C234.651 114.83 234.078 113.97 233.218 113.779Z" fill="#8F96AD"/>
+    <path d="M181.059 81.1043H132.434C130.524 81.1043 128.9 79.4803 128.9 77.5697C128.9 75.6591 130.524 74.0352 132.434 74.0352H181.059C182.969 74.0352 184.593 75.6591 184.593 77.5697C184.593 79.4803 183.065 81.1043 181.059 81.1043Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M342.789 176.059C344.605 176.059 345.942 177.492 345.942 179.307C345.082 203.953 334.67 226.211 318.334 242.547C301.999 258.882 279.74 269.295 255.094 270.155C253.279 270.25 251.846 268.817 251.846 267.002V239.012C251.846 237.293 253.183 235.955 254.903 235.86C270.187 235.096 283.943 228.504 294.165 218.378C304.387 208.156 310.883 194.4 311.647 179.116C311.743 177.396 313.08 176.059 314.799 176.059H342.789Z" fill="#B0B6C9"/>
+    <path d="M253.281 262.994C259.401 262.994 264.362 258.033 264.362 251.912C264.362 245.792 259.401 240.831 253.281 240.831C247.161 240.831 242.2 245.792 242.2 251.912C242.2 258.033 247.161 262.994 253.281 262.994Z" fill="#8F96AD"/>
+    <path d="M73.017 36.1123C81.137 36.1123 87.824 29.2342 87.824 20.8276C87.824 12.4211 81.137 5.54297 73.017 5.54297C64.897 5.54297 58.21 12.4211 58.21 20.8276C58.1145 29.3297 64.8015 36.1123 73.017 36.1123Z" fill="#8F96AD"/>
+    <path d="M73.0181 27.5157C76.6482 27.5157 79.7051 24.5543 79.7051 20.8286C79.7051 17.1985 76.7437 14.1416 73.0181 14.1416C69.388 14.1416 66.3311 17.103 66.3311 20.8286C66.3311 24.5543 69.2925 27.5157 73.0181 27.5157Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M156.51 42.5093C159.949 42.5093 162.815 39.6434 162.815 36.2043C162.815 32.7653 159.949 29.8994 156.51 29.8994C153.071 29.8994 150.205 32.7653 150.205 36.2043C150.11 39.6434 152.976 42.5093 156.51 42.5093Z" fill="#8F96AD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M113.904 242.359C117.343 242.359 120.209 239.493 120.209 236.054C120.209 232.615 117.343 229.749 113.904 229.749C110.465 229.749 107.599 232.615 107.599 236.054C107.599 239.589 110.369 242.359 113.904 242.359Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M132.055 242.359C135.494 242.359 138.36 239.493 138.36 236.054C138.36 232.615 135.494 229.749 132.055 229.749C128.616 229.749 125.75 232.615 125.75 236.054C125.654 239.589 128.52 242.359 132.055 242.359Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M150.111 242.359C153.55 242.359 156.416 239.493 156.416 236.054C156.416 232.615 153.55 229.749 150.111 229.749C146.672 229.749 143.806 232.615 143.806 236.054C143.806 239.589 146.672 242.359 150.111 242.359Z" fill="#8F96AD"/>
+    <path d="M140.078 128.585H157.942C159.757 128.585 161.286 127.152 161.286 125.433C161.286 123.713 159.757 122.28 157.942 122.28H140.078C138.263 122.28 136.735 123.713 136.735 125.433C136.735 127.152 138.263 128.585 140.078 128.585Z" fill="#B0B6C9"/>
+    <path d="M139.982 115.976H171.315C173.131 115.976 174.659 114.352 174.659 112.442C174.659 110.531 173.131 108.907 171.315 108.907H140.077C138.262 108.907 136.734 110.531 136.734 112.442C136.734 114.352 138.167 115.976 139.982 115.976Z" fill="#B0B6C9"/>
+    <path d="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" fill="#8F96AD"/>
+    <path d="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" fill="#8F96AD"/>
+    <path d="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" fill="#B0B6C9"/>
+    </svg>`,
+    ARROW_UP: `<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#2683FF"/>
+    </svg>`,
+    ARROW_DOWN: `<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049"/>
+    </svg>`,
+    ARROW_RIGHT: `<svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 4.73684L0 9L1.20219e-06 -9.53674e-07L6 4.73684Z" fill="#354049"/>
+    </svg>
+    `,
+    ARROW_LEFT: `<svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.80077e-07 4.26316L6 0L6 9L2.80077e-07 4.26316Z" fill="#354049"/>
+    </svg>`,
+    ADD_API_KEY: `<svg width="300" height="233" viewBox="0 0 300 233" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M175.712 232.904C239.885 232.904 291.878 180.748 291.878 116.411C291.878 52.0744 239.885 0 175.712 0C111.539 0 59.5459 52.1561 59.5459 116.493C59.5459 180.83 111.539 232.904 175.712 232.904Z" fill="#2683FF"/>
+    <path d="M239.721 179.603H113.173C107.614 179.603 103.036 175.025 103.036 169.466V68.9143C103.036 63.3553 107.614 58.7773 113.173 58.7773H239.639C245.198 58.7773 249.776 63.3553 249.776 68.9143V169.466C249.776 175.025 245.28 179.603 239.721 179.603Z" fill="#499FFC"/>
+    <path d="M233.428 168.897H121.186C118.161 168.897 115.627 166.363 115.627 163.338V77.8285C115.627 74.8038 118.161 72.2695 121.186 72.2695H233.428C236.453 72.2695 238.987 74.8038 238.987 77.8285V163.338C238.987 166.363 236.453 168.897 233.428 168.897Z" fill="white"/>
+    <path d="M162.06 161.538C161.406 161.538 160.834 160.966 160.834 160.312V80.361C160.834 79.707 161.406 79.1348 162.06 79.1348C162.714 79.1348 163.286 79.707 163.286 80.361V160.312C163.286 160.966 162.714 161.538 162.06 161.538Z" fill="black"/>
+    <path d="M191.326 133.416L171.788 119.11L191.326 103.251C191.898 102.76 191.98 101.943 191.49 101.37C190.999 100.798 190.182 100.716 189.609 101.207L168.845 118.129C168.518 118.374 168.354 118.783 168.354 119.192C168.354 119.6 168.6 120.009 168.927 120.254L189.855 135.542C190.1 135.705 190.345 135.787 190.672 135.787C191.081 135.787 191.49 135.623 191.735 135.215C192.062 134.642 191.898 133.825 191.326 133.416Z" fill="#2683FF"/>
+    <path d="M232.772 118.127L211.844 101.123C211.272 100.632 210.454 100.714 209.964 101.286C209.473 101.859 209.555 102.676 210.127 103.167L229.666 119.026L210.127 133.332C209.555 133.741 209.392 134.558 209.882 135.212C210.127 135.539 210.536 135.785 210.945 135.785C211.19 135.785 211.517 135.703 211.762 135.539L232.69 120.252C233.017 120.007 233.181 119.598 233.263 119.189C233.263 118.781 233.099 118.372 232.772 118.127Z" fill="#2683FF"/>
+    <path d="M204.487 97.3635C203.751 97.2 203.097 97.6905 202.934 98.4263L195.249 139.464C195.086 140.2 195.576 140.854 196.312 141.018C196.476 141.018 196.639 141.018 196.803 141.018C197.293 140.936 197.784 140.527 197.865 139.955L205.55 98.9168C205.713 98.2628 205.223 97.527 204.487 97.3635Z" fill="#2683FF"/>
+    <path d="M159.852 69.403H118.242C116.607 69.403 115.217 68.0132 115.217 66.3782C115.217 64.7433 116.607 63.3535 118.242 63.3535H159.852C161.487 63.3535 162.877 64.7433 162.877 66.3782C162.877 68.0132 161.569 69.403 159.852 69.403Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M298.253 150.664C299.806 150.664 300.951 151.89 300.951 153.444C300.215 174.535 291.304 193.583 277.325 207.562C263.346 221.541 244.299 230.451 223.207 231.187C221.654 231.269 220.428 230.043 220.428 228.49V204.537C220.428 203.065 221.572 201.921 223.044 201.839C236.124 201.185 247.896 195.544 256.643 186.879C265.39 178.132 270.949 166.36 271.603 153.28C271.685 151.809 272.829 150.664 274.301 150.664H298.253Z" fill="#DEDEFC"/>
+    <path d="M221.655 225.058C226.892 225.058 231.138 220.812 231.138 215.575C231.138 210.337 226.892 206.092 221.655 206.092C216.418 206.092 212.172 210.337 212.172 215.575C212.172 220.812 216.418 225.058 221.655 225.058Z" fill="#499FFC"/>
+    <path d="M67.3937 30.902C74.3424 30.902 80.0649 25.016 80.0649 17.8221C80.0649 10.6281 74.3424 4.74219 67.3937 4.74219C60.445 4.74219 54.7225 10.6281 54.7225 17.8221C54.6408 25.0978 60.3633 30.902 67.3937 30.902Z" fill="#499FFC"/>
+    <path d="M67.3943 23.5445C70.5008 23.5445 73.1168 21.0103 73.1168 17.8221C73.1168 14.7156 70.5826 12.0996 67.3943 12.0996C64.2879 12.0996 61.6719 14.6338 61.6719 17.8221C61.6719 21.0103 64.2061 23.5445 67.3943 23.5445Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M138.843 36.3769C141.786 36.3769 144.238 33.9244 144.238 30.9814C144.238 28.0384 141.786 25.5859 138.843 25.5859C135.9 25.5859 133.447 28.0384 133.447 30.9814C133.366 33.9244 135.818 36.3769 138.843 36.3769Z" fill="#6CB9FF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M102.383 207.398C105.326 207.398 107.778 204.946 107.778 202.003C107.778 199.06 105.326 196.607 102.383 196.607C99.4398 196.607 96.9873 199.06 96.9873 202.003C96.9873 205.028 99.358 207.398 102.383 207.398Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M117.916 207.398C120.859 207.398 123.311 204.946 123.311 202.003C123.311 199.06 120.859 196.607 117.916 196.607C114.973 196.607 112.521 199.06 112.521 202.003C112.439 205.028 114.891 207.398 117.916 207.398Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M133.366 207.398C136.309 207.398 138.762 204.946 138.762 202.003C138.762 199.06 136.309 196.607 133.366 196.607C130.423 196.607 127.971 199.06 127.971 202.003C127.971 205.028 130.423 207.398 133.366 207.398Z" fill="#6CB9FF"/>
+    <path d="M124.781 110.036H140.068C141.622 110.036 142.93 108.81 142.93 107.338C142.93 105.867 141.622 104.641 140.068 104.641H124.781C123.228 104.641 121.92 105.867 121.92 107.338C121.92 108.81 123.228 110.036 124.781 110.036Z" fill="#0F002D"/>
+    <path d="M124.699 99.2448H151.513C153.066 99.2448 154.374 97.855 154.374 96.22C154.374 94.5851 153.066 93.1953 151.513 93.1953H124.781C123.228 93.1953 121.92 94.5851 121.92 96.22C121.92 97.855 123.146 99.2448 124.699 99.2448Z" fill="#0F002D"/>
+    <path d="M126.09 125.405H127.888C129.441 125.405 130.749 124.015 130.749 122.38C130.749 120.663 129.523 119.355 127.888 119.355H126.09C124.537 119.355 123.229 120.745 123.229 122.38C123.31 124.097 124.537 125.405 126.09 125.405Z" fill="#2683FF"/>
+    <path d="M136.881 125.405H138.679C140.232 125.405 141.54 124.015 141.54 122.38C141.54 120.663 140.314 119.355 138.679 119.355H136.881C135.328 119.355 134.02 120.745 134.02 122.38C134.101 124.097 135.328 125.405 136.881 125.405Z" fill="#2683FF"/>
+    <path d="M116.361 136.03C115.952 136.03 115.625 136.03 115.298 136.111C114.644 136.193 113.99 135.784 113.745 135.212C106.061 121.233 91.1824 111.75 74.015 111.75C58.4826 111.75 44.7487 119.516 36.6555 131.37C36.2468 131.942 35.511 132.187 34.857 132.106C32.8133 131.697 30.6878 131.452 28.5623 131.452C12.5395 131.37 -0.376953 144.123 -0.376953 159.982C-0.376953 159.982 -0.376953 159.982 -0.376953 160.064C-0.376953 160.963 0.358791 161.699 1.33978 161.699H138.761C139.66 161.699 140.477 160.963 140.477 160.064V159.982C140.477 146.739 129.686 136.03 116.361 136.03Z" fill="#DEDEFC"/>
+    </svg>`,
 };