fix(deps): update dependency vuetify to v4

web/package.json

@@ -37,7 +37,7 @@
     "vue-maplibre-compare": "1.0.26",
     "vue-router": "5.0.4",
     "vuedraggable": "4.1.0",
-    "vuetify": "3.12.3"
+    "vuetify": "4.0.2"
   },
   "devDependencies": {
     "@sentry/vite-plugin": "5.1.1",

web/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { watch, onMounted, computed } from "vue";
 import { oauthClient } from "./api/auth";
-import { useTheme } from "vuetify/lib/framework.mjs";
+import { useTheme } from "vuetify";
 
 import ToggleCompareMap from "./components/map/ToggleCompareMap.vue";
 import SideBars from "./components/sidebars/SideBars.vue";

web/src/components/DatasetList.vue

@@ -81,7 +81,8 @@ watch(filteredDatasets, expandAllGroups);
         </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
-    <v-card
+    <v-divider v-if="props.datasets?.length" class="mb-2" />
+    <div
       :class="
         showFilter
           ? 'panel-content-inner with-tag-filter-open'
@@ -91,9 +92,7 @@ watch(filteredDatasets, expandAllGroups);
       <v-expansion-panels
         v-if="props.datasets?.length"
         v-model="expandedGroups"
-        variant="accordion"
         class="dataset-list"
-        style="height: fit-content"
         multiple
         flat
       >
@@ -115,17 +114,15 @@ watch(filteredDatasets, expandAllGroups);
         v-else-if="projectStore.loadingDatasets"
         indeterminate
       ></v-progress-linear>
-      <v-card-text class="help-text" v-else>No available Datasets.</v-card-text>
-    </v-card>
+      <div class="help-text pa-4" v-else>No available Datasets.</div>
+    </div>
   </div>
 </template>
 
 <style>
 .dataset-list {
   height: 100%;
-  width: calc(100% - 20px) !important;
   overflow-y: auto;
-  overflow-x: hidden;
 }
 .dataset-list .v-expansion-panel-title {
   min-height: 0 !important;
@@ -162,7 +159,6 @@ watch(filteredDatasets, expandAllGroups);
   justify-content: space-between;
   font-size: 0.875rem;
   margin-left: 24px;
-  width: 100%;
 }
 .item-title + .v-expansion-panel-title__icon {
   position: absolute !important;

web/src/components/map/LegacyMap.vue

@@ -162,7 +162,7 @@ watch(
 
 <template>
   <div id="mapContainer" class="map">
-    <div id="map-tooltip" ref="tooltip" class="tooltip pa-0">
+    <div id="map-tooltip" ref="tooltip" class="tooltip">
       <MapTooltip />
     </div>
   </div>
@@ -199,7 +199,7 @@ watch(
 
 .tooltip {
   border-radius: 5px;
-  padding: 10px 20px;
+  padding: 0;
   word-break: break-word;
   text-wrap: wrap;
   width: fit-content;

web/src/components/map/ToggleCompareMap.vue

@@ -242,8 +242,8 @@ watch(
 
 const swiperColor = computed(() => {
   return {
-    swiper: theme.global.current.value.colors.primary,
-    arrow: theme.global.current.value.colors["button-text"],
+    swiper: String(theme.global.current.value.colors.primary),
+    arrow: String(theme.global.current.value.colors["button-text"]),
   };
 });
 </script>
@@ -321,7 +321,7 @@ const swiperColor = computed(() => {
 
 .tooltip {
   border-radius: 5px;
-  padding: 10px 20px;
+  padding: 0;
   word-break: break-word;
   text-wrap: wrap;
   width: fit-content;

web/src/components/projects/AccessControl.vue

@@ -165,7 +165,7 @@ onMounted(() => {
       <v-list-item
         v-if="!project.collaborators.length"
         subtitle="No collaborators"
-        class="mx-4"
+        class="mx-4 help-text"
       />
       <v-list-subheader>
         Followers
@@ -212,7 +212,7 @@ onMounted(() => {
       <v-list-item
         v-if="!project.followers.length"
         subtitle="No followers"
-        class="mx-4"
+        class="mx-4 help-text"
       />
     </v-list>
     <v-btn
@@ -272,15 +272,17 @@ onMounted(() => {
               }
             "
           >
-            <template v-slot:item="{ props, item }">
+            <template v-slot:item="{ props, internalItem }">
               <v-list-item
                 v-bind="props"
                 :title="
-                  item.raw.first_name && item.raw.last_name
-                    ? item.raw.first_name + ' ' + item.raw.last_name
-                    : item.raw.username
+                  internalItem.raw.first_name && internalItem.raw.last_name
+                    ? internalItem.raw.first_name +
+                      ' ' +
+                      internalItem.raw.last_name
+                    : internalItem.raw.username
                 "
-                :subtitle="item.raw.email"
+                :subtitle="internalItem.raw.email"
               ></v-list-item>
             </template>
           </v-select>

web/src/components/projects/DatasetSelect.vue

@@ -68,8 +68,8 @@ function submitDelete() {
     <template v-slot:list="{ data }">
       <v-expansion-panels
         multiple
+        flat
         variant="accordion"
-        elevation="0"
         bg-color="transparent"
         @update:model-value="expandDataset"
       >
@@ -79,10 +79,8 @@ function submitDelete() {
           :value="dataset.id"
         >
           <v-expansion-panel-title>
-            <div
-              style="display: flex; justify-content: space-between; width: 100%"
-            >
-              <div class="d-flex">
+            <div class="d-flex justify-space-between w-100">
+              <div class="d-flex align-center">
                 <div style="min-width: 24px">
                   <v-icon
                     v-if="
@@ -129,16 +127,24 @@ function submitDelete() {
                     size="24"
                     indeterminate
                   />
-                  <v-icon
+                  <v-btn
                     v-else-if="
                       !props.addedIds || !props.addedIds.includes(dataset.id)
                     "
                     :icon="props.buttonIcon"
                     color="primary"
-                    class="icon-button"
+                    variant="tonal"
+                    size="x-small"
                     @click.stop="emit('buttonClick', dataset)"
                   />
-                  <v-icon v-else icon="mdi-check" color="success" @click.stop />
+                  <v-btn
+                    v-else
+                    icon="mdi-check"
+                    color="success"
+                    variant="tonal"
+                    size="x-small"
+                    @click.stop
+                  />
                 </div>
                 {{ dataset.name }}
               </div>
@@ -151,13 +157,15 @@ function submitDelete() {
                   size="small"
                   v-tooltip="dataset.n_layers + ' layers'"
                   class="ml-2"
+                  color="secondary-text"
                 ></v-icon>
                 <span class="secondary-text">{{ dataset.n_layers }}</span>
                 <v-icon
                   icon="mdi-information-outline"
                   size="small"
                   v-tooltip="dataset.description"
                   class="mx-1"
+                  color="secondary-text"
                 ></v-icon>
                 <DetailView
                   v-if="dataset"
@@ -167,12 +175,13 @@ function submitDelete() {
             </div>
           </v-expansion-panel-title>
           <v-expansion-panel-text class="pb-2">
-            <div class="mb-2 ml-2">
+            <div class="d-flex flex-wrap ga-1 mb-1 ml-6">
               <v-chip
                 v-for="tag in dataset.tags"
                 :text="tag"
                 variant="outlined"
                 size="small"
+                color="grey"
               />
             </div>
             <div v-for="layer in dataset.layers" class="item-title">
@@ -230,10 +239,3 @@ function submitDelete() {
     </template>
   </DatasetList>
 </template>
-
-<style>
-.icon-button {
-  background-color: rgb(var(--v-theme-secondary));
-  border-radius: 4px;
-}
-</style>

web/src/components/projects/ProjectConfig.vue

@@ -239,7 +239,7 @@ watch(
 </script>
 
 <template>
-  <div>
+  <div class="mx-2">
     <div class="project-row my-5">
       <v-select
         placeholder="Select a Project"
@@ -292,17 +292,32 @@ watch(
     </v-card>
     <div class="project-row" v-if="projectStore.currentProject">
       <span class="item-counts">
-        <v-icon icon="mdi-database-outline" v-tooltip="'Datasets'"></v-icon>
+        <v-icon
+          icon="mdi-database-outline"
+          v-tooltip="'Datasets'"
+          color="secondary-text"
+        ></v-icon>
         {{ projectStore.currentProject.item_counts.datasets || 0 }}
         <v-icon
           icon="mdi-border-none-variant"
           v-tooltip="'Regions'"
           class="ml-3"
+          color="secondary-text"
         ></v-icon>
         {{ projectStore.currentProject.item_counts.regions || 0 }}
-        <v-icon icon="mdi-poll" v-tooltip="'Charts'" class="ml-3"></v-icon>
+        <v-icon
+          icon="mdi-poll"
+          v-tooltip="'Charts'"
+          class="ml-3"
+          color="secondary-text"
+        ></v-icon>
         {{ projectStore.currentProject.item_counts.charts || 0 }}
-        <v-icon icon="mdi-earth" v-tooltip="'Analyses'" class="ml-3"></v-icon>
+        <v-icon
+          icon="mdi-earth"
+          v-tooltip="'Analyses'"
+          class="ml-3"
+          color="secondary-text"
+        ></v-icon>
         {{ projectStore.currentProject.item_counts.analyses || 0 }}
       </span>
       <v-menu
@@ -464,11 +479,15 @@ watch(
           </div>
           <v-btn
             v-else
-            variant="tonal"
+            color="background"
+            class="text-primary"
+            flat
             width="100%"
             @click="projectStore.projectConfigMode = 'new'"
-            >+ New</v-btn
           >
+            <v-icon icon="mdi-plus" color="primary" />
+            New
+          </v-btn>
           <v-btn
             v-if="selectedProject"
             class="options"
@@ -491,8 +510,8 @@ watch(
               "
               indeterminate
             ></v-progress-linear>
-            <div v-else class="py-3 px-6 d-flex">
-              <div style="width: 45%">
+            <v-row v-else class="py-3 px-6" :gap="4">
+              <v-col class="border-e">
                 <v-card-text>Project Datasets</v-card-text>
                 <div class="dataset-card">
                   <DatasetSelect
@@ -504,9 +523,8 @@ watch(
                     @onDelete="refreshProjectDatasets"
                   />
                 </div>
-              </div>
-              <v-divider class="mx-5" vertical></v-divider>
-              <div style="width: 45%">
+              </v-col>
+              <v-col>
                 <div class="d-flex">
                   <v-card-text>All Datasets</v-card-text>
                   <DatasetUpload
@@ -527,8 +545,8 @@ watch(
                     @onDelete="refreshProjectDatasets"
                   />
                 </div>
-              </div>
-            </div>
+              </v-col>
+            </v-row>
           </div>
           <div v-if="currentTab === 'users'" class="py-3 px-6">
             <AccessControl
@@ -574,7 +592,6 @@ watch(
 <style>
 .project-row {
   display: flex;
-  margin: 0px 8px;
   align-items: center;
   justify-content: space-between;
 }
@@ -626,5 +643,6 @@ watch(
   max-height: calc(100vh - 300px);
   overflow: auto !important;
   position: relative;
+  padding: 0 12px;
 }
 </style>

web/src/components/sidebars/AnalyticsPanel.vue

@@ -368,10 +368,10 @@ watch(
                   hide-details="auto"
                   class="my-1"
                 >
-                  <template #item="{ item, props: itemProps }">
+                  <template #item="{ internalItem, props: itemProps }">
                     <v-list-item
                       v-bind="itemProps"
-                      v-tooltip="item.title"
+                      v-tooltip="internalItem.title"
                       style="max-width: 400px"
                     />
                   </template>