web/satellite/vuetify-poc: ui ux improvements

This change improves the satellite v2 user interface and overall experience. Change-Id: I702a6aa6b0b1a676bb2c404ab54f0ecef3b1ad7a
storj · Nov 9, 2023 · 83ea377 · 83ea377
1 parent 07e2a9a
commit 83ea377
Show file tree

Hide file tree

Showing 64 changed files with 521 additions and 347 deletions.
diff --git a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
@@ -27,7 +27,6 @@
             item-value="name"
             no-data-text="No results found"
             select-strategy="all"
-            class="elevation-1"
             @update:itemsPerPage="onUpdateLimit"
             @update:page="onUpdatePage"
             @update:sortBy="onUpdateSortBy"
@@ -53,7 +52,7 @@
                 >
                     <v-icon icon="mdi-dots-horizontal" />
                     <v-menu activator="parent">
-                        <v-list class="pa-2">
+                        <v-list class="pa-1">
                             <v-list-item class="text-error" density="comfortable" link rounded="lg" @click="() => onDeleteClick(item.raw.name)">
                                 <template #prepend>
                                     <icon-trash bold />

diff --git a/web/satellite/vuetify-poc/src/components/BrowserRowActions.vue b/web/satellite/vuetify-poc/src/components/BrowserRowActions.vue
@@ -28,13 +28,13 @@
         >
             <v-icon icon="mdi-dots-horizontal" />
             <v-menu activator="parent">
-                <v-list class="pa-2">
+                <v-list class="pa-1">
                     <template v-if="file.type !== 'folder'">
                         <v-list-item density="comfortable" link rounded="lg" @click="emit('previewClick')">
                             <template #prepend>
                                 <icon-preview />
                             </template>
-                            <v-list-item-title class="pl-2 text-body-2 font-weight-medium">
+                            <v-list-item-title class="pl-2 ml-2 text-body-2 font-weight-medium">
                                 Preview
                             </v-list-item-title>
                         </v-list-item>
@@ -49,7 +49,7 @@
                                 <icon-download />
                             </template>
                             <v-fade-transition>
-                                <v-list-item-title v-show="!isDownloading" class="pl-2 text-body-2 font-weight-medium">
+                                <v-list-item-title v-show="!isDownloading" class="pl-2 ml-2 text-body-2 font-weight-medium">
                                     Download
                                 </v-list-item-title>
                             </v-fade-transition>
@@ -63,18 +63,18 @@
                         <template #prepend>
                             <icon-share bold />
                         </template>
-                        <v-list-item-title class="pl-2 text-body-2 font-weight-medium">
+                        <v-list-item-title class="pl-2 ml-2 text-body-2 font-weight-medium">
                             Share
                         </v-list-item-title>
                     </v-list-item>
 
-                    <v-divider class="my-2" />
+                    <v-divider class="my-1" />
 
                     <v-list-item density="comfortable" link rounded="lg" base-color="error" @click="emit('deleteFileClick')">
                         <template #prepend>
                             <icon-trash bold />
                         </template>
-                        <v-list-item-title class="pl-2 text-body-2 font-weight-medium">
+                        <v-list-item-title class="pl-2 ml-2 text-body-2 font-weight-medium">
                             Delete
                         </v-list-item-title>
                     </v-list-item>

diff --git a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
@@ -24,9 +24,8 @@
             :headers="headers"
             :items="tableFiles"
             :search="search"
-            class="elevation-1"
             :item-value="(item: BrowserObjectWrapper) => item.browserObject.Key"
-            no-data-text="No results found"
+            no-data-text="No data found"
             :page="cursor.page"
             hover
             must-sort

diff --git a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
@@ -25,8 +25,7 @@
             :loading="areBucketsFetching"
             :items-length="page.totalCount"
             :items-per-page-options="tableSizeOptions(page.totalCount)"
-            no-data-text="No results found"
-            class="elevation-1"
+            no-data-text="No buckets found"
             hover
             @update:itemsPerPage="onUpdateLimit"
             @update:page="onUpdatePage"
@@ -85,25 +84,25 @@
                             v-bind="activatorProps"
                         />
                     </template>
-                    <v-list class="pa-0">
-                        <v-list-item rounded-lg class="ma-1" link @click="() => showBucketDetailsModal(item.raw.name)">
+                    <v-list class="pa-1">
+                        <v-list-item rounded-lg link @click="() => showBucketDetailsModal(item.raw.name)">
                             <template #prepend>
                                 <icon-bucket size="18" />
                             </template>
                             <v-list-item-title class="ml-3">
                                 View Bucket Details
                             </v-list-item-title>
                         </v-list-item>
-                        <v-list-item rounded-lg class="ma-1" link @click="() => showShareBucketDialog(item.raw.name)">
+                        <v-list-item rounded-lg link @click="() => showShareBucketDialog(item.raw.name)">
                             <template #prepend>
                                 <icon-share size="18" />
                             </template>
                             <v-list-item-title class="ml-3">
                                 Share Bucket
                             </v-list-item-title>
                         </v-list-item>
-                        <v-divider />
-                        <v-list-item rounded-lg class="ma-1 text-error text-body-2" link @click="() => showDeleteBucketDialog(item.raw.name)">
+                        <v-divider class="my-1" />
+                        <v-list-item rounded-lg class="text-error text-body-2" link @click="() => showDeleteBucketDialog(item.raw.name)">
                             <template #prepend>
                                 <icon-trash />
                             </template>

diff --git a/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
@@ -10,7 +10,7 @@
             </v-card-title>
         </template>
         <v-card-text>
-            <v-chip rounded color="green" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
+            <v-chip rounded color="default" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
         </v-card-text>
     </v-card>
 </template>

diff --git a/web/satellite/vuetify-poc/src/components/ProjectCard.vue b/web/satellite/vuetify-poc/src/components/ProjectCard.vue
@@ -47,9 +47,9 @@
                 <v-btn v-if="item?.role === ProjectRole.Owner" color="default" variant="outlined" size="small" density="comfortable" icon>
                     <v-icon icon="mdi-dots-horizontal" />
 
-                    <v-menu activator="parent" location="end" transition="scale-transition">
-                        <v-list class="pa-2">
-                            <v-list-item link rounded="lg" @click="() => onSettingsClick()">
+                    <v-menu activator="parent" location="bottom" transition="fade-transition">
+                        <v-list class="pa-1">
+                            <v-list-item link @click="() => onSettingsClick()">
                                 <template #prepend>
                                     <icon-settings />
                                 </template>
@@ -58,9 +58,9 @@
                                 </v-list-item-title>
                             </v-list-item>
 
-                            <v-divider class="my-2" />
+                            <v-divider class="my-1" />
 
-                            <v-list-item link class="mt-1" rounded="lg" @click="emit('inviteClick')">
+                            <v-list-item link class="mt-1" @click="emit('inviteClick')">
                                 <template #prepend>
                                     <icon-team size="18" />
                                 </template>

diff --git a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
@@ -23,7 +23,6 @@
             :items="items"
             :search="search"
             no-data-text="No results found"
-            class="elevation-1"
             item-key="path"
         >
             <template #item.name="{ item }">
@@ -79,7 +78,7 @@
                         :loading="decliningIds.has(item.raw.id)"
                     >
                         <v-icon icon="mdi-dots-horizontal" size="18" />
-                        <v-menu activator="parent" location="bottom end" transition="scale-transition">
+                        <v-menu activator="parent" location="bottom" transition="scale-transition">
                             <v-list class="pa-1">
                                 <template v-if="item.raw.role === ProjectRole.Owner">
                                     <v-list-item link @click="() => onSettingsClick(item.raw)">
@@ -90,6 +89,7 @@
                                             Project Settings
                                         </v-list-item-title>
                                     </v-list-item>
+                                    <v-divider class="my-1" />
                                     <v-list-item link>
                                         <template #prepend>
                                             <icon-team size="18" />

diff --git a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
@@ -2,26 +2,21 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card min-height="24" :border="0" class="mb-2 elevation-0">
-        <v-row v-if="selectedMembers.length > 0" class="justify-end align-center ma-0">
-            <p>{{ selectedMembers.length }} user{{ selectedMembers.length !== 1 ? 's' : '' }} selected</p>
-        </v-row>
-    </v-card>
     <v-card variant="flat" :border="true" rounded="xlg">
         <v-row align="center" class="ma-0">
-            <v-col v-if="selectedMembers.length" class="px-0 mr-0 ml-2 mt-2" cols="auto">
+            <v-col v-if="selectedMembers.length" class="pa-0" cols="auto">
                 <v-btn
-                    class=" text-caption"
+                    class="text-caption ml-2 mt-2"
                     prepend-icon="mdi-trash-can-outline"
                     variant="outlined"
+                    size="large"
                     color="default"
                     @click="showDeleteDialog"
                 >
-                    Remove
+                    Remove {{ selectedMembers.length }} user{{ selectedMembers.length !== 1 ? 's' : '' }}
                 </v-btn>
             </v-col>
-
-            <v-col class="px-0 mx-2 mt-2">
+            <v-col class="pa-0">
                 <v-text-field
                     v-model="search"
                     label="Search"
@@ -33,6 +28,7 @@
                     clearable
                     density="comfortable"
                     rounded="lg"
+                    class="mx-2 mt-2"
                 />
             </v-col>
         </v-row>
@@ -46,7 +42,6 @@
             :items-length="page.totalCount"
             :items-per-page-options="tableSizeOptions(page.totalCount)"
             no-data-text="No results found"
-            class="elevation-1"
             item-value="email"
             select-strategy="all"
             item-selectable="selectable"

diff --git a/web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue b/web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" rounded="xlg">
+    <v-card :border="true" rounded="xlg">
         <v-text-field
             v-model="search"
             label="Search"
@@ -26,7 +26,6 @@
             :search="search"
             :custom-key-sort="customSortFns"
             no-data-text="No results found"
-            class="elevation-1"
         >
             <template #item.timestamp="{ item }">
                 <p class="font-weight-bold">

diff --git 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="green" :model-value="progress" rounded height="6" />
+            <v-progress-linear color="default" :model-value="progress" rounded height="6" />
         </v-card-item>
         <v-card-item>
             <v-row>

diff --git a/web/satellite/vuetify-poc/src/components/billing/BillingHistoryTab.vue b/web/satellite/vuetify-poc/src/components/billing/BillingHistoryTab.vue
@@ -2,14 +2,13 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" rounded="xlg">
+    <v-card :border="true" rounded="xlg">
         <v-data-table
             :loading="isLoading"
             :headers="headers"
             :items="historyItems"
             :must-sort="false"
             no-data-text="No results found"
-            class="elevation-1"
             hover
         >
             <template #item.amount="{ item }">

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/AddTeamMemberDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/AddTeamMemberDialog.vue
@@ -14,7 +14,7 @@
         @update:model-value="v => model = v"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img class="d-block" src="@/../static/images/team/teamMembers.svg" alt="Team members">
                 </template>
@@ -40,7 +40,7 @@
             <v-form v-model="valid" class="pa-7 pb-4" @submit.prevent="onPrimaryClick">
                 <v-row>
                     <v-col v-if="needsUpgrade">
-                        Upgrade now to unlock collaboration and bring your team together in this project.
+                        <p class="mb-4">Upgrade now to unlock collaboration and bring your team together in this project.</p>
                     </v-col>
                     <template v-else>
                         <v-col cols="12">
@@ -87,7 +87,7 @@
                             :append-icon="needsUpgrade ? 'mdi-arrow-right' : undefined"
                             @click="onPrimaryClick"
                         >
-                            {{ needsUpgrade ? 'Upgrade' : 'Send Invite' }}
+                            {{ needsUpgrade ? 'Continue' : 'Send Invite' }}
                         </v-btn>
                     </v-col>
                 </v-row>

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/BrowserNewFolderDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/BrowserNewFolderDialog.vue
@@ -11,13 +11,22 @@
     >
         <v-card ref="innerContent" rounded="xlg">
             <v-sheet>
-                <v-card-item class="pl-7 py-4">
+                <v-card-item class="pa-5 pl-7">
                     <template #prepend>
-                        <v-card-title class="font-weight-bold">
-                            New Folder
-                        </v-card-title>
+                        <v-sheet
+                            class="border-sm d-flex justify-center align-center"
+                            width="40"
+                            height="40"
+                            rounded="lg"
+                        >
+                            <img src="@poc/assets/icon-folder.svg" alt="folder icon">
+                        </v-sheet>
                     </template>
 
+                    <v-card-title class="font-weight-bold">
+                        New Folder
+                    </v-card-title>
+
                     <template #append>
                         <v-btn
                             icon="$close"
@@ -33,7 +42,7 @@
 
             <v-divider />
 
-            <v-form v-model="formValid" class="pa-8 pb-3">
+            <v-form v-model="formValid" class="px-7 pt-9 pb-4">
                 <v-row>
                     <v-col
                         cols="12"
@@ -42,7 +51,8 @@
                             v-model="folder"
                             variant="outlined"
                             :rules="folderRules"
-                            label="Enter Folder Name"
+                            label="Folder Name"
+                            placeholder="Enter a folder name"
                             :hide-details="false"
                             required
                             autofocus

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue
@@ -10,9 +10,16 @@
         transition="fade-transition"
     >
         <v-card rounded="xlg">
-            <v-card-item class="py-4 pl-7">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
-                    <img class="d-block" src="@/../static/images/buckets/createBucket.svg" alt="bucket">
+                    <v-sheet
+                        class="border-sm d-flex justify-center align-center"
+                        width="40"
+                        height="40"
+                        rounded="lg"
+                    >
+                        <icon-bucket />
+                    </v-sheet>
                 </template>
 
                 <v-card-title class="font-weight-bold">
@@ -103,10 +110,11 @@ import {
     VRow,
     VCol,
     VBtn,
-    VForm,
-    VTextField,
+    VSheet,
 } from 'vuetify/components';
 
+import IconBucket from '../icons/IconBucket.vue';
+
 import { useLoading } from '@/composables/useLoading';
 import { Bucket } from '@/types/buckets';
 import { useBucketsStore } from '@/store/modules/bucketsStore';

diff --git 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 Name</v-card-title>
+                <v-card-title class="font-weight-bold">Edit Account Name</v-card-title>
                 <template #append>
                     <v-btn
                         icon="$close"
@@ -35,6 +35,7 @@
                             variant="outlined"
                             :rules="rules"
                             label="Full name"
+                            placeholder="Enter your name"
                             :hide-details="false"
                             required
                             autofocus

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/ChangePasswordDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/ChangePasswordDialog.vue
@@ -10,7 +10,7 @@
         transition="fade-transition"
     >
         <v-card rounded="xlg">
-            <v-card-item class="px-6 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img class="d-block" src="@poc/assets/icon-change-password.svg" alt="Change password">
                 </template>