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

web/satellite: onboarding cli flow updates

Browse Source 
Updated UI and added back access grant creation steps.

Change-Id: I32b84601bb975fe0551562c9b1ebf6050de6dca7
This commit is contained in:
Vitalii 2022-05-11 15:54:38 +03:00 committed by Vitalii Shpital
parent b544dc917e
commit b3df7f4a1a
25 changed files with 298 additions and 436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/satellite/src/components/onboardingTour/steps/OverviewStep.vue
View File

@ -87,7 +87,7 @@ export default class OverviewStep extends Vue {
this.isLoading = true;
await this.analytics.linkEventTriggered(AnalyticsEvent.PATH_SELECTED, 'CLI');
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.CLIStep).with(RouteConfig.APIKey).path);
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.CLIStep).with(RouteConfig.AGName).path);
this.isLoading = false;
}

22
web/satellite/src/components/onboardingTour/steps/cliFlow/AGName.vue
View File

@ -6,7 +6,7 @@
:on-back-click="onBackClick"
:on-next-click="onNextClick"
:is-loading="isLoading"
title="Lets Create an Access Grant"
title="Create an Access Grant"
>
<template #icon>
<Icon />
@ -34,6 +34,7 @@ import { APP_STATE_MUTATIONS } from "@/store/mutationConstants";
import CLIFlowContainer from "@/components/onboardingTour/steps/common/CLIFlowContainer.vue";
import HeaderedInput from "@/components/common/HeaderedInput.vue";
import Icon from '@/../static/images/onboardingTour/accessGrant.svg';
// @vue/component
@ -65,7 +66,7 @@ export default class AGName extends Vue {
public async onBackClick(): Promise<void> {
this.backRoute ?
await this.$router.push(this.backRoute).catch(() => {return; }) :
await this.$router.push(RouteConfig.ProjectDashboard.path);
await this.$router.push({name: RouteConfig.OverviewStep.name});
}
/**
@ -85,18 +86,18 @@ export default class AGName extends Vue {
let createdAccessGrant: AccessGrant;
try {
createdAccessGrant = await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CREATE, this.name);
} catch (error) {
await this.$notify.error(error.message);
this.isLoading = false;
await this.$notify.success("New clean access grant was generated successfully.");
} catch {
return;
} finally {
this.isLoading = false;
}
this.$store.commit(APP_STATE_MUTATIONS.SET_ONB_CLEAN_API_KEY, createdAccessGrant.secret);
this.name = '';
this.isLoading = false;
await this.$router.push({name: RouteConfig.AGPermissions.name,});
await this.$router.push({name: RouteConfig.AGPermissions.name});
}
/**
@ -113,11 +114,10 @@ export default class AGName extends Vue {
font-family: 'font_regular', sans-serif;
&__msg {
font-size: 18px;
line-height: 32px;
letter-spacing: 0.15px;
font-size: 16px;
line-height: 24px;
color: #4e4b66;
margin: 10px 0 30px;
margin-bottom: 20px;
}
}
</style>

36
web/satellite/src/components/onboardingTour/steps/cliFlow/AGPermissions.vue
View File

@ -44,6 +44,8 @@ import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from "@/router";
import { BUCKET_ACTIONS } from "@/store/modules/buckets";
import { APP_STATE_MUTATIONS } from "@/store/mutationConstants";
import { AnalyticsEvent } from "@/utils/constants/analyticsEventNames";
import { AnalyticsHttpApi } from "@/api/analytics";
import CLIFlowContainer from "@/components/onboardingTour/steps/common/CLIFlowContainer.vue";
import PermissionsSelect from "@/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue";
@ -51,6 +53,7 @@ import BucketNameBullet from "@/components/accessGrants/permissions/BucketNameBu
import BucketsSelection from "@/components/accessGrants/permissions/BucketsSelection.vue";
import VLoader from "@/components/common/VLoader.vue";
import DurationSelection from "@/components/accessGrants/permissions/DurationSelection.vue";
import Icon from '@/../static/images/onboardingTour/accessGrant.svg';
// @vue/component
@ -67,13 +70,15 @@ import Icon from '@/../static/images/onboardingTour/accessGrant.svg';
})
export default class AGPermissions extends Vue {
private worker: Worker;
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
public areBucketNamesFetching = true;
public isLoading = true;
/**
* Lifecycle hook after initial render.
* Sets local key from props value.
* Checks if clean api key was generated during previous step.
* Fetches all existing bucket names.
* Initializes web worker's onmessage functionality.
*/
public async mounted(): Promise<void> {
@ -128,15 +133,16 @@ export default class AGPermissions extends Vue {
try {
const restrictedKey = await this.generateRestrictedKey();
await this.$store.commit(APP_STATE_MUTATIONS.SET_ONB_API_KEY, restrictedKey);
this.$store.commit(APP_STATE_MUTATIONS.SET_ONB_API_KEY, restrictedKey);
await this.$notify.success("Restrictions were set successfully.")
} catch (error) {
await this.$notify.error(error.message)
this.isLoading = false;
return;
} finally {
this.isLoading = false;
}
this.isLoading = false;
await this.$store.commit(APP_STATE_MUTATIONS.SET_ONB_API_KEY_STEP_BACK_ROUTE, this.$route.path)
await this.$router.push({name: RouteConfig.APIKey.name});
}
@ -165,6 +171,8 @@ export default class AGPermissions extends Vue {
throw new Error(grantEvent.data.error)
}
this.analytics.eventTriggered(AnalyticsEvent.API_KEY_GENERATED);
return grantEvent.data.value;
}
@ -230,20 +238,23 @@ export default class AGPermissions extends Vue {
.permissions {
&__select {
width: 287px;
padding: 0 98.5px;
&__label {
font-size: 18px;
line-height: 32px;
letter-spacing: 0.75px;
color: #4e4b66;
margin: 20px 0 10px;
font-family: 'font_medium', sans-serif;
margin: 20px 0 8px;
font-size: 14px;
line-height: 20px;
color: #56606d;
}
}
&__bucket-bullets {
display: flex;
align-items: center;
max-width: 100%;
align-items: flex-start;
width: calc(100% - 197px);
padding: 0 98.5px;
flex-wrap: wrap;
&__container {
@ -255,6 +266,7 @@ export default class AGPermissions extends Vue {
::v-deep .buckets-selection,
::v-deep .duration-selection {
width: 287px;
margin-left: 0;
}
</style>

109
web/satellite/src/components/onboardingTour/steps/cliFlow/APIKey.vue
View File

@ -11,14 +11,11 @@
<Icon />
</template>
<template #content class="key">
<VLoader v-if="isLoading" width="100px" height="100px" />
<template v-else>
<p class="key__msg">Now copy and save the Satellite Address and API Key as it will only appear once.</p>
<h3 class="key__label">Satellite Address</h3>
<ValueWithCopy label="Satellite Address" role-description="satellite-address" :value="satelliteAddress" />
<h3 class="key__label">API Key</h3>
<ValueWithCopy label="API Key" role-description="api-key" :value="storedAPIKey || restrictedKey" />
</template>
<p class="key__msg">Now copy and save the Satellite Address and API Key as it will only appear once.</p>
<h3 class="key__label">Satellite Address</h3>
<ValueWithCopy label="Satellite Address" role-description="satellite-address" :value="satelliteAddress" />
<h3 class="key__label">API Key</h3>
<ValueWithCopy label="API Key" role-description="api-key" :value="storedAPIKey" />
</template>
</CLIFlowContainer>
</template>
@ -28,15 +25,9 @@ import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from "@/router";
import { MetaUtils } from "@/utils/meta";
import { AnalyticsEvent } from "@/utils/constants/analyticsEventNames";
import { AnalyticsHttpApi } from "@/api/analytics";
import {ACCESS_GRANTS_ACTIONS} from "@/store/modules/accessGrants";
import {APP_STATE_MUTATIONS} from "@/store/mutationConstants";
import {AccessGrant} from "@/types/accessGrants";
import CLIFlowContainer from "@/components/onboardingTour/steps/common/CLIFlowContainer.vue";
import ValueWithCopy from "@/components/onboardingTour/steps/common/ValueWithCopy.vue";
import VLoader from "@/components/common/VLoader.vue";
import Icon from '@/../static/images/onboardingTour/apiKeyStep.svg';
@ -46,85 +37,19 @@ import Icon from '@/../static/images/onboardingTour/apiKeyStep.svg';
Icon,
CLIFlowContainer,
ValueWithCopy,
VLoader,
}
})
export default class APIKey extends Vue {
private worker: Worker;
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
public satelliteAddress: string = MetaUtils.getMetaContent('satellite-nodeurl');
public isLoading = true;
public restrictedKey = '';
/**
* Lifecycle hook after initial render.
* Sets local web worker.
* Checks if api key was generated during previous step.
*/
public async mounted(): Promise<void> {
if (this.storedAPIKey) {
this.isLoading = false;
return;
public mounted(): void {
if (!this.storedAPIKey) {
this.$router.push({name: RouteConfig.AGName.name});
}
this.setWorker();
await this.generateAPIKey()
}
/**
* Sets local worker with worker instantiated in store.
* Also sets worker's onerror logic.
*/
public setWorker(): void {
this.worker = this.$store.state.accessGrantsModule.accessGrantsWebWorker;
this.worker.onerror = (error: ErrorEvent) => {
this.$notify.error(error.message);
};
}
/**
* Generates CLI flow API key.
*/
public async generateAPIKey(): Promise<void> {
try {
this.restrictedKey = await this.generateRestrictedKey();
this.analytics.eventTriggered(AnalyticsEvent.API_KEY_GENERATED);
await this.$store.commit(APP_STATE_MUTATIONS.SET_ONB_API_KEY, this.restrictedKey);
} catch (error) {
await this.$notify.error(error.message)
}
this.isLoading = false;
}
/**
* Generates and returns restricted key from clean API key.
*/
private async generateRestrictedKey(): Promise<string> {
const date = new Date().toISOString()
const onbAGName = `Onboarding Grant ${date}`
const cleanAPIKey: AccessGrant = await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CREATE, onbAGName);
await this.worker.postMessage({
'type': 'SetPermission',
'isDownload': true,
'isUpload': true,
'isList': true,
'isDelete': true,
'buckets': [],
'apiKey': cleanAPIKey.secret,
});
const grantEvent: MessageEvent = await new Promise(resolve => this.worker.onmessage = resolve);
if (grantEvent.data.error) {
throw new Error(grantEvent.data.error)
}
return grantEvent.data.value;
}
/**
@ -169,18 +94,18 @@ export default class APIKey extends Vue {
font-family: 'font_regular', sans-serif;
&__msg {
font-size: 18px;
line-height: 32px;
letter-spacing: 0.15px;
color: #4e4b66;
font-size: 16px;
line-height: 24px;
color: #1b2533;
}
&__label {
font-family: 'font_bold', sans-serif;
font-size: 16px;
line-height: 21px;
color: #354049;
margin: 20px 0;
font-size: 14px;
line-height: 20px;
color: #56606d;
margin: 20px 0 13px;
width: 100%;
}
}
</style>

10
web/satellite/src/components/onboardingTour/steps/cliFlow/CLIInstall.vue
View File

@ -15,7 +15,7 @@
<OSContainer is-install-step="true">
<template #windows>
<div class="cli-install__windows">
<h2 class="cli-install__macos__sub-title">
<h2 class="cli-install__windows__sub-title">
1. Download the
<a href="https://github.com/storj/storj/releases/latest/download/uplink_windows_amd64.zip">
Windows Uplink Binary
@ -165,10 +165,10 @@ export default class CLIInstall extends Vue {
font-family: 'font_regular', sans-serif;
&__msg {
font-size: 18px;
line-height: 32px;
letter-spacing: 0.15px;
color: #4e4b66;
font-size: 16px;
line-height: 24px;
color: #1b2533;
align-self: flex-start;
}
&__macos,

43
web/satellite/src/components/onboardingTour/steps/cliFlow/CLISetup.vue
View File

@ -5,23 +5,14 @@
<CLIFlowContainer
:on-back-click="onBackClick"
:on-next-click="onNextClick"
title="CLI Setup"
title="Uplink setup"
>
<template #icon>
<Icon />
</template>
<template #content class="cli">
<p class="cli__msg">
Make sure you've already downloaded the
<a
href="https://docs.storj.io/dcs/downloads/download-uplink-cli"
class="cli__msg__link"
target="_blank"
rel="noopener noreferrer"
>
Uplink CLI
</a>
and run
To configure your Uplink CLI, run
<b class="cli__msg__bold">uplink setup</b>.
</p>
<OSContainer>
@ -82,28 +73,22 @@ export default class CLISetup extends Vue {
font-family: 'font_regular', sans-serif;
&__msg {
font-size: 18px;
line-height: 32px;
letter-spacing: 0.15px;
color: #4e4b66;
&__link {
font-family: 'font_medium', sans-serif;
color: #0149ff;
text-decoration: underline !important;
&:hover {
text-decoration: underline;
}
&:visited {
color: #0149ff;
}
}
font-size: 16px;
line-height: 24px;
color: #1b2533;
align-self: flex-start;
&__bold {
font-family: 'font_medium', sans-serif;
}
&:first-of-type {
margin-bottom: 40px;
}
&:last-of-type {
margin-top: 40px;
}
}
}
</style>

10
web/satellite/src/components/onboardingTour/steps/cliFlow/CreateBucket.vue
View File

@ -12,7 +12,7 @@
</template>
<template #content class="create-bucket">
<p class="create-bucket__msg">
Let's create a bucket to store your data.
Let's create a bucket to store your data.<br><br>
You can name your bucket using only lowercase alphanumeric characters (no spaces), like “cakes”.
</p>
<OSContainer>
@ -72,10 +72,10 @@ export default class CreateBucket extends Vue {
font-family: 'font_regular', sans-serif;
&__msg {
font-size: 18px;
line-height: 32px;
letter-spacing: 0.15px;
color: #4e4b66;
font-size: 16px;
line-height: 24px;
color: #1b2533;
margin-bottom: 20px;
}
}
</style>

9
web/satellite/src/components/onboardingTour/steps/cliFlow/DownloadObject.vue
View File

@ -5,7 +5,7 @@
<CLIFlowContainer
:on-back-click="onBackClick"
:on-next-click="onNextClick"
title="Download"
title="Download a file"
>
<template #icon>
<Icon />
@ -71,10 +71,9 @@ export default class DownloadObject extends Vue {
font-family: 'font_regular', sans-serif;
&__msg {
font-size: 18px;
line-height: 32px;
letter-spacing: 0.15px;
color: #4e4b66;
font-size: 16px;
line-height: 24px;
color: #1b2533;
}
}
</style>

7
web/satellite/src/components/onboardingTour/steps/cliFlow/ListObject.vue
View File

@ -71,10 +71,9 @@ export default class ListObject extends Vue {
font-family: 'font_regular', sans-serif;
&__msg {
font-size: 18px;
line-height: 32px;
letter-spacing: 0.15px;
color: #4e4b66;
font-size: 16px;
line-height: 24px;
color: #1b2533;
}
}
</style>

2
web/satellite/src/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue
View File

@ -150,7 +150,7 @@ export default class PermissionsSelect extends Vue {
border-radius: 6px;
border: 1px solid rgb(56 75 101 / 40%);
font-family: 'font_regular', sans-serif;
width: 235px;
width: 100%;
position: relative;
&__toggle-container {

107
web/satellite/src/components/onboardingTour/steps/cliFlow/ShareObject.vue
View File

@ -5,44 +5,16 @@
<CLIFlowContainer
:on-back-click="onBackClick"
:on-next-click="onNextClick"
title="Share a link"
title="Share a link with the world"
>
<template #icon>
<Icon />
<img class="image" src="@/../static/images/onboardingTour/shareStep.png" alt="share">
</template>
<template #content class="share-object">
<div class="share-object__msg">
<p class="share-object__msg">
You can generate a shareable URL and view the geographic distribution of your object via the Link
Sharing Service. Run the
<b class="share-object__msg__bold">uplink share --url</b>
command.
<div class="absolute">
<VInfo
class="share-object__msg__info-button"
title="Check out the documentation for more info"
>
<template #icon>
<InfoIcon class="share-object__msg__info-button__icon" />
</template>
<template #message>
<p class="share-object__msg__info-button__message">
See
<a
class="share-object__msg__info-button__message__link"
href="https://docs.storj.io/dcs/api-reference/uplink-cli/share-command#link-sharing"
target="_blank"
rel="noopener noreferrer"
>
here
</a>
for specifications on how to select an auth region and restrict the
<b class="share-object__msg__info-button__message__bold">uplink share --url</b>
command.
</p>
</template>
</VInfo>
</div>
</div>
Sharing Service. Run the uplink share --url command.
</p>
<OSContainer>
<template #windows>
<TabWithCopy value="./uplink.exe share --url sj://cakes/cheesecake.jpg" aria-role-description="windows-share" />
@ -59,7 +31,7 @@
<b class="share-object__msg__bold">uplink share --url</b>
command and paste into your browser window.
</p>
<p class="share-object__msg margin-top">
<p class="share-object__msg">
You will see your file and a map with real distribution of your files' pieces uploaded to the network.
You can share it with anyone you'd like.
</p>
@ -75,20 +47,13 @@ import { RouteConfig } from "@/router";
import CLIFlowContainer from "@/components/onboardingTour/steps/common/CLIFlowContainer.vue";
import OSContainer from "@/components/onboardingTour/steps/common/OSContainer.vue";
import TabWithCopy from "@/components/onboardingTour/steps/common/TabWithCopy.vue";
import VInfo from "@/components/common/VInfo.vue";
import Icon from "@/../static/images/onboardingTour/listObjectStep.svg";
import InfoIcon from "@/../static/images/common/greyInfo.svg";
// @vue/component
@Component({
components: {
CLIFlowContainer,
Icon,
OSContainer,
TabWithCopy,
VInfo,
InfoIcon,
}
})
export default class ShareObject extends Vue {
@ -113,61 +78,19 @@ export default class ShareObject extends Vue {
font-family: 'font_regular', sans-serif;
&__msg {
font-size: 18px;
line-height: 32px;
letter-spacing: 0.15px;
color: #4e4b66;
position: relative;
font-size: 16px;
line-height: 24px;
color: #1b2533;
&__bold {
font-family: 'font_medium', sans-serif;
}
&__info-button {
max-width: 18px;
&__icon {
cursor: pointer;
}
&__message {
color: #586c86;
font-size: 12px;
line-height: 21px;
&__link {
color: #0068dc;
font-family: 'font_medium', sans-serif;
text-decoration: underline !important;
&:visited {
color: #0068dc;
}
}
&__bold {
font-family: 'font_medium', sans-serif;
}
}
&:nth-of-type(2),
&:last-of-type {
margin-top: 20px;
}
}
}
.margin-top {
margin-top: 20px;
}
.absolute {
position: absolute;
bottom: -2px;
right: -4px;
}
::v-deep .info__box {
top: 100%;
&__message {
min-width: 360px;
}
.image {
max-width: 267px;
max-height: 90px;
}
</style>

110
web/satellite/src/components/onboardingTour/steps/cliFlow/SuccessScreen.vue
View File

@ -4,38 +4,27 @@
<template>
<div class="success-screen">
<Icon />
<h1 class="success-screen__title" aria-roledescription="title">Wonderful</h1>
<h1 class="success-screen__title" aria-roledescription="title">
Wonderful, you have completed the Uplink CLI Quickstart Guide
</h1>
<p class="success-screen__msg">
This was easy right? We wish you all the best with your projects.
<span v-if="!creditCards.length">
To upgrade your account and upload up to 75TB, just add your card or STORJ tokens.
</span>
If you want to learn more, visit the
<a class="link" href="https://docs.storj.io/" target="_blank" rel="noopener noreferrer">documentation</a>.
You can also find a list of all the
<a class="link" href="https://www.storj.io/integrations" target="_blank" rel="noopener noreferrer">integrations</a> on the website.
</p>
<div class="success-screen__buttons">
<VButton
class="success-screen__buttons__back"
label="Back"
height="64px"
border-radius="52px"
is-grey-blue="true"
height="48px"
is-white="true"
:on-press="onBackClick"
/>
<VButton
class="success-screen__buttons__finish"
label="Finish"
height="64px"
border-radius="52px"
height="48px"
:on-press="onFinishClick"
/>
<button
v-if="!creditCards.length"
class="success-screen__buttons__upgrade"
type="button"
@click="onUpgradeClick"
>
Upgrade
<UpgradeIcon class="success-screen__buttons__upgrade__icon" />
</button>
</div>
</div>
</template>
@ -43,31 +32,20 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { CreditCard } from "@/types/payments";
import { RouteConfig } from "@/router";
import { PAYMENTS_MUTATIONS } from "@/store/modules/payments";
import VButton from "@/components/common/VButton.vue";
import Icon from "@/../static/images/onboardingTour/successStep.svg";
import UpgradeIcon from "@/../static/images/onboardingTour/upgrade.svg";
// @vue/component
@Component({
components: {
Icon,
VButton,
UpgradeIcon,
}
})
export default class SuccessScreen extends Vue {
/**
* Returns credit cards from store.
*/
public get creditCards(): CreditCard[] {
return this.$store.state.paymentsModule.creditCards;
}
/**
* Holds on back button click logic.
*/
@ -75,14 +53,6 @@ export default class SuccessScreen extends Vue {
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ShareObject)).path);
}
/**
* Holds on upgrade button click logic.
*/
public async onUpgradeClick(): Promise<void> {
await this.$router.push(RouteConfig.ProjectDashboard.path);
this.$store.commit(PAYMENTS_MUTATIONS.TOGGLE_IS_ADD_PM_MODAL_SHOWN);
}
/**
* Holds on finish button click logic.
*/
@ -100,21 +70,24 @@ export default class SuccessScreen extends Vue {
border-radius: 20px;
padding: 48px;
max-width: 484px;
display: flex;
align-items: center;
flex-direction: column;
&__title {
margin: 20px 0;
font-family: 'font_Bold', sans-serif;
font-size: 48px;
line-height: 56px;
letter-spacing: 1px;
font-size: 28px;
line-height: 36px;
text-align: center;
letter-spacing: -0.02em;
color: #14142b;
}
&__msg {
font-size: 18px;
line-height: 32px;
letter-spacing: 0.15px;
color: #4e4b66;
font-size: 16px;
line-height: 24px;
color: #1b2533;
}
&__buttons {
@ -122,42 +95,17 @@ export default class SuccessScreen extends Vue {
align-items: center;
width: 100%;
margin-top: 24px;
column-gap: 24px;
}
}
&__back,
&__finish {
margin-right: 24px;
}
.link {
color: #1b2533;
text-decoration: underline !important;
text-underline-position: under;
&__upgrade {
background-color: #fff;
border: 2px solid #d9dbe9;
color: #0149ff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
white-space: nowrap;
width: inherit;
height: 64px;
border-radius: 52px;
&__icon {
margin-left: 15px;
}
&:hover {
background-color: #2683ff;
border-color: #2683ff;
color: #fff;
.upgrade-svg-path {
stroke: #fff;
}
}
}
&:visited {
color: #1b2533;
}
}
</style>

28
web/satellite/src/components/onboardingTour/steps/cliFlow/UploadObject.vue
View File

@ -7,12 +7,13 @@
:on-next-click="onNextClick"
title="Ready to upload"
>
<template #icon>
<Icon />
</template>
<template #content class="upload-object">
<p class="upload-object__msg">
Here is an example image you can use for your first upload. Just right-click on it and save as
<b class="upload-object__msg__bold">cheesecake.jpg</b>
to your
<b class="upload-object__msg__bold">Desktop.</b>
cheesecake.jpg to your Desktop.
</p>
<img class="upload-object__icon" src="@/../static/images/onboardingTour/cheesecake.jpg" alt="Cheesecake">
<p class="upload-object__msg">
@ -42,12 +43,15 @@ import CLIFlowContainer from "@/components/onboardingTour/steps/common/CLIFlowCo
import OSContainer from "@/components/onboardingTour/steps/common/OSContainer.vue";
import TabWithCopy from "@/components/onboardingTour/steps/common/TabWithCopy.vue";
import Icon from "@/../static/images/onboardingTour/uploadStep.svg";
// @vue/component
@Component({
components: {
CLIFlowContainer,
OSContainer,
TabWithCopy,
Icon,
}
})
export default class UploadObject extends Vue {
@ -72,23 +76,15 @@ export default class UploadObject extends Vue {
font-family: 'font_regular', sans-serif;
&__msg {
font-size: 18px;
line-height: 32px;
letter-spacing: 0.15px;
color: #4e4b66;
&__bold {
font-family: 'font_medium', sans-serif;
}
font-size: 16px;
line-height: 24px;
color: #1b2533;
align-self: flex-start;
}
&__icon {
margin: 20px 0 40px;
margin: 20px 0;
width: 100%;
}
}
::v-deep .flow-container__title {
margin-top: 0;
}
</style>

31
web/satellite/src/components/onboardingTour/steps/common/CLIFlowContainer.vue
View File

@ -8,18 +8,15 @@
<slot name="content" />
<div class="flow-container__buttons">
<VButton
class="flow-container__buttons__back"
label="< Back"
height="64px"
border-radius="52px"
is-grey-blue="true"
label="Back"
height="48px"
is-white="true"
:on-press="onBackClick"
:is-disabled="isLoading"
/>
<VButton
label="Next >"
height="64px"
border-radius="52px"
label="Continue ->"
height="48px"
:on-press="onNextClick"
:is-disabled="isLoading"
/>
@ -57,14 +54,17 @@ export default class CLIFlowContainer extends Vue {
box-shadow: 0 0 32px rgb(0 0 0 / 4%);
border-radius: 20px;
padding: 48px;
max-width: 500px;
max-width: 484px;
display: flex;
flex-direction: column;
align-items: center;
&__title {
margin: 20px 0;
font-family: 'font_Bold', sans-serif;
font-size: 48px;
line-height: 56px;
letter-spacing: 1px;
font-size: 28px;
line-height: 36px;
text-align: center;
color: #14142b;
}
@ -72,11 +72,8 @@ export default class CLIFlowContainer extends Vue {
display: flex;
align-items: center;
width: 100%;
margin-top: 48px;
&__back {
margin-right: 24px;
}
margin-top: 34px;
column-gap: 24px;
}
}
</style>

3
web/satellite/src/components/onboardingTour/steps/common/OSContainer.vue
View File

@ -114,7 +114,8 @@ export default class OSContainer extends Vue {
<style scoped lang="scss">
.os {
font-family: 'font_regular', sans-serif;
margin: 20px 0;
margin-top: 20px;
width: 100%;
&__tabs {
display: inline-flex;

1
web/satellite/src/components/onboardingTour/steps/common/ValueWithCopy.vue
View File

@ -52,6 +52,7 @@ export default class ValueWithCopy extends Vue {
padding: 12px 25px;
background: #eff0f7;
border-radius: 10px;
max-width: calc(100% - 50px);
&__value {
font-size: 16px;

22
web/satellite/static/images/onboardingTour/accessGrant.svg
View File

@ -1,9 +1,15 @@
<svg width="91" height="98" viewBox="0 0 91 98" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2515 30.0879L47.1303 49.9666V97.0625H0V30.0879L27.2515 30.0879Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.256 49.9668L27.256 30.088L47.1348 49.9668L27.256 49.9668Z" fill="#00127F"/>
<path d="M72.2774 16.0015L81.1709 24.895L90.0644 16.0015L81.1709 7.10803L72.2774 16.0015Z" fill="#FFC600"/>
<path d="M50.1523 26.4877V34.1738H57.8385V26.4877H50.1523Z" fill="#00E567"/>
<path d="M30.7741 6.12L36.209 11.5549L41.6439 6.12L36.209 0.685074L30.7741 6.12Z" fill="#FF458B"/>
<path d="M14 16.5204V21.4116H18.8912V16.5204H14Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.9984 64.0863L35.1154 66.7634L33.8295 65.5278L32.4777 66.7634L30.7435 65.5278L29.5201 66.7634L28.2608 65.5278L26.7257 66.7634L24.0972 66.7632L22.0154 70.3687C21.6475 71.0058 20.9677 71.3983 20.232 71.3983H14.1667C13.4309 71.3983 12.7511 71.0058 12.3832 70.3687L9.35059 65.116C8.98273 64.4788 8.98273 63.6938 9.35059 63.0567L12.3832 57.8039C12.7511 57.1668 13.4309 56.7743 14.1667 56.7743L20.232 56.7743C20.9677 56.7743 21.6475 57.1668 22.0154 57.804L24.0972 61.409L35.1154 61.4092L37.9984 64.0863ZM16.9934 64.0863C16.9934 62.8353 15.9792 61.8211 14.7281 61.8211C13.4771 61.8211 12.4629 62.8353 12.4629 64.0863C12.4629 65.3374 13.4771 66.3516 14.7281 66.3516C15.9792 66.3516 16.9934 65.3374 16.9934 64.0863Z" fill="white"/>
<svg width="268" height="68" viewBox="0 0 268 68" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M192.5 40.2803H206.5V54.2803H192.5V40.2803Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M92.5 1.42285H102.5V11.4229H92.5V1.42285Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M209.643 19.709H215.643V25.709H209.643V19.709Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.3574 19.9941H53.3574V25.9941H47.3574V19.9941Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M261.5 11.4229H267.5V17.4229H261.5V11.4229Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 52.4229H6.5V58.4229H0.5V52.4229Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M240.357 34.5654H246.357V40.5654H240.357V34.5654Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6426 49.2803H81.6426V67.2803H63.6426V49.2803Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M164.785 9.42285H178.785V23.4229H164.785V9.42285Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M137.752 0L157.63 19.8787V66.9746H110.5V0L137.752 0Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M137.756 19.8789V0.000156403L157.635 19.8789L137.756 19.8789Z" fill="#00127F"/>
<circle cx="134" cy="37.8901" r="14" fill="#0218A7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M142.996 37.9984L141.285 39.5879L140.521 38.8543L139.719 39.5879L138.689 38.8543L137.963 39.5879L137.215 38.8543L136.304 39.5879L134.743 39.5877L133.507 41.7283C133.289 42.1066 132.885 42.3397 132.448 42.3397L128.847 42.3397C128.411 42.3397 128.007 42.1066 127.788 41.7283L125.988 38.6097C125.77 38.2315 125.77 37.7654 125.988 37.3871L127.788 34.2685C128.007 33.8902 128.411 33.6572 128.847 33.6572L132.448 33.6572C132.885 33.6572 133.289 33.8902 133.507 34.2685L134.743 36.4089L141.285 36.409L142.996 37.9984ZM130.526 37.9984C130.526 37.2557 129.923 36.6535 129.181 36.6535C128.438 36.6535 127.836 37.2557 127.836 37.9984C127.836 38.7412 128.438 39.3433 129.181 39.3433C129.923 39.3433 130.526 38.7412 130.526 37.9984Z" fill="white"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

24
web/satellite/static/images/onboardingTour/apiKeyStep.svg
View File

@ -1,10 +1,16 @@
<svg width="90" height="74" viewBox="0 0 90 74" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.4674 19.3047H52.5569V33.2151H66.4674V19.3047Z" fill="#FF458B"/>
<path d="M89.9105 0H76V13.9105H89.9105V0Z" fill="#0149FF"/>
<path d="M89.9105 40H76V53.9105H89.9105V40Z" fill="#00E366"/>
<path d="M13.9105 33H0V46.9105H13.9105V33Z" fill="#FFC600"/>
<circle cx="35" cy="37" r="13" fill="#00D459"/>
<path d="M28.5337 37.9832C27.896 37.3455 27.896 36.3117 28.5337 35.674C29.1713 35.0363 30.2052 35.0363 30.8429 35.674L34.6915 39.5227C35.3292 40.1603 35.3292 41.1942 34.6915 41.8319C34.0538 42.4695 33.02 42.4695 32.3823 41.8319L28.5337 37.9832Z" fill="white"/>
<path d="M34.6915 41.8319C34.0538 42.4695 33.02 42.4695 32.3823 41.8319C31.7447 41.1942 31.7447 40.1603 32.3823 39.5227L39.3099 32.5951C39.9476 31.9574 40.9814 31.9574 41.6191 32.5951C42.2568 33.2328 42.2568 34.2666 41.6191 34.9043L34.6915 41.8319Z" fill="white"/>
<svg width="268" height="72" viewBox="0 0 268 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M192.5 44.78H206.5V58.78H192.5V44.78Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M92.5 5.92261H102.5V15.9226H92.5V5.92261Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M209.643 24.2087H215.643V30.2087H209.643V24.2087Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.3574 24.4939H53.3574V30.4939H47.3574V24.4939Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M261.5 15.9226H267.5V21.9226H261.5V15.9226Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 56.9226H6.5V62.9226H0.5V56.9226Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M240.357 39.0652H246.357V45.0652H240.357V39.0652Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6426 53.78H81.6426V71.78H63.6426V53.78Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M164.785 13.9226H178.785V27.9226H164.785V13.9226Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M137.752 0L157.63 19.8787V66.9746H110.5V0L137.752 0Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M137.756 19.879V0.000278473L157.635 19.879L137.756 19.879Z" fill="#00127F"/>
<circle cx="134" cy="37.89" r="14" fill="#00D459"/>
<path d="M127.036 38.9486C126.35 38.2619 126.35 37.1485 127.036 36.4618C127.723 35.7751 128.836 35.7751 129.523 36.4618L133.668 40.6065C134.355 41.2932 134.355 42.4066 133.668 43.0933C132.981 43.78 131.868 43.78 131.181 43.0933L127.036 38.9486Z" fill="white"/>
<path d="M133.668 43.0933C132.981 43.78 131.868 43.78 131.181 43.0933C130.494 42.4066 130.494 41.2932 131.181 40.6065L138.642 33.146C139.328 32.4593 140.442 32.4593 141.128 33.146C141.815 33.8327 141.815 34.9461 141.128 35.6328L133.668 43.0933Z" fill="white"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 966 B

After

Width:  |  Height:  |  Size: 1.9 KiB

25
web/satellite/static/images/onboardingTour/bucketStep.svg
View File

@ -1,10 +1,17 @@
<svg width="92" height="80" viewBox="0 0 92 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H10V10H0V0Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.2856 8H86.2856V22H72.2856V8Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M69.5779 24.585H12L20.6367 73.151H20.6554C21.1141 76.9611 29.9528 80.0001 40.789 80.0001C51.6252 80.0001 60.4639 76.9611 60.9226 73.151H60.9412L69.5779 24.585Z" fill="#0149FF"/>
<ellipse cx="40.789" cy="24.2736" rx="28.789" ry="10.2736" fill="#00127F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M42 34.5384C41.5984 34.5443 41.1947 34.5473 40.789 34.5473C34.5237 34.5473 28.7259 33.8331 24 32.6204V24.4287H42V34.5384Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1428 3.85742H49.1428V17.8574H35.1428V3.85742Z" fill="#FFC600"/>
<circle cx="73.7142" cy="34.2857" r="18.2857" fill="#D9E0EE"/>
<path d="M74.961 27.7009C74.961 27.0123 74.4028 26.4541 73.7142 26.4541C73.0256 26.4541 72.4675 27.0123 72.4675 27.7009V33.0385H67.1298C66.4412 33.0385 65.8831 33.5967 65.8831 34.2853C65.8831 34.9738 66.4412 35.532 67.1298 35.532H72.4675V40.8697C72.4675 41.5583 73.0256 42.1164 73.7142 42.1164C74.4028 42.1164 74.961 41.5583 74.961 40.8697V35.532H80.2986C80.9872 35.532 81.5454 34.9738 81.5454 34.2853C81.5454 33.5967 80.9872 33.0385 80.2986 33.0385H74.961V27.7009Z" fill="#00127F"/>
<svg width="268" height="77" viewBox="0 0 268 77" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M192.5 43.4653H206.5V57.4653H192.5V43.4653Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M92.5 4.60791H102.5V14.6079H92.5V4.60791Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M209.643 22.894H215.643V28.894H209.643V22.894Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.3574 23.1792H53.3574V29.1792H47.3574V23.1792Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M261.5 14.6079H267.5V20.6079H261.5V14.6079Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 55.6079H6.5V61.6079H0.5V55.6079Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M240.357 37.7505H246.357V43.7505H240.357V37.7505Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6426 52.4653H81.6426V70.4653H63.6426V52.4653Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M164.785 5.60791H178.785V19.6079H164.785V5.60791Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M162.078 20.7275H104.5L113.137 69.2936H113.155C113.614 73.1037 122.453 76.1425 133.289 76.1425C144.125 76.1425 152.964 73.1037 153.423 69.2936H153.441L162.078 20.7275Z" fill="#0149FF"/>
<ellipse cx="133.289" cy="20.4166" rx="28.789" ry="10.2736" fill="#00127F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M134.5 30.6808C134.098 30.6868 133.695 30.6897 133.289 30.6897C127.024 30.6897 121.226 29.9755 116.5 28.7628V20.5713H134.5V30.6808Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.643 0H141.643V14H127.643V0Z" fill="#FFC600"/>
<circle cx="166.214" cy="30.4288" r="18.2857" fill="#D9E0EE"/>
<path d="M167.461 23.8444C167.461 23.1558 166.903 22.5977 166.214 22.5977C165.525 22.5977 164.967 23.1558 164.967 23.8444V29.1821H159.63C158.941 29.1821 158.383 29.7403 158.383 30.4288C158.383 31.1174 158.941 31.6756 159.63 31.6756H164.967V37.0132C164.967 37.7018 165.525 38.26 166.214 38.26C166.903 38.26 167.461 37.7018 167.461 37.0132V31.6756H172.798C173.487 31.6756 174.045 31.1174 174.045 30.4288C174.045 29.7403 173.487 29.1821 172.798 29.1821H167.461V23.8444Z" fill="#00127F"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

43
web/satellite/static/images/onboardingTour/cliSetupStep.svg
View File

@ -1,21 +1,32 @@
<svg width="78" height="64" viewBox="0 0 78 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7466 0.0117188H58.8389C65.4087 0.0117188 67.7911 0.695775 70.1929 1.98029C72.5948 3.2648 74.4798 5.14978 75.7643 7.55161L75.8406 7.69573C77.0759 10.0504 77.7328 12.4672 77.7328 18.9057V44.485L77.732 44.8742C77.7052 51.1502 77.0231 53.4853 75.7643 55.8391C74.4798 58.2409 72.5948 60.1259 70.1929 61.4104C67.8151 62.6821 65.4564 63.3652 59.0347 63.379H18.9425C12.3726 63.379 9.99025 62.6949 7.58842 61.4104C5.18658 60.1259 3.30161 58.2409 2.01709 55.8391L1.94074 55.695C0.718095 53.3643 0.0619907 50.9728 0.0485229 44.6809V18.9057C0.0485229 12.3358 0.732579 9.95345 2.01709 7.55161C3.30161 5.14978 5.18658 3.2648 7.58842 1.98029C9.96623 0.70862 12.325 0.0254599 18.7466 0.0117188Z" fill="#0218A7"/>
<path d="M11.707 14.481C13.7635 14.481 15.4306 12.8139 15.4306 10.7573C15.4306 8.70083 13.7635 7.03369 11.707 7.03369C9.65047 7.03369 7.98334 8.70083 7.98334 10.7573C7.98334 12.8139 9.65047 14.481 11.707 14.481Z" fill="#FF458B"/>
<path d="M22.878 14.481C24.9345 14.481 26.6016 12.8139 26.6016 10.7573C26.6016 8.70083 24.9345 7.03369 22.878 7.03369C20.8214 7.03369 19.1543 8.70083 19.1543 10.7573C19.1543 12.8139 20.8214 14.481 22.878 14.481Z" fill="#FFC600"/>
<path d="M34.0489 14.481C36.1054 14.481 37.7726 12.8139 37.7726 10.7573C37.7726 8.70083 36.1054 7.03369 34.0489 7.03369C31.9924 7.03369 30.3253 8.70083 30.3253 10.7573C30.3253 12.8139 31.9924 14.481 34.0489 14.481Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9471 19.5991H41.1488C42.7682 19.5991 44.0843 20.8979 44.1121 22.5107L44.1125 22.5628C44.1125 24.1997 42.7856 25.5266 41.1488 25.5266H10.9471C9.32765 25.5266 8.0116 24.2277 7.98379 22.615L7.98334 22.5628C7.98334 20.926 9.31024 19.5991 10.9471 19.5991Z" fill="#276CFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.7657 29.9019H32.6811C34.3005 29.9019 35.6165 31.2007 35.6444 32.8134L35.6448 32.8656C35.6448 34.5024 34.3179 35.8293 32.6811 35.8293H25.7657C24.1463 35.8293 22.8303 34.5305 22.8025 32.9177L22.802 32.8656C22.802 31.2288 24.1289 29.9019 25.7657 29.9019Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.6892 29.9019H50.6045C52.2239 29.9019 53.54 31.2007 53.5678 32.8134L53.5683 32.8656C53.5683 34.5024 52.2414 35.8293 50.6045 35.8293H43.6892C42.0698 35.8293 40.7537 34.5305 40.7259 32.9177L40.7255 32.8656C40.7255 31.2288 42.0524 29.9019 43.6892 29.9019Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M61.6127 29.9019H68.528C70.1474 29.9019 71.4635 31.2007 71.4913 32.8134L71.4917 32.8656C71.4917 34.5024 70.1648 35.8293 68.528 35.8293H61.6127C59.9932 35.8293 58.6772 34.5305 58.6494 32.9177L58.6489 32.8656C58.6489 31.2288 59.9758 29.9019 61.6127 29.9019Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.0158 19.5991H59.9191C61.5385 19.5991 62.8545 20.8979 62.8824 22.5107L62.8828 22.5628C62.8828 24.1997 61.5559 25.5266 59.9191 25.5266H52.0158C50.3964 25.5266 49.0804 24.2277 49.0525 22.615L49.0521 22.5628C49.0521 20.926 50.379 19.5991 52.0158 19.5991Z" fill="#276CFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.6569 40.2041H50.6045C52.2239 40.2041 53.54 41.5029 53.5678 43.1157L53.5683 43.1678C53.5683 44.8046 52.2414 46.1316 50.6045 46.1316H34.6569C33.0375 46.1316 31.7214 44.8327 31.6936 43.22L31.6931 43.1678C31.6931 41.531 33.0201 40.2041 34.6569 40.2041Z" fill="#276CFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.6569 50.5068H41.1488C42.7682 50.5068 44.0843 51.8057 44.1121 53.4184L44.1126 53.4706C44.1126 55.1074 42.7857 56.4343 41.1488 56.4343H34.6569C33.0375 56.4343 31.7214 55.1355 31.6936 53.5227L31.6931 53.4706C31.6931 51.8337 33.0201 50.5068 34.6569 50.5068Z" fill="#276CFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.0158 50.5068H59.9191C61.5385 50.5068 62.8545 51.8057 62.8824 53.4184L62.8828 53.4706C62.8828 55.1074 61.5559 56.4343 59.9191 56.4343H52.0158C50.3964 56.4343 49.0804 55.1355 49.0525 53.5227L49.0521 53.4706C49.0521 51.8337 50.379 50.5068 52.0158 50.5068Z" fill="#FF458B"/>
<svg width="268" height="80" viewBox="0 0 268 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M192.5 38.8574H206.5V52.8574H192.5V38.8574Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M209.643 18.2861H215.643V24.2861H209.643V18.2861Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.3574 18.5713H53.3574V24.5713H47.3574V18.5713Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M261.5 10H267.5V16H261.5V10Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 51H6.5V57H0.5V51Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M240.357 33.1426H246.357V39.1426H240.357V33.1426Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6426 47.8574H81.6426V65.8574H63.6426V47.8574Z" fill="#FFC600"/>
<g clip-path="url(#clip0_11691_87753)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M111.247 2.49966H151.339C157.909 2.49966 160.291 3.18372 162.693 4.46824C165.095 5.75275 166.98 7.63772 168.265 10.0396L168.341 10.1837C169.576 12.5384 170.233 14.9552 170.233 21.3936V46.973L170.232 47.3622C170.206 53.6381 169.523 55.9732 168.265 58.327C166.98 60.7289 165.095 62.6138 162.693 63.8984C160.315 65.17 157.957 65.8532 151.535 65.8669H111.443C104.873 65.8669 102.491 65.1829 100.089 63.8984C97.6869 62.6138 95.8019 60.7289 94.5174 58.327L94.441 58.1829C93.2184 55.8523 92.5623 53.4607 92.5488 47.1688V21.3936C92.5488 14.8238 93.2329 12.4414 94.5174 10.0396C95.8019 7.63772 97.6869 5.75275 100.089 4.46824C102.467 3.19657 104.825 2.51341 111.247 2.49966Z" fill="#0218A7"/>
<path d="M104.207 16.9692C106.264 16.9692 107.931 15.302 107.931 13.2455C107.931 11.189 106.264 9.52185 104.207 9.52185C102.151 9.52185 100.483 11.189 100.483 13.2455C100.483 15.302 102.151 16.9692 104.207 16.9692Z" fill="#FF458B"/>
<path d="M115.378 16.9692C117.434 16.9692 119.102 15.302 119.102 13.2455C119.102 11.189 117.434 9.52185 115.378 9.52185C113.321 9.52185 111.654 11.189 111.654 13.2455C111.654 15.302 113.321 16.9692 115.378 16.9692Z" fill="#FFC600"/>
<path d="M126.549 16.9692C128.605 16.9692 130.273 15.302 130.273 13.2455C130.273 11.189 128.605 9.52185 126.549 9.52185C124.492 9.52185 122.825 11.189 122.825 13.2455C122.825 15.302 124.492 16.9692 126.549 16.9692Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M103.447 22.0872H133.649C135.268 22.0872 136.584 23.386 136.612 24.9987L136.613 25.0509C136.613 26.6877 135.286 28.0146 133.649 28.0146H103.447C101.828 28.0146 100.512 26.7158 100.484 25.103L100.483 25.0509C100.483 23.4141 101.81 22.0872 103.447 22.0872Z" fill="#276CFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M118.266 32.3896H125.182C126.801 32.3896 128.117 33.6885 128.145 35.3012L128.146 35.3534C128.146 36.9902 126.819 38.3171 125.182 38.3171H118.266C116.647 38.3171 115.331 37.0183 115.303 35.4055L115.303 35.3534C115.303 33.7165 116.63 32.3896 118.266 32.3896Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M136.189 32.3896H143.105C144.724 32.3896 146.04 33.6885 146.068 35.3012L146.068 35.3534C146.068 36.9902 144.741 38.3171 143.105 38.3171H136.189C134.57 38.3171 133.254 37.0183 133.226 35.4055L133.226 35.3534C133.226 33.7165 134.552 32.3896 136.189 32.3896Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M154.113 32.3896H161.028C162.648 32.3896 163.964 33.6885 163.992 35.3012L163.992 35.3534C163.992 36.9902 162.665 38.3171 161.028 38.3171H154.113C152.494 38.3171 151.178 37.0183 151.15 35.4055L151.149 35.3534C151.149 33.7165 152.476 32.3896 154.113 32.3896Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M144.516 22.0872H152.42C154.039 22.0872 155.355 23.386 155.383 24.9987L155.383 25.0509C155.383 26.6877 154.057 28.0146 152.42 28.0146H144.516C142.897 28.0146 141.581 26.7158 141.553 25.103L141.553 25.0509C141.553 23.4141 142.88 22.0872 144.516 22.0872Z" fill="#276CFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.157 42.6921H143.105C144.724 42.6921 146.04 43.9909 146.068 45.6037L146.068 45.6558C146.068 47.2926 144.742 48.6195 143.105 48.6195H127.157C125.538 48.6195 124.222 47.3207 124.194 45.7079L124.193 45.6558C124.193 44.019 125.52 42.6921 127.157 42.6921Z" fill="#276CFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.157 52.9945H133.649C135.268 52.9945 136.585 54.2934 136.612 55.9061L136.613 55.9583C136.613 57.5951 135.286 58.922 133.649 58.922H127.157C125.538 58.922 124.222 57.6232 124.194 56.0104L124.193 55.9583C124.193 54.3215 125.52 52.9945 127.157 52.9945Z" fill="#276CFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M144.516 52.9945H152.42C154.039 52.9945 155.355 54.2934 155.383 55.9061L155.383 55.9583C155.383 57.5951 154.057 58.922 152.42 58.922H144.516C142.897 58.922 141.581 57.6232 141.553 56.0104L141.553 55.9583C141.553 54.3215 142.88 52.9945 144.516 52.9945Z" fill="#FF458B"/>
</g>
<circle cx="169.786" cy="61.5953" r="18.2857" fill="#D9E0EE"/>
<path d="M178.5 63.8184V67.8184C178.5 68.3488 178.289 68.8575 177.914 69.2326C177.539 69.6076 177.03 69.8184 176.5 69.8184H162.5C161.97 69.8184 161.461 69.6076 161.086 69.2326C160.711 68.8575 160.5 68.3488 160.5 67.8184V63.8184" stroke="#00127F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M164.5 58.8184L169.5 63.8184L174.5 58.8184" stroke="#00127F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M169.5 63.8184V51.8184" stroke="#00127F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<clipPath id="clip0">
<rect width="77.8378" height="64" fill="white"/>
<clipPath id="clip0_11691_87753">
<rect width="77.8378" height="64" fill="white" transform="translate(92.5 2.48779)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

25
web/satellite/static/images/onboardingTour/downloadObjectStep.svg
View File

@ -1,11 +1,16 @@
<svg width="91" height="108" viewBox="0 0 91 108" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2515 30.6426L47.1303 50.5213V97.6172H0V30.6426L27.2515 30.6426Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2555 50.5215L27.2555 30.6427L47.1343 50.5215L27.2555 50.5215Z" fill="#00127F"/>
<path d="M72.2774 16.4141L81.1709 25.3076L90.0644 16.4141L81.1709 7.52063L72.2774 16.4141Z" fill="#FFC600"/>
<path d="M50.1523 26.8998V34.5859H57.8385V26.8998H50.1523Z" fill="#00E567"/>
<path d="M30.7741 6.53187L36.209 11.9668L41.6439 6.53187L36.209 1.09694L30.7741 6.53187Z" fill="#FF458B"/>
<path d="M14 16.933V21.8242H18.8912V16.933H14Z" fill="#0149FF"/>
<circle cx="47.2857" cy="89.3013" r="18.2857" fill="#D9E0EE"/>
<path d="M41 90.2168L47 96.2168L53 90.2168" stroke="#00127F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M47 96.2164V81.8164" stroke="#00127F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<svg width="268" height="78" viewBox="0 0 268 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M192.5 38.8574H206.5V52.8574H192.5V38.8574Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M92.5 0H102.5V10H92.5V0Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M209.643 18.2861H215.643V24.2861H209.643V18.2861Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.3574 18.5713H53.3574V24.5713H47.3574V18.5713Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M261.5 10H267.5V16H261.5V10Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 51H6.5V57H0.5V51Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M240.357 33.1426H246.357V39.1426H240.357V33.1426Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6426 47.8574H81.6426V65.8574H63.6426V47.8574Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M164.785 1H178.785V15H164.785V1Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M137.252 0.000976562L157.13 19.8797V66.9756H110V0.000976563L137.252 0.000976562Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M137.256 19.8799V0.00113297L157.135 19.8799L137.256 19.8799Z" fill="#00127F"/>
<circle cx="157.286" cy="59.1675" r="18.2857" fill="#D9E0EE"/>
<path d="M151 60.335L157 66.335L163 60.335" stroke="#00127F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M157 66.3346V51.9346" stroke="#00127F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

25
web/satellite/static/images/onboardingTour/listObjectStep.svg
View File

@ -1,8 +1,19 @@
<svg width="87" height="80" viewBox="0 0 87 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H10V10H0V0Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.2856 8H86.2856V22H72.2856V8Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M69.5779 24.585H12L20.6367 73.151H20.6554C21.1141 76.9611 29.9528 80.0001 40.789 80.0001C51.6252 80.0001 60.4639 76.9611 60.9226 73.151H60.9412L69.5779 24.585Z" fill="#0149FF"/>
<ellipse cx="40.789" cy="24.2736" rx="28.789" ry="10.2736" fill="#00127F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M42 34.5384C41.5984 34.5443 41.1947 34.5473 40.789 34.5473C34.5237 34.5473 28.7259 33.8331 24 32.6204V24.4287H42V34.5384Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1428 3.85742H49.1428V17.8574H35.1428V3.85742Z" fill="#FFC600"/>
<svg width="268" height="77" viewBox="0 0 268 77" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M192.5 43.4653H206.5V57.4653H192.5V43.4653Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M92.5 4.60791H102.5V14.6079H92.5V4.60791Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M209.643 22.894H215.643V28.894H209.643V22.894Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.3574 23.1792H53.3574V29.1792H47.3574V23.1792Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M261.5 14.6079H267.5V20.6079H261.5V14.6079Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 55.6079H6.5V61.6079H0.5V55.6079Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M240.357 37.7505H246.357V43.7505H240.357V37.7505Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6426 52.4653H81.6426V70.4653H63.6426V52.4653Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M164.785 5.60791H178.785V19.6079H164.785V5.60791Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M162.078 20.7275H104.5L113.137 69.2936H113.155C113.614 73.1037 122.453 76.1425 133.289 76.1425C144.125 76.1425 152.964 73.1037 153.423 69.2936H153.441L162.078 20.7275Z" fill="#0149FF"/>
<ellipse cx="133.289" cy="20.4166" rx="28.789" ry="10.2736" fill="#00127F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M134.5 30.6808C134.098 30.6868 133.695 30.6897 133.289 30.6897C127.024 30.6897 121.226 29.9755 116.5 28.7628V20.5713H134.5V30.6808Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.643 0H141.643V14H127.643V0Z" fill="#FFC600"/>
<circle cx="166.214" cy="30.4288" r="18.2857" fill="#D9E0EE"/>
<path d="M167.461 29.1821H159.63C158.941 29.1821 158.383 29.7403 158.383 30.4289C158.383 31.1175 158.941 31.6756 159.63 31.6756H167.461H172.798C173.487 31.6756 174.045 31.1175 174.045 30.4289C174.045 29.7403 173.487 29.1821 172.798 29.1821H167.461Z" fill="#0218A7"/>
<path d="M167.461 35.1821H159.63C158.941 35.1821 158.383 35.7403 158.383 36.4289C158.383 37.1175 158.941 37.6756 159.63 37.6756H167.461H172.798C173.487 37.6756 174.045 37.1175 174.045 36.4289C174.045 35.7403 173.487 35.1821 172.798 35.1821H167.461Z" fill="#0218A7"/>
<path d="M167.461 23.1821H159.63C158.941 23.1821 158.383 23.7403 158.383 24.4289C158.383 25.1175 158.941 25.6756 159.63 25.6756H167.461H172.798C173.487 25.6756 174.045 25.1175 174.045 24.4289C174.045 23.7403 173.487 23.1821 172.798 23.1821H167.461Z" fill="#0218A7"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 919 B

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
web/satellite/static/images/onboardingTour/shareStep.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

25
web/satellite/static/images/onboardingTour/successStep.svg
View File

@ -1,6 +1,21 @@
<svg width="77" height="36" viewBox="0 0 77 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M58.2774 16.501L67.1709 25.3945L76.0644 16.501L67.1709 7.60754L58.2774 16.501Z" fill="#FFC600"/>
<path d="M36.1531 26.9877V34.6738H43.8392V26.9877H36.1531Z" fill="#00E567"/>
<path d="M16.7741 6.61976L22.209 12.0547L27.6439 6.61976L22.209 1.18483L16.7741 6.61976Z" fill="#FF458B"/>
<path d="M0 17.0209L0 21.9121H4.89119V17.0209H0Z" fill="#0149FF"/>
<svg width="268" height="89" viewBox="0 0 268 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M192.5 50.2383H206.5V64.2383H192.5V50.2383Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M92.5 11.3809H102.5V21.3809H92.5V11.3809Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M209.643 29.667H215.643V35.667H209.643V29.667Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.3574 29.9521H53.3574V35.9521H47.3574V29.9521Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M261.5 21.3809H267.5V27.3809H261.5V21.3809Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 62.3809H6.5V68.3809H0.5V62.3809Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M240.357 44.5234H246.357V50.5234H240.357V44.5234Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6426 59.2383H81.6426V77.2383H63.6426V59.2383Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M164.785 12.3809H178.785V26.3809H164.785V12.3809Z" fill="#0149FF"/>
<path d="M103.604 15.4162C103.109 13.2964 104.9 11.3761 106.877 11.9064L117.933 14.8722C119.239 15.2227 120.587 14.4864 121.091 13.1467L125.351 1.81266C126.113 -0.214009 128.615 -0.638839 129.923 1.03618L137.242 10.4037C138.107 11.5109 139.601 11.7646 140.743 10.9982L150.403 4.51425C152.13 3.35483 154.387 4.58774 154.527 6.76767L155.313 18.9588C155.406 20.3998 156.475 21.5467 157.819 21.6463L169.189 22.489C171.222 22.6397 172.371 25.0595 171.29 26.9116L165.243 37.2698C164.528 38.4941 164.765 40.0961 165.798 41.0237L174.534 48.8713C176.096 50.2745 175.7 52.9568 173.81 53.7737L163.24 58.3425C161.99 58.8825 161.304 60.3277 161.63 61.7289L164.396 73.5838C164.891 75.7036 163.1 77.6239 161.123 77.0936L150.067 74.1278C148.761 73.7773 147.413 74.5136 146.909 75.8533L142.649 87.1873C141.887 89.214 139.385 89.6388 138.077 87.9638L130.758 78.5963C129.893 77.4891 128.399 77.2354 127.257 78.0018L117.597 84.4858C115.87 85.6452 113.613 84.4123 113.473 82.2323L112.687 70.0412C112.594 68.6002 111.525 67.4533 110.181 67.3537L98.8114 66.511C96.7785 66.3603 95.6287 63.9405 96.7099 62.0884L102.757 51.7302C103.472 50.5059 103.235 48.9039 102.202 47.9763L93.4663 40.1287C91.9042 38.7255 92.3004 36.0432 94.1905 35.2263L104.76 30.6575C106.01 30.1175 106.696 28.6723 106.37 27.2711L103.604 15.4162Z" fill="#FFEA9F"/>
<mask id="mask0_11691_88022" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="107" y="15" width="53" height="58">
<ellipse cx="133.582" cy="44.0508" rx="26.2918" ry="28.1924" fill="#FFC700"/>
</mask>
<g mask="url(#mask0_11691_88022)">
<ellipse cx="133.582" cy="44.0508" rx="26.2918" ry="28.1924" fill="#FFC700"/>
</g>
<path d="M100.265 42.226C100.265 37.8879 103.544 34.3711 107.59 34.3711H159.061C163.107 34.3711 166.387 37.8879 166.387 42.226V45.2235C166.387 54.4137 159.439 61.8637 150.868 61.8637C142.298 61.8637 135.35 54.4137 135.35 45.2235V44.3536C135.35 43.2357 134.444 42.3295 133.326 42.3295C132.208 42.3295 131.302 43.2357 131.302 44.3536V45.2235C131.302 54.4137 124.354 61.8637 115.783 61.8637C107.213 61.8637 100.265 54.4137 100.265 45.2235V42.226Z" fill="#FF598B"/>
<path d="M104.312 41.1655C104.312 39.8104 105.411 38.7119 106.766 38.7119H124.799C126.154 38.7119 127.253 39.8104 127.253 41.1655V46.0525C127.253 52.3873 122.117 57.5227 115.783 57.5227C109.448 57.5227 104.312 52.3873 104.312 46.0525V41.1655Z" fill="black"/>
<path d="M139.398 41.1655C139.398 39.8104 140.497 38.7119 141.852 38.7119H159.885C161.24 38.7119 162.339 39.8104 162.339 41.1655V46.0525C162.339 52.3873 157.203 57.5227 150.869 57.5227C144.534 57.5227 139.398 52.3873 139.398 46.0525V41.1655Z" fill="black"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 476 B

After

Width:  |  Height:  |  Size: 3.7 KiB

15
web/satellite/static/images/onboardingTour/uploadStep.svg Normal file
View File

@ -0,0 +1,15 @@
<svg width="268" height="82" viewBox="0 0 268 82" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M192.5 39.5181H206.5V53.5181H192.5V39.5181Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M92.5 0.660645H102.5V10.6606H92.5V0.660645Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M209.643 18.9468H215.643V24.9468H209.643V18.9468Z" fill="#FF458B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.3574 19.2319H53.3574V25.2319H47.3574V19.2319Z" fill="#00E567"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M261.5 10.6606H267.5V16.6606H261.5V10.6606Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 51.6606H6.5V57.6606H0.5V51.6606Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M240.357 33.8032H246.357V39.8032H240.357V33.8032Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6426 48.5181H81.6426V66.5181H63.6426V48.5181Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M164.785 1.66064H178.785V15.6606H164.785V1.66064Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M139.824 3.91016L159.234 23.3202V69.3057H113.215V3.91016L139.824 3.91016Z" fill="#0149FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M139.824 23.3213V3.91121L159.234 23.3213L139.824 23.3213Z" fill="#0218A7"/>
<circle cx="158.501" cy="63.1959" r="18.2857" fill="#D9E0EE"/>
<path d="M158.622 54.128L158.646 54.151L162.874 58.3789C163.195 58.7 163.195 59.2205 162.874 59.5416C162.561 59.8548 162.058 59.8624 161.735 59.5645L161.711 59.5416L158.859 56.6896V65.9783C158.859 66.4323 158.491 66.8004 158.037 66.8004C157.594 66.8004 157.233 66.4501 157.216 66.0113L157.215 65.9783V56.7443L154.418 59.5416C154.105 59.8548 153.602 59.8624 153.279 59.5645L153.255 59.5416C152.942 59.2283 152.935 58.7252 153.233 58.4027L153.255 58.3789L157.483 54.151C157.797 53.8377 158.3 53.8301 158.622 54.128ZM167.215 70.2535C167.215 70.7076 166.847 71.0757 166.393 71.0757H150.099C149.645 71.0757 149.277 70.7076 149.277 70.2535C149.277 69.7995 149.645 69.4314 150.099 69.4314H166.393C166.847 69.4314 167.215 69.7995 167.215 70.2535ZM150.037 71.0133C149.583 71.0133 149.215 70.6452 149.215 70.1911V66.9026C149.215 66.4485 149.583 66.0804 150.037 66.0804C150.491 66.0804 150.859 66.4485 150.859 66.9026V70.1911C150.859 70.6452 150.491 71.0133 150.037 71.0133ZM166.33 71.0133C165.876 71.0133 165.508 70.6452 165.508 70.1911V66.9026C165.508 66.4485 165.876 66.0804 166.33 66.0804C166.784 66.0804 167.152 66.4485 167.152 66.9026V70.1911C167.152 70.6452 166.784 71.0133 166.33 71.0133Z" fill="#091C45"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB