web/multinode: add new node modal added

Change-Id: I337b39be065665cd531310171757ad8aab6be799

web/multinode/src/app/App.vue

@@ -24,6 +24,14 @@ export default class App extends Vue {
         overflow-y: hidden;
     }
 
+    p,
+    h1,
+    h2,
+    h3,
+    h4 {
+        margin: 0;
+    }
+
     #app {
         width: 100vw;
         height: 100vh;

web/multinode/src/app/components/common/HeaderedInput.vue

@@ -105,6 +105,7 @@ export default class HeaderedInput extends HeaderlessInput {
                 font-size: 16px;
                 line-height: 21px;
                 color: var(--c-gray);
+                margin-bottom: 8px;
             }
 
             &__error {

web/multinode/src/app/components/common/VModal.vue

@@ -0,0 +1,92 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div
+        class="modal-wrap"
+        @click.self="$emit('close')"
+    >
+        <div class="modal">
+            <div class="modal__header">
+                <slot name="header"></slot>
+            </div>
+            <div class="modal__body">
+                <slot name="body"></slot>
+            </div>
+            <div class="modal__footer">
+                <slot name="footer"></slot>
+            </div>
+            <div class="modal__cross" @click="$emit('close')">
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+                    <path d="M24 8L8 24" stroke="#676F84" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M8 8L24 24" stroke="#676F84" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component
+export default class VModal extends Vue {
+
+}
+</script>
+
+<style lang="scss">
+    .modal-wrap {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(37, 42, 50, 0.7);
+        z-index: 1000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        font-family: 'font_regular', sans-serif;
+
+        .modal {
+            position: relative;
+            background: white;
+            padding: 80px 97px;
+            height: auto;
+            z-index: 1001;
+            border-radius: 16px;
+
+            &__header {
+                font-family: 'font_bold', sans-serif;
+                font-size: 32px;
+                color: var(--c-title);
+                display: flex;
+                justify-content: center;
+            }
+
+            &__body {
+                margin-top: 46px;
+            }
+
+            &__footer {
+                margin-top: 32px;
+            }
+
+            &__cross {
+                position: absolute;
+                top: 32px;
+                right: 32px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 32px;
+                max-width: 32px;
+                height: 32px;
+                max-height: 32px;
+                cursor: pointer;
+            }
+        }
+    }
+</style>

web/multinode/src/app/components/modals/AddNewNode.vue

@@ -0,0 +1,82 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="add-new-node">
+        <v-button :with-plus="true" label="New Node" :on-press="openModal" width="152px" />
+        <v-modal v-if="isAddNewNodeModalShown" @close="closeModal">
+            <h2 slot="header">Add New Node</h2>
+            <div class="add-new-node__body" slot="body">
+                <headered-input
+                    class="add-new-node__body__input"
+                    label="Public IP Address"
+                />
+                <headered-input
+                    class="add-new-node__body__input"
+                    label="API Key"
+                />
+                <headered-input
+                    class="add-new-node__body__input"
+                    label="Displayed Name"
+                />
+            </div>
+            <div class="add-new-node__footer" slot="footer">
+                <v-button label="Cancel" :is-white="true" width="205px" :on-press="closeModal" />
+                <v-button label="Continue" width="205px" />
+            </div>
+        </v-modal>
+    </div>
+
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import HeaderedInput from '@/app/components/common/HeaderedInput.vue';
+import VButton from '@/app/components/common/VButton.vue';
+import VModal from '@/app/components/common/VModal.vue';
+
+@Component({
+    components: {
+        VButton,
+        HeaderedInput,
+        VModal,
+    },
+})
+export default class AddNewNode extends Vue {
+    public isAddNewNodeModalShown: boolean = false;
+
+    public openModal(): void {
+        this.isAddNewNodeModalShown = true;
+    }
+
+    public closeModal(): void {
+        this.isAddNewNodeModalShown = false;
+    }
+}
+</script>
+
+<style lang="scss">
+    .add-new-node {
+
+        h2 {
+            margin: 0;
+            font-size: 32px;
+        }
+
+        &__body {
+            width: 441px;
+
+            &__input:not(:first-of-type) {
+                margin-top: 20px;
+            }
+        }
+
+        &__footer {
+            width: 441px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+    }
+</style>

web/multinode/src/app/views/Dashboard.vue

@@ -3,6 +3,7 @@
 
 <template>
   <div>
+
   </div>
 </template>