copyrights and design changes, search inputs changed (#1684)

This commit is contained in:
Nikolay Yurchenko 2019-04-09 01:34:28 +03:00 committed by Yaroslav Vorobiov
parent 2533aa1ab1
commit b14e7c3765
27 changed files with 163 additions and 108 deletions

View File

@ -9,7 +9,7 @@
<div v-html='imageSource'></div>
</div>
<div class='delete-account__form-container'>
<p>Are you sure you want to delete your account? If you do so, all your account information will be deleted from the Satellite forever.</p>
<p>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'

View File

@ -8,7 +8,7 @@
<div v-html="imageSource"></div>
</div>
<div class="add-api-key-popup__form-container">
<h2 class="add-api-key-popup__form-container__main-label-text">New API Key</h2>
<h2 class="add-api-key-popup__form-container__main-label-text">Create an API Key</h2>
<HeaderedInput
@setData="onChangeName"
label="Name"

View File

@ -19,10 +19,10 @@
<EmptyState
:onButtonClick="togglePopup"
v-if="isEmpty"
mainTitle="You have no API Keys yet"
additional-text="<p>We recommend you to create your first API Key for this project. API Keys allow developers to manage their project and build applications over Storj Network through our Uplink CLI.</p>"
mainTitle="Let's create your first API Key"
additional-text="<p>API keys give access to the project allowing you to create buckets, upload files, and read them. Once youve created an API key, youre ready to interact with the network through our Uplink CLI.</p>"
:imageSource="emptyImage"
buttonLabel="New Api Key"
buttonLabel="Create an Api Key"
isButtonShown />
<AddAPIKeyPopup v-if="isPopupShown"/>
</div>
@ -187,4 +187,4 @@ export default class ApiKeysArea extends Vue {
height: 200px;
}
}
</style>
</style>

View File

@ -6,8 +6,8 @@
<div class="save-api-popup">
<div class="save-api-popup__main">
<div class="save-api-popup__content">
<h1 class="save-api-popup__content__title">Save your API Key</h1>
<p class="save-api-popup__content__name">You will need this to share access to the project with your team members.</p>
<h1 class="save-api-popup__content__title">Success! Your API key has been created. It will only appear here once.</h1>
<p class="save-api-popup__content__name">This API key allow users or applications to interact with the project.</p>
<div class="save-api-popup__content__copy-area">
<p class="save-api-popup__content__copy-area__save-api">{{apiKey}}</p>
<Button class="save-api-popup__content__copy-area__save-btn" v-clipboard="apiKey" label="Copy" width="140px" height="48px" :onPress="onCopyClick" />
@ -151,8 +151,9 @@ export default class AddApiKeyPopup extends Vue {
.notification-wrap {
background-color: rgba(194, 214, 241, 1);
height: 98px;
width: calc(100% - 100px);
display: flex;
justify-content: space-between;
justify-content: flex-start;
padding: 0 50px;
align-items: center;
border-bottom-left-radius: 6px;

View File

@ -88,7 +88,7 @@ export default class SearchArea extends Vue {
border-radius: 6px;
width: 100%;
height: 56px;
padding-right: 20px;
padding-right: 100px;
padding-left: 20px;
font-family: 'font_regular';
font-size: 16px;
@ -113,4 +113,4 @@ export default class SearchArea extends Vue {
::-webkit-input-placeholder {
color: #AFB7C1;
}
</style>
</style>

View File

@ -103,6 +103,11 @@ export default class Button extends Vue {
&.disabled {
box-shadow: none;
background-color: #DADDE5 !important;
.label {
color: #ACB0BC !important;
}
}
}
@ -124,7 +129,8 @@ export default class Button extends Vue {
}
.container.disabled {
background-color: #DADDE5;
.label.white {
border-color: #DADDE5;
.label {
color: #ACB0BC;
}
}

View File

@ -10,7 +10,8 @@
<Button
:onPress="onButtonClick"
:label="buttonLabel"
width="170px" />
width="190px"
height="50px"/>
</div>
<div class="empty-state__wrap__img" v-html="imageSource"></div>
</div>
@ -48,6 +49,7 @@ export default class EmptyStateProjectArea extends Vue {
display: flex;
justify-content: center;
margin-top: 120px;
color: rgba(56, 75, 101, 0.7);
&__wrap {
text-align: center;
@ -76,7 +78,7 @@ export default class EmptyStateProjectArea extends Vue {
font-family: 'font_bold';
font-size: 32px;
line-height: 35px;
margin-bottom: 30px;
margin-bottom: 15px;
min-width: 900px;
}

View File

@ -18,10 +18,9 @@
</div>
<div class="register-success-popup__form-container">
<h2 class="register-success-popup__form-container__main-label-text">Congratulation!</h2>
<p>You almost registered on the Satellite, only one step left.
Please check your inbox and use the verification link we shared with you in last email.</p>
<p>Didnt receive a verification email?</p>
<h2 class="register-success-popup__form-container__main-label-text">Verify Your Account</h2>
<p>You have almost finished registering your account on the Tardigrade Satellite. Only one step left. Please check your inbox for a verification email.</p>
<!--<p>Didnt receive a verification email?</p>-->
<div class="register-success-popup__form-container__button-container">
<Button label="Go to Login" width="450px" height="50px" :onPress="onCloseClick" isWhite />
</div>

View File

@ -83,7 +83,7 @@ export default class ProjectSelectionDropdown extends Vue {
.account-dropdown-choice-container {
position: absolute;
top: 9vh;
left: -70px;
right: 0;
border-radius: 4px;
padding: 10px 0px 10px 0px;
box-shadow: 0px 4px rgba(231, 232, 238, 0.6);

View File

@ -4,7 +4,7 @@
<template>
<div class="new-project-container">
<div class="new-project-button-container" :class="{ active: !hasProjects }" v-on:click="toggleSelection" id="newProjectButton">
<h1>New Project +</h1>
<h1>+ New Project +</h1>
</div>
<NewProjectPopup v-if="isPopupShown"/>
</div>

View File

@ -36,7 +36,8 @@ export default class NotificationArea extends Vue {
display: flex;
position: fixed;
bottom: 50px;
right: 30px;
right: 50%;
transform: translate(50%);
align-items: center;
justify-content: space-between;
box-shadow: 0px 12px 24px rgba(175, 183, 193, 0.4);

View File

@ -11,7 +11,7 @@
<div class="delete-project-popup__form-container">
<p>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 class="text" v-if="!nameError">To proceed with deletion, enter full project name</p>
<p class="text" v-if="!nameError">To confirm, enter the project name</p>
<div v-if="nameError" class="delete-project-popup__form-container__label">
<img src="../../../static/images/register/ErrorInfo.svg"/>
<p class="text">{{nameError}}</p>

View File

@ -5,7 +5,7 @@
<div class="new-project-popup-container" v-on:keyup.enter="createProjectClick" v-on:keyup.esc="onCloseClick">
<div class="new-project-popup" id="newProjectPopup" >
<div class="new-project-popup__info-panel-container">
<h2 class="new-project-popup__info-panel-container__main-label-text">Create New Project</h2>
<h2 class="new-project-popup__info-panel-container__main-label-text">Create a Project</h2>
<img src="@/../static/images/dashboard/CreateNewProject.png" alt="">
</div>
<div class="new-project-popup__form-container">

View File

@ -41,12 +41,12 @@
<div class="project-details-info-container__usage-report-container__info">
<img src="../../../static/images/projectDetails/UsageReport.svg" alt="">
<div class="project-details-info-container__usage-report-container__info__text">
<h4>Usage Report</h4>
<h2>Storj Satellite Usage reports provide access to detailed data, enabling you to better analyze and understand your Storj Network resources consumption</h2>
<h4>Usage</h4>
<h2>Analyze and understand your storage, egress and object usage amounts</h2>
</div>
</div>
<div class="project-details-info-container__usage-report-container__buttons-area">
<Button label="More" width="140px" height="48px" :onPress="onMoreClick"/>
<Button label="View" width="140px" height="48px" :onPress="onMoreClick"/>
</div>
</div>
</div>
@ -228,10 +228,6 @@ export default class ProjectDetailsArea extends Vue {
align-items: flex-start;
padding: 28px;
background-color: #fff;
&:hover {
box-shadow: 0px 12px 24px rgba(175, 183, 193, 0.4);
}
}
&__description-container {
@ -274,6 +270,15 @@ export default class ProjectDetailsArea extends Vue {
svg {
cursor: pointer;
&:hover {
rect {
fill: #2683FF !important;
}
path {
fill: white !important;
}
}
}
}

View File

@ -12,13 +12,13 @@
</div>
</div>
<div class="usage-report-container__header">
<p>Usage Report</p>
<p>Usage</p>
<div class="usage-report-container__header__options-area">
<div class="usage-report-container__header__options-area__option active" @click.prevent="onCurrentRollupClick">
<p>Current roll up period</p>
<p>Current Billing Period</p>
</div>
<div class="usage-report-container__header__options-area__option" @click.prevent="onPreviousRollupClick">
<p>Previous Roll Up Period</p>
<p>Previous Billing Period</p>
</div>
<div class="usage-report-container__header__options-area__option" @click.prevent.self="onCustomDateClick">
<p @click.prevent.self="onCustomDateClick">Custom Date Range</p>
@ -32,15 +32,15 @@
<div class="usage-report-container__main-area">
<div class="usage-report-container__main-area__info-area">
<div class="usage-report-container__main-area__info-area__item">
<h1>Storage GB*H</h1>
<h1>Storage GBh</h1>
<h2>{{storage}}</h2>
</div>
<div class="usage-report-container__main-area__info-area__item">
<h1>Egress GB</h1>
<h1>Egress GBh</h1>
<h2>{{egress}}</h2>
</div>
<div class="usage-report-container__main-area__info-area__item">
<h1>Objects Count*H</h1>
<h1>Objects per Hour</h1>
<h2>{{objectsCount}}</h2>
</div>
</div>
@ -335,8 +335,8 @@ import { NOTIFICATION_ACTIONS, PROJECT_USAGE_ACTIONS } from '@/utils/constants/a
p {
font-family: 'font_regular';
font-size: 20px;
line-height: 27px;
font-size: 16px;
line-height: 21px;
color: #AFB7C1;
b {
@ -354,8 +354,8 @@ import { NOTIFICATION_ACTIONS, PROJECT_USAGE_ACTIONS } from '@/utils/constants/a
p {
font-family: 'font_medium';
font-weight: bold;
font-size: 20px;
line-height: 29px;
font-size: 16px;
line-height: 21px;
color: #354049;
margin-right: 30px;
}

View File

@ -6,8 +6,7 @@
<div class='add-user' id="addTeamMemberPopup">
<div class="add-user__main">
<div class='add-user__info-panel-container'>
<h2 class='add-user__info-panel-container__main-label-text'>Add New User</h2>
<p class="add-user__info-panel-container__text">You can only add users who are already registered on Storj Satellite</p>
<h2 class='add-user__info-panel-container__main-label-text'>Add Team Member</h2>
<div v-html='imageSource'></div>
</div>
<div class='add-user__form-container'>
@ -38,13 +37,10 @@
</div>
<p v-bind:class="[isMaxInputsCount ? 'inactive-label' : '']">Add Another</p>
</div>
<div class="add-user-row__item">
<p class="add-user__attention-text">Be careful! All new team members will have full admin rights. Otherwise use API Keys to share limited access.</p>
</div>
</div>
<div class='add-user__form-container__button-container'>
<Button label='Cancel' width='205px' height='48px' :onPress="onClose" isWhite/>
<Button label='Add Users' width='205px' height='48px' :onPress="isButtonActive ? onAddUsersClick : () => {}" :isDisabled="!isButtonActive"/>
<Button label='Add Team Members' width='205px' height='48px' :onPress="isButtonActive ? onAddUsersClick : () => {}" :isDisabled="!isButtonActive"/>
</div>
</div>
<div class='add-user__close-cross-container'>
@ -246,10 +242,8 @@ export default class AddUserPopup extends Vue {}
display: flex;
align-items: center;
justify-content: space-between;
width: 50%;
&:first-child {
width: 36%;
cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
@ -257,21 +251,17 @@ export default class AddUserPopup extends Vue {}
-ms-user-select: none;
user-select: none;
svg {
margin-right: 20px;
}
p {
margin: 0 !important;
font-family: 'font_medium';
font-size: 16px;
margin-left: 0;
padding-left: 0;
}
}
&:last-child {
p {
font-size: 12px;
margin: 0 !important;
text-align: left;
padding-left: 30px;
margin-block-start: 0em;
margin-block-end: 0em;
}
}
}
@ -331,6 +321,7 @@ export default class AddUserPopup extends Vue {}
justify-content: center;
background-color: #FFFFFF;
padding: 80px 20px 80px 60px;
width: calc(100% - 80px);
}
&__info-panel-container {
@ -354,7 +345,7 @@ export default class AddUserPopup extends Vue {}
line-height: 29px;
color: #384B65;
margin-top: 0;
width: 100%;
width: 107%;
}
}
@ -434,10 +425,6 @@ export default class AddUserPopup extends Vue {}
font-size: 16px;
line-height: 25px;
padding-left: 50px;
&:nth-child(2) {
margin-top: 20px;
}
}
a {
@ -477,8 +464,9 @@ export default class AddUserPopup extends Vue {}
.notification-wrap {
background-color: rgba(194, 214, 241, 1);
height: 98px;
width: calc(100% - 100px);
display: flex;
justify-content: space-between;
justify-content: flex-start;
padding: 0 50px;
align-items: center;
border-bottom-left-radius: 6px;

View File

@ -141,6 +141,12 @@ export default class TeamArea extends Vue {
}
}
@media screen and (max-width: 1600px) {
.team-header {
max-width: 76%;
}
}
@media screen and (max-width: 1600px) {
.team-container {
@ -190,4 +196,4 @@ export default class TeamArea extends Vue {
height: 150px;
}
}
</style>
</style>

View File

@ -98,7 +98,7 @@
border-radius: 6px;
width: 100%;
height: 56px;
padding-right: 20px;
padding-right: 100px;
padding-left: 20px;
font-family: 'font_regular';
font-size: 16px;
@ -123,4 +123,4 @@
::-webkit-input-placeholder {
color: #AFB7C1;
}
</style>
</style>

View File

@ -7,13 +7,13 @@
<div class="sort-dropdown-overflow-container">
<!-- TODO: add selection logic onclick -->
<div class="sort-dropdown-item-container" v-on:click="onSortUsersClick(sortByEnum.EMAIL)">
<h2>Sort by email</h2>
<h2>Sort by Email</h2>
</div>
<div class="sort-dropdown-item-container" v-on:click="onSortUsersClick(sortByEnum.CREATED_AT)">
<h2>Sort by date</h2>
<h2>Sort by Date</h2>
</div>
<div class="sort-dropdown-item-container" v-on:click="onSortUsersClick(sortByEnum.NAME)">
<h2>Sort by name</h2>
<h2>Sort by Name</h2>
</div>
</div>
</div>
@ -107,4 +107,4 @@ export default class SortDropdown extends Vue {
text-decoration: none;
outline: none;
}
</style>
</style>

View File

@ -4,4 +4,6 @@
export const LOADING_CLASSES = {
LOADING_OVERLAY: 'loading-overlay',
LOADING_OVERLAY_ACTIVE: 'loading-overlay active',
LOADING_LOGO: 'loading-overlay__logo',
LOADING_LOGO_ACTIVE: 'loading-overlay__logo active',
};

View File

@ -5,14 +5,14 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HeaderlessInput from '../../components/common/HeaderlessInput.vue';
import Button from '../../components/common/Button.vue';
import { setToken } from '../../utils/tokenManager';
import ROUTES from '../../utils/constants/routerConstants';
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '../../utils/constants/actionNames';
import { getTokenRequest } from '../../api/users';
import { LOADING_CLASSES } from '../../utils/constants/classConstants';
import { AppState } from '../../utils/constants/appStateEnum';
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
import Button from '@/components/common/Button.vue';
import { setToken } from '@/utils/tokenManager';
import ROUTES from '@/utils/constants/routerConstants';
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { getTokenRequest } from '@/api/users';
import { LOADING_CLASSES } from '@/utils/constants/classConstants';
import { AppState } from '@/utils/constants/appStateEnum';
@Component({
data: function () {
@ -21,6 +21,7 @@ import { AppState } from '../../utils/constants/appStateEnum';
email: '',
password: '',
loadingClassName: LOADING_CLASSES.LOADING_OVERLAY,
loadingLogoClassName: LOADING_CLASSES.LOADING_LOGO,
};
},
methods: {
@ -35,17 +36,13 @@ import { AppState } from '../../utils/constants/appStateEnum';
},
activateLoadingOverlay: function(): void {
this.$data.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY_ACTIVE;
setTimeout(() => {
this.$data.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY;
}, 2000);
this.$data.loadingLogoClassName = LOADING_CLASSES.LOADING_LOGO_ACTIVE;
},
onLogin: async function (): Promise<any> {
if (!this.$data.email || !this.$data.password) {
return;
}
(this as any).activateLoadingOverlay();
let loginResponse = await getTokenRequest(this.$data.email, this.$data.password);
if (!loginResponse.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, loginResponse.errorMessage);
@ -53,9 +50,13 @@ import { AppState } from '../../utils/constants/appStateEnum';
return;
}
setToken(loginResponse.data);
this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADING);
this.$router.push(ROUTES.PROJECT_DETAILS.path);
(this as any).activateLoadingOverlay();
setTimeout(() => {
setToken(loginResponse.data);
this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADING);
this.$router.push(ROUTES.PROJECT_DETAILS.path);
}, 2000);
},
onSignUpClick: function (): void {
this.$router.push(ROUTES.REGISTER.path);

View File

@ -2,9 +2,8 @@
<!--See LICENSE for copying information.-->
<div class="login-container" v-on:keyup.enter="onLogin">
<div v-bind:class="loadingClassName">
<img class="loading-overlay__logo" src="../../../static/images/Logo.svg" alt="loading-logo">
</div>
<div v-bind:class="loadingClassName"></div>
<img v-bind:class="loadingLogoClassName" src="../../../static/images/LogoWhite.svg" alt="loading-logo">
<img class="image" src="../../../static/images/AuthImage.svg" alt="" >
<div class="login-container__wrapper">
<div class="login-container__header">
@ -38,7 +37,7 @@
<h3><strong>Forgot password?</strong></h3>
</router-link>
<div class="login-area__submit-area__login-button" v-on:click.prevent="onLogin">
<p>Login</p>
<p>Log In</p>
</div>
</div>
<div class="login-area__info-area">

View File

@ -150,7 +150,7 @@
}
&:hover {
box-shadow: 0px 16px 24px #3A54DF;
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
}
}
}
@ -237,9 +237,6 @@
}
.loading-overlay {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
@ -248,7 +245,7 @@
height: 100vh;
width: 0;
z-index: 100;
background-color: rgba(134, 134, 148, 0.7);
background-color: #2683FF;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.5s linear;
@ -257,9 +254,20 @@
transition: all 0.5s linear;
&__logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%);
display: block;
width: 240px;
height: 110px;
z-index: 200;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility 0.5s linear, opacity 0.5s linear;
-moz-transition: visibility 0.5s linear, opacity 0.5s linear;
-o-transition: visibility 0.5s linear, opacity 0.5s linear;
transition: visibility 0.5s linear, opacity 0.5s linear;
}
}
@ -269,6 +277,11 @@
opacity: 1;
}
.loading-overlay__logo.active {
visibility: visible;
opacity: 1;
}
@media screen and (max-width: 1500px) {
.login-container {
&__wrapper {
@ -280,12 +293,29 @@
@media screen and (max-width: 1300px) {
.login-container {
&__wrapper {
min-width: 75%;
min-width: 40%;
}
}
.image {
display: block;
}
.login-area {
width: 516px;
}
}
@media screen and (max-width: 1168px) {
.login-container {
&__wrapper {
min-width: 64%;
}
}
.image {
display: none;
}
.login-area {
width: 516px;
}
}
@media screen and (max-width: 750px) {

View File

@ -20,7 +20,7 @@
</div>
<HeaderlessInput
class="full-input"
label="Full name"
label="Full Name"
placeholder="Enter Full Name"
:error="fullNameError"
@setData="setFullName"
@ -46,14 +46,14 @@
</HeaderlessInput>
<div class="register-input">
<HeaderlessInput
class="full-input"
label="Password"
placeholder="Enter Password"
:error="passwordError"
@setData="setPassword"
width="100%"
height="46px"
isPassword>
class="full-input"
label="Password"
placeholder="Enter Password"
:error="passwordError"
@setData="setPassword"
width="100%"
height="46px"
isPassword>
</HeaderlessInput>
<span
v-html="infoImage"

View File

@ -259,7 +259,7 @@ body {
}
&:hover {
box-shadow: 0px 16px 24px #3A54DF;
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
}
}
}

View File

@ -22,7 +22,7 @@
<path d="M5 19C4.42857 19 4 18.3333 4 17.5556C4 16.7778 4.42857 16 5 16C5.57143 16 6 16.5556 6 17.4444C5.92857 18.3333 5.57143 19 5 19Z" fill="#2683FF"/>
<path d="M48.9327 19C48.3635 19 47.9366 18.3333 48.0078 17.4444C48.0078 16.5556 48.4347 16 49.0039 16C49.5731 16 50 16.6667 50 17.5556C49.9288 18.3333 49.4308 19 48.9327 19Z" fill="#2683FF"/>
</svg>
<p class="container__title">Congratulations!</p>
<p class="container__title">Let's Get Started!</p>
<p class="container__info">You have successfully registered on Satellite. Now you can Log In to your account, create Projects and build Applications over our distributed cloud storage network.</p>
<a href="/login">
<div class="container__button">

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 9.9 KiB