Skip to content

Commit

Permalink
web/satellite/v2: ui-ux improvements (#6720)
Browse files Browse the repository at this point in the history 
Update language and colors
Update error page
Update add tokens dialog
Update remove card dialog
Update edit default card dialog
Make access creation dialog persistent
Change order of use cases during onboarding
  • Loading branch information
@boshevski
boshevski committed Jan 25, 2024
1 parent 5dc2bc4 commit f07c0a6
Show file tree
Hide file tree
Showing 12 changed files with 39 additions and 40 deletions.
13 changes: 7 additions & 6 deletions web/satellite/vuetify-poc/src/components/ErrorPage.vue
View file
Expand Up @@ -8,22 +8,22 @@
v-if="theme.global.current.value.dark"
class="error-area__logo-wrapper__logo"
src="@poc/assets/logo-dark.svg"
width="120"
width="140"
alt="Storj Logo"
@click="goToHomepage"
/>
<v-img
v-else
class="error-area__logo-wrapper__logo"
src="@poc/assets/logo.svg"
width="120"
width="140"
alt="Storj Logo"
@click="goToHomepage"
/>
</div>
<div class="d-flex flex-column align-center text-center">
<h3 class="text-h3">{{ statusCode }}</h3>
<h4 class="text-h4 mb-5">{{ message }}</h4>
<h2 class="text-h2 font-weight-bold mb-4">{{ statusCode }}</h2>
<h5 class="text-h5 mb-6">{{ message }}</h5>
<v-btn
@click="onButtonClick"
>
Expand Down Expand Up @@ -112,6 +112,7 @@ onMounted(() => {
padding: 52px 24px;
box-sizing: border-box;
overflow-y: auto;
background: rgb(var(--v-theme-background));
&:before {
content: '';
Expand All @@ -120,11 +121,11 @@ onMounted(() => {
background: url('../../../static/images/errors/world.svg') no-repeat center;
background-size: auto 75%;
z-index: -1;
opacity: 0.15;
opacity: 0.1;
}
&__logo-wrapper {
height: 30.89px;
height: 42px;
position: absolute;
top: 52px;
left: 0;
Expand Down
4 changes: 2 additions & 2 deletions web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
View file
Expand Up @@ -10,7 +10,7 @@
</v-card-title>
</template>
<v-card-item>
<v-progress-linear :color="progressColor" :model-value="progress" rounded height="6" />
<v-progress-linear :color="progressColor" bg-color="default" :model-value="progress" rounded height="6" />
</v-card-item>
<v-card-item>
<v-row>
Expand Down Expand Up @@ -65,7 +65,7 @@ const progressColor = computed(() => {
} else if (props.progress >= 80) {
return 'warning';
} else {
return 'blue2';
return 'success';
}
});
</script>
2 changes: 1 addition & 1 deletion web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue
View file
Expand Up @@ -14,7 +14,7 @@
<template #prepend>
<img class="d-block" src="@poc/assets/icon-change-name.svg" alt="Change name">
</template>
<v-card-title class="font-weight-bold">Edit Account Name</v-card-title>
<v-card-title class="font-weight-bold">Edit Name</v-card-title>
<template #append>
<v-btn
icon="$close"
Expand Down
2 changes: 1 addition & 1 deletion web/satellite/vuetify-poc/src/components/dialogs/CreateAccessDialog.vue
View file
Expand Up @@ -8,7 +8,7 @@
max-width="420px"
transition="fade-transition"
scrollable
:persistent="isCreating"
persistent
>
<v-card ref="innerContent" rounded="xlg">
<v-card-item class="pa-5 pl-7 pos-relative">
Expand Down
14 changes: 7 additions & 7 deletions web/satellite/vuetify-poc/src/components/dialogs/EditDefaultCreditCardDialog.vue
View file
Expand Up @@ -10,7 +10,7 @@
>
<v-card rounded="xlg">
<v-card-item class="pa-5 pl-6">
<v-card-title class="font-weight-bold">Edit default credit card</v-card-title>
<v-card-title class="font-weight-bold">Edit Default Credit Card</v-card-title>
<template #append>
<v-btn
icon="$close"
Expand All @@ -23,17 +23,17 @@
</template>
</v-card-item>

<v-card-item class="px-6 py-0">
<v-divider />
<v-divider />

<credit-card-item v-if="defaultCard" class="mt-4" :card="defaultCard" />
<v-card-item class="px-6 py-0">
<credit-card-item v-if="defaultCard" class="mt-6" :card="defaultCard" />
<v-radio-group v-model="selectedCard" hide-details>
<credit-card-item v-for="cc in nonDefaultCards" :key="cc.id" selectable :card="cc" />
</v-radio-group>

<v-divider />
</v-card-item>

<v-divider />

<v-card-actions class="pa-6">
<v-row>
<v-col>
Expand All @@ -43,7 +43,7 @@
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="isLoading" @click="onMakeDefault">
Make Default
Set Default
</v-btn>
</v-col>
</v-row>
Expand Down
14 changes: 7 additions & 7 deletions web/satellite/vuetify-poc/src/components/dialogs/RemoveCreditCardDialog.vue
View file
Expand Up @@ -10,7 +10,7 @@
>
<v-card rounded="xlg">
<v-card-item class="pa-5 pl-6">
<v-card-title class="font-weight-bold">Remove credit card</v-card-title>
<v-card-title class="font-weight-bold">Remove Credit Card</v-card-title>
<template #append>
<v-btn
icon="$close"
Expand All @@ -23,17 +23,17 @@
</template>
</v-card-item>

<v-card-item class="px-6 py-0">
<v-divider />
<v-divider />

<v-card-text v-if="card.isDefault" class="py-4 px-0">This is your default payment card. It can't be removed.</v-card-text>
<v-card-text v-else class="py-4 px-0">This is not your default payment card.</v-card-text>
<v-card-item class="px-6 py-0">
<v-card-text v-if="card.isDefault" class="py-5 px-0">This is your default payment card. It can't be removed.</v-card-text>
<v-card-text v-else class="py-5 px-0">This is not your default payment card.</v-card-text>

<credit-card-item :card="card" />

<v-divider />
</v-card-item>

<v-divider />

<v-card-actions class="pa-6">
<v-row>
<v-col>
Expand Down
2 changes: 1 addition & 1 deletion web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/BusinessStep.vue
View file
Expand Up @@ -92,7 +92,7 @@
<v-col cols="12" sm="5" md="4" lg="3">
<v-select
v-model="useCase"
:items="['Video Streaming', 'Media Sharing & Collaboration', 'Large File Distribution', 'Backup/Archive', 'Web3 Storage', 'Other']"
:items="['Backup/Archive', 'Media Sharing & Collaboration', 'Large File Distribution', 'Video Streaming', 'Web3 Storage', 'Other']"
label="Use Case"
variant="outlined"
hide-details="auto"
Expand Down
2 changes: 1 addition & 1 deletion web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue
View file
Expand Up @@ -27,7 +27,7 @@
/>
<v-select
v-model="useCase"
:items="['Video Streaming', 'Media Sharing & Collaboration', 'Large File Distribution', 'Backup/Archive', 'Web3 Storage', 'Other']"
:items="['Backup/Archive', 'Media Sharing & Collaboration', 'Large File Distribution', 'Video Streaming', 'Web3 Storage', 'Other']"
label="Use Case (optional)"
placeholder="Select your use case"
variant="outlined"
Expand Down
6 changes: 3 additions & 3 deletions web/satellite/vuetify-poc/src/components/dialogs/ccActionComponents/CreditCardItem.vue
View file
Expand Up @@ -2,16 +2,16 @@
// See LICENSE for copying information.

<template>
<v-card border class="mb-4">
<v-card border class="mb-6 py-2">
<v-card-item>
<v-row class="align-center justify-space-between ma-0">
<v-col class="pa-0">
<v-row class="align-center ma-0">
<v-chip rounded class="text-capitalize font-weight-bold">{{ card.brand }}</v-chip>
<v-chip v-if="card.isDefault" color="info" rounded class="text-capitalize font-weight-bold ml-2">Default</v-chip>
</v-row>
<v-card-text class="px-0">**** **** **** {{ card.last4 }}</v-card-text>
<v-card-text class="pa-0">{{ card.expMonth }}/{{ card.expYear }}</v-card-text>
<v-card-text class="font-weight-bold px-0">**** **** **** {{ card.last4 }}</v-card-text>
<v-card-text class="font-weight-bold pa-0">{{ card.expMonth }}/{{ card.expYear }}</v-card-text>
</v-col>
<v-radio v-if="selectable" class="flex-0-0" :value="card.id" />
</v-row>
Expand Down
16 changes: 7 additions & 9 deletions web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddTokensStep.vue
View file
Expand Up @@ -10,9 +10,9 @@
Your account will be upgraded after your transaction receives {{ neededConfirmations }} confirmations.
If your account is not automatically upgraded, please fill out this
<a
style="color: var(--c-blue-3);"
href="https://supportdcs.storj.io/hc/en-us/requests/new?ticket_form_id=360000683212"
target="_blank"
class="link"
rel="noopener noreferrer"
>limit increase request form</a>.
</p>
Expand All @@ -23,19 +23,17 @@
</v-col>
</v-row>

<p class="text-caption font-weight-bold">
<p class="text-caption font-weight-bold my-3">
Deposit Address
<v-tooltip max-width="200px" location="top">
<template #activator="{ props }">
<v-btn v-bind="props" density="compact" variant="plain" color="grey" icon>
<v-icon :icon="mdiInformationOutline" size="16" />
</v-btn>
<v-icon v-bind="props" :icon="mdiInformationOutline" size="16" />
</template>
<p>
This is a Storj token deposit address generated just for you.
<a
style="color: var(--c-white);"
href=""
href="https://docs.storj.io/support/account-management-billing/billing#adding-storj-tokens"
class="link"
target="_blank"
rel="noopener noreferrer"
>
Expand All @@ -46,11 +44,11 @@
</p>

<v-row justify="space-between" align="center" class="ma-0 mb-4 border-sm rounded-lg">
<v-col class="pb-0">
<v-col>
<p class="text-caption">{{ wallet.address }}</p>
</v-col>

<v-col class="pa-2 pr-3" cols="auto">
<v-col cols="auto">
<v-btn
density="compact"
@click="onCopyAddressClick"
Expand Down
1 change: 1 addition & 0 deletions web/satellite/vuetify-poc/src/views/Dashboard.vue
View file
Expand Up @@ -239,6 +239,7 @@
v-model="datePickerModel"
multiple
show-adjacent-months
title="Select Date Range"
header="Daily Usage"
:disabled="isLoading"
/>
Expand Down
3 changes: 1 addition & 2 deletions web/satellite/vuetify-poc/src/views/ProjectSettings.vue
View file
Expand Up @@ -63,12 +63,11 @@
<v-card title="Free Account" variant="outlined" :border="true" rounded="xlg">
<v-card-subtitle>
{{ storageLimitFormatted }} Storage / {{ bandwidthLimitFormatted }} Bandwidth. <br>
Need more? Upgrade to Pro.
Need more? Upgrade to Pro Account.
</v-card-subtitle>
<v-card-text>
<v-divider class="mb-4" />
<v-btn variant="flat" color="primary" size="small" @click="toggleUpgradeFlow">
>
Upgrade to Pro
</v-btn>
</v-card-text>
Expand Down

0 comments on commit f07c0a6

Please sign in to comment.