web/satellite/vuetify-poc/: ui updates (#6640)

Mobile responsiveness improvements.
Update account settings to add account type and upgrade flow.
Update project settings and add info for deleting a project.
Updating icons.
Styling and theme updates.

web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue

@@ -30,7 +30,7 @@
                             v-bind="sortProps"
                             class="mr-2"
                         >
-                            <span class="text-body-2">Sort by</span> <span class="ml-1 text-capitalize">{{ sortKey }}</span>
+                            <span class="text-body-2 hidden-xs">Sort by</span> <span class="ml-1 text-capitalize">{{ sortKey }}</span>
                         </v-btn>
                     </template>
                     <v-list>

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

@@ -48,7 +48,6 @@
                             <v-alert
                                 variant="tonal"
                                 color="info"
-                                title="Important Information"
                                 text="All team members should use the same passphrase to access the same data."
                                 rounded="lg"
                                 density="comfortable"

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

@@ -10,14 +10,14 @@
                     color="default"
                     :icon="mdiCheckCircleOutline"
                     size="small"
-                    class="text-disabled pl-2 mr-n3"
+                    class="text-disabled mr-n4"
                 />
                 <v-icon
                     v-else
                     color="primary"
                     :icon="mdiCheckCircleOutline"
                     size="small"
-                    class="opacity-100 pl-2 mr-n3"
+                    class="opacity-100 mr-n4"
                 />
             </template>
             <v-list-item-title>

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

@@ -5,7 +5,7 @@
     <v-dialog
         v-model="model"
         scrollable
-        min-width="460px"
+        min-width="320px"
         :max-width="maxWidth"
         transition="fade-transition"
         :persistent="loading"

web/satellite/vuetify-poc/src/components/icons/IconCloud.vue

@@ -2,7 +2,15 @@
 // See LICENSE for copying information.
 
 <template>
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M9.59239 15.9991L9.67232 16L16.52 16C18.4421 16 20 14.4408 20 12.5178C20 10.6188 18.4795 9.07069 16.5843 9.03614L16.5274 9.03559L15.8124 9.03567L15.7945 8.81148C15.5589 5.87966 13.1046 3.61194 10.1572 3.61194C7.84008 3.61194 5.76525 5.02367 4.9068 7.1636L4.88085 7.22953L4.81866 7.39045L4.30194 7.39037C1.92589 7.39037 0 9.31785 0 11.6952C0 14.046 1.88475 15.9614 4.23105 15.9994L4.29527 16L9.54038 15.9998L9.59239 15.9991ZM9.4971 14.3582H4.30193L4.25102 14.3578C2.80758 14.3343 1.64179 13.1496 1.64179 11.6952C1.64179 10.2243 2.83293 9.03216 4.30193 9.03216L5.94531 9.03219L6.41068 7.82539L6.4326 7.76973C7.03996 6.25576 8.51265 5.25373 10.1572 5.25373C12.2484 5.25373 13.9909 6.86374 14.158 8.94298L14.2973 10.6773L16.5199 10.6773L16.5619 10.6778C17.5547 10.6959 18.3582 11.514 18.3582 12.5178C18.3582 13.5344 17.5351 14.3582 16.52 14.3582L9.68142 14.3582L9.60902 14.3572L9.5763 14.3572L9.4971 14.3582Z" fill="currentColor" />
     </svg>
 </template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    size: number | string;
+}>(), {
+    size: 20,
+});
+</script>

web/satellite/vuetify-poc/src/components/icons/IconFolder.vue

@@ -3,15 +3,17 @@
 
 <template>
     <!-- Folder Icon -->
-    <svg width="16" height="16" viewBox="0 0 14 14" fill="none" class="mr-2" xmlns="http://www.w3.org/2000/svg">
-        <path :fill="color" d="M5.51579 1.42995C5.64791 1.45467 5.76533 1.49571 5.88408 1.55868L5.92177 1.57924C6.02581 1.63776 6.12977 1.71218 6.37025 1.90894L8.02722 3.26464H10.4959C11.4707 3.26464 11.8242 3.36613 12.1805 3.55672C12.5369 3.74731 12.8166 4.02698 13.0071 4.38335L13.0276 4.42224C13.205 4.76624 13.2992 5.12863 13.2992 6.06796V9.71578C13.2992 10.8762 13.1784 11.297 12.9515 11.7213C12.7246 12.1455 12.3917 12.4785 11.9674 12.7054L11.925 12.7277L11.8831 12.749C11.4913 12.9442 11.061 13.0493 10.0184 13.0531H4.03651C2.87606 13.0531 2.45525 12.9322 2.03101 12.7054C1.60677 12.4785 1.27382 12.1455 1.04693 11.7213L1.0246 11.6788C0.815788 11.2752 0.703142 10.8524 0.699219 9.77319V3.81887C0.699219 3.23054 0.79403 2.84079 0.972671 2.50309C1.15131 2.16538 1.41378 1.89942 1.7491 1.71634C2.08442 1.53326 2.47289 1.43332 3.06116 1.42555L4.98843 1.40029L5.08663 1.3999C5.30902 1.40021 5.40783 1.40975 5.51579 1.42995ZM6.2012 5.5061C5.96768 5.68269 5.68514 5.78176 5.39314 5.79004L5.35327 5.79061H2.65841C2.36799 5.79061 2.09238 5.72723 1.84465 5.61354V9.76913L1.84581 9.91L1.84722 10.0035C1.85958 10.67 1.91799 10.9211 2.05701 11.1811C2.17714 11.4057 2.34658 11.5751 2.57121 11.6953L2.60382 11.7123L2.63876 11.7296C2.89018 11.8499 3.17013 11.8995 3.84943 11.9067L4.03651 11.9076L10.0578 11.9074C10.8683 11.9034 11.1446 11.8464 11.4272 11.6953C11.6519 11.5751 11.8213 11.4057 11.9414 11.1811L11.9585 11.1485L11.9757 11.1135C12.0961 10.8621 12.1457 10.5822 12.1528 9.90286L12.1538 9.71578V6.06796C12.1538 5.35216 12.1128 5.13991 11.9971 4.92354C11.9132 4.76679 11.7971 4.65063 11.6403 4.5668L11.6133 4.55272C11.4099 4.45002 11.1916 4.41176 10.54 4.41015L7.65046 4.41005L6.2012 5.5061ZM5.03525 2.54534L4.9324 2.54642L3.07627 2.57091L2.99301 2.57277C2.65746 2.58357 2.46155 2.63242 2.29802 2.72171C2.15997 2.79708 2.05873 2.89966 1.98519 3.03869C1.89614 3.20703 1.84979 3.40862 1.84507 3.75802C1.84775 3.77664 1.84942 3.79537 1.85017 3.81433L1.85063 3.83737C1.85063 4.27492 2.19851 4.63121 2.63277 4.64475L2.65841 4.64515H5.35327C5.40287 4.64515 5.45128 4.63099 5.49289 4.60455L5.51029 4.59247L6.7215 3.67643L5.58338 2.74533C5.44557 2.63356 5.39663 2.59821 5.35781 2.57632L5.34742 2.57064C5.33097 2.56192 5.32347 2.5593 5.30517 2.55587L5.28102 2.55202L5.26452 2.55013C5.22336 2.54607 5.16144 2.54445 5.03525 2.54534Z" />
+    <svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path :fill="color" d="M7.41528 1.5L7.47416 1.50022C7.74772 1.5021 7.90752 1.51534 8.08726 1.54897C8.31459 1.59149 8.5204 1.66343 8.72982 1.77453L8.7863 1.80539C8.94923 1.89702 9.10215 2.00659 9.3826 2.23375L11.5641 4.01833L14.7994 4.01839C15.9959 4.023 16.5892 4.13696 17.1909 4.45057L17.2293 4.47085C17.7963 4.7741 18.2443 5.22205 18.5492 5.79226L18.5785 5.84813C18.8702 6.41362 18.9854 6.98502 18.9988 8.07466L19 8.22651V13.3036C18.9951 14.7512 18.8568 15.444 18.4724 16.1629C18.1201 16.8216 17.6002 17.3415 16.9386 17.6953L16.875 17.7287L16.8151 17.7591C16.1749 18.0782 15.5026 18.2062 14.2384 18.2203L14.0773 18.2215H5.99905C4.55062 18.2215 3.8431 18.095 3.13841 17.7354L3.0586 17.6937C2.39991 17.3415 1.88002 16.8216 1.5262 16.16L1.49445 16.0996C1.1502 15.4342 1.01556 14.7633 1.00116 13.4595L1 13.2999V5.25889C1 4.42193 1.1328 3.80687 1.42641 3.25184C1.71281 2.71041 2.13655 2.28105 2.67415 1.98753C3.22526 1.68663 3.83851 1.54572 4.67544 1.53468L7.28265 1.50052L7.41528 1.5ZM9.14621 6.62625C8.90655 6.80284 8.61945 6.90263 8.32276 6.91317L8.27031 6.9141L1.98424 6.91396L1.98438 13.2982C1.98871 14.4884 2.08071 15.0462 2.32046 15.5502L2.33564 15.5816L2.36716 15.6442L2.39578 15.6986C2.65631 16.1858 3.03569 16.5652 3.52283 16.8257C4.09289 17.1306 4.64457 17.2371 5.99905 17.2371H14.0755C15.3047 17.2327 15.8648 17.1328 16.3727 16.8798L16.4229 16.8543L16.4773 16.8257C16.9644 16.5652 17.3438 16.1858 17.6043 15.6986C17.9092 15.1286 18.0157 14.5769 18.0157 13.2224V8.22839C18.0118 7.22984 17.9345 6.77393 17.7342 6.36017L17.7054 6.30266L17.6795 6.25331C17.468 5.85783 17.1605 5.5504 16.7651 5.3389C16.2992 5.08974 15.8481 5.00262 14.7222 5.00262L11.3497 5.00257L9.14621 6.62625ZM7.41761 2.48438L7.29103 2.48486L4.68838 2.51898C4.00304 2.52802 3.54608 2.63302 3.14588 2.85152C2.77781 3.05248 2.49263 3.34144 2.29655 3.71213C2.08334 4.11518 1.98438 4.57348 1.98438 5.25889L1.98424 5.92958L8.27031 5.92972C8.3637 5.92972 8.45492 5.90315 8.53344 5.85347L8.56227 5.83377L10.4911 4.41236L8.839 3.06056C8.59588 2.86164 8.46697 2.76383 8.36672 2.70071L8.35189 2.69149L8.30933 2.66647L8.26352 2.64144C8.14711 2.57971 8.03578 2.54079 7.90626 2.51657C7.80285 2.49722 7.70913 2.48815 7.53803 2.48535L7.41761 2.48438Z" />
     </svg>
 </template>
 
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
+    size: number | string;
     color: string;
 }>(), {
+    size: 16,
     color: 'currentColor',
 });
 </script>

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

@@ -6,7 +6,7 @@
         <v-sheet>
             <v-list class="px-2" color="default" variant="flat">
                 <template v-if="pathBeforeAccountPage">
-                    <navigation-item class="pa-4" title="Go back" :to="pathBeforeAccountPage">
+                    <navigation-item class="pa-4" title="Back" :to="pathBeforeAccountPage">
                         <template #prepend>
                             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path d="M1 10C1 5.02944 5.02944 0.999999 10 0.999999C14.9706 0.999999 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10ZM1.99213 10C1.99213 14.4226 5.57737 18.0079 10 18.0079C14.4226 18.0079 18.0079 14.4226 18.0079 10C18.0079 5.57737 14.4226 1.99213 10 1.99213C5.57737 1.99213 1.99213 5.57737 1.99213 10ZM5.48501 9.73986L5.50374 9.7201L9.01144 6.2124C9.20516 6.01868 9.51925 6.01868 9.71297 6.2124C9.90024 6.39967 9.90648 6.69941 9.7317 6.89418L9.71297 6.91394L7.05211 9.5748L14.4646 9.5748C14.7385 9.5748 14.9606 9.7969 14.9606 10.0709C14.9606 10.3357 14.7531 10.5521 14.4918 10.5662L14.4646 10.5669L7.05211 10.5669L9.71297 13.2278C9.90024 13.4151 9.90648 13.7148 9.7317 13.9096L9.71297 13.9293C9.52571 14.1166 9.22597 14.1228 9.0312 13.9481L9.01144 13.9293L5.50374 10.4216C5.31647 10.2344 5.31023 9.93463 5.48501 9.73986Z" fill="currentColor" />
@@ -18,19 +18,19 @@
                 </template>
 
                 <!-- All Projects -->
-                <navigation-item title="All Projects" to="/projects">
+                <navigation-item title="Projects" to="/projects">
                     <template #prepend>
                         <icon-all-projects />
                     </template>
                 </navigation-item>
 
-                <navigation-item title="Account Settings" to="settings">
+                <navigation-item title="Settings" to="settings">
                     <template #prepend>
                         <icon-settings />
                     </template>
                 </navigation-item>
 
-                <navigation-item v-if="billingEnabled" title="Account Billing" to="billing">
+                <navigation-item v-if="billingEnabled" title="Billing" to="billing">
                     <template #prepend>
                         <icon-card />
                     </template>

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

@@ -23,7 +23,6 @@
                     <template v-if="ownProjects.length">
                         <v-list-item router-link to="/projects" @click="() => registerLinkClick('/projects')">
                             <template #prepend>
-                                <!-- <img src="@poc/assets/icon-project.svg" alt="Projects"> -->
                                 <IconProject />
                             </template>
                             <v-list-item-title class="ml-3">
@@ -92,8 +91,6 @@
                         </v-list-item-title>
                     </v-list-item>
 
-                    <!-- <v-divider class="my-2"></v-divider> -->
-
                     <!-- View All Projects -->
                     <v-list-item router-link to="/projects" @click="() => registerLinkClick('/projects')">
                         <template #prepend>
@@ -130,32 +127,15 @@
 
             <v-divider class="my-2" />
 
-            <!--
-            <v-list-item
-                router-link
-                :to="`/projects/${selectedProject.urlId}/dashboard`"
-                class="my-1 py-3"
-                tabindex="0"
-                @click="() => registerLinkClick('/dashboard')"
-            >
-                <template #prepend>
-                    <IconDashboard />
-                </template>
-                <v-list-item-title class="ml-3">
-                    Overview
-                </v-list-item-title>
-            </v-list-item>
-            -->
-
-            <navigation-item title="Overview" :to="`/projects/${selectedProject.urlId}/dashboard`" @click="() => registerDashboardLinkClick('/projects/dashboard')">
+            <navigation-item title="Dashboard" :to="`/projects/${selectedProject.urlId}/dashboard`" @click="() => registerDashboardLinkClick('/projects/dashboard')">
                 <template #prepend>
                     <IconDashboard />
                 </template>
             </navigation-item>
 
-            <navigation-item title="Buckets" :to="`/projects/${selectedProject.urlId}/buckets`" @click="() => registerLinkClick('/projects/buckets')">
+            <navigation-item title="Browse" :to="`/projects/${selectedProject.urlId}/buckets`">
                 <template #prepend>
-                    <IconBucket />
+                    <IconFolder size="18" />
                 </template>
             </navigation-item>
 
@@ -246,14 +226,6 @@
 
             <v-divider class="my-2" />
 
-            <!-- <v-list-item link class="my-1" router-link to="/design-library" rounded="lg">
-                <template v-slot:prepend>
-                    <img src="@poc/assets/icon-bookmark.svg" alt="Design Library" class="mr-3">
-                </template>
-                <v-list-item-title class="text-body-2">
-                    Design Library
-                </v-list-item-title>
-            </v-list-item> -->
         </v-sheet>
     </v-navigation-drawer>
 
@@ -292,7 +264,6 @@ import IconAllProjects from '@poc/components/icons/IconAllProjects.vue';
 import IconNew from '@poc/components/icons/IconNew.vue';
 import IconPassphrase from '@poc/components/icons/IconPassphrase.vue';
 import IconDashboard from '@poc/components/icons/IconDashboard.vue';
-import IconBucket from '@poc/components/icons/IconBucket.vue';
 import IconAccess from '@poc/components/icons/IconAccess.vue';
 import IconTeam from '@poc/components/icons/IconTeam.vue';
 import IconDocs from '@poc/components/icons/IconDocs.vue';
@@ -302,6 +273,7 @@ import IconResources from '@poc/components/icons/IconResources.vue';
 import CreateProjectDialog from '@poc/components/dialogs/CreateProjectDialog.vue';
 import ManagePassphraseDialog from '@poc/components/dialogs/ManagePassphraseDialog.vue';
 import NavigationItem from '@poc/layouts/default/NavigationItem.vue';
+import IconFolder from '@poc/components/icons/IconFolder.vue';
 
 const analyticsStore = useAnalyticsStore();
 const projectsStore = useProjectsStore();

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

@@ -21,7 +21,7 @@ body {
 .v-theme--light {
   --v-border-color: 0, 0, 0;
   --v-theme-overlay-multiplier: 0.75 !important;
-  --v-border-opacity: 0.07 !important;
+  --v-border-opacity: 0.09 !important;
   // --v-theme-on-background: var(--v-theme-blue6) !important;
   --v-theme-on-background: var(--v-theme-blue7) !important;
   --v-theme-on-surface: var(--v-theme-blue7) !important;
@@ -30,7 +30,7 @@ body {
 // Dark Theme
 .v-theme--dark {
   --v-theme-overlay-multiplier: 0.75 !important;
-  --v-border-opacity: 0.07 !important;
+  --v-border-opacity: 0.09 !important;
   --v-theme-on-surface-variant: 70,70,70 !important;
 }
 
@@ -232,19 +232,13 @@ table {
 // Table Footer
 .v-data-table-footer {
   font-size: 14px;
-}
-.v-data-table-footer {
+  justify-content: space-between !important;
+  padding: 12px 18px !important;
   border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
 }
 .v-data-table-footer .v-field__input {
   font-size: 14px;
 }
-
-// Table Pagination
-.v-data-table-footer {
-  justify-content: space-between !important;
-  padding: 12px 18px !important;
-}
 .v-data-table-footer .v-field__outline__start, .v-data-table-footer .v-field__outline__end {
   border-color: rgba(var(--v-theme-on-background),0.1) !important;
 }
@@ -393,13 +387,6 @@ table {
   cursor: unset;
 }
 
-// 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;