web/satellite: fixed inputs to have correct box-sizing

Fixed inputs to have correct box-sizing and fixed stylings for it.
Removed 2 unused components.
Fixed VInfo component's small styling issue.

Change-Id: I268b4b754be477d4e0d36b3946d62d65fd7d6cc8

web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue

@@ -47,7 +47,6 @@
                 </div>
                 <div v-else class="create-passphrase__container__value-area__password">
                     <HeaderedInput
-                        class="create-passphrase__container__value-area__password__input"
                         placeholder="Enter encryption passphrase here"
                         :error="errorMessage"
                         @setData="onChangePassphrase"
@@ -448,10 +447,6 @@ export default class CreatePassphraseStep extends Vue {
                 &__password {
                     width: 100%;
                     margin: 10px 0 20px 0;
-
-                    &__input {
-                        width: calc(100% - 2px);
-                    }
                 }
             }
         }

web/satellite/src/components/accessGrants/steps/EnterPassphraseStep.vue

@@ -7,7 +7,6 @@
         <h1 class="enter-passphrase__title">Enter Encryption Passphrase</h1>
         <p class="enter-passphrase__sub-title">Enter the passphrase you most recently generated for Access Grants</p>
         <HeaderedInput
-            class="enter-passphrase__input"
             label="Encryption Passphrase"
             placeholder="Enter your passphrase here"
             :error="errorMessage"
@@ -194,10 +193,6 @@ export default class EnterPassphraseStep extends Vue {
             max-width: 340px;
         }
 
-        &__input {
-            width: calc(100% - 2px);
-        }
-
         &__next-button {
             margin-top: 93px;
         }

web/satellite/src/components/accessGrants/steps/NameStep.vue

@@ -6,7 +6,6 @@
         <h1 class="name-step__title">Name Your Access Grant</h1>
         <p class="name-step__sub-title">Enter a name for your new Access grant to get started.</p>
         <HeaderedInput
-            class="name-step__input"
             label="Access Grant Name"
             placeholder="Enter a name here..."
             :error="errorMessage"
@@ -169,10 +168,6 @@ export default class NameStep extends Vue {
             margin: 0 0 80px 0;
         }
 
-        &__input {
-            width: calc(100% - 2px);
-        }
-
         &__buttons-area {
             width: 100%;
             display: flex;

web/satellite/src/components/account/ChangePasswordPopup.vue

@@ -13,7 +13,6 @@
                     class="full-input"
                     label="Old Password"
                     placeholder="Enter Old Password"
-                    width="100%"
                     is-password="true"
                     :error="oldPasswordError"
                     @setData="setOldPassword"
@@ -23,7 +22,6 @@
                         class="full-input"
                         label="New Password"
                         placeholder="Enter New Password"
-                        width="100%"
                         is-password="true"
                         :error="newPasswordError"
                         @setData="setNewPassword"
@@ -39,7 +37,6 @@
                     class="full-input"
                     label="Confirm Password"
                     placeholder="Confirm Password"
-                    width="100%"
                     is-password="true"
                     :error="confirmationPasswordError"
                     @setData="setPasswordConfirmation"
@@ -196,7 +193,6 @@ export default class ChangePasswordPopup extends Vue {
     }
 
     .full-input {
-        width: 100%;
         margin-bottom: 15px;
     }
 

web/satellite/src/components/account/DeleteAccountPopup.vue

@@ -1,235 +0,0 @@
-// Copyright (C) 2019 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-    <div class="delete-account-container">
-        <div id="deleteAccountPopup" class="delete-account">
-            <div class="delete-account__info-panel-container">
-                <h2 class="delete-account__info-panel-container__main-label-text">Delete account</h2>
-                <DeleteAccountIcon />
-            </div>
-            <div class="delete-account__form-container">
-                <p class="delete-account__form-container__confirmation-text">Are you sure you want to delete your account? If you do so, all your information, projects and API Keys will be deleted forever (drop from the satellite).</p>
-                <HeaderedInput
-                    label="Enter your password"
-                    placeholder="Your Password"
-                    class="full-input"
-                    width="100%"
-                    is-password="true"
-                    :error="passwordError"
-                    @setData="setPassword"
-                />
-                <div class="delete-account__form-container__button-container">
-                    <VButton
-                        label="Cancel"
-                        width="205px" height="48px"
-                        :on-press="onCloseClick"
-                        is-transparent="true"
-                    />
-                    <VButton
-                        label="Delete"
-                        width="205px"
-                        height="48px"
-                        class="red"
-                        :on-press="onDeleteAccountClick"
-                    />
-                </div>
-            </div>
-            <div class="delete-account__close-cross-container" @click="onCloseClick">
-                <CloseCrossIcon />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang='ts'>
-import { Component, Vue } from 'vue-property-decorator';
-
-import HeaderedInput from '@/components/common/HeaderedInput.vue';
-import VButton from '@/components/common/VButton.vue';
-
-import DeleteAccountIcon from '@/../static/images/account/deleteAccountPopup/deleteAccount.svg';
-import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
-
-import { AuthHttpApi } from '@/api/auth';
-import { RouteConfig } from '@/router';
-import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
-import { Validator } from '@/utils/validation';
-
-// @vue/component
-@Component({
-    components: {
-        DeleteAccountIcon,
-        CloseCrossIcon,
-        HeaderedInput,
-        VButton,
-    },
-})
-export default class DeleteAccountPopup extends Vue {
-    public passwordError = '';
-    private password = '';
-    private isLoading = false;
-
-    private readonly auth: AuthHttpApi = new AuthHttpApi();
-
-    public setPassword(value: string): void {
-        this.password = value;
-        this.passwordError = '';
-    }
-
-    /**
-     * Validates password and if it is correct tries to delete account, close popup and redirect to login page.
-     */
-    public async onDeleteAccountClick(): Promise<void> {
-        if (this.isLoading) {
-            return;
-        }
-
-        this.isLoading = true;
-
-        if (!Validator.password(this.password)) {
-            this.passwordError = 'Invalid password. Must be 6 or more characters';
-            this.isLoading = false;
-
-            return;
-        }
-
-        try {
-            await this.auth.delete(this.password);
-            await this.$notify.success('Account was successfully deleted');
-
-            this.isLoading = false;
-            await this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT);
-            await this.$router.push(RouteConfig.Login.path);
-        } catch (error) {
-            await this.$notify.error(error.message);
-            this.isLoading = false;
-        }
-    }
-
-    /**
-     * Closes popup.
-     */
-    public onCloseClick(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT);
-    }
-}
-</script>
-
-<style scoped lang='scss'>
-    .delete-account-container {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: rgba(134, 134, 148, 0.4);
-        z-index: 1121;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: 'font_regular', sans-serif;
-    }
-
-    .input-container.full-input {
-        width: 100%;
-    }
-
-    .red {
-        background-color: #eb5757;
-    }
-
-    .text {
-        margin: 0 !important;
-        font-size: 16px;
-        line-height: 25px;
-    }
-
-    .delete-account {
-        width: 100%;
-        max-width: 845px;
-        background-color: #fff;
-        border-radius: 6px;
-        display: flex;
-        flex-direction: row;
-        align-items: flex-start;
-        position: relative;
-        justify-content: center;
-        padding: 100px 100px 100px 80px;
-
-        &__info-panel-container {
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            align-items: center;
-            margin-right: 100px;
-
-            &__main-label-text {
-                font-family: 'font_bold', sans-serif;
-                font-size: 32px;
-                line-height: 39px;
-                color: #384b65;
-                margin: 0 0 60px 0;
-            }
-        }
-
-        &__form-container {
-            width: 100%;
-            max-width: 450px;
-
-            &__confirmation-text {
-                margin: 0 0 25px 0;
-                font-family: 'font_medium', sans-serif;
-                font-size: 16px;
-                line-height: 25px;
-
-                &:nth-child(2) {
-                    margin-top: 20px;
-                }
-            }
-
-            &__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: center;
-            position: absolute;
-            right: 30px;
-            top: 40px;
-            height: 24px;
-            width: 24px;
-            cursor: pointer;
-
-            &:hover .close-cross-svg-path {
-                fill: #2683ff;
-            }
-        }
-    }
-
-    @media screen and (max-width: 720px) {
-
-        .delete-account {
-            padding: 10px;
-
-            &__info-panel-container {
-                display: none;
-            }
-
-            &__form-container {
-
-                &__button-container {
-                    width: 100%;
-                }
-            }
-        }
-    }
-</style>

web/satellite/src/components/account/EditProfilePopup.vue

@@ -12,10 +12,8 @@
                     <h2 class="edit-profile-popup__form-container__main-label-text">Edit Profile</h2>
                 </div>
                 <HeaderedInput
-                    class="full-input"
                     label="Full Name"
                     placeholder="Enter Full Name"
-                    width="100%"
                     :error="fullNameError"
                     :init-value="userInfo.fullName"
                     @setData="setFullName"
@@ -137,10 +135,6 @@ export default class EditProfilePopup extends Vue {
         font-family: 'font_regular', sans-serif;
     }
 
-    .input-container.full-input {
-        width: 100%;
-    }
-
     .edit-profile-popup {
         width: 100%;
         max-width: 440px;

web/satellite/src/components/account/SettingsArea.vue

@@ -189,13 +189,6 @@ export default class SettingsArea extends Vue {
         this.isMFACodesPopup = !this.isMFACodesPopup;
     }
 
-    /**
-     * Opens delete account popup.
-     */
-    public toggleDeleteAccountPopup(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT);
-    }
-
     /**
      * Opens change password popup.
      */

web/satellite/src/components/common/AddCouponCodeInput.vue

@@ -14,7 +14,6 @@
                 <HeaderlessInput
                     :label="inputLabel"
                     placeholder="Enter Coupon Code"
-                    class="add-coupon__input"
                     height="52px"
                     :with-icon="true"
                     @setData="setCouponCode"

web/satellite/src/components/common/GeneratePassphrase.vue

@@ -46,7 +46,6 @@
         <div v-else class="encrypt-container__enter">
             <HeaderlessInput
                 placeholder="Enter a passphrase here..."
-                width="100%"
                 :error="enterError"
                 @setData="setPassphrase"
             />

web/satellite/src/components/common/HeaderedInput.vue

@@ -90,7 +90,7 @@ export default class HeaderedInput extends HeaderlessInput {
         flex-direction: column;
         align-items: flex-start;
         margin-top: 10px;
-        width: 48%;
+        width: 100%;
         font-family: 'font_regular', sans-serif;
     }
 
@@ -159,9 +159,12 @@ export default class HeaderedInput extends HeaderlessInput {
         border-radius: 6px;
         outline: none;
         box-shadow: none;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
 
         &::placeholder {
-            font-family: 'font_medium', sans-serif;
+            opacity: 0.6;
         }
     }
 

web/satellite/src/components/common/VInfo.vue

@@ -5,7 +5,6 @@
     <div class="info" @mouseenter="toggleVisibility" @mouseleave="toggleVisibility">
         <slot name="icon" />
         <div v-if="isVisible" class="info__box">
-            <div v-if="isClickable" class="info__box__click-mock" />
             <div class="info__box__arrow" />
             <div class="info__box__message">
                 <h1 v-if="title" class="info__box__message__title">{{ title }}</h1>
@@ -37,8 +36,6 @@ import VButton from '@/components/common/VButton.vue';
 export default class VInfo extends Vue {
     @Prop({default: ''})
     private readonly title: string;
-    @Prop({default: false})
-    private readonly isClickable: boolean;
     @Prop({default: ''})
     private readonly buttonLabel: string;
     @Prop({default: () => false})
@@ -79,7 +76,7 @@ export default class VInfo extends Vue {
             z-index: 1;
 
             &__click-mock {
-                height: 24px;
+                height: 2px;
                 background: transparent;
             }
 

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

@@ -29,11 +29,10 @@
                 class="header-container__right-area__info"
                 title="Need some help?"
                 button-label="START TOUR"
-                is-clickable="true"
                 :on-button-click="onStartTourButtonClick"
             >
                 <template #icon>
-                    <InfoIcon />
+                    <InfoIcon class="header-container__right-area__info__icon" />
                 </template>
                 <template #message>
                     <p class="header-container__right-area__info__message">
@@ -181,6 +180,10 @@ export default class HeaderArea extends Vue {
                 max-height: 24px;
                 margin-right: 17px;
 
+                &__icon {
+                    cursor: pointer;
+                }
+
                 &__message {
                     color: #586c86;
                     font-family: 'font_regular', sans-serif;
@@ -247,7 +250,7 @@ export default class HeaderArea extends Vue {
     }
 
     ::v-deep .info__box {
-        top: calc(100% - 24px);
+        top: 100%;
 
         &__message {
             min-width: 335px;

web/satellite/src/components/objects/ObjectsPopup.vue

@@ -141,7 +141,6 @@ export default class ObjectsPopup extends Vue {
             }
 
             &__input {
-                width: calc(100% - 4px);
                 margin-bottom: 18px;
             }
 

web/satellite/src/components/onboardingTour/steps/cliFlow/ShareObject.vue

@@ -20,10 +20,9 @@
                     <VInfo
                         class="share-object__msg__info-button"
                         title="Check out the documentation for more info"
-                        is-clickable="true"
                     >
                         <template #icon>
-                            <InfoIcon />
+                            <InfoIcon class="share-object__msg__info-button__icon" />
                         </template>
                         <template #message>
                             <p class="share-object__msg__info-button__message">
@@ -127,6 +126,10 @@ export default class ShareObject extends Vue {
             &__info-button {
                 max-width: 18px;
 
+                &__icon {
+                    cursor: pointer;
+                }
+
                 &__message {
                     color: #586c86;
                     font-size: 12px;
@@ -161,7 +164,7 @@ export default class ShareObject extends Vue {
     }
 
     ::v-deep .info__box {
-        top: calc(100% - 24px);
+        top: 100%;
 
         &__message {
             min-width: 360px;

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

@@ -11,7 +11,6 @@
                 additional-label="Up To 20 Characters"
                 placeholder="Enter Project Name"
                 class="full-input"
-                width="100%"
                 is-limit-shown="true"
                 :current-limit="projectName.length"
                 :max-symbols="20"
@@ -24,8 +23,7 @@
                 additional-label="Optional"
                 class="full-input"
                 is-multiline="true"
-                height="60px"
+                height="100px"
-                width="calc(100% - 42px)"
                 is-limit-shown="true"
                 :current-limit="description.length"
                 :max-symbols="100"
@@ -164,11 +162,6 @@ export default class NewProjectPopup extends Vue {
 </script>
 
 <style scoped lang="scss">
-    .full-input {
-        width: 100%;
-        margin-top: 20px;
-    }
-
     .create-project-area {
         display: flex;
         align-items: center;
@@ -223,4 +216,8 @@ export default class NewProjectPopup extends Vue {
             }
         }
     }
+
+    .full-input {
+        margin-top: 20px;
+    }
 </style>

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

@@ -1,300 +0,0 @@
-// Copyright (C) 2019 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-    <div class="delete-project-popup-container">
-        <div id="deleteProjectPopup" class="delete-project-popup">
-            <div class="delete-project-popup__info-panel-container">
-                <h2 class="delete-project-popup__info-panel-container__main-label-text">Delete Project</h2>
-                <DeleteProjectIcon />
-            </div>
-            <div class="delete-project-popup__form-container">
-                <p class="delete-project-popup__form-container__confirmation-text">Are you sure that you want to delete your project? You will lose all your buckets and files that linked to this project.</p>
-                <div>
-                    <p v-if="!nameError" class="text">To confirm, enter the project name</p>
-                    <div v-if="nameError" class="delete-project-popup__form-container__label">
-                        <ErrorIcon alt="Red error icon with explanation mark" />
-                        <p class="text">{{ nameError }}</p>
-                    </div>
-                    <input
-                        v-model="projectName"
-                        class="delete-project-input"
-                        type="text"
-                        placeholder="Enter Project Name"
-                        @keyup="resetError"
-                    >
-                </div>
-                <div class="delete-project-popup__form-container__button-container">
-                    <VButton
-                        label="Cancel"
-                        width="205px"
-                        height="48px"
-                        :on-press="onCloseClick"
-                        is-transparent="true"
-                    />
-                    <VButton
-                        label="Delete"
-                        width="205px"
-                        height="48px"
-                        class="red"
-                        :on-press="onDeleteProjectClick"
-                        :is-disabled="isDeleteButtonDisabled"
-                    />
-                </div>
-            </div>
-            <div class="delete-project-popup__close-cross-container" @click="onCloseClick">
-                <CloseCrossIcon />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-
-import VButton from '@/components/common/VButton.vue';
-
-import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
-import DeleteProjectIcon from '@/../static/images/project/deleteProject.svg';
-import ErrorIcon from '@/../static/images/register/ErrorInfo.svg';
-
-import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
-import { BUCKET_ACTIONS } from '@/store/modules/buckets';
-import { PROJECTS_ACTIONS } from '@/store/modules/projects';
-import {
-    APP_STATE_ACTIONS,
-    PM_ACTIONS,
-} from '@/utils/constants/actionNames';
-
-// @vue/component
-@Component({
-    components: {
-        VButton,
-        DeleteProjectIcon,
-        ErrorIcon,
-        CloseCrossIcon,
-    },
-})
-export default class DeleteProjectPopup extends Vue {
-    private projectName = '';
-    private nameError = '';
-    private isLoading = false;
-
-    public resetError (): void {
-        this.nameError = '';
-    }
-
-    /**
-     * If entered project name matches tries to delete project and select another.
-     */
-    public async onDeleteProjectClick(): Promise<void> {
-        if (this.isLoading) {
-            return;
-        }
-
-        if (!this.validateProjectName()) {
-            return;
-        }
-
-        this.isLoading = true;
-
-        try {
-            await this.$store.dispatch(PROJECTS_ACTIONS.DELETE, this.$store.getters.selectedProject.id);
-            await this.$notify.success('Project was successfully deleted');
-            await this.selectProject();
-        } catch (e) {
-            await this.$notify.error(e.message);
-        }
-
-        this.isLoading = false;
-
-        await this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_PROJ);
-    }
-
-    /**
-     * Closes popup.
-     */
-    public onCloseClick(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_PROJ);
-    }
-
-    /**
-     * Indicates if delete button is disabled when project name is not entered or incorrect.
-     */
-    public get isDeleteButtonDisabled(): boolean {
-        return !this.projectName || !!this.nameError;
-    }
-
-    /**
-     * Checks is entered project name matches selected.
-     */
-    private validateProjectName(): boolean {
-        if (this.projectName === this.$store.getters.selectedProject.name) {
-            return true;
-        }
-
-        this.nameError = 'Name doesn\'t match with current project name';
-        this.isLoading = false;
-
-        return false;
-    }
-
-    private async selectProject(): Promise<void> {
-        if (this.$store.state.projectsModule.projects.length === 0) {
-            await this.$store.dispatch(PM_ACTIONS.CLEAR);
-            await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR);
-            await this.$store.dispatch(BUCKET_ACTIONS.CLEAR);
-
-            return;
-        }
-
-        // TODO: reuse select project functionality
-        await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, this.$store.state.projectsModule.projects[0].id);
-        await this.$store.dispatch(PM_ACTIONS.FETCH, 1);
-        await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, 1);
-        await this.$store.dispatch(BUCKET_ACTIONS.FETCH, 1);
-    }
-}
-</script>
-
-<style scoped lang="scss">
-    .delete-project-popup-container {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: rgba(134, 134, 148, 0.4);
-        z-index: 1121;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: 'font_medium', sans-serif;
-    }
-
-    .input-container.full-input {
-        width: 100%;
-    }
-
-    .red {
-        background-color: #eb5757;
-    }
-
-    .delete-project-popup {
-        width: 100%;
-        max-width: 800px;
-        height: 460px;
-        background-color: #fff;
-        border-radius: 6px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        position: relative;
-        justify-content: space-between;
-        padding: 20px 100px 0 100px;
-
-        &__info-panel-container {
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            align-items: center;
-            margin-right: 55px;
-
-            &__main-label-text {
-                font-family: 'font_bold', sans-serif;
-                font-size: 32px;
-                line-height: 39px;
-                color: #384b65;
-                margin-bottom: 30px;
-                margin-top: 0;
-            }
-        }
-
-        &__form-container {
-            width: 100%;
-            max-width: 440px;
-            height: 335px;
-
-            &__confirmation-text {
-                font-family: 'font_medium', sans-serif;
-                font-size: 16px;
-                line-height: 21px;
-                margin-bottom: 30px;
-            }
-
-            &__label {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-
-                .text {
-                    font-family: 'font_medium', sans-serif;
-                    padding-left: 10px;
-                    color: #eb5757;
-                }
-            }
-
-            .text {
-                margin: 0;
-            }
-
-            .delete-project-input {
-                font-family: 'font_regular', sans-serif;
-                font-size: 16px;
-                line-height: 21px;
-                margin-top: 10px;
-                resize: none;
-                margin-bottom: 18px;
-                height: 48px;
-                width: 100%;
-                text-indent: 20px;
-                border-color: rgba(56, 75, 101, 0.4);
-                border-radius: 6px;
-                outline: none;
-                box-shadow: none;
-            }
-
-            &__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: center;
-            position: absolute;
-            right: 30px;
-            top: 40px;
-            height: 24px;
-            width: 24px;
-            cursor: pointer;
-
-            &:hover .close-cross-svg-path {
-                fill: #2683ff;
-            }
-        }
-    }
-
-    @media screen and (max-width: 720px) {
-
-        .delete-project-popup {
-
-            &__info-panel-container {
-                display: none;
-            }
-
-            &__form-container {
-
-                &__button-container {
-                    width: 100%;
-                }
-            }
-        }
-    }
-</style>

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

@@ -20,8 +20,6 @@ class ViewsState {
         public isFreeCreditsDropdownShown = false,
         public isAvailableBalanceDropdownShown = false,
         public isPeriodsDropdownShown = false,
-        public isDeleteProjectPopupShown = false,
-        public isDeleteAccountPopupShown = false,
         public isSuccessfulRegistrationShown = false,
         public isEditProfilePopupShown = false,
         public isChangePasswordPopupShown = false,
@@ -89,14 +87,6 @@ export const appStateModule = {
         [APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN](state: State): void {
             state.appState.isPeriodsDropdownShown = !state.appState.isPeriodsDropdownShown;
         },
-        // Mutation changing delete project popup visibility
-        [APP_STATE_MUTATIONS.TOGGLE_DELETE_PROJECT_DROPDOWN](state: State): void {
-            state.appState.isDeleteProjectPopupShown = !state.appState.isDeleteProjectPopupShown;
-        },
-        // Mutation changing delete account popup visibility
-        [APP_STATE_MUTATIONS.TOGGLE_DELETE_ACCOUNT_DROPDOWN](state: State): void {
-            state.appState.isDeleteAccountPopupShown = !state.appState.isDeleteAccountPopupShown;
-        },
         // Mutation changing 'successful registration' area visibility.
         [APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_REGISTRATION](state: State): void {
             state.appState.isSuccessfulRegistrationShown = !state.appState.isSuccessfulRegistrationShown;
@@ -227,20 +217,6 @@ export const appStateModule = {
 
             commit(APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION, value);
         },
-        [APP_STATE_ACTIONS.TOGGLE_DEL_PROJ]: function ({commit, state}: AppContext): void {
-            if (!state.appState.isDeleteProjectPopupShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_DELETE_PROJECT_DROPDOWN);
-        },
-        [APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT]: function ({commit, state}: AppContext): void {
-            if (!state.appState.isDeleteAccountPopupShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_DELETE_ACCOUNT_DROPDOWN);
-        },
         [APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION]: function ({commit, state}: AppContext): void {
             if (!state.appState.isSuccessfulRegistrationShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);

web/satellite/src/store/mutationConstants.ts

@@ -16,8 +16,6 @@ export const APP_STATE_MUTATIONS = {
     TOGGLE_RESOURCES_DROPDOWN: 'TOGGLE_RESOURCES_DROPDOWN',
     TOGGLE_SETTINGS_DROPDOWN: 'TOGGLE_SETTINGS_DROPDOWN',
     TOGGLE_EDIT_PROJECT_DROPDOWN: 'TOGGLE_EDIT_PROJECT_DROPDOWN',
-    TOGGLE_DELETE_PROJECT_DROPDOWN: 'TOGGLE_DELETE_PROJECT_DROPDOWN',
-    TOGGLE_DELETE_ACCOUNT_DROPDOWN: 'TOGGLE_DELETE_ACCOUNT_DROPDOWN',
     TOGGLE_FREE_CREDITS_DROPDOWN: 'TOGGLE_FREE_CREDITS_DROPDOWN',
     TOGGLE_AVAILABLE_BALANCE_DROPDOWN: 'TOGGLE_AVAILABLE_BALANCE_DROPDOWN',
     TOGGLE_PERIODS_DROPDOWN: 'TOGGLE_PERIODS_DROPDOWN',

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

@@ -11,8 +11,6 @@ export const APP_STATE_ACTIONS = {
     TOGGLE_FREE_CREDITS_DROPDOWN: 'toggleFreeCreditsDropdown',
     TOGGLE_AVAILABLE_BALANCE_DROPDOWN: 'toggleAvailableBalanceDropdown',
     TOGGLE_PERIODS_DROPDOWN: 'togglePeriodsDropdown',
-    TOGGLE_DEL_PROJ: 'toggleDeleteProjectPopup',
-    TOGGLE_DEL_ACCOUNT: 'toggleDeleteAccountPopup',
     TOGGLE_SUCCESSFUL_REGISTRATION: 'TOGGLE_SUCCESSFUL_REGISTRATION',
     TOGGLE_SUCCESSFUL_PASSWORD_RESET: 'TOGGLE_SUCCESSFUL_PASSWORD_RESET',
     TOGGLE_SUCCESSFUL_PROJECT_CREATION_POPUP: 'toggleSuccessfulProjectCreationPopup',

web/satellite/src/views/ForgotPassword.vue

@@ -27,12 +27,9 @@
                 <p class="forgot-area__content-area__container__message">If you’ve forgotten your account password, you can reset it here. Make sure you’re signing in to the right satellite.</p>
                 <div class="forgot-area__content-area__container__input-wrapper">
                     <HeaderlessInput
-                        class="full-input"
                         label="Email Address"
                         placeholder="example@email.com"
                         :error="emailError"
-                        width="calc(100% - 2px)"
-                        height="46px"
                         @setData="setEmail"
                     />
                 </div>

web/satellite/src/views/LoginArea.vue

@@ -34,23 +34,17 @@
                     </div>
                     <div v-if="!isMFARequired" class="login-area__input-wrapper">
                         <HeaderlessInput
-                            class="full-input"
                             label="Email Address"
                             placeholder="example@email.com"
                             :error="emailError"
-                            height="46px"
-                            width="calc(100% - 2px)"
                             @setData="setEmail"
                         />
                     </div>
                     <div v-if="!isMFARequired" class="login-area__input-wrapper">
                         <HeaderlessInput
-                            class="full-input"
                             label="Password"
                             placeholder="Password"
                             :error="passwordError"
-                            width="calc(100% - 2px)"
-                            height="46px"
                             is-password="true"
                             @setData="setPassword"
                         />
@@ -602,10 +596,6 @@ export default class Login extends Vue {
         cursor: pointer;
     }
 
-    .input-wrap.full-input {
-        width: calc(100% - 2px);
-    }
-
     .disabled,
     .disabled-button {
         pointer-events: none;

web/satellite/src/views/RegisterArea.vue

@@ -65,55 +65,40 @@
                     </div>
                     <div class="register-area__input-wrapper first-input">
                         <HeaderlessInput
-                            class="full-input"
                             label="Full Name"
                             placeholder="Enter Full Name"
                             :error="fullNameError"
-                            width="calc(100% - 2px)"
-                            height="46px"
                             @setData="setFullName"
                         />
                     </div>
                     <div class="register-area__input-wrapper">
                         <HeaderlessInput
-                            class="full-input"
                             label="Email Address"
                             placeholder="example@email.com"
                             :error="emailError"
-                            width="calc(100% - 2px)"
-                            height="46px"
                             @setData="setEmail"
                         />
                     </div>
                     <div v-if="isProfessional">
                         <div class="register-area__input-wrapper">
                             <HeaderlessInput
-                                class="full-input"
                                 label="Company Name"
                                 placeholder="Acme Corp."
                                 :error="companyNameError"
-                                width="calc(100% - 2px)"
-                                height="46px"
                                 @setData="setCompanyName"
                             />
                         </div>
                         <div class="register-area__input-wrapper">
                             <HeaderlessInput
-                                class="full-input"
                                 label="Position"
                                 placeholder="Position Title"
                                 :error="positionError"
-                                width="calc(100% - 2px)"
-                                height="46px"
                                 @setData="setPosition"
                             />
                         </div>
                         <div class="register-area__input-wrapper">
                             <SelectInput
-                                class="full-input"
                                 label="Employees"
-                                width="calc(100% - 2px)"
-                                height="46px"
                                 :options-list="employeeCountOptions"
                                 @setData="setEmployeeCount"
                             />
@@ -122,12 +107,9 @@
                     <div class="register-input">
                         <div class="register-area__input-wrapper">
                             <HeaderlessInput
-                                class="full-input"
                                 label="Password"
                                 placeholder="Enter Password"
                                 :error="passwordError"
-                                width="calc(100% - 2px)"
-                                height="46px"
                                 is-password="true"
                                 @setData="setPassword"
                                 @showPasswordStrength="showPasswordStrength"
@@ -141,12 +123,9 @@
                     </div>
                     <div class="register-area__input-wrapper">
                         <HeaderlessInput
-                            class="full-input"
                             label="Retype Password"
                             placeholder="Retype Password"
                             :error="repeatedPasswordError"
-                            width="calc(100% - 2px)"
-                            height="46px"
                             is-password="true"
                             @setData="setRepeatedPassword"
                         />
@@ -956,10 +935,6 @@ export default class RegisterArea extends Vue {
         width: 100%;
     }
 
-    .input-wrap.full-input {
-        width: calc(100% - 2px);
-    }
-
     .container {
         display: block;
         position: relative;

web/satellite/src/views/ResetPassword.vue

@@ -16,8 +16,6 @@
                             label="Password"
                             placeholder="Enter Password"
                             :error="passwordError"
-                            width="100%"
-                            height="46px"
                             is-password="true"
                             @setData="setPassword"
                             @showPasswordStrength="showPasswordStrength"
@@ -33,8 +31,6 @@
                             label="Retype Password"
                             placeholder="Retype Password"
                             :error="repeatedPasswordError"
-                            width="100%"
-                            height="46px"
                             is-password="true"
                             @setData="setRepeatedPassword"
                         />

web/satellite/tests/unit/project/__snapshots__/CreateProject.spec.ts.snap

@@ -29,7 +29,7 @@ exports[`CreateProject.vue renders correctly 1`] = `
         </div>
         <h3 class="label-container__limit">0/100</h3>
       </div>
-      <!----> <textarea id="Description" placeholder="Enter Project Description" rows="5" cols="40" wrap="hard" class="headered-textarea" style="height: 60px;"></textarea>
+      <!----> <textarea id="Description" placeholder="Enter Project Description" rows="5" cols="40" wrap="hard" class="headered-textarea" style="width: 100%; height: 100px;"></textarea>
       <!---->
     </div>
     <div class="create-project-area__container__button-container">