From f07c0a68a6550986cea8589bab4121f8583777e1 Mon Sep 17 00:00:00 2001
From: Tome Boshevski <tome@storj.io>
Date: Thu, 25 Jan 2024 14:26:10 +0100
Subject: [PATCH] web/satellite/v2: ui-ux improvements (#6720)

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
---
 .../vuetify-poc/src/components/ErrorPage.vue     | 13 +++++++------
 .../src/components/UsageProgressComponent.vue    |  4 ++--
 .../src/components/dialogs/ChangeNameDialog.vue  |  2 +-
 .../components/dialogs/CreateAccessDialog.vue    |  2 +-
 .../dialogs/EditDefaultCreditCardDialog.vue      | 14 +++++++-------
 .../dialogs/RemoveCreditCardDialog.vue           | 14 +++++++-------
 .../dialogs/accountSetupSteps/BusinessStep.vue   |  2 +-
 .../dialogs/accountSetupSteps/PersonalStep.vue   |  2 +-
 .../ccActionComponents/CreditCardItem.vue        |  6 +++---
 .../dialogs/upgradeAccountFlow/AddTokensStep.vue | 16 +++++++---------
 .../vuetify-poc/src/views/Dashboard.vue          |  1 +
 .../vuetify-poc/src/views/ProjectSettings.vue    |  3 +--
 12 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/web/satellite/vuetify-poc/src/components/ErrorPage.vue b/web/satellite/vuetify-poc/src/components/ErrorPage.vue
index 204f74975cb3..b5ddd8e4184f 100644
--- a/web/satellite/vuetify-poc/src/components/ErrorPage.vue
+++ b/web/satellite/vuetify-poc/src/components/ErrorPage.vue
@@ -8,7 +8,7 @@
                 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"
             />
@@ -16,14 +16,14 @@
                 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"
             >
@@ -112,6 +112,7 @@ onMounted(() => {
         padding: 52px 24px;
         box-sizing: border-box;
         overflow-y: auto;
+        background: rgb(var(--v-theme-background));
 
         &:before {
             content: '';
@@ -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;
diff --git a/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
index 79a0d3c77542..c15e0b59b2d6 100644
--- a/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
@@ -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>
@@ -65,7 +65,7 @@ const progressColor = computed(() => {
     } else if (props.progress >= 80) {
         return 'warning';
     } else {
-        return 'blue2';
+        return 'success';
     }
 });
 </script>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue
index c585bc5107c0..6cdf0032374d 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue
@@ -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"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/CreateAccessDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/CreateAccessDialog.vue
index 1ca824974813..c5dd2b41cf6d 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/CreateAccessDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/CreateAccessDialog.vue
@@ -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">
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/EditDefaultCreditCardDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/EditDefaultCreditCardDialog.vue
index e7c9c568d6eb..71e875e1e2a5 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/EditDefaultCreditCardDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/EditDefaultCreditCardDialog.vue
@@ -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"
@@ -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>
@@ -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>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/RemoveCreditCardDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/RemoveCreditCardDialog.vue
index 6838ba273866..aae292c6b50c 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/RemoveCreditCardDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/RemoveCreditCardDialog.vue
@@ -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"
@@ -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>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/BusinessStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/BusinessStep.vue
index afaf4fea2d14..6cb1833546f7 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/BusinessStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/BusinessStep.vue
@@ -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"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue
index a162eef5c163..91bf6daaed99 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue
@@ -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"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/ccActionComponents/CreditCardItem.vue b/web/satellite/vuetify-poc/src/components/dialogs/ccActionComponents/CreditCardItem.vue
index 7a662636ee5b..13032daaa6fb 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/ccActionComponents/CreditCardItem.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/ccActionComponents/CreditCardItem.vue
@@ -2,7 +2,7 @@
 // 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">
@@ -10,8 +10,8 @@
                         <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>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddTokensStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddTokensStep.vue
index d09ed496f4e5..44e7b9486cb6 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddTokensStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddTokensStep.vue
@@ -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>
@@ -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"
                 >
@@ -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"
diff --git a/web/satellite/vuetify-poc/src/views/Dashboard.vue b/web/satellite/vuetify-poc/src/views/Dashboard.vue
index cb439e568b4f..24a88d416d92 100644
--- a/web/satellite/vuetify-poc/src/views/Dashboard.vue
+++ b/web/satellite/vuetify-poc/src/views/Dashboard.vue
@@ -239,6 +239,7 @@
             v-model="datePickerModel"
             multiple
             show-adjacent-months
+            title="Select Date Range"
             header="Daily Usage"
             :disabled="isLoading"
         />
diff --git a/web/satellite/vuetify-poc/src/views/ProjectSettings.vue b/web/satellite/vuetify-poc/src/views/ProjectSettings.vue
index 8c705c881258..ea1f5a08857f 100644
--- a/web/satellite/vuetify-poc/src/views/ProjectSettings.vue
+++ b/web/satellite/vuetify-poc/src/views/ProjectSettings.vue
@@ -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>