web/satellite/vuetify-poc: ui ux improvements

This change improves the satellite v2 user interface and overall
experience.

Change-Id: I702a6aa6b0b1a676bb2c404ab54f0ecef3b1ad7a

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 />

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>

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

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,8 +84,8 @@
                             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>
@@ -94,7 +93,7 @@
                                 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>
@@ -102,8 +101,8 @@
                                 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>

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>

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>

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" />

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"

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">

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>

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 }">

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>

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

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';

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

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>

web/satellite/vuetify-poc/src/components/dialogs/CreateAccessDialog.vue

@@ -4,13 +4,14 @@
 <template>
     <v-dialog
         v-model="model"
-        width="400px"
+        min-width="320px"
+        max-width="420px"
         transition="fade-transition"
         scrollable
         :persistent="isCreating"
     >
         <v-card ref="innerContent" rounded="xlg">
-            <v-card-item class="pl-7 py-4 pos-relative">
+            <v-card-item class="pa-5 pl-7 pos-relative">
                 <template #prepend>
                     <img class="d-block" :src="STEP_ICON_AND_TITLE[step].icon">
                 </template>

web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue

@@ -11,7 +11,7 @@
     >
         <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">
                             <!-- <img src="../assets/icon-bucket-color.svg" alt="Bucket" width="40"> -->
@@ -33,21 +33,21 @@
 
             <v-divider />
 
-            <v-form v-model="formValid" class="pa-8 pb-3" @submit.prevent="onCreate">
-                <v-row class="ma-0">
-                    <p>Buckets are used to store and organize your files.</p>
-                    <v-col class="px-0 flex-1-1-100">
+            <v-form v-model="formValid" class="pa-7 pb-3" @submit.prevent="onCreate">
+                <v-row>
+                    <v-col>
+                        <p>Buckets are used to store and organize your files.</p>
                         <v-text-field
                             v-model="bucketName"
                             variant="outlined"
                             :rules="bucketNameRules"
-                            label="Enter bucket name"
-                            placeholder="demo-bucket"
-                            hint="Lowercase letters, numbers, hyphens (-), and periods (.)"
+                            label="Bucket name"
+                            placeholder="my-bucket"
+                            hint="Allowed characters [a-z] [0-9] [-.]"
                             :hide-details="false"
                             required
                             autofocus
-                            class="mt-8 mb-3"
+                            class="mt-7 mb-3"
                             minlength="3"
                             maxlength="63"
                         />

web/satellite/vuetify-poc/src/components/dialogs/CreateProjectDialog.vue

@@ -13,7 +13,7 @@
         @update:model-value="v => model = v"
     >
         <v-card ref="innerContent" rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img v-if="isProjectLimitReached && usersStore.state.user.paidTier && showLimitIncreaseDialog" class="d-block" src="@/../static/images/modals/limit.svg" alt="Speedometer">
                     <img v-else class="d-block" src="@/../static/images/common/blueBox.svg" alt="Box">

web/satellite/vuetify-poc/src/components/dialogs/DeleteAccessDialog.vue

@@ -9,10 +9,10 @@
         :persistent="isLoading"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <v-sheet
-                        class="bg-on-surface-variant d-flex justify-center align-center"
+                        class="border-sm d-flex justify-center align-center"
                         width="40"
                         height="40"
                         rounded="lg"

web/satellite/vuetify-poc/src/components/dialogs/DeleteBucketDialog.vue

@@ -9,10 +9,10 @@
         :persistent="isLoading"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <v-sheet
-                        class="bg-on-surface-variant d-flex justify-center align-center"
+                        class="border-sm d-flex justify-center align-center"
                         width="40"
                         height="40"
                         rounded="lg"

web/satellite/vuetify-poc/src/components/dialogs/DeleteFileDialog.vue

@@ -9,10 +9,10 @@
         :persistent="isLoading"
     >
         <v-card ref="innerContent" rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <v-sheet
-                        class="bg-on-surface-variant d-flex justify-center align-center"
+                        class="border-sm d-flex justify-center align-center"
                         width="40"
                         height="40"
                         rounded="lg"

web/satellite/vuetify-poc/src/components/dialogs/DisableMFADialog.vue

@@ -10,7 +10,7 @@
         transition="fade-transition"
     >
         <v-card ref="innerContent" 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="@poc/assets/icon-mfa.svg" alt="MFA">
                 </template>
@@ -26,11 +26,11 @@
                     />
                 </template>
             </v-card-item>
-            <v-divider class="mx-8" />
+            <v-divider />
             <v-card-item class="px-8 py-4">
                 <p>Enter the authentication code generated in your two-factor application to disable 2FA.</p>
             </v-card-item>
-            <v-divider class="mx-8" />
+            <v-divider />
             <v-card-item class="px-8 pt-4 pb-0">
                 <v-form v-model="formValid" class="pt-2" @submit.prevent="disable">
                     <v-text-field
@@ -52,7 +52,7 @@
                     {{ useRecoveryCode ? "or use 2FA code" : "or use a recovery code" }}
                 </a>
             </v-card-item>
-            <v-divider class="mx-8 my-4" />
+            <v-divider class="my-4" />
             <v-card-actions dense class="px-7 pb-5 pt-0">
                 <v-col class="pl-0">
                     <v-btn

web/satellite/vuetify-poc/src/components/dialogs/EditProjectDetailsDialog.vue

@@ -9,7 +9,7 @@
         :persistent="isLoading"
     >
         <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/modals/boxesIcon.svg" alt="Boxes">
                 </template>

web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue

@@ -9,7 +9,7 @@
         :persistent="isLoading"
     >
         <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/modals/limit.svg" alt="Speedometer">
                 </template>

web/satellite/vuetify-poc/src/components/dialogs/EnableMFADialog.vue

@@ -10,7 +10,7 @@
         transition="fade-transition"
     >
         <v-card ref="innerContent" 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="@poc/assets/icon-mfa.svg" alt="MFA">
                 </template>
@@ -26,42 +26,37 @@
                     />
                 </template>
             </v-card-item>
-            <v-divider class="mx-8" />
+            <v-divider />
             <v-window v-model="step" :class="{ 'overflow-y-auto': step === 0 }">
                 <!-- QR code step -->
                 <v-window-item :value="0">
-                    <v-card-item class="px-8 py-4">
+                    <v-card-item class="pa-7">
                         <p>Scan this QR code in your two-factor application.</p>
                     </v-card-item>
-                    <v-card-item align="center" justify="center" class="rounded-lg border mx-8 py-4">
+                    <v-card-item align="center" justify="center" class="rounded-lg border mx-7">
                         <v-col cols="auto">
                             <canvas ref="canvas" />
                         </v-col>
                     </v-card-item>
-                    <v-divider class="mx-8 my-4" />
-                    <v-card-item class="px-8 py-4 pt-0">
+                    <v-card-item class="pa-7">
                         <p>Unable to scan? Enter the following code instead.</p>
                     </v-card-item>
-                    <v-card-item class="rounded-lg border mx-8 pa-0">
-                        <v-col class="py-2 px-3" cols="auto">
-                            <p class="font-weight-bold"> {{ userMFASecret }}</p>
+                    <v-card-item class="rounded-lg border mx-7 mb-7 py-2">
+                        <v-col>
+                            <p class="font-weight-medium text-body-2 text-center"> {{ userMFASecret }}</p>
                         </v-col>
                     </v-card-item>
                 </v-window-item>
 
                 <!-- Enter code step -->
                 <v-window-item :value="1">
-                    <v-card-item class="px-8 py-4">
+                    <v-card-item class="pa-7">
                         <p>Enter the authentication code generated in your two-factor application to confirm your setup.</p>
-                    </v-card-item>
-                    <v-divider class="mx-8" />
-                    <v-card-item class="px-8 pt-4 pb-0">
-                        <v-form v-model="formValid" class="pt-2" @submit.prevent>
+                        <v-form v-model="formValid" class="pt-7" @submit.prevent>
                             <v-text-field
                                 v-model="confirmPasscode"
                                 variant="outlined"
-                                density="compact"
-                                hint="e.g.: 000000"
+                                hint="Example: 123456"
                                 :rules="rules"
                                 :error-messages="isError ? 'Invalid code. Please re-enter.' : ''"
                                 label="2FA Code"
@@ -75,11 +70,11 @@
 
                 <!-- Save codes step -->
                 <v-window-item :value="2">
-                    <v-card-item class="px-8 py-4">
+                    <v-card-item class="px-7 py-4">
                         <p>Please save these codes somewhere to be able to recover access to your account.</p>
                     </v-card-item>
-                    <v-divider class="mx-8" />
-                    <v-card-item class="px-8 py-4">
+                    <v-divider />
+                    <v-card-item class="px-7 py-4">
                         <p
                             v-for="(code, index) in userMFARecoveryCodes"
                             :key="index"
@@ -89,53 +84,55 @@
                     </v-card-item>
                 </v-window-item>
             </v-window>
-            <v-divider class="mx-8 my-4" />
-            <v-card-actions dense class="px-7 pb-5 pt-0">
-                <v-col v-if="step !== 2" class="pl-0">
-                    <v-btn
-                        variant="outlined"
-                        color="default"
-                        block
-                        :disabled="isLoading"
-                        :loading="isLoading"
-                        @click="model = false"
-                    >
-                        Cancel
-                    </v-btn>
-                </v-col>
-                <v-col class="px-0">
-                    <v-btn
-                        v-if="step === 0"
-                        color="primary"
-                        variant="flat"
-                        block
-                        :loading="isLoading"
-                        @click="step++"
-                    >
-                        Continue
-                    </v-btn>
-                    <v-btn
-                        v-else-if="step === 1"
-                        color="primary"
-                        variant="flat"
-                        block
-                        :loading="isLoading"
-                        :disabled="!formValid"
-                        @click="enable"
-                    >
-                        Enable
-                    </v-btn>
+            <v-divider />
+            <v-card-actions class="pa-7">
+                <v-row>
+                    <v-col v-if="step !== 2">
+                        <v-btn
+                            variant="outlined"
+                            color="default"
+                            block
+                            :disabled="isLoading"
+                            :loading="isLoading"
+                            @click="model = false"
+                        >
+                            Cancel
+                        </v-btn>
+                    </v-col>
+                    <v-col>
+                        <v-btn
+                            v-if="step === 0"
+                            color="primary"
+                            variant="flat"
+                            block
+                            :loading="isLoading"
+                            @click="step++"
+                        >
+                            Continue
+                        </v-btn>
+                        <v-btn
+                            v-else-if="step === 1"
+                            color="primary"
+                            variant="flat"
+                            block
+                            :loading="isLoading"
+                            :disabled="!formValid"
+                            @click="enable"
+                        >
+                            Confirm
+                        </v-btn>
 
-                    <v-btn
-                        v-else
-                        color="primary"
-                        variant="flat"
-                        block
-                        @click="model = false"
-                    >
-                        Done
-                    </v-btn>
-                </v-col>
+                        <v-btn
+                            v-else
+                            color="primary"
+                            variant="flat"
+                            block
+                            @click="model = false"
+                        >
+                            Done
+                        </v-btn>
+                    </v-col>
+                </v-row>
             </v-card-actions>
         </v-card>
     </v-dialog>
@@ -153,6 +150,7 @@ import {
     VDialog,
     VDivider,
     VForm,
+    VRow,
     VTextField,
     VWindow,
     VWindowItem,

web/satellite/vuetify-poc/src/components/dialogs/EnterBucketPassphraseDialog.vue

@@ -8,7 +8,7 @@
         transition="fade-transition"
     >
         <v-card ref="innerContent" 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/accessGrants/newCreateFlow/accessEncryption.svg">
                 </template>
@@ -31,13 +31,12 @@
 
             <v-divider />
 
-            <v-card-item class="py-4">
-                <v-form v-model="formValid">
+            <v-card-item class="pa-7 pb-3">
+                <v-form v-model="formValid" @submit.prevent="onContinue">
                     <v-row>
                         <v-col cols="12">
                             <p>
-                                Enter your encryption passphrase to view and manage your data in the browser.
-                                This passphrase will be used to unlock all buckets in this project.
+                                Enter your encryption passphrase to view and manage the data in this project.
                             </p>
                         </v-col>
 
@@ -46,11 +45,12 @@
                                 v-model="passphrase"
                                 :base-color="isWarningState ? 'warning' : ''"
                                 label="Encryption Passphrase"
-                                :append-inner-icon="isPassphraseVisible ? 'mdi-eye-off' : 'mdi-eye'"
+                                :append-inner-icon="isPassphraseVisible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
                                 :type="isPassphraseVisible ? 'text' : 'password'"
                                 variant="outlined"
                                 :hide-details="false"
                                 :rules="[ RequiredRule ]"
+                                autofocus
                                 @click:append-inner="isPassphraseVisible = !isPassphraseVisible"
                             />
                         </v-col>
@@ -68,7 +68,7 @@
 
             <v-divider />
 
-            <v-card-actions>
+            <v-card-actions class="pa-4">
                 <v-col>
                     <v-btn
                         variant="outlined"

web/satellite/vuetify-poc/src/components/dialogs/GeographicDistributionDialog.vue

@@ -8,10 +8,11 @@
         transition="fade-transition"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <v-sheet
-                        class="bg-on-surface-variant d-flex justify-center align-center"
+                        class="border-sm d-flex justify-center align-center"
+                        variant="tonal"
                         width="40"
                         height="40"
                         rounded="lg"
@@ -51,6 +52,16 @@
 
             <v-card-actions class="pa-7">
                 <v-row>
+                    <v-col>
+                        <v-btn
+                            variant="outlined"
+                            color="default"
+                            block
+                            @click="model = false"
+                        >
+                            Close
+                        </v-btn>
+                    </v-col>
                     <v-col>
                         <v-btn
                             variant="outlined"
@@ -60,15 +71,11 @@
                             href="https://docs.storj.io/learn#what-happens-when-you-upload"
                             target="_blank"
                             rel="noopener noreferrer"
+                            append-icon="mdi-open-in-new"
                         >
                             Learn more
                         </v-btn>
                     </v-col>
-                    <v-col>
-                        <v-btn variant="flat" block @click="model = false">
-                            Close
-                        </v-btn>
-                    </v-col>
                 </v-row>
             </v-card-actions>
         </v-card>

web/satellite/vuetify-poc/src/components/dialogs/InactivityDialog.vue

@@ -8,7 +8,7 @@
         transition="fade-transition"
     >
         <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="@poc/assets/icon-session-timeout.svg" alt="Session expiring">
                 </template>

web/satellite/vuetify-poc/src/components/dialogs/JoinProjectDialog.vue

@@ -9,7 +9,7 @@
         transition="fade-transition"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 pa-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <v-card-title class="font-weight-bold">Join Project</v-card-title>
                 </template>

web/satellite/vuetify-poc/src/components/dialogs/MFACodesDialog.vue

@@ -10,7 +10,7 @@
         transition="fade-transition"
     >
         <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="@poc/assets/icon-mfa.svg" alt="MFA">
                 </template>
@@ -25,13 +25,13 @@
                     />
                 </template>
             </v-card-item>
-            <v-divider class="mx-8" />
+            <v-divider />
 
             <template v-if="isConfirmCode">
                 <v-card-item class="px-8 py-4">
                     <p>Enter the authentication code generated in your two-factor application to regenerate recovery codes.</p>
                 </v-card-item>
-                <v-divider class="mx-8" />
+                <v-divider />
                 <v-card-item class="px-8 pt-4 pb-0">
                     <v-form v-model="formValid" class="pt-2" @submit.prevent="regenerate">
                         <v-text-field
@@ -54,13 +54,13 @@
                     </a>
                 </v-card-item>
 
-                <v-divider class="mx-8 my-4" />
+                <v-divider class="my-4" />
             </template>
             <template v-else>
                 <v-card-item class="px-8 py-4">
                     <p>Please save these codes somewhere to be able to recover access to your account.</p>
                 </v-card-item>
-                <v-divider class="mx-8" />
+                <v-divider />
                 <v-card-item class="px-8 py-4">
                     <p
                         v-for="(code, index) in userMFARecoveryCodes"
@@ -69,7 +69,7 @@
                         {{ code }}
                     </p>
                 </v-card-item>
-                <v-divider class="mx-8 mb-4" />
+                <v-divider class="mb-4" />
             </template>
 
             <v-card-actions dense class="px-7 pb-5 pt-0">

web/satellite/vuetify-poc/src/components/dialogs/ManagePassphraseDialog.vue

@@ -4,7 +4,7 @@
 <template>
     <v-dialog v-model="model" max-width="420" transition="fade-transition">
         <v-card ref="innerContent" 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="stepInfo[step].ref.value?.iconSrc || LockIcon">
                 </template>

web/satellite/vuetify-poc/src/components/dialogs/RemoveProjectMemberDialog.vue

@@ -9,10 +9,10 @@
         :persistent="isLoading"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <v-sheet
-                        class="bg-on-surface-variant d-flex justify-center align-center"
+                        class="border-sm d-flex justify-center align-center"
                         width="40"
                         height="40"
                         rounded="lg"

web/satellite/vuetify-poc/src/components/dialogs/SessionExpiredDialog.vue

@@ -9,7 +9,7 @@
         persistent
     >
         <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="@poc/assets/icon-session-timeout.svg" alt="Session expired">
                 </template>

web/satellite/vuetify-poc/src/components/dialogs/SetSessionTimeoutDialog.vue

@@ -28,7 +28,7 @@
             </v-card-item>
             <v-divider />
             <v-card-item class="px-6 pt-6 pb-3">
-                <p>Select your session timeout duration.</p>
+                <p>Select your account session timeout duration.</p>
             </v-card-item>
             <v-card-item class="px-6 pb-7">
                 <v-select

web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue

@@ -9,10 +9,10 @@
         :persistent="isLoading"
     >
         <v-card ref="innerContent" rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <v-sheet
-                        class="bg-on-surface-variant d-flex justify-center align-center"
+                        class="border-sm d-flex justify-center align-center"
                         width="40"
                         height="40"
                         rounded="lg"
@@ -40,37 +40,35 @@
             <div class="pa-7 share-dialog__content" :class="{ 'share-dialog__content--loading': isLoading }">
                 <v-row>
                     <v-col cols="12">
-                        <v-alert class="mt-3" density="compact" type="warning">
+                        <v-alert type="info">
                             Sharing a {{ shareText.toLowerCase() }} will create a publicly shareable URL.
                             Anyone with this link will be able to access your shared {{ shareText.toLowerCase() }}.
                         </v-alert>
                     </v-col>
                     <v-col cols="12">
                         <p class="text-subtitle-2 font-weight-bold mb-4">Share via</p>
-                        <div class="ma-n2">
+                        <v-chip-group class="ma-n2">
                             <v-chip
                                 v-for="opt in ShareOptions"
                                 :key="opt"
                                 :color="SHARE_BUTTON_CONFIGS[opt].color"
                                 :href="SHARE_BUTTON_CONFIGS[opt].getLink(link)"
                                 link
-                                class="ma-2"
+                                class="ma-2 font-weight-medium"
                             >
                                 <component
                                     :is="SHARE_BUTTON_CONFIGS[opt].icon"
                                     class="share-dialog__content__icon"
-                                    size="21"
+                                    size="16"
                                 />
                                 {{ opt }}
                             </v-chip>
-                        </div>
+                        </v-chip-group>
                     </v-col>
 
-                    <v-divider class="my-2" />
-
                     <v-col cols="12">
                         <p class="text-subtitle-2 font-weight-bold mb-2">Copy link</p>
-                        <v-textarea :model-value="link" variant="solo-filled" rows="1" auto-grow no-resize flat readonly>
+                        <v-textarea :model-value="link" variant="solo-filled" rounded="lg" hide-details="auto" rows="1" auto-grow no-resize flat readonly class="text-body-2">
                             <template #append-inner>
                                 <input-copy-button :value="link" />
                             </template>
@@ -122,6 +120,7 @@ import {
     VChip,
     VTextarea,
     VAlert,
+    VChipGroup,
 } from 'vuetify/components';
 
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';

web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue

@@ -12,22 +12,23 @@
                 <v-text-field
                     v-model="passphrase"
                     label="Encryption Passphrase"
-                    :append-inner-icon="isPassphraseVisible ? 'mdi-eye-off' : 'mdi-eye'"
+                    :append-inner-icon="isPassphraseVisible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
                     :type="isPassphraseVisible ? 'text' : 'password'"
                     variant="outlined"
                     :hide-details="false"
                     :rules="[ RequiredRule ]"
+                    autofocus
+                    class="mt-2 mb-n4"
                     @click:append-inner="isPassphraseVisible = !isPassphraseVisible"
                 />
-            </v-col>
-
-            <v-col v-if="ackRequired" cols="12">
                 <v-checkbox
+                    v-if="ackRequired"
                     density="compact"
                     color="primary"
-                    label="Yes, I saved my encryption passphrase."
+                    label="I saved my encryption passphrase."
                     :hide-details="false"
                     :rules="[ RequiredRule ]"
+                    class="mt-4 mb-n7"
                 />
             </v-col>
         </v-row>

web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/PassphraseGeneratedStep.vue

@@ -2,30 +2,26 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-form ref="form" class="pa-8">
+    <v-form ref="form" class="pa-7">
         <v-row>
             <v-col v-if="$slots.default" cols="12">
                 <slot />
             </v-col>
             <save-buttons :name="name" :items="[ passphrase ]" type="passphrase" />
-            <v-divider class="my-3" />
-
             <v-col cols="12">
                 <text-output-area
                     label="Encryption Passphrase"
                     :value="passphrase"
-                    center-text
                     :tooltip-disabled="isTooltipDisabled"
                     show-copy
                 />
-            </v-col>
-            <v-col cols="12">
                 <v-checkbox
                     density="compact"
                     color="primary"
-                    label="Yes, I saved my encryption passphrase."
+                    label="I saved my encryption passphrase."
                     :hide-details="false"
                     :rules="[ RequiredRule ]"
+                    class="mt-4 mb-n7"
                 />
             </v-col>
         </v-row>

web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/SaveButtons.vue

@@ -5,7 +5,6 @@
     <v-col cols="6">
         <v-btn
             variant="outlined"
-            size="small"
             block
             :color="justCopied ? 'success' : 'default'"
             :prepend-icon="justCopied ? 'mdi-check' : 'mdi-content-copy'"
@@ -17,7 +16,6 @@
     <v-col cols="6">
         <v-btn
             variant="outlined"
-            size="small"
             block
             :color="justDownloaded ? 'success' : 'default'"
             :prepend-icon="justDownloaded ? 'mdi-check' : 'mdi-tray-arrow-down'"

web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/AccessCreatedStep.vue

@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="pa-8">
+    <div class="pa-7">
         <v-row>
             <v-col cols="12">
                 Copy or save the Access Grant as it will only appear once.

web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/AccessEncryptionStep.vue

@@ -2,36 +2,36 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-form ref="form" class="pa-8 pb-4">
+    <v-form ref="form" class="pa-7 pb-4">
         <v-row>
             <v-col cols="12">
-                <p class="text-subtitle-2 font-weight-bold mb-2">Encryption Passphrase</p>
+                <!-- <p class="text-subtitle-2 font-weight-bold mb-2">Encryption Passphrase</p> -->
                 <v-radio-group v-model="passphraseOption" hide-details="auto">
                     <template v-if="isPromptForPassphrase">
-                        <v-radio v-if="isPromptForPassphrase" label="Enter your project passphrase" :value="PassphraseOption.SetMyProjectPassphrase">
+                        <v-radio v-if="isPromptForPassphrase" label="Enter your project passphrase" :value="PassphraseOption.SetMyProjectPassphrase" density="compact">
                             <template #label>
                                 Enter my project passphrase
                                 <info-tooltip>
-                                    You will enter your encryption passphrase on the next step.
-                                    Make sure it's the same one you use for this project.
-                                    This will allow you to manage existing data you have uploaded with the same passphrase.
+                                    Make sure it's the same passphrase you use for this project.
+                                    This will allow you to manage existing data you have uploaded.
                                 </info-tooltip>
                             </template>
                         </v-radio>
                         <v-text-field
                             v-model="passphrase"
-                            class="mt-3"
+                            class="mt-6"
                             variant="outlined"
-                            label="Enter Encryption Passphrase"
-                            :append-inner-icon="isPassphraseVisible ? 'mdi-eye-off' : 'mdi-eye'"
+                            label="Encryption Passphrase"
+                            :append-inner-icon="isPassphraseVisible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
                             :type="isPassphraseVisible ? 'text' : 'password'"
                             :rules="passphraseRules"
                             :hide-details="false"
+                            autofocus
                             @click:append-inner="isPassphraseVisible = !isPassphraseVisible"
                         />
-                        <v-divider class="my-4" />
+                        <!-- <v-divider class="my-4" /> -->
                     </template>
-                    <v-radio v-else :value="PassphraseOption.UseExistingPassphrase">
+                    <v-radio v-else :value="PassphraseOption.UseExistingPassphrase" density="compact" class="pb-4">
                         <template #label>
                             Use the current passphrase
                             <info-tooltip>
@@ -41,14 +41,14 @@
                         </template>
                     </v-radio>
                     <v-btn
-                        class="align-self-start"
-                        variant="text"
+                        class="align-self-start mt-2 mb-4"
+                        variant="outlined"
                         color="default"
                         :append-icon="areAdvancedOptionsShown ? '$collapse' : '$expand'"
                         :disabled="isAdvancedOptionSelected"
                         @click="areAdvancedOptionsShown = !areAdvancedOptionsShown"
                     >
-                        Advanced
+                        Advanced Options
                     </v-btn>
                     <v-expand-transition>
                         <div v-show="areAdvancedOptionsShown">
@@ -76,7 +76,7 @@
             </v-col>
             <v-expand-transition>
                 <v-col v-show="areAdvancedOptionsShown" cols="12">
-                    <v-alert class="mb-4" type="warning" variant="tonal" rounded="xlg">
+                    <v-alert class="mb-4" type="info" variant="tonal" rounded="xlg">
                         Creating a new passphrase for this access will prevent it from accessing any data
                         that has been uploaded with the current passphrase.
                     </v-alert>

web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CLIAccessCreatedStep.vue

@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="pa-8">
+    <div class="pa-7">
         <v-row>
             <v-col cols="12">
                 Copy or save the satellite address and API key as they will only appear once.

web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/ChoosePermissionsStep.vue

@@ -2,13 +2,15 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-form ref="form" class="pa-8">
+    <v-form ref="form" class="pa-7">
         <v-row>
             <v-col cols="12">
+                <p class="text-subtitle-2 font-weight-bold mb-5">Select the permissions for this access</p>
+
                 <v-select
                     v-model="permissions"
                     :items="allPermissions"
-                    label="Permissions"
+                    label="Access Permissions"
                     variant="outlined"
                     color="default"
                     multiple
@@ -20,15 +22,14 @@
                     <template #prepend-item>
                         <v-list-item
                             title="All permissions"
-                            color="primary"
                             :active="areAllPermsSelected"
+                            density="compact"
                             @click="toggleSelectedPerms"
                         >
                             <template #prepend>
                                 <v-checkbox-btn
                                     v-model="areAllPermsSelected"
                                     :indeterminate="permissions.length != 0 && !areAllPermsSelected"
-                                    color="primary"
                                 />
                             </template>
                         </v-list-item>
@@ -36,22 +37,52 @@
                     </template>
 
                     <template #item="{ props: slotProps }">
-                        <v-list-item v-bind="slotProps" color="primary">
+                        <v-list-item v-bind="slotProps" density="compact">
                             <template #prepend="{ isSelected }">
-                                <v-checkbox-btn :model-value="isSelected" color="primary" />
+                                <v-checkbox-btn :model-value="isSelected" />
                             </template>
                         </v-list-item>
                     </template>
                 </v-select>
+
+                <!-- <v-chip-group
+                    v-model="permissions"
+                    column
+                    multiple
+                    class="mb-3"
+                >
+                    <v-chip
+                        rounded="xl"
+                        class="text-body-2"
+                        filter
+                        variant="outlined"
+                        value="All"
+                    >
+                        All
+                    </v-chip>
+                    <v-chip
+                        v-for="perm in allPermissions"
+                        :key="perm"
+                        :value="perm"
+                        rounded="xl"
+                        class="text-body-2"
+                        filter
+                        variant="outlined"
+                    >
+                        {{ perm }}
+                    </v-chip>
+                </v-chip-group> -->
             </v-col>
 
             <v-col cols="12">
+                <p class="text-subtitle-2 font-weight-bold mb-5">Choose buckets to give access to</p>
+
                 <v-autocomplete
                     v-model="buckets"
                     v-model:search="bucketSearch"
                     class="choose-permissions-step__buckets-field"
                     :items="allBucketNames"
-                    label="Buckets"
+                    label="Access Buckets"
                     variant="outlined"
                     color="default"
                     no-data-text="No buckets found."
@@ -67,34 +98,53 @@
                     <template #prepend-item>
                         <v-list-item
                             title="All buckets"
-                            color="primary"
                             :active="isAllBucketsSelected"
+                            density="compact"
                             @click="isAllBucketsSelected = !isAllBucketsSelected"
                         >
                             <template #prepend>
-                                <v-checkbox-btn v-model="isAllBucketsSelected" color="primary" />
+                                <v-checkbox-btn v-model="isAllBucketsSelected" />
                             </template>
                         </v-list-item>
                         <v-divider />
                     </template>
 
                     <template #item="{ props: slotProps }">
-                        <v-list-item v-bind="slotProps" color="primary">
+                        <v-list-item v-bind="slotProps" density="compact">
                             <template #prepend="{ isSelected }">
-                                <v-checkbox-btn :model-value="isSelected" color="primary" />
+                                <v-checkbox-btn :model-value="isSelected" />
                             </template>
                         </v-list-item>
                     </template>
                 </v-autocomplete>
+
+                <!-- <v-chip-group
+                    v-model="buckets"
+                    column
+                    multiple
+                    class="mb-3"
+                >
+                    <v-chip
+                        class="text-body-2"
+                        rounded="xl"
+                        filter
+                        variant="outlined"
+                        value="All Buckets"
+                    >
+                        All Buckets
+                    </v-chip>
+                </v-chip-group> -->
             </v-col>
 
             <v-col cols="12">
+                <p class="text-subtitle-2 font-weight-bold mb-5">Choose when your access will expire</p>
+
                 <v-select
                     ref="endDateSelector"
                     v-model="endDate"
                     variant="outlined"
                     color="default"
-                    label="End date"
+                    label="Access Expiration Date"
                     return-object
                     :hide-details="false"
                     :items="endDateItems"
@@ -112,9 +162,24 @@
 
                     <template #item="{ item, props: itemProps }">
                         <v-divider v-if="(item.raw as AccessGrantEndDate).date === null" />
-                        <v-list-item v-bind="itemProps" />
+                        <v-list-item v-bind="itemProps" density="compact" />
                     </template>
                 </v-select>
+
+                <!-- <v-chip-group
+                    v-model="endDate"
+                    column
+                >
+                    <v-chip
+                        class="text-body-2"
+                        rounded="xl"
+                        filter
+                        variant="outlined"
+                        value="No end date"
+                    >
+                        No expiration
+                    </v-chip>
+                </v-chip-group> -->
             </v-col>
         </v-row>
 
@@ -167,7 +232,7 @@ const endDateItems: EndDateListItem[] = [
     { title: '1 month', date: getNowOffset(0, 1) },
     { title: '6 months', date: getNowOffset(0, 6) },
     { title: '1 year', date: getNowOffset(0, 0, 1) },
-    { title: 'No end date', date: null },
+    { title: 'No expiration', date: null },
 ];
 
 const emit = defineEmits<{

web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/ConfirmDetailsStep.vue

@@ -2,21 +2,19 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="pa-8">
+    <div class="pa-7">
         <v-row>
             <v-col cols="12">
-                Confirm that the access details are correct before creating.
-            </v-col>
-            <v-divider class="my-1" />
-            <v-col class="pa-1" cols="12">
-                <div
-                    v-for="item in items"
-                    :key="item.title"
-                    class="d-flex justify-space-between ma-2"
-                >
-                    <p class="flex-shrink-0 mr-4">{{ item.title }}</p>
-                    <p class="text-body-2 text-medium-emphasis text-right">{{ item.value }}</p>
-                </div>
+                <p>Confirm that the access details are correct before creating.</p>
+                <v-list lines="one">
+                    <v-list-item
+                        v-for="item in items"
+                        :key="item.title"
+                        :title="item.title"
+                        :subtitle="item.value"
+                        class="pl-0"
+                    />
+                </v-list>
             </v-col>
         </v-row>
     </div>
@@ -24,7 +22,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { VRow, VCol, VDivider } from 'vuetify/components';
+import { VRow, VCol, VList, VListItem } from 'vuetify/components';
 
 import { Permission, AccessType } from '@/types/createAccessGrant';
 import { AccessGrantEndDate } from '@poc/types/createAccessGrant';

web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue

@@ -2,38 +2,36 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-form ref="form" class="pa-8" @submit.prevent>
+    <v-form ref="form" class="pa-7 pb-4" @submit.prevent>
         <v-row>
             <v-col cols="12">
+                <p class="text-subtitle-2 font-weight-bold mb-5">Enter Access Name</p>
                 <v-text-field
                     v-model="name"
                     label="Access Name"
-                    placeholder="Enter name for this access"
                     variant="outlined"
-                    color="default"
                     autofocus
                     :hide-details="false"
                     :rules="nameRules"
+                    class="mb-n2"
                 />
             </v-col>
-
             <v-col cols="12">
-                <h4 class="mb-2">Type</h4>
-                <v-input v-model="types" :rules="[ RequiredRule ]" :hide-details="false">
+                <p class="text-subtitle-2 font-weight-bold mb-2">Select Access Type</p>
+                <v-input v-model="types" :rules="[ RequiredRule ]" :hide-details="false" class="mb-n2">
                     <div>
                         <v-checkbox
                             v-for="accessType in typeOrder"
                             :key="accessType"
                             v-model="typeInfos[accessType].model.value"
-                            color="primary"
                             density="compact"
                             :hide-details="true"
                         >
                             <template #label>
-                                <span class="ml-2">{{ typeInfos[accessType].name }}</span>
+                                <span>{{ typeInfos[accessType].name }}</span>
                                 <info-tooltip>
                                     {{ typeInfos[accessType].description }}
-                                    <a class="text-surface" :href="ACCESS_TYPE_LINKS[accessType]" target="_blank">
+                                    <a class="link" :href="ACCESS_TYPE_LINKS[accessType]" target="_blank">
                                         Learn more
                                     </a>
                                 </info-tooltip>

web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/EncryptionInfoStep.vue

@@ -13,7 +13,9 @@
             <v-checkbox
                 density="compact"
                 label="I understand, don't show this again."
-                hide-details
+                color="default"
+                :hide-details="false"
+                :rules="[ RequiredRule ]"
                 @update:model-value="value => LocalData.setServerSideEncryptionModalHidden(value)"
             />
         </v-col>

web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/S3CredentialsCreatedStep.vue

@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="pa-8">
+    <div class="pa-7">
         <v-row>
             <v-col cols="12">
                 Copy or save the S3 credentials as they will only appear once.
@@ -48,7 +48,7 @@ const saveItems = computed<SaveButtonsItem[]>(() => [
 ]);
 
 defineExpose({
-    title: 'Credentials Generated',
+    title: 'S3 Credentials Generated',
     onEnter: () => isTooltipDisabled.value = false,
     onExit: () => isTooltipDisabled.value = true,
 });

web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/TextOutputArea.vue

@@ -11,6 +11,7 @@
         variant="solo-filled"
         :label="label"
         :model-value="value"
+        rounded="xlg"
         rows="1"
         auto-grow
         no-resize
@@ -25,7 +26,6 @@
                         class="bg-background"
                         variant="outlined"
                         color="default"
-                        size="small"
                         prepend-icon="mdi-lock-outline"
                         @click="isBlurred = false"
                     >
@@ -73,10 +73,17 @@ const isBlurred = ref<boolean>(true);
 
     :deep(textarea) {
         font-family: monospace;
+        font-size: 14px;
+        margin-bottom: 8px;
+        margin-top: 8px;
     }
 
     :deep(.v-field__field), :deep(.v-field__append-inner) {
-        filter: blur(10px);
+        filter: blur(50px);
+    }
+
+    :deep(.v-field-label--floating) {
+        top: 10px !important;
     }
 
     &--unblur {

web/satellite/vuetify-poc/src/components/dialogs/managePassphraseSteps/EncryptionPassphraseStep.vue

@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="pa-8 pb-4">
+    <div class="pa-8">
         <v-row>
             <v-col cols="12">
                 The encryption passphrase will be used to encrypt the files you upload in this project.

web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddCreditCardStep.vue

@@ -2,13 +2,11 @@
 // See LICENSE for copying information.
 
 <template>
-    <p class="pb-4">
+    <p class="pt-2 pb-4">
         By saving your card information, you allow Storj to charge your card for future payments in accordance with
         the terms.
     </p>
 
-    <v-divider />
-
     <div class="py-4">
         <StripeCardElement
             ref="stripeCardInput"
@@ -23,7 +21,7 @@
                 <v-btn
                     block
                     variant="outlined"
-                    color="grey-lighten-1"
+                    color="default"
                     :disabled="loading"
                     @click="emit('back')"
                 >
@@ -44,7 +42,7 @@
                 </v-btn>
             </v-col>
         </v-row>
-        <p class="mt-1 text-caption text-center">Your information is secured with 128-bit SSL & AES-256 encryption.</p>
+        <p class="mt-1 text-caption text-center">Information is secured with 128-bit SSL & AES-256 encryption.</p>
     </div>
 </template>
 

web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/InfoBullet.vue

@@ -2,25 +2,39 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-row class="pa-0 flex-nowrap">
-        <v-col class="pa-2" cols="1">
-            <img v-if="!isPro" src="@/../static/images/modals/upgradeFlow/greyCheckmark.svg" alt="checkmark">
-            <img v-else src="@/../static/images/modals/upgradeFlow/greenCheckmark.svg" alt="checkmark">
-        </v-col>
-        <v-col class="pa-2" cols="11">
-            <p class="font-weight-bold">
+    <v-list>
+        <v-list-item>
+            <template #prepend>
+                <v-icon
+                    v-if="!isPro"
+                    color="default"
+                    icon="mdi-check-circle-outline"
+                    size="small"
+                    class="mr-3 text-disabled"
+                />
+                <v-icon
+                    v-else
+                    color="primary"
+                    icon="mdi-check-circle-outline"
+                    size="small"
+                    class="mr-3 opacity-100"
+                />
+            </template>
+            <v-list-item-title>
                 {{ title }}
                 <v-tooltip v-if="$slots.moreInfo" max-width="200px" location="top" activator="parent">
                     <slot name="moreInfo" />
                 </v-tooltip>
-            </p>
-            <p>{{ info }}</p>
-        </v-col>
-    </v-row>
+            </v-list-item-title>
+            <v-list-item-subtitle>
+                {{ info }}
+            </v-list-item-subtitle>
+        </v-list-item>
+    </v-list>
 </template>
 
 <script setup lang="ts">
-import { VCol, VRow, VTooltip } from 'vuetify/components';
+import { VList, VListItem, VListItemTitle, VListItemSubtitle, VIcon, VTooltip } from 'vuetify/components';
 
 const props = withDefaults(defineProps<{
     isPro?: boolean;

web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue

@@ -4,16 +4,15 @@
 <template>
     <v-dialog
         v-model="model"
-        width="auto"
         scrollable
         min-width="460px"
-        :max-width="step === UpgradeAccountStep.Info || step === UpgradeAccountStep.PricingPlanSelection ? '700px' : '460px'"
+        :max-width="step === UpgradeAccountStep.Info || step === UpgradeAccountStep.PricingPlanSelection ? '720px' : '460px'"
         transition="fade-transition"
         :persistent="loading"
         :scrim="scrim"
     >
         <v-card ref="content" rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template v-if="step === UpgradeAccountStep.Success" #prepend>
                     <img class="d-block" src="@/../static/images/modals/upgradeFlow/success.svg" alt="success">
                 </template>
@@ -29,7 +28,7 @@
                 </template>
             </v-card-item>
 
-            <v-divider class="mx-8" />
+            <v-divider />
 
             <v-card-item class="px-8 py-4">
                 <v-window v-model="step">
@@ -142,7 +141,7 @@ const model = computed<boolean>({
 
 const stepTitles = computed(() => {
     return {
-        [UpgradeAccountStep.Info]: 'Your account',
+        [UpgradeAccountStep.Info]: 'Upgrade',
         [UpgradeAccountStep.Options]: 'Upgrade to Pro',
         [UpgradeAccountStep.AddCC]: 'Add Credit Card',
         [UpgradeAccountStep.AddTokens]: 'Add tokens',

web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeInfoStep.vue

@@ -4,34 +4,34 @@
 <template>
     <v-row>
         <v-col v-if="!smAndDown" cols="6">
-            <h4 class="font-weight-bold mb-2">Free</h4>
+            <h4 class="font-weight-bold my-2">Free Account</h4>
             <v-btn
                 block
                 disabled
-                color="grey"
+                color="default"
             >
                 Current
             </v-btn>
-            <div class="border-sm rounded-lg pa-4 mt-3 mb-3">
+            <v-card class="my-4">
                 <InfoBullet title="Projects" :info="freeProjects" />
                 <InfoBullet title="Storage" :info="`${freeUsageValue(user.projectStorageLimit)} limit`" />
-                <InfoBullet title="Egress" :info="`${freeUsageValue(user.projectBandwidthLimit)} limit`" />
+                <InfoBullet title="Download" :info="`${freeUsageValue(user.projectBandwidthLimit)} limit`" />
                 <InfoBullet title="Segments" :info="`${user.projectSegmentLimit.toLocaleString()} segments limit`" />
                 <InfoBullet title="Link Sharing" info="Link sharing with Storj domain" />
-            </div>
+            </v-card>
         </v-col>
         <v-col :cols="smAndDown ? 12 : '6'">
-            <h4 class="font-weight-bold mb-2">Pro Account</h4>
+            <h4 class="font-weight-bold my-2">Pro Account</h4>
             <v-btn
                 class="mb-1"
                 block
-                color="success"
                 :loading="loading"
+                append-icon="mdi-arrow-right"
                 @click="emit('upgrade')"
             >
-                Upgrade to Pro
+                Upgrade
             </v-btn>
-            <div class="border-sm rounded-lg pa-4 mt-3 mb-3">
+            <v-card class="my-4">
                 <InfoBullet is-pro title="Projects" :info="projectsInfo" />
                 <InfoBullet is-pro :title="storagePrice" :info="storagePriceInfo" />
                 <InfoBullet is-pro :title="downloadPrice" :info="downloadInfo">
@@ -42,7 +42,7 @@
                 <InfoBullet is-pro title="Segments" :info="segmentInfo">
                     <template #moreInfo>
                         <a
-                            class="text-surface"
+                            class="link"
                             href="https://docs.storj.io/dcs/billing-payment-and-accounts-1/pricing/billing-and-payment"
                             target="_blank"
                             rel="noopener noreferrer"
@@ -52,14 +52,15 @@
                     </template>
                 </InfoBullet>
                 <InfoBullet is-pro title="Secure Custom Domains (HTTPS)" info="Link sharing with your domain" />
-            </div>
+                <InfoBullet is-pro title="Team" info="Share projects and collaborate" />
+            </v-card>
         </v-col>
     </v-row>
 </template>
 
 <script setup lang="ts">
 import { computed, onBeforeMount, ref } from 'vue';
-import { VBtn, VCol, VRow } from 'vuetify/components';
+import { VBtn, VCol, VRow, VCard } from 'vuetify/components';
 import { useDisplay } from 'vuetify';
 
 import { useUsersStore } from '@/store/modules/usersStore';
@@ -85,7 +86,7 @@ const storagePrice = ref<string>('Storage $0.004 GB / month');
 const storagePriceInfo = ref<string>('25 GB free included');
 const segmentInfo = ref<string>('$0.0000088 segment per month');
 const projectsInfo = ref<string>('3 projects + more on request');
-const downloadPrice = ref<string>('Egress $0.007 GB');
+const downloadPrice = ref<string>('Download $0.007 GB');
 const downloadInfo = ref<string>('25 GB free every month');
 const downloadMoreInfo = ref<string>('');
 

web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue

@@ -2,18 +2,16 @@
 // See LICENSE for copying information.
 
 <template>
-    <p class="pb-4">
+    <p class="pt-2 pb-4">
         Add a credit card to activate your Pro Account, or deposit more than $10 in STORJ tokens to upgrade
         and get 10% bonus on your STORJ tokens deposit.
     </p>
 
-    <v-divider />
-
     <v-row justify="center" class="mx-0 pb-5 pt-4">
         <v-col class="pl-0">
             <v-btn
                 variant="flat"
-                color="success"
+                color="primary"
                 block
                 :loading="loading"
                 @click="emit('addCard')"

web/satellite/vuetify-poc/src/layouts/default/AppBar.vue

@@ -3,7 +3,7 @@
 
 <template>
     <v-app-bar :elevation="0">
-        <v-progress-linear indeterminate absolute location="bottom" color="primary" :active="appStore.state.isNavigating" />
+        <v-progress-linear indeterminate absolute location="bottom" color="primary" :active="appStore.state.isNavigating" height="3" />
 
         <v-app-bar-nav-icon
             v-if="showNavDrawerButton"

web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue

@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-navigation-drawer v-model="model" class="py-1">
+    <v-navigation-drawer v-model="model">
         <v-sheet class="pa-2">
             <!-- Project -->
             <v-menu location="end" transition="scale-transition">
@@ -26,8 +26,8 @@
                                 <!-- <img src="@poc/assets/icon-project.svg" alt="Projects"> -->
                                 <IconProject />
                             </template>
-                            <v-list-item-title>
-                                <v-chip color="purple2" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
+                            <v-list-item-title class="ml-3">
+                                <v-chip color="secondary" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
                                     My Projects
                                 </v-chip>
                             </v-list-item-title>

web/satellite/vuetify-poc/src/plugins/vuetify.ts

@@ -39,14 +39,17 @@ export default createVuetify({
             transition: 'fade-transition',
         },
         VSelect: {
-            rounded: 'lg',
+            // rounded: 'lg',
+            variant: 'outlined',
+            color: 'secondary',
         },
         VTextField: {
             rounded: 'lg',
             variant: 'outlined',
+            color: 'secondary',
         },
         VList: {
-            rounded: 'xlg',
+            rounded: 'lg',
         },
         VListItem: {
             rounded: 'lg',
@@ -56,6 +59,22 @@ export default createVuetify({
         },
         VCard: {
             border: true,
+            rounded: 'xlg',
         },
+        VTable: {
+            class: 'elevation-0',
+        },
+        VCheckbox: {
+            color: 'primary',
+        },
+        VAlert: {
+            rounded: 'xlg',
+        },
+        VChip: {
+            rounded: 'lg',
+        },
+        // VTable: {
+        //     elevation: 0,
+        // },
     },
-});
+});

web/satellite/vuetify-poc/src/styles/styles.scss

@@ -7,17 +7,22 @@ html {
   overflow-y: auto !important;
 }
 
+body {
+  text-rendering: optimizeLegibility;
+  letter-spacing: -0.01em;
+}
+
 // Light Theme
 .v-theme--light {
   --v-border-color: 0, 0, 0;
-  --v-border-opacity: 0.1;
-  --v-theme-overlay-multiplier: 0.75;
-  --v-border-color: #e0e0e0;
+  --v-theme-overlay-multiplier: 0.75 !important;
+  --v-border-opacity: 0.07 !important;
 }
 
 // Dark Theme
 .v-theme--dark {
-  --v-theme-overlay-multiplier: 0.75;
+  --v-theme-overlay-multiplier: 0.75 !important;
+  --v-border-opacity: 0.07 !important;
 }
 
 // Nav
@@ -41,8 +46,17 @@ html {
 }
 
 // Button Shadow
-.v-btn--variant-outlined, .v-btn--elevated, .v-btn--variant-flat  {
-  box-shadow: rgba(50, 50, 93, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px !important;
+.v-btn--elevated,
+.v-btn--variant-flat {
+  box-shadow: rgba(31, 35, 40, 0.04) 0px 1px 0px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset;
+}
+.v-btn--variant-outlined {
+  box-shadow: rgba(31, 35, 40, 0.04) 0px 1px 0px 0px;
+}
+.v-btn--elevated:hover,
+.v-btn--variant-flat:hover,
+.v-btn--variant-outlined {
+  box-shadow: rgba(31, 35, 40, 0.04) 0px 1px 0px 0px;
 }
 
 // Button Outlines
@@ -62,10 +76,8 @@ html {
 }
 
 // Button focus style
-.v-btn:focus {
-  // box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(103, 146, 244) 0px 0px 0px 3px !important;
-  // box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, currentColor 0px 0px 0px 1px !important;
-  // outline: none !important;
+.v-btn:focus:active {
+  box-shadow: currentColor 0px 0px 0px 1px, currentColor 0px 0px 0px 1px !important;
 }
 
 // Button sizes
@@ -81,9 +93,15 @@ html {
 
 
 // Menu border
-.v-overlay__content .v-list {
+.v-menu > .v-overlay__content > .v-card, .v-menu > .v-overlay__content > .v-sheet, .v-menu > .v-overlay__content > .v-list {
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
-  // border-radius: 12px !important;
+  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 10px 10px !important;
+}
+.v-navigation-drawer--temporary {
+  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 10px 10px !important;
+}
+.v-navigation-drawer__scrim {
+  opacity: 0.3;
 }
 
 // Menu list item
@@ -93,14 +111,15 @@ html {
 
 // Card Light Theme
 .v-card.v-theme--light {
-  border: 1px solid #e0e0e0;
-  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 0px 0px;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+  box-shadow: rgba(88, 102, 126, 0.07) 0px 4px 20px;
 }
 
 // Card Dark Theme
 .v-card.v-theme--dark {
   background: --v-theme-surface;
-  box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 0px 0px;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
 }
 
 // Cards Padding
@@ -129,10 +148,15 @@ html {
 
 // Make the checkbox selection square instead of rounded
 .v-selection-control__input {
-  border-radius: 8px;
+  border-radius: 8px !important;
 }
 .v-selection-control__input::before {
-  border-radius: 8px;
+  border-radius: 8px !important;
+}
+
+// Label opacity
+.v-label {
+    opacity: 1 !important;
 }
 
 // Ensure that the compact checkbox isn't too close to its label
@@ -140,6 +164,7 @@ html {
   margin-left: 8px;
 }
 
+
 // Sorting icon
 .mdi-arrow-up::before, .mdi-arrow-down::before {
   font-size: 14px;
@@ -208,7 +233,6 @@ table {
 
 // Links
 .link {
-  color: rgb(var(--v-theme-primary));
   text-decoration: none;
   background-image: linear-gradient(currentColor,currentColor);
   background-size: 0 1px;
@@ -217,17 +241,29 @@ table {
   transition: background-size .15s ease;
 }
 .link:hover {
-  color: rgb(var(--v-theme-secondary));
   background-size: 100% 1px;
   cursor: pointer;
 }
+.v-theme--light .link {
+  color: rgb(var(--v-theme-primary));
+}
+.v-theme--light .link:hover {
+  color: rgb(var(--v-theme-secondary));
+}
+.v-theme--dark .link {
+  color: rgb(var(--v-theme-secondary));
+}
+.v-theme--dark .link:hover {
+  color: rgb(var(--v-theme-info));
+}
 
 
 // Tooltips
 .v-tooltip>.v-overlay__content {
-  background: rgba(var(--v-theme-on-surface),0.9) !important;
-  color: rgb(var(--v-theme-surface)) !important;
-  border: 1px solid rgba(var(--v-theme-surface),0.2);
+  background: rgba(var(--v-theme-surface),0.9) !important;
+  color: rgba(var(--v-theme-on-surface),0.9) !important;
+  border: 1px solid rgba(var(--v-theme-on-surface),0.2);
+  box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 10px 10px !important;
   font-weight: 500;
   border-radius: 20px !important;
   padding: 6px 14px;
@@ -263,7 +299,8 @@ table {
   letter-spacing: 0 !important;
 }
 .v-alert__prepend {
-  margin-top: 12px;
+  margin-top: 4px;
+  margin-inline-end: 12px;
 }
 .v-alert__append, .v-alert__close {
   margin-top: 4px;
@@ -271,6 +308,9 @@ table {
 .v-alert__close .v-btn {
   color: rgb(var(--v-theme-on-surface)) !important;
 }
+.v-alert__content {
+  font-size: 14px;
+}
 
 .bg-on-surface-variant {
   background-color: rgb(var(--v-theme-on-surface-variant)) !important;
@@ -287,7 +327,12 @@ table {
   max-height: 100%;
 }
 
-// text styles
+// Sizing
+.max-h-100 {
+  max-height: 100%;
+}
+
+// Text styles
 .text-cursor-pointer {
   cursor: pointer;
 }
@@ -302,3 +347,19 @@ table {
 [disabled=false] {
   cursor: unset;
 }
+
+.break-word {
+  word-break: break-word;
+}
+
+// Vuetify has a bug where any element with the attribute "disabled" forces the default cursor
+// even if the value of this attribute is "false".
+// This causes text in window items to appear to be unselectable.
+[disabled=false] {
+  cursor: unset;
+}
+
+// Opacity
+.opacity-100 {
+  opacity: 1 !important;
+}

web/satellite/vuetify-poc/src/types/projects.ts

@@ -27,7 +27,7 @@ export type ProjectItemRole = Exclude<ProjectRole, ProjectRole.InviteExpired>;
  */
 export const PROJECT_ROLE_COLORS: Record<ProjectRole, string> = {
     [ProjectRole.Member]: 'green',
-    [ProjectRole.Owner]: 'purple2',
+    [ProjectRole.Owner]: 'secondary',
     [ProjectRole.Invited]: 'warning',
     [ProjectRole.InviteExpired]: 'error',
 };

web/satellite/vuetify-poc/src/views/AccountSettings.vue

@@ -3,14 +3,16 @@
 
 <template>
     <v-container>
-        <!-- <v-breadcrumbs :items="['My Account', 'Settings']" class="pl-0"></v-breadcrumbs> -->
-
-        <h1 class="text-h5 font-weight-bold mb-2">Settings</h1>
+        <v-row>
+            <v-col>
+                <PageTitleComponent title="Account Settings" />
+            </v-col>
+        </v-row>
 
         <v-card
             variant="flat"
             :border="true"
-            class="mx-auto my-6"
+            class="mx-auto mt-2 my-6"
         >
             <v-list lines="three">
                 <v-list-subheader class="mb-2">Profile</v-list-subheader>
@@ -155,6 +157,8 @@ import {
     VListItemSubtitle,
     VListItemAction,
     VBtn,
+    VRow,
+    VCol,
 } from 'vuetify/components';
 
 import { User, UserSettings } from '@/types/users';
@@ -163,6 +167,7 @@ import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames
 import { useNotify } from '@/utils/hooks';
 import { Duration } from '@/utils/time';
 
+import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
 import ChangePasswordDialog from '@poc/components/dialogs/ChangePasswordDialog.vue';
 import ChangeNameDialog from '@poc/components/dialogs/ChangeNameDialog.vue';
 import EnableMFADialog from '@poc/components/dialogs/EnableMFADialog.vue';

web/satellite/vuetify-poc/src/views/Billing.vue

@@ -3,11 +3,13 @@
 
 <template>
     <v-container>
-        <!-- <v-breadcrumbs :items="['My Account', 'Billing']" class="pl-0"></v-breadcrumbs> -->
+        <v-row>
+            <v-col>
+                <PageTitleComponent title="Account Billing" />
+            </v-col>
+        </v-row>
 
-        <h1 class="text-h5 font-weight-bold mb-6">Billing</h1>
-
-        <v-card variant="flat" :border="true" color="default" class="mb-6 rounded">
+        <v-card variant="flat" :border="true" color="default" class="mt-2 mb-6 rounded">
             <v-tabs
                 v-model="tab"
                 color="default"
@@ -53,7 +55,6 @@
                                 </v-chip>
                                 <v-divider class="my-4" />
                                 <v-btn variant="outlined" color="default" size="small" class="mr-2">View Billing History</v-btn>
-                                <!-- <v-btn variant="tonal" color="default" size="small" class="mr-2">Payment Methods</v-btn> -->
                             </v-card-text>
                         </v-card>
                     </v-col>
@@ -71,7 +72,6 @@
                                 <v-btn variant="outlined" color="default" size="small" class="mr-2" prepend-icon="mdi-plus">
                                     Add STORJ Tokens
                                 </v-btn>
-                                <!-- <v-btn variant="tonal" color="default" size="small" class="mr-2">View Transactions</v-btn> -->
                             </v-card-text>
                         </v-card>
                     </v-col>
@@ -193,7 +193,6 @@
                     <v-col cols="12" sm="4">
                         <v-card title="Billing Information" subtitle="Add info for your invoices." variant="flat" :border="true" rounded="xlg">
                             <v-card-text>
-                                <!-- <v-chip rounded color="purple2" variant="tonal" class="font-weight-bold mb-2">$0</v-chip> -->
                                 <p>You can add personal or company info, billing email, and VAT.</p>
                                 <v-divider class="my-4" />
                                 <v-btn color="primary" size="small" prepend-icon="mdi-plus">Add Billing Information</v-btn>
@@ -237,6 +236,7 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
 import { useConfigStore } from '@/store/modules/configStore';
 import { Download } from '@/utils/download';
 
+import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
 import CreditCardComponent from '@poc/components/CreditCardComponent.vue';
 import AddCreditCardComponent from '@poc/components/AddCreditCardComponent.vue';
 import BillingHistoryTab from '@poc/components/billing/BillingHistoryTab.vue';

web/satellite/vuetify-poc/src/views/Bucket.vue

@@ -24,24 +24,24 @@
                             Upload
                         </v-btn>
                     </template>
-                    <v-list class="pa-2">
+                    <v-list class="pa-1">
                         <v-list-item rounded="lg" :disabled="!isInitialized" @click.stop="buttonFileUpload">
                             <template #prepend>
                                 <IconFile size="16" class="mr-2" />
                             </template>
-                            <v-list-item-title class="text-body-2 ml-3">
-                                Upload File
+                            <v-list-item-title class="text-body-2 ml-2">
+                                Upload Files
                             </v-list-item-title>
                         </v-list-item>
 
-                        <v-divider class="my-2" />
+                        <v-divider class="my-1" />
 
                         <v-list-item class="mt-1" rounded="lg" :disabled="!isInitialized" @click.stop="buttonFolderUpload">
                             <template #prepend>
                                 <icon-folder />
                             </template>
-                            <v-list-item-title class="text-body-2 ml-3">
-                                Upload Folder
+                            <v-list-item-title class="text-body-2 ml-2">
+                                Upload Folders
                             </v-list-item-title>
                         </v-list-item>
                     </v-list>

web/satellite/vuetify-poc/src/views/Projects.vue

@@ -19,7 +19,7 @@
                         <path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor" />
                     </svg>
                     <!-- <IconNew class="mr-2" width="12px"/> -->
-                    Create Project
+                    New Project
                 </v-btn>
             </v-col>
 

web/satellite/vuetify-poc/src/views/Team.vue

@@ -9,8 +9,8 @@
             link="https://docs.storj.io/support/users"
         />
 
-        <v-col class="pb-0">
-            <v-row class="mt-2 mb-0">
+        <v-col>
+            <v-row class="mt-2 mb-4">
                 <v-btn @click="isAddMemberDialogShown = true">
                     <svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor" />