From ebfbbca1be2a42e0d2dd5b75b945cceb2c817d72 Mon Sep 17 00:00:00 2001
From: Jeremy Wharton <jeremy.e.wharton@gmail.com>
Date: Tue, 29 Aug 2023 18:30:44 -0500
Subject: [PATCH] web/satellite/vuetify-poc: pull latest changes from internal
 repo

The changes as of storj/vuetify-storj@2312936 have been pulled into the
Vuetify project.

Change-Id: Ia45d3d0832727d3ca7b9ee9b3dce5949a79a5d31
---
 .../src/components/AccessTableComponent.vue   |  7 +-
 .../src/components/BrowserActionsMenu.vue     | 55 +++++++++++++++
 .../src/components/BrowserTableComponent.vue  | 40 ++++++++++-
 .../src/components/BucketsDataTable.vue       |  8 ++-
 .../src/components/TeamTableComponent.vue     | 10 ++-
 .../src/components/icons/IconDownload.vue     |  8 +++
 .../src/components/icons/IconPreview.vue      | 10 +++
 .../src/components/icons/IconShare.vue        |  5 +-
 .../src/components/icons/IconTrash.vue        | 11 ++-
 .../src/layouts/default/AppBar.vue            | 11 ++-
 .../vuetify-poc/src/plugins/vuetify.ts        | 18 ++---
 .../vuetify-poc/src/styles/styles.scss        | 69 +++++++++----------
 12 files changed, 195 insertions(+), 57 deletions(-)
 create mode 100644 web/satellite/vuetify-poc/src/components/BrowserActionsMenu.vue
 create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconDownload.vue
 create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconPreview.vue

diff --git a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
index 765175c59..61da94dd5 100644
--- a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
@@ -2,14 +2,19 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" class="rounded-xlg">
+    <v-card variant="flat" :border="true" rounded="xlg">
         <v-text-field
             v-model="search"
             label="Search"
             prepend-inner-icon="mdi-magnify"
             single-line
+            variant="solo-filled"
+            flat
             hide-details
             clearable
+            density="comfortable"
+            rounded="lg"
+            class="mx-2 mt-2"
         />
 
         <v-data-table-server
diff --git a/web/satellite/vuetify-poc/src/components/BrowserActionsMenu.vue b/web/satellite/vuetify-poc/src/components/BrowserActionsMenu.vue
new file mode 100644
index 000000000..06bcf5a52
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/BrowserActionsMenu.vue
@@ -0,0 +1,55 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <v-menu activator="parent">
+        <v-list class="pa-2">
+            <v-list-item density="comfortable" link rounded="lg">
+                <template #prepend>
+                    <icon-preview />
+                </template>
+                <v-list-item-title class="pl-2 text-body-2 font-weight-medium">
+                    Preview
+                </v-list-item-title>
+            </v-list-item>
+
+            <v-list-item density="comfortable" link rounded="lg">
+                <template #prepend>
+                    <icon-download />
+                </template>
+                <v-list-item-title class="pl-2 text-body-2 font-weight-medium">
+                    Download
+                </v-list-item-title>
+            </v-list-item>
+
+            <v-list-item density="comfortable" link rounded="lg">
+                <template #prepend>
+                    <icon-share bold />
+                </template>
+                <v-list-item-title class="pl-2 text-body-2 font-weight-medium">
+                    Share
+                </v-list-item-title>
+            </v-list-item>
+
+            <v-divider class="my-2" />
+
+            <v-list-item density="comfortable" link rounded="lg" base-color="error">
+                <template #prepend>
+                    <icon-trash bold />
+                </template>
+                <v-list-item-title class="pl-2 text-body-2 font-weight-medium">
+                    Delete
+                </v-list-item-title>
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+
+<script setup lang="ts">
+import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
+
+import IconDownload from '@poc/components/icons/IconDownload.vue';
+import IconShare from '@poc/components/icons/IconShare.vue';
+import IconPreview from '@poc/components/icons/IconPreview.vue';
+import IconTrash from '@poc/components/icons/IconTrash.vue';
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
index b98458f3b..9b7d60432 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
@@ -2,14 +2,19 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" class="rounded-xlg">
+    <v-card variant="flat" :border="true" rounded="xlg">
         <v-text-field
             v-model="search"
             label="Search"
             prepend-inner-icon="mdi-magnify"
             single-line
+            variant="solo-filled"
+            flat
             hide-details
             clearable
+            density="comfortable"
+            rounded="lg"
+            class="mx-2 mt-2"
         />
 
         <v-data-table
@@ -21,6 +26,7 @@
             class="elevation-1"
             item-key="path"
             show-select
+            hover
         >
             <template #item.name="{ item }">
                 <div>
@@ -36,6 +42,34 @@
                     </v-btn>
                 </div>
             </template>
+
+            <template #item.actions>
+                <div class="text-no-wrap">
+                    <v-btn
+                        variant="outlined"
+                        color="default"
+                        size="small"
+                        class="mr-1 text-caption"
+                        density="comfortable"
+                        icon
+                    >
+                        <icon-download />
+                        <v-tooltip activator="parent" location="start">Download</v-tooltip>
+                    </v-btn>
+
+                    <v-btn
+                        variant="outlined"
+                        color="default"
+                        size="small"
+                        class="mr-1 text-caption"
+                        density="comfortable"
+                        icon
+                    >
+                        <browser-actions-menu />
+                        <v-icon icon="mdi-dots-horizontal" />
+                    </v-btn>
+                </div>
+            </template>
         </v-data-table>
 
         <v-dialog v-model="previewDialog" transition="fade-transition" class="preview-dialog" fullscreen theme="dark">
@@ -159,6 +193,7 @@ import {
     VToolbarTitle,
     VTooltip,
     VCarouselItem,
+    VIcon,
 } from 'vuetify/components';
 import { VDataTable } from 'vuetify/labs/components';
 
@@ -173,6 +208,8 @@ import spreadsheetIcon from '@poc/assets/icon-spreadsheet-tonal.svg';
 import fileIcon from '@poc/assets/icon-file-tonal.svg';
 
 import IconShare from '@poc/components/icons/IconShare.vue';
+import IconDownload from '@poc/components/icons/IconDownload.vue';
+import BrowserActionsMenu from '@poc/components/BrowserActionsMenu.vue';
 
 const search = ref<string>('');
 const selected = ref([]);
@@ -206,6 +243,7 @@ const headers = [
     { title: 'Type', key:'type' },
     { title: 'Size', key: 'size' },
     { title: 'Date', key: 'date' },
+    { title: '', key: 'actions', sortable: false, width: 0 },
 ];
 const files = [
     {
diff --git a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
index f45d147c2..769159628 100644
--- a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
+++ b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
@@ -2,14 +2,19 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" class="rounded-xlg">
+    <v-card variant="flat" :border="true" rounded="xlg">
         <v-text-field
             v-model="search"
             label="Search"
             prepend-inner-icon="mdi-magnify"
             single-line
+            variant="solo-filled"
+            flat
             hide-details
             clearable
+            density="comfortable"
+            rounded="lg"
+            class="mx-2 mt-2"
         />
 
         <v-data-table-server
@@ -22,6 +27,7 @@
             :items-per-page-options="tableSizeOptions(page.totalCount)"
             item-value="name"
             class="elevation-1"
+            hover
             @update:itemsPerPage="onUpdateLimit"
             @update:page="onUpdatePage"
         >
diff --git a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
index 26c4fa0df..a9b13b4ee 100644
--- a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
@@ -2,14 +2,19 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" class="rounded-xlg">
+    <v-card variant="flat" :border="true" rounded="xlg">
         <v-text-field
             v-model="search"
             label="Search"
             prepend-inner-icon="mdi-magnify"
             single-line
+            variant="solo-filled"
+            flat
             hide-details
             clearable
+            density="comfortable"
+            rounded="lg"
+            class="mx-2 mt-2"
         />
 
         <v-data-table
@@ -19,6 +24,9 @@
             :items="projectMembers"
             :search="search"
             class="elevation-1"
+            item-value="email"
+            show-select
+            hover
         >
             <template #item.name="{ item }">
                 <span class="font-weight-bold">
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconDownload.vue b/web/satellite/vuetify-poc/src/components/icons/IconDownload.vue
new file mode 100644
index 000000000..0e337e5c9
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconDownload.vue
@@ -0,0 +1,8 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9.27197 13.699L9.24807 13.676L5.01126 9.43921C4.68952 9.11747 4.68952 8.59583 5.01126 8.27409C5.32516 7.9602 5.82932 7.95254 6.15249 8.25112L6.17638 8.27409L9.0343 11.1321V1.82387C9.0343 1.36886 9.40315 1 9.85816 1C10.3021 1 10.664 1.35108 10.6814 1.79073L10.682 1.82387V11.0772L13.4849 8.27409C13.7988 7.9602 14.3029 7.95254 14.6261 8.25112L14.65 8.27409C14.9639 8.58798 14.9716 9.09215 14.673 9.41532L14.65 9.43921L10.4132 13.676C10.0993 13.9899 9.59514 13.9976 9.27197 13.699ZM19 17.3777C19 17.8327 18.6311 18.2016 18.1761 18.2016H1.8486C1.39359 18.2016 1.02473 17.8327 1.02473 17.3777C1.02473 16.9227 1.39359 16.5538 1.8486 16.5538H18.1761C18.6311 16.5538 19 16.9227 19 17.3777ZM1.82387 18.139C1.36886 18.139 1 17.7702 1 17.3152V14.0197C1 13.5647 1.36886 13.1958 1.82387 13.1958C2.27888 13.1958 2.64773 13.5647 2.64773 14.0197V17.3152C2.64773 17.7702 2.27888 18.139 1.82387 18.139ZM18.1514 18.139C17.6964 18.139 17.3275 17.7702 17.3275 17.3152V14.0197C17.3275 13.5647 17.6964 13.1958 18.1514 13.1958C18.6064 13.1958 18.9753 13.5647 18.9753 14.0197V17.3152C18.9753 17.7702 18.6064 18.139 18.1514 18.139Z" fill="black" />
+    </svg>
+</template>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconPreview.vue b/web/satellite/vuetify-poc/src/components/icons/IconPreview.vue
new file mode 100644
index 000000000..1fea1bc34
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconPreview.vue
@@ -0,0 +1,10 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M13.2857 16.4289C13.9958 16.4289 14.5714 15.8532 14.5714 15.1431C14.5714 14.4331 13.9958 13.8574 13.2857 13.8574C12.5756 13.8574 12 14.4331 12 15.1431C12 15.8532 12.5756 16.4289 13.2857 16.4289Z" fill="currentColor" />
+        <path d="M18.285 14.8079C17.8878 13.7959 17.2024 12.9228 16.3137 12.2967C15.425 11.6706 14.3721 11.3191 13.2855 11.2856C12.1989 11.3191 11.146 11.6706 10.2573 12.2967C9.36858 12.9228 8.68315 13.7959 8.28594 14.8079L8.14258 15.1428L8.28594 15.4777C8.68315 16.4897 9.36858 17.3628 10.2573 17.9889C11.146 18.615 12.1989 18.9666 13.2855 19C14.3721 18.9666 15.425 18.615 16.3137 17.9889C17.2024 17.3628 17.8878 16.4897 18.285 15.4777L18.4284 15.1428L18.285 14.8079ZM13.2855 17.7143C12.7769 17.7143 12.2797 17.5634 11.8569 17.2809C11.434 16.9983 11.1044 16.5967 10.9098 16.1269C10.7151 15.657 10.6642 15.14 10.7634 14.6411C10.8627 14.1423 11.1076 13.6842 11.4672 13.3245C11.8268 12.9649 12.285 12.72 12.7838 12.6208C13.2826 12.5216 13.7996 12.5725 14.2695 12.7671C14.7394 12.9617 15.141 13.2913 15.4235 13.7142C15.7061 14.1371 15.8569 14.6342 15.8569 15.1428C15.8561 15.8245 15.5849 16.4781 15.1028 16.9602C14.6208 17.4422 13.9672 17.7134 13.2855 17.7143Z" fill="currentColor" />
+        <path d="M6.85717 17.7146H4.28572V2.28594H9.42861V6.14311C9.42963 6.48379 9.56542 6.81023 9.80632 7.05113C10.0472 7.29203 10.3737 7.42782 10.7143 7.42883H14.5715V10.0003H15.8572V6.14311C15.8595 6.05862 15.8434 5.97465 15.8101 5.89696C15.7768 5.81928 15.7271 5.74973 15.6644 5.69311L11.1643 1.19308C11.1077 1.1303 11.0382 1.08054 10.9605 1.04725C10.8828 1.01395 10.7988 0.997907 10.7143 1.00022H4.28572C3.94504 1.00124 3.6186 1.13702 3.3777 1.37792C3.1368 1.61882 3.00102 1.94526 3 2.28594V17.7146C3.00102 18.0553 3.1368 18.3817 3.3777 18.6226C3.6186 18.8635 3.94504 18.9993 4.28572 19.0003H6.85717V17.7146ZM10.7143 2.54309L14.3144 6.14311H10.7143V2.54309Z" fill="currentColor" />
+    </svg>
+</template>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconShare.vue b/web/satellite/vuetify-poc/src/components/icons/IconShare.vue
index 3ab48ff38..057fa98a9 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconShare.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconShare.vue
@@ -3,14 +3,17 @@
 
 <template>
     <svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M1 11.3478L1.0006 11.1089L1.00255 10.9104C1.02806 9.02016 1.24887 7.94766 1.8301 6.85107C2.11856 6.30683 2.47921 5.81884 2.9065 5.39525C3.09805 5.20536 3.40727 5.2067 3.59716 5.39825C3.78705 5.5898 3.7857 5.89902 3.59416 6.08891C3.23741 6.44256 2.93571 6.8508 2.69311 7.30849C2.19298 8.25209 2.00189 9.18053 1.97909 10.9293L1.97733 11.1132L1.97674 11.3476L1.97788 11.535C1.9943 13.2869 2.17173 14.231 2.63211 15.143L2.6566 15.191L2.68949 15.2539L2.72923 15.3276C3.20185 16.188 3.88274 16.8645 4.74262 17.3286C5.69396 17.8419 6.6299 18.0329 8.42017 18.0507L8.51354 18.0515L8.70427 18.0521L11.3745 18.0521L11.562 18.0509C13.243 18.0346 14.1739 17.8665 15.0477 17.4368L15.0953 17.4131L15.1881 17.3654L15.2505 17.3323L15.3236 17.2921C16.1764 16.8152 16.8471 16.1283 17.3069 15.2608C17.807 14.3172 17.9981 13.3887 18.0209 11.6399L18.0227 11.456L18.0233 11.2241L18.0211 10.9429L18.0181 10.7617C17.9859 9.18703 17.8059 8.29438 17.3684 7.42735L17.3434 7.37829L17.3108 7.31592L17.263 7.22755C17.0626 6.86518 16.8262 6.53681 16.554 6.24235C16.3709 6.04428 16.3831 5.7353 16.5812 5.55222C16.7792 5.36914 17.0882 5.38129 17.2713 5.57936C17.5739 5.90671 17.839 6.26837 18.0677 6.66622L18.1198 6.75867L18.173 6.85705L18.2101 6.92791C18.7529 7.97927 18.966 9.03409 18.9963 10.8355L18.9978 10.9327L19 11.2214L18.9994 11.4603L18.9975 11.6588C18.9719 13.5491 18.7511 14.6216 18.1699 15.7182C17.6362 16.7251 16.8586 17.5334 15.8752 18.102L15.7971 18.1464L15.7152 18.1914L15.6412 18.2307L15.5385 18.2835C14.5129 18.8001 13.4582 19.0024 11.6681 19.0265L11.5698 19.0276L11.3776 19.0288H8.70271L8.5088 19.0282L8.3118 19.0262C6.43571 19.0002 5.36874 18.7763 4.27877 18.1881C3.27953 17.6489 2.47826 16.8644 1.91534 15.8733L1.8714 15.7947L1.82695 15.7122L1.78989 15.6413L1.73422 15.5311C1.21659 14.4834 1.01922 13.4053 1.00124 11.5464L1 11.3478ZM6.16539 5.11581L6.18383 5.09635L9.63714 1.64304C9.8215 1.45868 10.1166 1.45253 10.3083 1.6246L10.3278 1.64304L13.7811 5.09635C13.9718 5.28708 13.9718 5.59629 13.7811 5.78702C13.5968 5.97138 13.3017 5.97753 13.1099 5.80545L13.0905 5.78702L10.4707 3.1673L10.4708 12.6975C10.4708 12.9672 10.2522 13.1859 9.98247 13.1859C9.72174 13.1859 9.50873 12.9816 9.49482 12.7243L9.4941 12.6975L9.494 3.1673L6.87449 5.78702C6.69013 5.97138 6.39503 5.97753 6.20329 5.80545L6.18383 5.78702C5.99946 5.60265 5.99332 5.30756 6.16539 5.11581Z" fill="currentColor" />
+        <path v-if="!bold" d="M1 11.3478L1.0006 11.1089L1.00255 10.9104C1.02806 9.02016 1.24887 7.94766 1.8301 6.85107C2.11856 6.30683 2.47921 5.81884 2.9065 5.39525C3.09805 5.20536 3.40727 5.2067 3.59716 5.39825C3.78705 5.5898 3.7857 5.89902 3.59416 6.08891C3.23741 6.44256 2.93571 6.8508 2.69311 7.30849C2.19298 8.25209 2.00189 9.18053 1.97909 10.9293L1.97733 11.1132L1.97674 11.3476L1.97788 11.535C1.9943 13.2869 2.17173 14.231 2.63211 15.143L2.6566 15.191L2.68949 15.2539L2.72923 15.3276C3.20185 16.188 3.88274 16.8645 4.74262 17.3286C5.69396 17.8419 6.6299 18.0329 8.42017 18.0507L8.51354 18.0515L8.70427 18.0521L11.3745 18.0521L11.562 18.0509C13.243 18.0346 14.1739 17.8665 15.0477 17.4368L15.0953 17.4131L15.1881 17.3654L15.2505 17.3323L15.3236 17.2921C16.1764 16.8152 16.8471 16.1283 17.3069 15.2608C17.807 14.3172 17.9981 13.3887 18.0209 11.6399L18.0227 11.456L18.0233 11.2241L18.0211 10.9429L18.0181 10.7617C17.9859 9.18703 17.8059 8.29438 17.3684 7.42735L17.3434 7.37829L17.3108 7.31592L17.263 7.22755C17.0626 6.86518 16.8262 6.53681 16.554 6.24235C16.3709 6.04428 16.3831 5.7353 16.5812 5.55222C16.7792 5.36914 17.0882 5.38129 17.2713 5.57936C17.5739 5.90671 17.839 6.26837 18.0677 6.66622L18.1198 6.75867L18.173 6.85705L18.2101 6.92791C18.7529 7.97927 18.966 9.03409 18.9963 10.8355L18.9978 10.9327L19 11.2214L18.9994 11.4603L18.9975 11.6588C18.9719 13.5491 18.7511 14.6216 18.1699 15.7182C17.6362 16.7251 16.8586 17.5334 15.8752 18.102L15.7971 18.1464L15.7152 18.1914L15.6412 18.2307L15.5385 18.2835C14.5129 18.8001 13.4582 19.0024 11.6681 19.0265L11.5698 19.0276L11.3776 19.0288H8.70271L8.5088 19.0282L8.3118 19.0262C6.43571 19.0002 5.36874 18.7763 4.27877 18.1881C3.27953 17.6489 2.47826 16.8644 1.91534 15.8733L1.8714 15.7947L1.82695 15.7122L1.78989 15.6413L1.73422 15.5311C1.21659 14.4834 1.01922 13.4053 1.00124 11.5464L1 11.3478ZM6.16539 5.11581L6.18383 5.09635L9.63714 1.64304C9.8215 1.45868 10.1166 1.45253 10.3083 1.6246L10.3278 1.64304L13.7811 5.09635C13.9718 5.28708 13.9718 5.59629 13.7811 5.78702C13.5968 5.97138 13.3017 5.97753 13.1099 5.80545L13.0905 5.78702L10.4707 3.1673L10.4708 12.6975C10.4708 12.9672 10.2522 13.1859 9.98247 13.1859C9.72174 13.1859 9.50873 12.9816 9.49482 12.7243L9.4941 12.6975L9.494 3.1673L6.87449 5.78702C6.69013 5.97138 6.39503 5.97753 6.20329 5.80545L6.18383 5.78702C5.99946 5.60265 5.99332 5.30756 6.16539 5.11581Z" fill="currentColor" />
+        <path v-else d="M1 11.4165L1.00062 11.1665C1.01369 9.08595 1.23508 8.00935 1.81539 6.91448C2.09527 6.38645 2.44444 5.91385 2.85803 5.50384C3.17544 5.18917 3.68785 5.1914 4.00252 5.50882C4.31718 5.82624 4.31495 6.33865 3.99754 6.65331C3.70091 6.94737 3.4494 7.28779 3.2455 7.67248C2.79323 8.52576 2.62388 9.3707 2.61869 11.2762L2.61857 11.4141L2.61962 11.5949C2.63475 13.311 2.79567 14.1368 3.19108 14.9197L3.2455 15.0247C3.64127 15.7714 4.21681 16.3521 4.95576 16.7508L5.03734 16.794C5.85362 17.2165 6.69359 17.3762 8.51732 17.3813L11.426 17.3814L11.6919 17.3795C13.3021 17.3599 14.1033 17.2022 14.8517 16.826L14.9317 16.7849L14.9957 16.7508C15.7346 16.3521 16.3101 15.7714 16.7059 15.0247C17.1582 14.1714 17.3275 13.3265 17.3327 11.421L17.3328 11.283L17.3318 11.1023C17.3167 9.3862 17.1557 8.56035 16.7603 7.77748L16.7059 7.67248C16.5308 7.34202 16.3205 7.04423 16.0767 6.78047C15.7733 6.45225 15.7934 5.94024 16.1216 5.63685C16.4499 5.33347 16.9619 5.3536 17.2652 5.68182C17.5804 6.02276 17.854 6.40272 18.0854 6.82107L18.138 6.91829L18.1758 6.99058C18.7081 8.02164 18.9241 9.06553 18.9491 10.9815L18.9514 11.2807L18.9508 11.5306C18.9377 13.6112 18.7163 14.6878 18.136 15.7827C17.605 16.7845 16.8273 17.5815 15.8409 18.1331L15.7605 18.1773L15.6888 18.2155L15.5845 18.2691C14.5758 18.7772 13.5264 18.9803 11.6278 18.9988L11.4284 19H8.60933L8.40655 18.9994C6.34364 18.9859 5.27413 18.7618 4.18711 18.1753C3.19316 17.6389 2.40331 16.8542 1.85714 15.8599L1.81339 15.7789L1.77558 15.7066C1.21621 14.6231 1.00615 13.5254 1 11.4165ZM6.2909 4.38187L6.31346 4.3584L9.43483 1.23703C9.74316 0.928697 10.2384 0.921177 10.5559 1.21447L10.5793 1.23703L13.7007 4.3584C14.0167 4.67445 14.0167 5.18686 13.7007 5.5029C13.3924 5.81124 12.8971 5.81876 12.5797 5.52547L12.5562 5.5029L10.7893 3.73597V12.8794C10.7893 13.3264 10.427 13.6887 9.98004 13.6887C9.54398 13.6887 9.18848 13.3438 9.1714 12.912L9.17075 12.8794V3.78983L7.45796 5.5029C7.14962 5.81124 6.65438 5.81876 6.33693 5.52547L6.31346 5.5029C6.00512 5.19457 5.9976 4.69933 6.2909 4.38187Z" fill="currentColor" />
     </svg>
 </template>
 
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
     size: number | string;
+    bold: boolean;
 }>(), {
     size: 18,
+    bold: false,
 });
 </script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconTrash.vue b/web/satellite/vuetify-poc/src/components/icons/IconTrash.vue
index 3f5045876..f0a9435b7 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconTrash.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconTrash.vue
@@ -3,6 +3,15 @@
 
 <template>
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18.5039 4.47638C18.7779 4.47638 19 4.69847 19 4.97244C19 5.24641 18.7779 5.4685 18.5039 5.4685L16.6817 5.46836L15.4073 15.876C15.2332 17.2977 14.0259 18.3661 12.5936 18.3661H7.52282C6.10137 18.3661 4.89972 17.3134 4.71279 15.9043L3.32838 5.46836L1.49606 5.4685C1.22209 5.4685 1 5.24641 1 4.97244C1 4.69847 1.22209 4.47638 1.49606 4.47638H18.5039ZM15.6822 5.4685H4.32943L5.6963 15.7738C5.81584 16.6749 6.57385 17.3519 7.47823 17.3735L7.52282 17.374H12.5936C13.5099 17.374 14.2844 16.7014 14.4166 15.7993L14.4225 15.7554L15.6822 5.4685ZM8.47662 8.91592L8.48146 8.9424L8.4849 8.96941L8.98001 13.9215L8.98375 13.9527C9.01639 14.2247 8.82233 14.4717 8.55031 14.5043C8.28736 14.5358 8.04782 14.3556 8.00266 14.0978L7.99869 14.0709L7.99388 14.03L7.4977 9.06813C7.47043 8.79552 7.66933 8.55243 7.94194 8.52517C8.19637 8.49973 8.42509 8.67129 8.47662 8.91592ZM12.3071 8.4919L12.3342 8.49334C12.5982 8.51448 12.7973 8.73863 12.7906 9.00024L12.7891 9.02742L12.7857 9.06844L12.2899 14.0266C12.2627 14.2992 12.0196 14.4981 11.747 14.4708C11.4834 14.4445 11.2888 14.2164 11.3007 13.955L11.3027 13.9278L11.7977 8.97947L11.8002 8.94821C11.8206 8.69332 12.0302 8.49893 12.2801 8.4919H12.3071ZM12.8346 1.5C13.1086 1.5 13.3307 1.72209 13.3307 1.99606C13.3307 2.27003 13.1086 2.49213 12.8346 2.49213H7.16535C6.89139 2.49213 6.66929 2.27003 6.66929 1.99606C6.66929 1.72209 6.89139 1.5 7.16535 1.5H12.8346Z" fill="currentColor" />
+        <path v-if="!bold" d="M18.5039 4.47638C18.7779 4.47638 19 4.69847 19 4.97244C19 5.24641 18.7779 5.4685 18.5039 5.4685L16.6817 5.46836L15.4073 15.876C15.2332 17.2977 14.0259 18.3661 12.5936 18.3661H7.52282C6.10137 18.3661 4.89972 17.3134 4.71279 15.9043L3.32838 5.46836L1.49606 5.4685C1.22209 5.4685 1 5.24641 1 4.97244C1 4.69847 1.22209 4.47638 1.49606 4.47638H18.5039ZM15.6822 5.4685H4.32943L5.6963 15.7738C5.81584 16.6749 6.57385 17.3519 7.47823 17.3735L7.52282 17.374H12.5936C13.5099 17.374 14.2844 16.7014 14.4166 15.7993L14.4225 15.7554L15.6822 5.4685ZM8.47662 8.91592L8.48146 8.9424L8.4849 8.96941L8.98001 13.9215L8.98375 13.9527C9.01639 14.2247 8.82233 14.4717 8.55031 14.5043C8.28736 14.5358 8.04782 14.3556 8.00266 14.0978L7.99869 14.0709L7.99388 14.03L7.4977 9.06813C7.47043 8.79552 7.66933 8.55243 7.94194 8.52517C8.19637 8.49973 8.42509 8.67129 8.47662 8.91592ZM12.3071 8.4919L12.3342 8.49334C12.5982 8.51448 12.7973 8.73863 12.7906 9.00024L12.7891 9.02742L12.7857 9.06844L12.2899 14.0266C12.2627 14.2992 12.0196 14.4981 11.747 14.4708C11.4834 14.4445 11.2888 14.2164 11.3007 13.955L11.3027 13.9278L11.7977 8.97947L11.8002 8.94821C11.8206 8.69332 12.0302 8.49893 12.2801 8.4919H12.3071ZM12.8346 1.5C13.1086 1.5 13.3307 1.72209 13.3307 1.99606C13.3307 2.27003 13.1086 2.49213 12.8346 2.49213H7.16535C6.89139 2.49213 6.66929 2.27003 6.66929 1.99606C6.66929 1.72209 6.89139 1.5 7.16535 1.5H12.8346Z" fill="currentColor" />
+        <path v-else d="M18.2205 4.83071C18.651 4.83071 19 5.17971 19 5.61024C19 6.03026 18.6678 6.37269 18.2518 6.38914L18.2205 6.38976H16.6122L15.4073 16.2304C15.2332 17.652 14.0259 18.7205 12.5936 18.7205H7.52282C6.10137 18.7205 4.89972 17.6677 4.71279 16.2586L3.40364 6.38976H1.77953C1.34901 6.38976 1 6.04076 1 5.61024C1 5.19022 1.33219 4.84778 1.74818 4.83133L1.77953 4.83071H18.2205ZM15.0416 6.38976H4.97644L6.25831 16.0536C6.34078 16.6752 6.86214 17.1428 7.48531 17.1609L7.52282 17.1614H12.5936C13.2255 17.1614 13.7601 16.6993 13.8546 16.0783L13.8598 16.0409L15.0416 6.38976ZM8.82516 9.15535L8.83022 9.18684L8.83395 9.21797L9.33014 14.1798C9.37298 14.6082 9.06043 14.9902 8.63205 15.0331C8.21411 15.0748 7.84032 14.7784 7.78256 14.3661L7.77882 14.335L7.28264 9.3731C7.2398 8.94472 7.55234 8.56272 7.98073 8.51988C8.38795 8.47916 8.75326 8.75957 8.82516 9.15535ZM12.3027 8.52018C12.7206 8.56198 13.0283 8.92659 13.0033 9.34215L13.0008 9.37341L12.505 14.3315C12.4621 14.7599 12.0801 15.0725 11.6518 15.0296C11.2338 14.9878 10.9261 14.6232 10.9512 14.2077L10.9537 14.1764L11.4495 9.21827C11.4923 8.78989 11.8743 8.47734 12.3027 8.52018ZM12.5512 1.5C12.9817 1.5 13.3307 1.84901 13.3307 2.27953C13.3307 2.69955 12.9985 3.04198 12.5825 3.05844L12.5512 3.05906H7.44882C7.0183 3.05906 6.66929 2.71005 6.66929 2.27953C6.66929 1.85951 7.00148 1.51707 7.41747 1.50062L7.44882 1.5H12.5512Z" fill="currentColor" />
     </svg>
 </template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    bold: boolean;
+}>(), {
+    bold: false,
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
index 5ce231482..d3887097a 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
@@ -7,8 +7,8 @@
             v-if="showNavDrawerButton"
             variant="text"
             color="default"
-            class="ml-1"
-            size="x-small"
+            class="ml-3 mr-2"
+            size="small"
             density="comfortable"
             @click.stop="appStore.toggleNavigationDrawer()"
         />
@@ -40,7 +40,7 @@
                         border
                         inset
                         density="comfortable"
-                        class="pa-1"
+                        rounded="xl"
                     >
                         <v-tooltip text="Light Theme" location="bottom">
                             <template #activator="{ props: darkProps }">
@@ -48,7 +48,7 @@
                                     v-bind="darkProps"
                                     icon="mdi-weather-sunny"
                                     size="small"
-                                    rounded="xl"
+                                    class="px-5"
                                     aria-label="Toggle Light Theme"
                                     @click="toggleTheme('light')"
                                 />
@@ -61,7 +61,7 @@
                                     v-bind="lightProps"
                                     icon="mdi-weather-night"
                                     size="small"
-                                    rounded="xl"
+                                    class="px-5"
                                     aria-label="Toggle Dark Theme"
                                     @click="toggleTheme('dark')"
                                 />
@@ -75,7 +75,6 @@
                         variant="outlined"
                         color="default"
                         class="ml-4 font-weight-medium"
-                        density="comfortable"
                     >
                         <template #append>
                             <img src="@poc/assets/icon-dropdown.svg" alt="Account Dropdown">
diff --git a/web/satellite/vuetify-poc/src/plugins/vuetify.ts b/web/satellite/vuetify-poc/src/plugins/vuetify.ts
index 3a80cb1d3..45b53bbdd 100644
--- a/web/satellite/vuetify-poc/src/plugins/vuetify.ts
+++ b/web/satellite/vuetify-poc/src/plugins/vuetify.ts
@@ -17,8 +17,6 @@ import '../styles/styles.scss';
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
-    // Use blueprint for Material Design 2
-    // blueprint: md2,
     // Use blueprint for Material Design 3
     blueprint: md3,
     theme: {
@@ -27,6 +25,7 @@ export default createVuetify({
                 colors: {
                     primary: '#0149FF',
                     secondary: '#0218A7',
+                    background: '#FFF',
                     info: '#537CFF',
                     success: '#00AC26',
                     warning: '#FF8A00',
@@ -49,13 +48,10 @@ export default createVuetify({
                 colors: {
                     primary: '#0149FF',
                     secondary: '#537CFF',
-                    // background: '#010923',
-                    // background: '#0c121d',
                     background: '#0d1116',
+                    // background: '#101418',
                     error: '#FF458B',
                     error2: '#FF0149',
-                    // surface: '#010923',
-                    // surface: '#0c121d', dark bluish
                     surface: '#0d1116',
                     purple: '#7B61FF',
                     blue6:  '#091c45',
@@ -82,16 +78,20 @@ export default createVuetify({
             noDataText: 'Results not found',
         },
         VBtn: {
-            // elevation: 1,
             density: 'default',
-            // height: 48,
             rounded: 'lg',
-            // textTransform: 'none',
             class: 'text-capitalize font-weight-bold',
             style: 'letter-spacing:0;',
         },
         VTooltip: {
             transition: 'fade-transition',
         },
+        VSelect: {
+            rounded: 'lg',
+        },
+        VTextField: {
+            rounded: 'lg',
+            variant: 'outlined',
+        },
     },
 });
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/styles/styles.scss b/web/satellite/vuetify-poc/src/styles/styles.scss
index 255a75cc7..935022c11 100644
--- a/web/satellite/vuetify-poc/src/styles/styles.scss
+++ b/web/satellite/vuetify-poc/src/styles/styles.scss
@@ -22,15 +22,11 @@ html {
 
 .v-navigation-drawer {
   // box-shadow: 0 3px 4px rgba(var(--v-theme-on-surface), 0.05) !important;
-  box-shadow: 15px 0 30px 0 rgba(0,0,0,.03) !important;
   transform: translateX(0) !important;
-  // box-shadow: 15px 0 30px 0 rgba(var(--v-theme-on-surface), 0.03) !important;
 }
 .v-app-bar.v-toolbar {
   border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   // box-shadow: 0 1px 3px rgba(var(--v-theme-on-surface), 0.05) !important;
-  box-shadow: 15px 0 30px 0 rgba(0,0,0,.03) !important;
-  // box-shadow: 15px 0 30px 0 rgba(var(--v-theme-on-surface), 0.03) !important;
 }
 
 // Toggle visibility class
@@ -51,19 +47,12 @@ 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;
-  // box-shadow: rgba(50, 50, 93, 0.1) 0px 0px 0px 1px inset, rgba(50, 50, 93, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px !important;
 }
-// .v-btn.v-theme--light {
-//   box-shadow: 0 1px 2px #eee;
-// }
-// .v-btn.v-theme--dark {
-//   box-shadow: 0 1px 2px #000;
-// }
 
 // Button Outlines
 .v-btn.v-theme--light.text-default.v-btn--variant-outlined {
   border-color: rgba(var(--v-border-color), 0.2);
-  // border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  background: rgb(var(--v-theme-surface));
 }
 .v-btn.v-theme--light.text-default.v-btn--variant-outlined:hover {
   border-color: #9da3a7;
@@ -86,6 +75,7 @@ html {
 }
 
 // Button Sizes
+/*
 .v-btn--size-x-small {
   --v-btn-height: 2rem;
   padding-left: 12px;
@@ -111,14 +101,26 @@ html {
   padding-left: 24px;
   padding-right: 24px;
 }
+*/
+
+.v-btn--size-default {
+  --v-btn-size: 0.8rem;
+  --v-btn-height: 44px;
+}
+
+.v-btn--size-large {
+  --v-btn-size: 0.875rem;
+  --v-btn-height: 48px;
+}
 
 // Button Icon
+/*
 .v-btn--icon {
     padding: 4px;
     height: auto;
     width: auto;
 }
-
+*/
 
 // Menu border
 .v-menu > .v-overlay__content {
@@ -128,7 +130,7 @@ html {
 
 // Menu list item
 .v-list-item--active .v-list-item-title {
-  font-weight: 700;
+  font-weight: 700 !important;
 }
 
 // Menu list item active background
@@ -138,30 +140,15 @@ html {
 
 
 // Card Light Theme
-.v-card.v-theme--dark {
-//  background: #000b2f;
-//  background: #101823;
-//  background: #0d1116;
-  background: --v-theme-surface;
-//  box-shadow: 0 2px 2px #000b2f;
-// border-bottom-width: 2px !important;
-//  box-shadow: 0 2px 2px #00000047;
-//  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 4px 0px, rgba(0, 0, 0, 0.15) 0px 6px 16px -8px;
-//  border-color: #d9d7d7;
-  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1.5px 0px !important;
+.v-card.v-theme--light {
+  border: 1px solid #e0e0e0;
+  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 0px 0px;
 }
 
 // Card Dark Theme
-.v-card.v-theme--light {
-  // background: #f6f7fa;
-  // border-bottom-width: 2px !important;
-  // box-shadow: 0 2px 2px #eee;
-  // box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 4px 0px, rgba(0, 0, 0, 0.15) 0px 6px 16px -8px;
-  // border: 1px solid #d8dee3;
-  border: 1px solid #e0e0e0;
-  // border: none;
-  // box-shadow: rgb(224, 224, 224) 0px 0px 0px 1px, rgba(0, 0, 0, 0.07) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1.5px 0px !important;
-  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1.5px 0px !important;
+.v-card.v-theme--dark {
+  background: --v-theme-surface;
+  box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 0px 0px;
 }
 
 // Cards Padding
@@ -234,6 +221,17 @@ html {
 .v-data-table-footer {
   border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
 }
+.v-data-table-footer .v-field__field {
+  height: 2.25rem;
+}
+.v-data-table-footer .v-field {
+  padding-right: 0.5rem;
+}
+.v-data-table-footer .v-field__input {
+  padding-top: 0;
+  font-size: 14px;
+  line-height: 1;
+}
 
 // Table Fonts
 table {
@@ -251,7 +249,6 @@ table {
   padding-left: 16px;
 }
 
-
 // Links
 .link {
   color: rgb(var(--v-theme-primary));