web/satellite: update onboarding overview screen
Made updates to onboarding overview screen to correspond to newest designs. https://www.figma.com/file/HlmasFJNHxs2lzGerq3WYH/Satellite-GUI-Public?node-id=11691%3A87378 Change-Id: I6f21e73b69222b9719934fe3034ed714317929e9
This commit is contained in:
Vitalii
Vitalii Shpital
parent
7afdb15fc8
commit
b544dc917e
@ -149,7 +149,7 @@ export default class VButton extends Vue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683ff;
|
||||
background-color: #0149ff;
|
||||
cursor: pointer;
|
||||
|
||||
.label {
|
||||
|
||||
@ -17,9 +17,9 @@ export default class OnboardingTourArea extends Vue {}
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tour-area {
|
||||
padding: 45px 0 60px;
|
||||
padding: 30px 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 105px);
|
||||
height: calc(100% - 60px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@ -3,27 +3,21 @@
|
||||
|
||||
<template>
|
||||
<div class="overview-area">
|
||||
<div class="overview-area__header">
|
||||
<WelcomeLeft />
|
||||
<h1 class="overview-area__header__title" aria-roledescription="title">Welcome</h1>
|
||||
<WelcomeRight />
|
||||
</div>
|
||||
<p class="overview-area__subtitle">Let's get you started using Storj</p>
|
||||
<p class="overview-area__question">Do you want to use web browser or command-line interface?</p>
|
||||
<h1 class="overview-area__title" aria-roledescription="title">Welcome to Storj {{ titleLabel }}</h1>
|
||||
<p class="overview-area__subtitle">Get started using the web browser, or the command line.</p>
|
||||
<div class="overview-area__routes">
|
||||
<OverviewContainer
|
||||
class="overview-area__routes__left-cont"
|
||||
is-web="true"
|
||||
title="Web browser"
|
||||
title="Start with web browser"
|
||||
info="Start uploading files in the browser and instantly see how your data gets distributed over the Storj network around the world."
|
||||
button-label="Continue in web"
|
||||
button-label="Continue in web ->"
|
||||
:on-click="onUploadInBrowserClick"
|
||||
:is-disabled="isLoading"
|
||||
/>
|
||||
<OverviewContainer
|
||||
title="Command line"
|
||||
info="The Uplink CLI is a command-line interface which allows you to upload and download files from the network, manage permissions and sharing."
|
||||
button-label="Continue in cli"
|
||||
title="Start with Uplink CLI"
|
||||
info="The Uplink CLI is a command-line interface tool which allows you to upload and download files from the network, manage permissions and share files."
|
||||
button-label="Continue in cli ->"
|
||||
:on-click="onUplinkCLIClick"
|
||||
:is-disabled="isLoading"
|
||||
/>
|
||||
@ -41,27 +35,48 @@
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import OverviewContainer from '@/components/onboardingTour/steps/common/OverviewContainer.vue';
|
||||
import WelcomeLeft from '@/../static/images/onboardingTour/welcome-left.svg';
|
||||
import WelcomeRight from '@/../static/images/onboardingTour/welcome-right.svg';
|
||||
|
||||
import { AnalyticsHttpApi } from '@/api/analytics';
|
||||
import { RouteConfig } from '@/router';
|
||||
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
|
||||
import { MetaUtils } from "@/utils/meta";
|
||||
|
||||
// @vue/component
|
||||
@Component({
|
||||
components: {
|
||||
OverviewContainer,
|
||||
WelcomeLeft,
|
||||
WelcomeRight
|
||||
},
|
||||
})
|
||||
export default class OverviewStep extends Vue {
|
||||
public isLoading = false;
|
||||
public projectDashboardPath = RouteConfig.ProjectDashboard.path;
|
||||
public titleLabel = '';
|
||||
|
||||
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
|
||||
|
||||
/**
|
||||
* Mounted hook after initial render.
|
||||
* Sets correct title label.
|
||||
*/
|
||||
public mounted(): void {
|
||||
const partneredSatellites = MetaUtils.getMetaContent('partnered-satellites');
|
||||
if (!partneredSatellites) {
|
||||
this.titleLabel = 'OSP';
|
||||
return;
|
||||
}
|
||||
|
||||
const partneredSatellitesJSON = JSON.parse(partneredSatellites);
|
||||
const isPartnered = partneredSatellitesJSON.find(el => {
|
||||
return el[0] === this.satelliteName;
|
||||
})
|
||||
if (isPartnered) {
|
||||
this.titleLabel = 'DCS';
|
||||
return;
|
||||
}
|
||||
|
||||
this.titleLabel = 'OSP';
|
||||
}
|
||||
|
||||
/**
|
||||
* Holds button click logic.
|
||||
* Redirects to next step (creating access grant).
|
||||
@ -78,7 +93,7 @@ export default class OverviewStep extends Vue {
|
||||
}
|
||||
|
||||
/**
|
||||
* Redirects to objects page.
|
||||
* Redirects to buckets page.
|
||||
*/
|
||||
public async onUploadInBrowserClick(): Promise<void> {
|
||||
if (this.isLoading) return;
|
||||
@ -90,6 +105,10 @@ export default class OverviewStep extends Vue {
|
||||
|
||||
this.isLoading = false;
|
||||
}
|
||||
|
||||
private get satelliteName(): string {
|
||||
return this.$store.state.appStateModule.satelliteName;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -100,45 +119,35 @@ export default class OverviewStep extends Vue {
|
||||
align-items: center;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
letter-spacing: 1px;
|
||||
color: #14142b;
|
||||
margin: 0 20px 20px;
|
||||
}
|
||||
&__title {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
color: #14142b;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
margin-bottom: 12.5px;
|
||||
}
|
||||
|
||||
&__subtitle,
|
||||
&__question {
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.75px;
|
||||
color: #14142a;
|
||||
}
|
||||
|
||||
&__question {
|
||||
&__subtitle {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: #354049;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
&__routes {
|
||||
margin-top: 70px;
|
||||
margin-top: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&__left-cont {
|
||||
margin-right: 45px;
|
||||
}
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 38px;
|
||||
row-gap: 38px;
|
||||
}
|
||||
|
||||
&__skip-button {
|
||||
margin-top: 50px;
|
||||
margin-top: 58px;
|
||||
color: #b7c1ca;
|
||||
cursor: pointer;
|
||||
text-decoration: underline !important;
|
||||
|
||||
@ -5,10 +5,18 @@
|
||||
<div class="overview-container">
|
||||
<WebIcon v-if="isWeb" class="overview-container__img" alt="web" />
|
||||
<CLIIcon v-else class="overview-container__img" alt="cli" />
|
||||
<h2 class="overview-container__title">{{ title }}</h2>
|
||||
<p v-if="isWeb" class="overview-container__enc" aria-roledescription="server-side-encryption-title">Server-side encrypted</p>
|
||||
<p v-else class="overview-container__enc" aria-roledescription="end-to-end-encryption-title">End-to-end encrypted</p>
|
||||
<h2 class="overview-container__title">{{ title }}</h2>
|
||||
<p class="overview-container__info">{{ info }}</p>
|
||||
<VButton
|
||||
:label="buttonLabel"
|
||||
width="240px"
|
||||
height="48px"
|
||||
border-radius="8px"
|
||||
:is-disabled="isDisabled"
|
||||
:on-press="onClick"
|
||||
/>
|
||||
<p v-if="isWeb" class="overview-container__encryption-container">
|
||||
By using the web browser you are opting in to
|
||||
<a
|
||||
@ -27,17 +35,8 @@
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-roledescription="end-to-end-encryption-link"
|
||||
>end-to-end</a> encryption for object data, metadata and path data.
|
||||
>end-to-end encryption</a> for object data, metadata and path data.
|
||||
</p>
|
||||
<VButton
|
||||
:label="buttonLabel"
|
||||
width="100%"
|
||||
height="64px"
|
||||
border-radius="62px"
|
||||
is-uppercase="true"
|
||||
:is-disabled="isDisabled"
|
||||
:on-press="onClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -78,58 +77,61 @@ export default class OverviewContainer extends Vue {
|
||||
box-shadow: 0 0 32px rgb(0 0 0 / 4%);
|
||||
border-radius: 20px;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
padding: 48px;
|
||||
max-width: 396px;
|
||||
padding: 52px;
|
||||
max-width: 394px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&__img {
|
||||
min-height: 90px;
|
||||
min-height: 83px;
|
||||
}
|
||||
|
||||
&__enc {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
letter-spacing: 1px;
|
||||
color: #14142a;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 36px;
|
||||
line-height: 36px;
|
||||
font-size: 26px;
|
||||
line-height: 31px;
|
||||
letter-spacing: 1px;
|
||||
color: #14142b;
|
||||
margin: 5px 0 10px;
|
||||
}
|
||||
|
||||
&__enc {
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
letter-spacing: 1px;
|
||||
color: #14142b;
|
||||
font-weight: 300;
|
||||
margin: 0 0 10px;
|
||||
text-transform: uppercase;
|
||||
color: #131621;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.75px;
|
||||
color: #14142a;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 25px;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
text-align: center;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
&__encryption-container {
|
||||
width: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
border: 1px solid #e6e9ef;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.75px;
|
||||
color: #14142a;
|
||||
width: calc(100% - 48px);
|
||||
padding: 12px 24px;
|
||||
background: #fec;
|
||||
border-radius: 8px;
|
||||
margin-top: 37px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #354049;
|
||||
text-align: center;
|
||||
|
||||
&__link {
|
||||
text-decoration: underline !important;
|
||||
text-underline-position: under;
|
||||
color: #354049;
|
||||
|
||||
&:visited {
|
||||
color: #14142a;
|
||||
color: #354049;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,31 +2,28 @@
|
||||
|
||||
exports[`OverviewStep.vue renders correctly 1`] = `
|
||||
<div class="overview-area">
|
||||
<div class="overview-area__header"><svg></svg>
|
||||
<h1 aria-roledescription="title" class="overview-area__header__title">Welcome</h1> <svg></svg>
|
||||
</div>
|
||||
<p class="overview-area__subtitle">Let's get you started using Storj</p>
|
||||
<p class="overview-area__question">Do you want to use web browser or command-line interface?</p>
|
||||
<h1 aria-roledescription="title" class="overview-area__title">Welcome to Storj </h1>
|
||||
<p class="overview-area__subtitle">Get started using the web browser, or the command line.</p>
|
||||
<div class="overview-area__routes">
|
||||
<div class="overview-container overview-area__routes__left-cont"><svg alt="web" class="overview-container__img"></svg>
|
||||
<h2 class="overview-container__title">Web browser</h2>
|
||||
<div class="overview-container"><svg alt="web" class="overview-container__img"></svg>
|
||||
<p aria-roledescription="server-side-encryption-title" class="overview-container__enc">Server-side encrypted</p>
|
||||
<h2 class="overview-container__title">Start with web browser</h2>
|
||||
<p class="overview-container__info">Start uploading files in the browser and instantly see how your data gets distributed over the Storj network around the world.</p>
|
||||
<div class="container" style="width: 240px; height: 48px; border-radius: 8px; font-size: 16px;"> <span class="label">Continue in web -></span></div>
|
||||
<p class="overview-container__encryption-container">
|
||||
By using the web browser you are opting in to
|
||||
<a href="https://docs.storj.io/concepts/encryption-key/design-decision-server-side-encryption" target="_blank" rel="noopener noreferrer" aria-roledescription="server-side-encryption-link" class="overview-container__encryption-container__link">server-side encryption</a>.
|
||||
</p>
|
||||
<div class="container" style="width: 100%; height: 64px; border-radius: 62px; font-size: 16px;"> <span class="label uppercase">Continue in web</span></div>
|
||||
</div>
|
||||
<div class="overview-container"><svg alt="cli" class="overview-container__img"></svg>
|
||||
<h2 class="overview-container__title">Command line</h2>
|
||||
<p aria-roledescription="end-to-end-encryption-title" class="overview-container__enc">End-to-end encrypted</p>
|
||||
<p class="overview-container__info">The Uplink CLI is a command-line interface which allows you to upload and download files from the network, manage permissions and sharing.</p>
|
||||
<h2 class="overview-container__title">Start with Uplink CLI</h2>
|
||||
<p class="overview-container__info">The Uplink CLI is a command-line interface tool which allows you to upload and download files from the network, manage permissions and share files.</p>
|
||||
<div class="container" style="width: 240px; height: 48px; border-radius: 8px; font-size: 16px;"> <span class="label">Continue in cli -></span></div>
|
||||
<p class="overview-container__encryption-container">
|
||||
The Uplink CLI uses
|
||||
<a href="https://docs.storj.io/concepts/encryption-key/design-decision-end-to-end-encryption" target="_blank" rel="noopener noreferrer" aria-roledescription="end-to-end-encryption-link" class="overview-container__encryption-container__link">end-to-end</a> encryption for object data, metadata and path data.
|
||||
<a href="https://docs.storj.io/concepts/encryption-key/design-decision-end-to-end-encryption" target="_blank" rel="noopener noreferrer" aria-roledescription="end-to-end-encryption-link" class="overview-container__encryption-container__link">end-to-end encryption</a> for object data, metadata and path data.
|
||||
</p>
|
||||
<div class="container" style="width: 100%; height: 64px; border-radius: 62px; font-size: 16px;"> <span class="label uppercase">Continue in cli</span></div>
|
||||
</div>
|
||||
</div> <a href="/project-dashboard" class="overview-area__skip-button">
|
||||
Skip and go directly to dashboard
|
||||
|
||||
Loading…
Reference in New Issue
Block a user