JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[V3-770] user settings markup updated (#673)

Browse Source 
* [V3-770] user settings markup updated

* naming refactoring acc to BEM
This commit is contained in:
Nikolay Yurchenko 2018-11-19 17:32:50 +02:00 committed by GitHub
parent 832317b0ee
commit 4a82c47427
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 604 additions and 538 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/satellite/src/components/common/HeaderedInput.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="inputContainer"> <div class="input-container">
<div v-if="!isOptional" class="labelContainer"> <div v-if="!isOptional" class="label-container">
<img v-if="error" src="../../../static/images/register/ErrorInfo.svg"/> <img v-if="error" src="../../../static/images/register/ErrorInfo.svg"/>
<h3 v-if="!error">{{label}}</h3> <h3 v-if="!error">{{label}}</h3>
<h3 class="hiAddLabel">{{additionalLabel}}</h3> <h3 class="label-container__add-label">{{additionalLabel}}</h3>
<h3 class="error" v-if="error">{{error}}</h3> <h3 class="label-container__error" v-if="error">{{error}}</h3>
</div> </div>
<div v-if="isOptional" class="optionalLabelContainer"> <div v-if="isOptional" class="optional-label-container">
<h3>{{label}}</h3> <h3>{{label}}</h3>
<h4>Optional</h4> <h4>Optional</h4>
</div> </div>
@ -90,18 +90,31 @@ export default class HeaderedInput extends Vue { }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.inputContainer { .input-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
margin-top: 10px; margin-top: 10px;
} }
.labelContainer { .label-container {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-direction: row; flex-direction: row;
&__add-label {
margin-left: 5px;
font-family: 'montserrat_regular';
font-size: 16px;
line-height: 21px;
color: rgba(56, 75, 101, 0.4);
} }
.optionalLabelContainer {
&__error {
color: #FF5560;
margin-left: 10px;
}
}
.optional-label-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -129,21 +142,10 @@ textarea {
textarea { textarea {
padding-top: 20px; padding-top: 20px;
} }
.hiAddLabel {
margin-left: 5px;
font-family: 'montserrat_regular';
font-size: 16px;
line-height: 21px;
color: rgba(56, 75, 101, 0.4);
}
h3 { h3 {
font-family: 'montserrat_regular'; font-family: 'montserrat_regular';
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
color: #354049; color: #354049;
} }
.error {
color: #FF5560;
margin-left: 10px;
}
</style> </style>

10
web/satellite/src/components/common/HeaderlessInput.vue
View File

@ -99,16 +99,18 @@ input {
} }
.input-wrap { .input-wrap {
position: relative; position: relative;
}
.input-wrap svg { svg {
position: absolute; position: absolute;
right: 15px; right: 15px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
z-index: 20; z-index: 20;
cursor: pointer; cursor: pointer;
}
.input-wrap svg:hover path { &:hover path {
fill: #2683FF !important; fill: #2683FF !important;
} }
}
}
</style> </style>

27
web/satellite/src/components/dashboard/DashboardHeader.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div class="headerContainer"> <div class="header-container">
<img class="hLogo" src="../../../static/images/dashboard/Logo.png" alt=""> <img class="header-container__logo" src="../../../static/images/dashboard/Logo.png" alt="">
<ProjectSelectionArea class="hPSD"/> <ProjectSelectionArea class="header-container__project-selection"/>
<AccountButton class="hAccButton" /> <AccountButton class="header-container__account-button" />
<NewProjectArea class="hNewProjArea" /> <NewProjectArea class="header-container__new-project" />
</div> </div>
</template> </template>
@ -27,7 +27,7 @@ export default class DashboardHeader extends Vue {}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.headerContainer { .header-container {
width: 100%; width: 100%;
height: 10vh; height: 10vh;
background-color: white; background-color: white;
@ -37,21 +37,26 @@ export default class DashboardHeader extends Vue {}
justify-content: flex-start; justify-content: flex-start;
padding-left: 4vw; padding-left: 4vw;
padding-right: 4vw; padding-right: 4vw;
img { img {
cursor: pointer; cursor: pointer;
} }
}
.hLogo { &__logo {
width: 10vw; width: 10vw;
height: 7.5vh; height: 7.5vh;
} }
.hPSD {
&__project-selection {
margin-left: 10vw; margin-left: 10vw;
} }
.hAccButton {
&__account-button {
margin-left: 32vw; margin-left: 32vw;
} }
.hNewProjArea {
&__new-project {
margin-left: 20px; margin-left: 20px;
} }
}
</style> </style>

86
web/satellite/src/components/dashboard/account/AccountArea.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="aaContainer"> <div class="account-area-container">
<!-- TODO: Get info for this area placeholders from store --> <!-- TODO: Get info for this area placeholders from store -->
<!-- TODO: change isDisabled for save buttons for each area when data imputed --> <!-- TODO: change isDisabled for save buttons for each area when data imputed -->
<!--start of Account settings area --> <!--start of Account settings area -->
<div class="aaSettingsContainer"> <div class="account-area-settings-container">
<h1>Account Settings</h1> <h1>Account Settings</h1>
<h2>This information will be visible to all users</h2> <h2>This information will be visible to all users</h2>
<div class="aaRowContainer"> <div class="account-area-row-container">
<HeaderedInput <HeaderedInput
label="First name" label="First name"
placeholder ="Enter First Name" placeholder ="Enter First Name"
@ -20,7 +20,7 @@
:error="inputError" :error="inputError"
@setData="setInputValue" /> @setData="setInputValue" />
</div> </div>
<div class="aaRowContainer"> <div class="account-area-row-container">
<HeaderedInput <HeaderedInput
label="Email" label="Email"
placeholder ="Enter Email" placeholder ="Enter Email"
@ -28,20 +28,23 @@
:error="inputError" :error="inputError"
@setData="setInputValue" /> @setData="setInputValue" />
</div> </div>
<div class="aaSaveButtonArea"> <div class="account-area-save-button-area">
<div class="termsArea"> <!-- v-if we are editing this area -->
<Checkbox class="checkBox" @setData="setTermsAccepted"/> <div class="account-area-save-button-area__terms-area">
<Checkbox class="checkbox" @setData="setTermsAccepted"/>
<h2>I agree to the Storj Bridge Hosting <a>Terms & Conditions</a></h2> <h2>I agree to the Storj Bridge Hosting <a>Terms & Conditions</a></h2>
</div> </div>
<Button label="Save" width="14vw" height="5vh" :onPress="onSave" isWhite isDisabled/> <!-- v-if we are editing this area -->
<Button class="account-area-save-button-area__cancel-button" label="Cancel" width="10vw" height="5vh" :onPress="onCancel" isWhite/>
<Button label="Save" width="10vw" height="5vh" :onPress="onSave" isDisabled/>
</div> </div>
</div> </div>
<!--end of Account settings area --> <!--end of Account settings area -->
<!--start of Company area --> <!--start of Company area -->
<div class="aaCompanyContainer"> <div class="account-area-company-container">
<h1>Company</h1> <h1>Company</h1>
<h2>Optional</h2> <h2>Optional</h2>
<div class="aaRowContainer"> <div class="account-area-row-container">
<HeaderedInput <HeaderedInput
label="Company Name" label="Company Name"
placeholder ="Enter Company Name" placeholder ="Enter Company Name"
@ -49,7 +52,7 @@
:error="inputError" :error="inputError"
@setData="setInputValue" /> @setData="setInputValue" />
</div> </div>
<div class="aaRowContainer"> <div class="account-area-row-container">
<HeaderedInput <HeaderedInput
label="Company Address" label="Company Address"
placeholder ="Enter Company Address" placeholder ="Enter Company Address"
@ -57,7 +60,7 @@
:error="inputError" :error="inputError"
@setData="setInputValue" /> @setData="setInputValue" />
</div> </div>
<div class="aaRowContainer"> <div class="account-area-row-container">
<HeaderedInput <HeaderedInput
label="Country" label="Country"
placeholder ="Enter Country" placeholder ="Enter Country"
@ -71,7 +74,7 @@
:error="inputError" :error="inputError"
@setData="setInputValue" /> @setData="setInputValue" />
</div> </div>
<div class="aaRowContainer"> <div class="account-area-row-container">
<HeaderedInput <HeaderedInput
label="State" label="State"
placeholder ="Enter State" placeholder ="Enter State"
@ -85,16 +88,18 @@
:error="inputError" :error="inputError"
@setData="setInputValue" /> @setData="setInputValue" />
</div> </div>
<div class="aaSaveButtonArea"> <div class="account-area-save-button-area">
<Button label="Save" width="14vw" height="5vh" :onPress="onSave" isWhite isDisabled/> <!-- v-if we are editing this area -->
<Button class="account-area-save-button-area__cancel-button" label="Cancel" width="10vw" height="5vh" :onPress="onCancel" isWhite/>
<Button label="Save" width="10vw" height="5vh" :onPress="onSave" isWhite isDisabled/>
</div> </div>
</div> </div>
<!--end of Company area --> <!--end of Company area -->
<!--start of Password area --> <!--start of Password area -->
<div class="aaPasswordContainer"> <div class="account-area-password-container">
<h1>Change Password</h1> <h1>Change Password</h1>
<h2>Please choose a password which is longer than 6 characters.</h2> <h2>Please choose a password which is longer than 6 characters.</h2>
<div class="aaRowContainer"> <div class="account-area-row-container">
<HeaderedInput <HeaderedInput
label="Old Password" label="Old Password"
placeholder ="Enter Old Password" placeholder ="Enter Old Password"
@ -110,7 +115,7 @@
:error="inputError" :error="inputError"
@setData="setInputValue" /> @setData="setInputValue" />
</div> </div>
<div class="aaRowContainer"> <div class="account-area-row-container">
<HeaderedInput <HeaderedInput
label="Confirm password" label="Confirm password"
placeholder ="Confirm password" placeholder ="Confirm password"
@ -119,13 +124,15 @@
:error="inputError" :error="inputError"
@setData="setInputValue" /> @setData="setInputValue" />
</div> </div>
<div class="aaSaveButtonArea"> <div class="account-area-save-button-area">
<Button label="Save" width="14vw" height="5vh" :onPress="onSave" isWhite isDisabled/> <!-- v-if we are editing this area -->
<Button class="account-area-save-button-area__cancel-button" label="Cancel" width="10vw" height="5vh" :onPress="onCancel" isWhite/>
<Button label="Save" width="10vw" height="5vh" :onPress="onSave" isWhite isDisabled/>
</div> </div>
</div> </div>
<!--end of Password area --> <!--end of Password area -->
<div class="aaButtonArea"> <div class="account-area-button-area">
<Button label="Delete account" width="14vw" height="5vh" :onPress="onDeleteAccountClick" isWhite/> <Button label="Delete account" width="10vw" height="5vh" :onPress="onDeleteAccountClick" isWhite/>
</div> </div>
</div> </div>
</template> </template>
@ -155,7 +162,7 @@ export default class AccountArea extends Vue {}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.aaContainer { .account-area-container {
padding: 55px 55px 55px 55px; padding: 55px 55px 55px 55px;
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;
@ -174,7 +181,7 @@ export default class AccountArea extends Vue {}
color: rgba(56, 75, 101, 0.4); color: rgba(56, 75, 101, 0.4);
} }
} }
.aaSettingsContainer { .account-area-settings-container {
height: 50vh; height: 50vh;
border-radius: 6px; border-radius: 6px;
display: flex; display: flex;
@ -184,45 +191,46 @@ export default class AccountArea extends Vue {}
padding: 3vh 3vh 3vh 3vh; padding: 3vh 3vh 3vh 3vh;
background-color: #fff; background-color: #fff;
} }
.aaCompanyContainer { .account-area-company-container {
@extend .aaSettingsContainer; @extend .account-area-settings-container;
margin-top: 5vh; margin-top: 5vh;
height: 75vh; height: 75vh;
} }
.aaPasswordContainer { .account-area-password-container {
@extend .aaCompanyContainer; @extend .account-area-company-container;
height: 50vh; height: 50vh;
} }
.aaButtonArea { .account-area-button-area {
margin-top: 5vh; margin-top: 5vh;
height: 13vh; height: 13vh;
} }
.aaRowContainer { .account-area-row-container {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-content: flex-end; align-content: flex-end;
justify-content: space-between; justify-content: space-between;
} }
.aaSaveButtonArea { .account-area-save-button-area {
margin-top: 5vh; margin-top: 5vh;
width: 100%; width: 100%;
align-self: flex-end; align-self: flex-end;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
Button { Button {
align-self: center; align-self: center;
} }
}
.termsArea { &__terms-area {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: -20px; margin-top: -1vh;
margin-right: 30vw; margin-right: 22vw;
.checkBox { .checkbox {
align-self: center; align-self: center;
}; };
h2 { h2 {
@ -230,10 +238,16 @@ export default class AccountArea extends Vue {}
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
margin-left: 10px; margin-left: 10px;
margin-top: 3vh;
}; };
a { a {
color: #2683FF; color: #2683FF;
font-family: 'montserrat_bold'; font-family: 'montserrat_bold';
} }
} }
&__cancel-button {
margin-right: 2vw;
}
}
</style> </style>

20
web/satellite/src/components/dashboard/account/AccountButton.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="abContainer" > <div class="account-button-container" >
<div class="abToggleContainer" v-on:click="toggleSelection" > <div class="account-button-toggle-container" v-on:click="toggleSelection" >
<!-- background of this div generated and stores in store --> <!-- background of this div generated and stores in store -->
<div class="abAvatar" :style="style"> <div class="account-button-toggle-container__avatar" :style="style">
<!-- First digit of firstName after Registration --> <!-- First digit of firstName after Registration -->
<!-- img if avatar was set --> <!-- img if avatar was set -->
<h1>{{avatarLetter}}</h1> <h1>{{avatarLetter}}</h1>
</div> </div>
<h1>{{userName}}</h1> <h1>{{userName}}</h1>
<div class="abExpanderArea"> <div class="account-button-toggle-container__expander-area">
<img v-if="!isChoiceShown" src="../../../../static/images/register/BlueExpand.svg" /> <img v-if="!isChoiceShown" src="../../../../static/images/register/BlueExpand.svg" />
<img v-if="isChoiceShown" src="../../../../static/images/register/BlueHide.svg" /> <img v-if="isChoiceShown" src="../../../../static/images/register/BlueHide.svg" />
</div> </div>
@ -59,7 +59,7 @@ export default class AccountButton extends Vue {}
text-decoration: none; text-decoration: none;
outline: none; outline: none;
} }
.abContainer { .account-button-container {
position: relative; position: relative;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
@ -72,15 +72,15 @@ export default class AccountButton extends Vue {}
color: #354049; color: #354049;
} }
} }
.abToggleContainer { .account-button-toggle-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 12.5vw; width: 12.5vw;
height: 5vh; height: 5vh;
}
.abAvatar { &__avatar {
width: 2.8vw; width: 2.8vw;
height: 100%; height: 100%;
border-radius: 6px; border-radius: 6px;
@ -94,11 +94,13 @@ export default class AccountButton extends Vue {}
color: #354049; color: #354049;
} }
} }
.abExpanderArea {
&__expander-area {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
}
</style> </style>

43
web/satellite/src/components/dashboard/account/AccountDropdown.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<!-- To close popup we need to use method onCloseClick --> <!-- To close popup we need to use method onCloseClick -->
<div class="adChoiceContainer" > <div class="account-dropdown-choice-container" >
<div class="adOverflowContainer"> <div class="account-dropdown-overflow-container">
<!-- TODO: add selection logic onclick --> <!-- TODO: add selection logic onclick -->
<div class="adItemContainer settings" v-on:click="onAccountSettingsClick" > <div class="account-dropdown-item-container settings" v-on:click="onAccountSettingsClick" >
<div class="adImageContainer"> <div class="account-dropdown-item-container__image-container">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 8.72549C20 9.60784 20 10.4902 20 11.2745C19.9024 11.5686 19.7073 11.6667 19.4146 11.7647C18.7317 11.9608 18.1463 12.0588 17.4634 12.2549C17.3659 12.2549 17.2683 12.3529 17.2683 12.451C17.1707 12.7451 16.9756 13.0392 16.878 13.4314C16.878 13.5294 16.878 13.6275 16.878 13.7255C17.1707 14.2157 17.4634 14.7059 17.7561 15.2941C17.9512 15.6863 17.9512 15.8824 17.6585 16.1765C17.1707 16.6667 16.6829 17.1569 16.1951 17.6471C15.9024 17.9412 15.6098 17.9412 15.3171 17.7451C14.8293 17.451 14.3415 17.1569 13.8537 16.8627C13.7561 16.7647 13.6585 16.7647 13.561 16.8627C13.2683 17.0588 12.878 17.1569 12.5854 17.2549C12.4878 17.2549 12.3902 17.3529 12.3902 17.451C12.1951 18.1373 12.0976 18.7255 11.9024 19.4118C11.8049 19.7059 11.7073 19.902 11.4146 20C10.5366 20 9.65854 20 8.87805 20C8.58537 19.902 8.48781 19.7059 8.39024 19.4118C8.19512 18.7255 8.09756 18.1373 7.90244 17.451C7.90244 17.3529 7.80488 17.2549 7.70732 17.2549C7.41463 17.1569 7.02439 16.9608 6.73171 16.8627C6.63415 16.7647 6.53659 16.8627 6.43902 16.8627C5.95122 17.1569 5.46341 17.451 4.97561 17.7451C4.58537 17.9412 4.39024 17.9412 4.09756 17.6471C3.60976 17.1569 3.12195 16.6667 2.63415 16.1765C2.34146 15.8824 2.34146 15.5882 2.53659 15.2941C2.82927 14.8039 3.12195 14.3137 3.41463 13.8235C3.5122 13.7255 3.5122 13.6275 3.41463 13.5294C3.21951 13.2353 3.12195 12.8431 3.02439 12.549C3.02439 12.451 2.92683 12.3529 2.82927 12.3529C2.14634 12.1569 1.46341 12.0588 0.780488 11.8627C0.195122 11.7647 0 11.5686 0 11.1765C0 10.4902 0 9.70588 0 9.01961C0 8.62745 0.195122 8.43137 0.585366 8.33333C1.26829 8.13725 1.95122 7.94118 2.53659 7.7451C2.63415 7.7451 2.73171 7.64706 2.73171 7.54902C2.92683 7.35294 3.02439 7.05882 3.12195 6.76471C3.12195 6.66667 3.12195 6.56863 3.12195 6.47059C2.82927 5.88235 2.43902 5.39216 2.14634 4.80392C1.95122 4.41176 1.95122 4.21569 2.2439 3.92157C2.73171 3.43137 3.21951 2.94118 3.70732 2.45098C4 2.15686 4.29268 2.15686 4.58537 2.35294C5.17073 2.64706 5.65854 3.03922 6.2439 3.33333C6.34146 3.33333 6.43902 3.33333 6.53659 3.33333C6.82927 3.13725 7.21951 2.94118 7.5122 2.84314C7.60976 2.84314 7.70732 2.7451 7.70732 2.64706C7.90244 1.96078 8 1.27451 8.19512 0.588235C8.39024 0.196078 8.58537 0 8.97561 0C9.65854 0 10.439 0 11.122 0C11.5122 0 11.7073 0.196078 11.8049 0.588235C12 1.27451 12.0976 1.96078 12.2927 2.64706C12.2927 2.7451 12.3902 2.84314 12.4878 2.84314C12.7805 2.94118 13.1707 3.13725 13.4634 3.23529C13.561 3.33333 13.6585 3.23529 13.7561 3.23529C14.2439 2.94118 14.7317 2.64706 15.2195 2.35294C15.6098 2.15686 15.8049 2.15686 16.1951 2.45098C16.6829 2.94118 17.1707 3.43137 17.6585 3.92157C17.9512 4.21569 18.0488 4.5098 17.7561 4.90196C17.4634 5.39216 17.1707 5.88235 16.878 6.47059C16.878 6.56863 16.878 6.66667 16.878 6.76471C16.9756 7.05882 17.1707 7.45098 17.2683 7.7451C17.2683 7.84314 17.3659 7.94118 17.4634 7.94118C18.1463 8.13726 18.7317 8.23529 19.4146 8.43137C19.7073 8.33333 19.9024 8.52941 20 8.72549ZM10.0488 5.98039C7.80488 5.98039 5.95122 7.84314 5.95122 10.098C5.95122 12.3529 7.80488 14.2157 10.0488 14.2157C12.2927 14.2157 14.1463 12.3529 14.1463 10.098C14.1463 7.7451 12.2927 5.98039 10.0488 5.98039Z" fill="#354049"/> <path d="M20 8.72549C20 9.60784 20 10.4902 20 11.2745C19.9024 11.5686 19.7073 11.6667 19.4146 11.7647C18.7317 11.9608 18.1463 12.0588 17.4634 12.2549C17.3659 12.2549 17.2683 12.3529 17.2683 12.451C17.1707 12.7451 16.9756 13.0392 16.878 13.4314C16.878 13.5294 16.878 13.6275 16.878 13.7255C17.1707 14.2157 17.4634 14.7059 17.7561 15.2941C17.9512 15.6863 17.9512 15.8824 17.6585 16.1765C17.1707 16.6667 16.6829 17.1569 16.1951 17.6471C15.9024 17.9412 15.6098 17.9412 15.3171 17.7451C14.8293 17.451 14.3415 17.1569 13.8537 16.8627C13.7561 16.7647 13.6585 16.7647 13.561 16.8627C13.2683 17.0588 12.878 17.1569 12.5854 17.2549C12.4878 17.2549 12.3902 17.3529 12.3902 17.451C12.1951 18.1373 12.0976 18.7255 11.9024 19.4118C11.8049 19.7059 11.7073 19.902 11.4146 20C10.5366 20 9.65854 20 8.87805 20C8.58537 19.902 8.48781 19.7059 8.39024 19.4118C8.19512 18.7255 8.09756 18.1373 7.90244 17.451C7.90244 17.3529 7.80488 17.2549 7.70732 17.2549C7.41463 17.1569 7.02439 16.9608 6.73171 16.8627C6.63415 16.7647 6.53659 16.8627 6.43902 16.8627C5.95122 17.1569 5.46341 17.451 4.97561 17.7451C4.58537 17.9412 4.39024 17.9412 4.09756 17.6471C3.60976 17.1569 3.12195 16.6667 2.63415 16.1765C2.34146 15.8824 2.34146 15.5882 2.53659 15.2941C2.82927 14.8039 3.12195 14.3137 3.41463 13.8235C3.5122 13.7255 3.5122 13.6275 3.41463 13.5294C3.21951 13.2353 3.12195 12.8431 3.02439 12.549C3.02439 12.451 2.92683 12.3529 2.82927 12.3529C2.14634 12.1569 1.46341 12.0588 0.780488 11.8627C0.195122 11.7647 0 11.5686 0 11.1765C0 10.4902 0 9.70588 0 9.01961C0 8.62745 0.195122 8.43137 0.585366 8.33333C1.26829 8.13725 1.95122 7.94118 2.53659 7.7451C2.63415 7.7451 2.73171 7.64706 2.73171 7.54902C2.92683 7.35294 3.02439 7.05882 3.12195 6.76471C3.12195 6.66667 3.12195 6.56863 3.12195 6.47059C2.82927 5.88235 2.43902 5.39216 2.14634 4.80392C1.95122 4.41176 1.95122 4.21569 2.2439 3.92157C2.73171 3.43137 3.21951 2.94118 3.70732 2.45098C4 2.15686 4.29268 2.15686 4.58537 2.35294C5.17073 2.64706 5.65854 3.03922 6.2439 3.33333C6.34146 3.33333 6.43902 3.33333 6.53659 3.33333C6.82927 3.13725 7.21951 2.94118 7.5122 2.84314C7.60976 2.84314 7.70732 2.7451 7.70732 2.64706C7.90244 1.96078 8 1.27451 8.19512 0.588235C8.39024 0.196078 8.58537 0 8.97561 0C9.65854 0 10.439 0 11.122 0C11.5122 0 11.7073 0.196078 11.8049 0.588235C12 1.27451 12.0976 1.96078 12.2927 2.64706C12.2927 2.7451 12.3902 2.84314 12.4878 2.84314C12.7805 2.94118 13.1707 3.13725 13.4634 3.23529C13.561 3.33333 13.6585 3.23529 13.7561 3.23529C14.2439 2.94118 14.7317 2.64706 15.2195 2.35294C15.6098 2.15686 15.8049 2.15686 16.1951 2.45098C16.6829 2.94118 17.1707 3.43137 17.6585 3.92157C17.9512 4.21569 18.0488 4.5098 17.7561 4.90196C17.4634 5.39216 17.1707 5.88235 16.878 6.47059C16.878 6.56863 16.878 6.66667 16.878 6.76471C16.9756 7.05882 17.1707 7.45098 17.2683 7.7451C17.2683 7.84314 17.3659 7.94118 17.4634 7.94118C18.1463 8.13726 18.7317 8.23529 19.4146 8.43137C19.7073 8.33333 19.9024 8.52941 20 8.72549ZM10.0488 5.98039C7.80488 5.98039 5.95122 7.84314 5.95122 10.098C5.95122 12.3529 7.80488 14.2157 10.0488 14.2157C12.2927 14.2157 14.1463 12.3529 14.1463 10.098C14.1463 7.7451 12.2927 5.98039 10.0488 5.98039Z" fill="#354049"/>
</svg> </svg>
</div> </div>
<h2>Account settings</h2> <h2>Account settings</h2>
</div> </div>
<div class="adItemContainer billing" > <div class="account-dropdown-item-container billing" >
<div class="adImageContainer"> <div class="account-dropdown-item-container__image-container">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.26316V3.87134C20 3.40351 19.7938 2.93567 19.4845 2.5848C19.1753 2.23392 18.7629 2 18.3505 2H1.64948C1.23711 2 0.824742 2.23392 0.515464 2.5848C0.206186 2.93567 0 3.40351 0 3.87134V7.26316H20Z" fill="#354049"/> <path d="M20 7.26316V3.87134C20 3.40351 19.7938 2.93567 19.4845 2.5848C19.1753 2.23392 18.7629 2 18.3505 2H1.64948C1.23711 2 0.824742 2.23392 0.515464 2.5848C0.206186 2.93567 0 3.40351 0 3.87134V7.26316H20Z" fill="#354049"/>
<path d="M0 9.36816V16.1852C0 16.5862 0.206186 16.9872 0.515464 17.288C0.824742 17.5887 1.23711 17.7892 1.64948 17.7892H18.3505C18.7629 17.7892 19.1753 17.5887 19.4845 17.288C19.7938 16.9872 20 16.5862 20 16.1852V9.36816H0ZM5.36083 15.1827H2.68041V13.8794H5.36083V15.1827ZM10.7217 15.1827H6.70103V13.8794H10.7217V15.1827Z" fill="#354049"/> <path d="M0 9.36816V16.1852C0 16.5862 0.206186 16.9872 0.515464 17.288C0.824742 17.5887 1.23711 17.7892 1.64948 17.7892H18.3505C18.7629 17.7892 19.1753 17.5887 19.4845 17.288C19.7938 16.9872 20 16.5862 20 16.1852V9.36816H0ZM5.36083 15.1827H2.68041V13.8794H5.36083V15.1827ZM10.7217 15.1827H6.70103V13.8794H10.7217V15.1827Z" fill="#354049"/>
@ -20,16 +20,16 @@
</div> </div>
<h2>Billing History</h2> <h2>Billing History</h2>
</div> </div>
<div class="adItemContainer payment" > <div class="account-dropdown-item-container payment" >
<div class="adImageContainer"> <div class="account-dropdown-item-container__image-container">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.898 4.28571L12.7143 0.102041C12.7143 0 12.6122 0 12.4082 0H3.63265C2.71429 0 2 0.714286 2 1.63265V18.3673C2 19.2857 2.71429 20 3.63265 20H15.3673C16.2857 20 17 19.2857 17 18.3673V4.59184C17 4.4898 17 4.38775 16.898 4.28571ZM6.18367 10.9184C7 10.9184 7.71429 11.6327 7.71429 12.449C7.71429 13.1633 7.30612 13.6735 6.69388 13.8776V13.9796C6.69388 14.2857 6.4898 14.4898 6.18367 14.4898C5.87755 14.4898 5.67347 14.2857 5.67347 13.9796H5.16327C4.85714 13.9796 4.65306 13.7755 4.65306 13.4694C4.65306 13.1633 4.85714 12.9592 5.16327 12.9592H6.18367C6.4898 12.9592 6.69388 12.7551 6.69388 12.449C6.69388 12.1429 6.4898 11.9388 6.18367 11.9388C5.36735 11.9388 4.65306 11.2245 4.65306 10.4082C4.65306 9.69388 5.06122 9.18367 5.67347 8.97959V8.87755C5.67347 8.57143 5.87755 8.36735 6.18367 8.36735C6.4898 8.36735 6.69388 8.57143 6.69388 8.87755H7.20408C7.5102 8.87755 7.71429 9.08163 7.71429 9.38775C7.71429 9.69388 7.5102 9.89796 7.20408 9.89796H6.18367C5.87755 9.89796 5.67347 10.102 5.67347 10.4082C5.67347 10.7143 5.87755 10.9184 6.18367 10.9184ZM13.4286 14.3878H9.34694V12.551H13.3265V14.3878H13.4286ZM15.3673 10.7143H9.34694V8.87755H15.3673V10.7143ZM13.7347 4.18367C13.2245 4.18367 12.9184 3.77551 12.9184 3.36735V1.42857L15.6735 4.18367H13.7347Z" fill="#354049"/> <path d="M16.898 4.28571L12.7143 0.102041C12.7143 0 12.6122 0 12.4082 0H3.63265C2.71429 0 2 0.714286 2 1.63265V18.3673C2 19.2857 2.71429 20 3.63265 20H15.3673C16.2857 20 17 19.2857 17 18.3673V4.59184C17 4.4898 17 4.38775 16.898 4.28571ZM6.18367 10.9184C7 10.9184 7.71429 11.6327 7.71429 12.449C7.71429 13.1633 7.30612 13.6735 6.69388 13.8776V13.9796C6.69388 14.2857 6.4898 14.4898 6.18367 14.4898C5.87755 14.4898 5.67347 14.2857 5.67347 13.9796H5.16327C4.85714 13.9796 4.65306 13.7755 4.65306 13.4694C4.65306 13.1633 4.85714 12.9592 5.16327 12.9592H6.18367C6.4898 12.9592 6.69388 12.7551 6.69388 12.449C6.69388 12.1429 6.4898 11.9388 6.18367 11.9388C5.36735 11.9388 4.65306 11.2245 4.65306 10.4082C4.65306 9.69388 5.06122 9.18367 5.67347 8.97959V8.87755C5.67347 8.57143 5.87755 8.36735 6.18367 8.36735C6.4898 8.36735 6.69388 8.57143 6.69388 8.87755H7.20408C7.5102 8.87755 7.71429 9.08163 7.71429 9.38775C7.71429 9.69388 7.5102 9.89796 7.20408 9.89796H6.18367C5.87755 9.89796 5.67347 10.102 5.67347 10.4082C5.67347 10.7143 5.87755 10.9184 6.18367 10.9184ZM13.4286 14.3878H9.34694V12.551H13.3265V14.3878H13.4286ZM15.3673 10.7143H9.34694V8.87755H15.3673V10.7143ZM13.7347 4.18367C13.2245 4.18367 12.9184 3.77551 12.9184 3.36735V1.42857L15.6735 4.18367H13.7347Z" fill="#354049"/>
</svg> </svg>
</div> </div>
<h2>Payment Settup</h2> <h2>Payment Settup</h2>
</div> </div>
<div class="adItemContainer logout" > <div class="account-dropdown-item-container logout" >
<div class="adImageContainer"> <div class="account-dropdown-item-container__image-container">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.53516 1C4.28906 1 0 5.25293 0 10.5C0 15.7471 4.28906 20 9.53516 20C14.3887 20 18.4229 16.3604 19 11.6611H10.2783L11.8682 13.2441C12.1562 13.5322 12.248 14.0156 12.1436 14.4277C12.0947 14.6211 12.0029 14.7988 11.8682 14.9336C11.4443 15.3555 10.5967 15.3555 10.1729 14.9336L5.72266 10.5L10.1729 6.06641C10.5967 5.64453 11.4443 5.64453 11.8682 6.06641C12.291 6.48926 12.291 7.33301 11.8682 7.75586L10.2783 9.33887H19C18.4229 4.63965 14.3887 1 9.53516 1Z" fill="#354049"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.53516 1C4.28906 1 0 5.25293 0 10.5C0 15.7471 4.28906 20 9.53516 20C14.3887 20 18.4229 16.3604 19 11.6611H10.2783L11.8682 13.2441C12.1562 13.5322 12.248 14.0156 12.1436 14.4277C12.0947 14.6211 12.0029 14.7988 11.8682 14.9336C11.4443 15.3555 10.5967 15.3555 10.1729 14.9336L5.72266 10.5L10.1729 6.06641C10.5967 5.64453 11.4443 5.64453 11.8682 6.06641C12.291 6.48926 12.291 7.33301 11.8682 7.75586L10.2783 9.33887H19C18.4229 4.63965 14.3887 1 9.53516 1Z" fill="#354049"/>
</svg> </svg>
@ -71,7 +71,7 @@ export default class ProjectSelectionDropdown extends Vue {}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.adChoiceContainer { .account-dropdown-choice-container {
position: absolute; position: absolute;
top: 9vh; top: 9vh;
left: 0px; left: 0px;
@ -81,19 +81,20 @@ export default class ProjectSelectionDropdown extends Vue {}
background-color: #FFFFFF; background-color: #FFFFFF;
z-index: 800; z-index: 800;
} }
.adOverflowContainer { .account-dropdown-overflow-container {
position: relative; position: relative;
width: 12.5vw; width: 12.5vw;
height: auto; height: auto;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.adItemContainer { .account-dropdown-item-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
h2{ h2{
font-family: 'montserrat_regular'; font-family: 'montserrat_regular';
margin-left: 20px; margin-left: 20px;
@ -101,25 +102,23 @@ export default class ProjectSelectionDropdown extends Vue {}
line-height: 20px; line-height: 20px;
color: #354049; color: #354049;
} }
}
.adItemContainer:hover { &:hover {
background-color: #F2F2F6; background-color: #F2F2F6;
path { path {
fill: #2683FF !important; fill: #2683FF !important;
} }
} }
.adSelected {
font-family: 'montserrat_bold'; &__image-container {
}
.adNotSelected {
font-family: 'montserrat_regular';
}
.adImageContainer {
width: 20px; width: 20px;
svg { svg {
object-fit: cover; object-fit: cover;
} }
} }
}
a { a {
text-decoration: none; text-decoration: none;
outline: none; outline: none;

8
web/satellite/src/components/dashboard/newProject/NewProjectArea.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="npContainer"> <div class="new-project-container">
<div class="npButtonContainer" v-on:click="toggleSelection"> <div class="new-project-button-container" v-on:click="toggleSelection">
<h1>New Project +</h1> <h1>New Project +</h1>
</div> </div>
<NewProjectPopup v-if="isPopupShown" @onClose="toggleSelection"/> <NewProjectPopup v-if="isPopupShown" @onClose="toggleSelection"/>
@ -34,13 +34,13 @@ export default class NewProjectArea extends Vue {}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.npContainer { .new-project-container {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
background-color: #FFFFFF; background-color: #FFFFFF;
cursor: pointer; cursor: pointer;
} }
.npButtonContainer { .new-project-button-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;

50
web/satellite/src/components/dashboard/newProject/NewProjectPopup.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="npPopupContainer"> <div class="new-project-popup-container">
<div class="npPopup"> <div class="new-project-popup">
<div class="npInfoPanelContainer"> <div class="new-project-popup__info-panel-container">
<h2 class="npMainLabelText">Create New Project</h2> <h2 class="new-project-popup__info-panel-container__main-label-text">Create New Project</h2>
<img src="../../../../static/images/dashboard/CreateNewProject.png" alt=""> <img src="../../../../static/images/dashboard/CreateNewProject.png" alt="">
</div> </div>
<div class="npFormContainer"> <div class="new-project-popup__form-container">
<HeaderedInput <HeaderedInput
label="Project Name" label="Project Name"
additionalLabel="Up To 20 Characters" additionalLabel="Up To 20 Characters"
@ -27,16 +27,16 @@
width="30vw" width="30vw"
@setData="setDescription"> @setData="setDescription">
</HeaderedInput> </HeaderedInput>
<div class="npTermsArea"> <div class="new-project-popup__form-container__terms-area">
<Checkbox class="npCheckBox" @setData="setTermsAccepted"/> <Checkbox class="new-project-popup__form-container__terms-area__checkbox" @setData="setTermsAccepted"/>
<h2>I agree to the Storj Bridge Hosting <a>Terms & Conditions</a></h2> <h2>I agree to the Storj Bridge Hosting <a>Terms & Conditions</a></h2>
</div> </div>
<div class="npButtonContainer"> <div class="new-project-popup__form-container__button-container">
<Button label="Cancel" width="14vw" height="48px" :onPress="onCloseClick" isWhite/> <Button label="Cancel" width="14vw" height="48px" :onPress="onCloseClick" isWhite/>
<Button label="Create Project" width="14vw" height="48px" :onPress="onCreate"/> <Button label="Create Project" width="14vw" height="48px" :onPress="onCreate"/>
</div> </div>
</div> </div>
<div class="closeCrossContainer"> <div class="new-project-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"> <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"/> <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> </svg>
@ -78,7 +78,7 @@ export default class NewProjectPopup extends Vue {}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.npPopupContainer { .new-project-popup-container {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -90,7 +90,7 @@ export default class NewProjectPopup extends Vue {}
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.npPopup { .new-project-popup {
width: 72.3vw; width: 72.3vw;
height: 76vh; height: 76vh;
background-color: #FFFFFF; background-color: #FFFFFF;
@ -99,15 +99,15 @@ export default class NewProjectPopup extends Vue {}
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
.npInfoPanelContainer { &__info-panel-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
height: 55vh; height: 55vh;
}
.npMainLabelText { &__main-label-text {
font-family: 'montserrat_bold'; font-family: 'montserrat_bold';
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
@ -115,18 +115,22 @@ export default class NewProjectPopup extends Vue {}
margin-bottom: 60px; margin-bottom: 60px;
margin-top: 0; margin-top: 0;
} }
.npFormContainer { }
&__form-container {
width: 32vw; width: 32vw;
margin-left: 5vw; margin-left: 5vw;
}
.npTermsArea { &__terms-area {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
margin-top: 20px; margin-top: 20px;
.npCheckBox {
&__checkbox {
align-self: center; align-self: center;
}; };
h2 { h2 {
font-family: 'montserrat_regular'; font-family: 'montserrat_regular';
font-size: 14px; font-size: 14px;
@ -139,7 +143,8 @@ export default class NewProjectPopup extends Vue {}
font-family: 'montserrat_bold'; font-family: 'montserrat_bold';
} }
} }
.npButtonContainer {
&__button-container {
width: 30vw; width: 30vw;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -147,7 +152,9 @@ export default class NewProjectPopup extends Vue {}
align-items: center; align-items: center;
margin-top: 30px; margin-top: 30px;
} }
.closeCrossContainer { }
&__close-cross-container {
height: 85%; height: 85%;
width: 1vw; width: 1vw;
display: flex; display: flex;
@ -158,4 +165,5 @@ export default class NewProjectPopup extends Vue {}
cursor: pointer; cursor: pointer;
} }
} }
}
</style> </style>

15
web/satellite/src/components/dashboard/projectSelection/ProjectSelectionArea.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="psContainer"> <div class="project-selection-container">
<div class="psToggleContainer" v-on:click="toggleSelection"> <div class="project-selection-toggle-container" v-on:click="toggleSelection">
<h1>{{projectName}}</h1> <h1>{{projectName}}</h1>
<div class="psExpanderArea"> <div class="project-selection-toggle-container__expander-area">
<img v-if="!isChoiceShown" src="../../../../static/images/register/BlueExpand.svg" /> <img v-if="!isChoiceShown" src="../../../../static/images/register/BlueExpand.svg" />
<img v-if="isChoiceShown" src="../../../../static/images/register/BlueHide.svg" /> <img v-if="isChoiceShown" src="../../../../static/images/register/BlueHide.svg" />
</div> </div>
@ -39,7 +39,7 @@ export default class ProjectSelectionArea extends Vue {}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.psContainer { .project-selection-container {
position: relative; position: relative;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
@ -52,19 +52,20 @@ export default class ProjectSelectionArea extends Vue {}
color: #354049; color: #354049;
} }
} }
.psToggleContainer { .project-selection-toggle-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 12.5vw; width: 12.5vw;
height: 5vh; height: 5vh;
}
.psExpanderArea { &__expander-area {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
}
</style> </style>

35
web/satellite/src/components/dashboard/projectSelection/ProjectSelectionDropdown.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<!-- To close popup we need to use method onCloseClick --> <!-- To close popup we need to use method onCloseClick -->
<div class="psChoiceContainer" > <div class="project-selection-choice-container" >
<div class="psOverflowContainer"> <div class="project-selection-overflow-container">
<!-- loop for rendering projects --> <!-- loop for rendering projects -->
<!-- TODO: add selection logic onclick --> <!-- TODO: add selection logic onclick -->
<div class="psProjectChoice" v-for="project in projects" v-bind:key="project.name" > <div class="project-selection-overflow-container__project-choice" v-for="project in projects" v-bind:key="project.name" >
<div class="psMarkContainer"> <div class="project-selection-overflow-container__project-choice__mark-container">
<svg v-if="project.selected" width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg v-if="project.selected" width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0928 3.02746C14.6603 2.4239 14.631 1.4746 14.0275 0.907152C13.4239 0.339699 12.4746 0.368972 11.9072 0.972536L14.0928 3.02746ZM4.53846 11L3.44613 12.028C3.72968 12.3293 4.12509 12.5001 4.53884 12.5C4.95258 12.4999 5.34791 12.3289 5.63131 12.0275L4.53846 11ZM3.09234 7.27469C2.52458 6.67141 1.57527 6.64261 0.971991 7.21036C0.36871 7.77812 0.339911 8.72743 0.907664 9.33071L3.09234 7.27469ZM11.9072 0.972536L3.44561 9.97254L5.63131 12.0275L14.0928 3.02746L11.9072 0.972536ZM5.6308 9.97199L3.09234 7.27469L0.907664 9.33071L3.44613 12.028L5.6308 9.97199Z" fill="#2683FF"/> <path d="M14.0928 3.02746C14.6603 2.4239 14.631 1.4746 14.0275 0.907152C13.4239 0.339699 12.4746 0.368972 11.9072 0.972536L14.0928 3.02746ZM4.53846 11L3.44613 12.028C3.72968 12.3293 4.12509 12.5001 4.53884 12.5C4.95258 12.4999 5.34791 12.3289 5.63131 12.0275L4.53846 11ZM3.09234 7.27469C2.52458 6.67141 1.57527 6.64261 0.971991 7.21036C0.36871 7.77812 0.339911 8.72743 0.907664 9.33071L3.09234 7.27469ZM11.9072 0.972536L3.44561 9.97254L5.63131 12.0275L14.0928 3.02746L11.9072 0.972536ZM5.6308 9.97199L3.09234 7.27469L0.907664 9.33071L3.44613 12.028L5.6308 9.97199Z" fill="#2683FF"/>
</svg> </svg>
</div> </div>
<h2 v-bind:class="[project.selected ? 'psSelected' : 'psNotSelected']">{{project.name}}</h2> <h2 v-bind:class="[project.selected ? 'project-selection-overflow-container__project-choice--selected' : 'project-selection-overflow-container__project-choice--unselected']">{{project.name}}</h2>
</div> </div>
</div> </div>
</div> </div>
@ -56,7 +56,7 @@ export default class ProjectSelectionDropdown extends Vue {}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.psChoiceContainer { .project-selection-choice-container {
position: absolute; position: absolute;
top: 9vh; top: 9vh;
left: 0px; left: 0px;
@ -66,43 +66,50 @@ export default class ProjectSelectionDropdown extends Vue {}
background-color: #FFFFFF; background-color: #FFFFFF;
z-index: 800; z-index: 800;
} }
.psOverflowContainer { .project-selection-overflow-container {
position: relative; position: relative;
width: 17vw; width: 17vw;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
height: 25vh; height: 25vh;
background-color: #FFFFFF; background-color: #FFFFFF;
}
.psProjectChoice { &__project-choice {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
h2{ h2{
margin-left: 20px; margin-left: 20px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
color: #354049; color: #354049;
} }
}
.psProjectChoice:hover { &:hover {
background-color: #F2F2F6; background-color: #F2F2F6;
} }
.psSelected {
&--selected {
font-family: 'montserrat_bold'; font-family: 'montserrat_bold';
} }
.psNotSelected {
&--unselected {
font-family: 'montserrat_regular'; font-family: 'montserrat_regular';
} }
.psMarkContainer {
&__mark-container {
width: 10px;; width: 10px;;
svg { svg {
object-fit: cover; object-fit: cover;
} }
} }
}
}
/* width */ /* width */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 4px; width: 4px;

49
web/satellite/src/components/navigation/NavigationArea.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="naNavigationContainer"> <div class="navigation-area">
<div class="naNavigationItemContainer" v-for="navItem in navigation" v-bind:key="navItem.label" > <div class="navigation-area__item-container" v-for="navItem in navigation" v-bind:key="navItem.label" >
<router-link class="naLinkContainer" :to="navItem.path"> <router-link class="navigation-area__item-container__link-container" :to="navItem.path">
<div class="svg" v-html="navItem.svg"></div> <div v-html="navItem.svg"></div>
<h1>{{navItem.label}}</h1> <h1>{{navItem.label}}</h1>
<div class="naAddButton" v-if="navItem.label == 'Team'"> <div class="navigation-area__item-container__link-container__add-button" v-if="navItem.label == 'Team'">
<router-link to="/team/add_new"> <router-link to="/team/add_new">
<img src="../../../static/images/dashboard/Add.png" /> <img src="../../../static/images/dashboard/Add.png" />
</router-link> </router-link>
@ -32,7 +32,7 @@ export default class NavigationArea extends Vue {}
</script> </script>
<style lang="scss"> <style lang="scss">
.naNavigationContainer { .navigation-area {
position: fixed; position: fixed;
width: 20vw; width: 20vw;
height: 100%; height: 100%;
@ -40,19 +40,23 @@ export default class NavigationArea extends Vue {}
top: 10vh; top: 10vh;
background-color: #fff; background-color: #fff;
padding-top: 3.5vh; padding-top: 3.5vh;
}
a { &__item-container {
text-decoration: none;
}
.naNavigationItemContainer {
height: 7.5vh; height: 7.5vh;
padding-left: 4vw; padding-left: 4vw;
border-left: 3px solid transparent; border-left: 3px solid transparent;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
&:hover {
border-left: 3px solid #2683FF;
svg path {
fill: #2683FF !important;
} }
.naLinkContainer { }
&__link-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
@ -64,21 +68,22 @@ export default class NavigationArea extends Vue {}
color: #354049; color: #354049;
margin-left: 15px;; margin-left: 15px;;
} }
}
.naNavigationItemContainer:hover { &__add-button {
border-left: 3px solid #2683FF;
svg path {
fill: #2683FF !important;
}
}
.naAddButton {
margin-left: 4vw; margin-left: 4vw;
background-color: transparent; background-color: transparent;
}
.naAddButton:hover { &:hover {
img { img {
border-radius: 50px; border-radius: 50px;
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4); box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
} }
} }
}
}
}
}
a {
text-decoration: none;
}
</style> </style>

4
web/satellite/src/types/register.d.ts vendored
View File

@ -16,7 +16,5 @@ declare type RegisterData = {
state: string, state: string,
postalCode: string, postalCode: string,
isTermsAccepted: boolean, isTermsAccepted: boolean,
optionalAreaShown: boolean, optionalAreaShown: boolean
optionalArea: string,
optionalAreaActive: string
} }

11
web/satellite/src/views/Dashboard.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="dashboardContainer"> <div class="dashboard-container">
<NavigationArea /> <NavigationArea />
<DashboardHeader /> <DashboardHeader />
<div class="dMainAreaContainer"> <div class="dashboard-container__main-area">
<router-view /> <router-view />
</div> </div>
</div> </div>
@ -24,7 +24,7 @@ export default class Dashboard extends Vue {}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.dashboardContainer { .dashboard-container {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -32,12 +32,13 @@ export default class Dashboard extends Vue {}
top: 0; top: 0;
background-color: #F5F6FA; background-color: #F5F6FA;
z-index: 10; z-index: 10;
}
.dMainAreaContainer { &__main-area {
position: fixed; position: fixed;
width: 80vw; width: 80vw;
height: 100%; height: 100%;
left: 20vw; left: 20vw;
top: 10vh; top: 10vh;
} }
}
</style> </style>

82
web/satellite/src/views/Login.vue
View File

@ -1,30 +1,30 @@
<template> <template>
<div class="loginContainer"> <div class="login-container">
<img class="logo" src="../../static/images/login/Logo.svg" alt="logo" > <img class="login-container__logo" src="../../static/images/login/Logo.svg" alt="logo" >
<div class="loginArea"> <div class="login-area">
<div class="titleContainer"> <div class="login-area__title-container">
<h1>Welcome to Storj</h1> <h1>Welcome to Storj</h1>
</div> </div>
<HeaderlessInput <HeaderlessInput
class="emailInput" class="login-area__email-input"
placeholder ="Email" placeholder ="Email"
:error="emailError" :error="emailError"
@setData="setEmail" @setData="setEmail"
width="440px"> width="440px">
</HeaderlessInput> </HeaderlessInput>
<HeaderlessInput <HeaderlessInput
class="passwordInput" class="login-area__password-input"
placeholder ="Password" placeholder ="Password"
:error="emailError" :error="emailError"
@setData="setEmail" @setData="setEmail"
width="440px" width="440px"
isPassword> isPassword>
</HeaderlessInput> </HeaderlessInput>
<Button class="loginButton" label="Login" width="440px" height="48px" :onPress="onLogin"/> <Button class="login-area__login-button" label="Login" width="440px" height="48px" :onPress="onLogin"/>
<!-- start of navigation area --> <!-- start of navigation area -->
<div class="navigationArea"> <div class="login-area__navigation-area">
<router-link to="/register" class="navLink bold" exact><h3>Create account</h3></router-link> <router-link to="/register" class="login-area__navigation-area__nav-link bold" exact><h3>Create account</h3></router-link>
<router-link to="" class="navLink" exact><h3><strong>Forgot password</strong></h3></router-link> <router-link to="" class="login-area__navigation-area__nav-link" exact><h3><strong>Forgot password</strong></h3></router-link>
</div> </div>
<!-- end of navigation area --> <!-- end of navigation area -->
</div> </div>
@ -60,7 +60,7 @@ export default class Home extends Vue {}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.loginContainer { .login-container {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -76,28 +76,13 @@ export default class Home extends Vue {}
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
padding: 60px 0px 190px 104px; padding: 60px 0px 190px 104px;
}
.titleContainer { &__logo {
width: 440px;
height: 48px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 32px;
}
h1{
font-family: 'montserrat_bold';
font-size: 32px;
color: #384B65;
line-height: 39px;
margin-block-start: 0;
margin-block-end: 0;
}
.logo {
width: 139px; width: 139px;
height: 62px; height: 62px;
} }
.loginArea { }
.login-area {
background-color: #fff; background-color: #fff;
margin-top: 50px; margin-top: 50px;
width: 52.5vw; width: 52.5vw;
@ -107,15 +92,35 @@ export default class Home extends Vue {}
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
&__title-container {
width: 440px;
height: 48px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 32px;
h1 {
font-family: 'montserrat_bold';
font-size: 32px;
color: #384B65;
line-height: 39px;
margin-block-start: 0;
margin-block-end: 0;
} }
.passwordInput { }
&__password-input {
margin-top: 22px; margin-top: 22px;
} }
.loginButton {
&__login-button {
margin-top: 22px; margin-top: 22px;
align-self: center; align-self: center;
} }
.navigationArea {
&__navigation-area {
margin-top: 24px; margin-top: 24px;
width: 440px; width: 440px;
height: 48px; height: 48px;
@ -123,8 +128,8 @@ export default class Home extends Vue {}
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
}
.navLink { &__nav-link {
font-family: 'montserrat_regular'; font-family: 'montserrat_regular';
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
@ -134,10 +139,13 @@ export default class Home extends Vue {}
text-justify: center; text-justify: center;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
}
.navLink.bold { .bold {
font-family: 'montserrat_medium'; font-family: 'montserrat_medium';
} }
}
}
}
</style> </style>

138
web/satellite/src/views/Register.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div class="register"> <div class="register">
<div class="registerArea"> <div class="register-area">
<div class="scrollable"> <div class="register-area__scrollable">
<div class="navLabel"> <div class="register-area__scrollable__navLabel">
<router-link to="/" exact> <router-link to="/" exact>
<svg class="backImage" width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="register-area__scrollable__navLabel__back-image" width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5607 0.43934C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L5.12132 8H17.5C18.3284 8 19 8.67157 19 9.5C19 10.3284 18.3284 11 17.5 11H5.12132L10.5607 16.4393C11.1464 17.0251 11.1464 17.9749 10.5607 18.5607C9.97487 19.1464 9.02513 19.1464 8.43934 18.5607L0.43934 10.5607C-0.146447 9.97487 -0.146447 9.02513 0.43934 8.43934L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.43934Z" fill="#384B65"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5607 0.43934C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L5.12132 8H17.5C18.3284 8 19 8.67157 19 9.5C19 10.3284 18.3284 11 17.5 11H5.12132L10.5607 16.4393C11.1464 17.0251 11.1464 17.9749 10.5607 18.5607C9.97487 19.1464 9.02513 19.1464 8.43934 18.5607L0.43934 10.5607C-0.146447 9.97487 -0.146447 9.02513 0.43934 8.43934L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.43934Z" fill="#384B65"/>
</svg> </svg>
</router-link> </router-link>
<h1>Sign Up</h1> <h1>Sign Up</h1>
</div> </div>
<div class="formArea"> <div class="register-area__scrollable__form-area">
<HeaderedInput <HeaderedInput
label="First name" label="First name"
placeholder ="Enter First Name" placeholder ="Enter First Name"
@ -43,12 +43,12 @@
@setData="setRepeatedPassword" @setData="setRepeatedPassword"
isPassword> isPassword>
</HeaderedInput> </HeaderedInput>
<div class="companyArea"> <div class="register-area__scrollable__form-area__company-area">
<h2>Company</h2> <h2>Company</h2>
<div class="detailsArea" v-on:click="showOptional"> <div class="register-area__scrollable__form-area__company-area__details-area" v-on:click="showOptional">
<h2 v-if="!optionalAreaShown" class="detailsText">Details</h2> <h2 v-if="!optionalAreaShown" class="register-area__scrollable__form-area__company-area__details-area__text">Details</h2>
<h2 v-if="optionalAreaShown" class="detailsText">Hide Details</h2> <h2 v-if="optionalAreaShown" class="register-area__scrollable__form-area__company-area__details-area__text">Hide Details</h2>
<div class="expanderArea"> <div class="register-area__scrollable__form-area__company-area__details-area__expander-area">
<img v-if="!optionalAreaShown" src="../../static/images/register/BlueExpand.svg" /> <img v-if="!optionalAreaShown" src="../../static/images/register/BlueExpand.svg" />
<img v-if="optionalAreaShown" src="../../static/images/register/BlueHide.svg" /> <img v-if="optionalAreaShown" src="../../static/images/register/BlueHide.svg" />
</div> </div>
@ -62,7 +62,7 @@
</HeaderedInput> </HeaderedInput>
<!-- start of optional area --> <!-- start of optional area -->
<transition name="fade"> <transition name="fade">
<div id="optionalArena" v-bind:class="[optionalAreaShown ? optionalAreaActive : optionalArea]"> <div id="optional-area" v-bind:class="[optionalAreaShown ? 'optional-area--active' : 'optional-area']">
<HeaderedInput <HeaderedInput
label="Company Address" label="Company Address"
placeholder ="Enter Company Address" placeholder ="Enter Company Address"
@ -98,17 +98,17 @@
</div> </div>
</transition> </transition>
<!-- end of optional area --> <!-- end of optional area -->
<div class="termsArea"> <div class="register-area__scrollable__form-area__terms-area">
<Checkbox class="checkBox" @setData="setTermsAccepted"/> <Checkbox class="register-area__scrollable__form-area__terms-area__checkbox" @setData="setTermsAccepted"/>
<h2>I agree to the Storj Bridge Hosting <a>Terms & Conditions</a></h2> <h2>I agree to the Storj Bridge Hosting <a>Terms & Conditions</a></h2>
</div> </div>
<Button class="createButton" label="Create Account" width="100%" height="48px" :onPress="onCreate"/> <Button class="register-area__scrollable__form-area__create-button" label="Create Account" width="100%" height="48px" :onPress="onCreate"/>
</div> </div>
</div> </div>
</div> </div>
<img class="layoutImage" src ="../../static/images/register/RegisterImage.svg"/> <img class="layout-image" src ="../../static/images/register/RegisterImage.svg"/>
</div> </div>
</template> </template>
@ -217,9 +217,7 @@ import { validateEmail } from "@/utils/validation"
state: '', state: '',
postalCode: '', postalCode: '',
isTermsAccepted: false, isTermsAccepted: false,
optionalAreaShown: false, optionalAreaShown: false
optionalArea: "optionalArea",
optionalAreaActive: "optionalAreaActive"
} }
}, },
computed: { computed: {
@ -250,25 +248,19 @@ export default class Register extends Vue {}
max-height: 100vh; max-height: 100vh;
overflow: hidden; overflow: hidden;
} }
.registerArea { .register-area {
background-color: white; background-color: white;
width: 59vw; width: 59vw;
max-height: 100vh; max-height: 100vh;
}
.scrollable { &__scrollable {
height: 100vh; height: 100vh;
overflow-y: scroll; overflow-y: scroll;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
}
.layoutImage { &__navLabel {
background-color: #2683FF;
display: block;
width: auto;
height: 100vh;
}
.navLabel {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
@ -276,19 +268,28 @@ export default class Register extends Vue {}
align-self: center; align-self: center;
width: 68%; width: 68%;
margin-top: 70px; margin-top: 70px;
margin-bottom: 32px;
h1 { h1 {
color: #384B65; color: #384B65;
margin-left: 24px; margin-left: 24px;
font-family: 'montserrat_bold' font-family: 'montserrat_bold'
} }
&__back-image {
width: 21px;
height: 21px;
&:hover path {
fill: #2683FF !important;
} }
.formArea { }
}
&__form-area {
margin-top: 50px; margin-top: 50px;
align-self: center; align-self: center;
width: 35vw; width: 35vw;
}
.companyArea { &__company-area {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -301,33 +302,43 @@ export default class Register extends Vue {}
line-height: 27px; line-height: 27px;
margin-right: 11px; margin-right: 11px;
}; };
.detailsArea { &__details-area {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
};
.detailsText { &__text {
font-size: 16px; font-size: 16px;
line-height: 23px; line-height: 23px;
} }
&__expander-area {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 4px;
&:hover {
background-color: #E2ECF7;
} }
.backImage {
width: 21px;
height: 21px;
} }
.backImage:hover path { };
fill: #2683FF !important;
} }
.termsArea {
&__terms-area {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
margin-top: 20px; margin-top: 20px;
.checkBox {
&__checkbox {
align-self: center; align-self: center;
}; };
h2 { h2 {
font-family: 'montserrat_regular'; font-family: 'montserrat_regular';
font-size: 14px; font-size: 14px;
@ -340,55 +351,58 @@ export default class Register extends Vue {}
font-family: 'montserrat_bold'; font-family: 'montserrat_bold';
} }
} }
.createButton {
&__create-button {
margin-top: 30px; margin-top: 30px;
margin-bottom: 100px; margin-bottom: 100px;
} }
}
}
}
.layout-image {
background-color: #2683FF;
display: block;
width: auto;
height: 100vh;
}
a { a {
cursor: pointer; cursor: pointer;
} }
.expanderArea { #optional-area {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 4px;
}
.expanderArea:hover {
background-color: #E2ECF7;
}
#optionalArena {
height: auto; height: auto;
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transition: 0.5s; transition: 0.5s;
} }
#optionalArena.optionalAreaActive { #optional-area.optional-area--active {
animation: mymove 0.5s ease-in-out; animation: mymove 0.5s ease-in-out;
} }
#optionalArena.optionalArea { #optional-area.optional-area {
height: 0px; height: 0px;
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
animation: mymoveout 0.5s ease-in-out; animation: mymoveout 0.5s ease-in-out;
} }
@keyframes mymove { @keyframes mymove {
from {height: 0px; from {
height: 0px;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
} }
to {height: 100%; to {
height: 100%;
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
} }
@keyframes mymoveout { @keyframes mymoveout {
from {height: 100%; from {
height: 100%;
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
to {height: 0px; to {
height: 0px;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
} }