Fix style issues, trying to remove code where possible

Author: brianhelba

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

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,8 +239,8 @@ watch(
 </script>
 
 <template>
-  <div>
-    <div class="project-row">
+  <div class="mx-2">
+    <div class="project-row my-5">
       <v-select
         placeholder="Select a Project"
         no-data-text="No available projects."
@@ -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: 20px 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/DatasetsPanel.vue

@@ -46,7 +46,6 @@ function toggleSelected(items: Layer[]) {
         multiple
         flat
         variant="accordion"
-        elevation="0"
         bg-color="transparent"
         @update:model-value="expandDataset"
       >
@@ -59,7 +58,7 @@ function toggleSelected(items: Layer[]) {
             <div
               style="display: flex; justify-content: space-between; width: 100%"
             >
-              <div class="item-title" style="margin-left: 12px">
+              <div class="item-title flex-grow-1">
                 <div>
                   <div
                     v-if="
@@ -93,36 +92,35 @@ function toggleSelected(items: Layer[]) {
                   </div>
                   {{ dataset.name }}
                 </div>
-                <div
-                  style="min-width: 75px; text-align: right"
-                  v-if="dataset.layers"
-                >
+                <div v-if="dataset.layers" class="text-no-wrap flex-shrink-0">
                   <v-icon
                     icon="mdi-layers-outline"
                     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>
                 </div>
               </div>
               <DetailView :details="{ ...dataset, type: 'dataset' }" />
             </div>
           </v-expansion-panel-title>
           <v-expansion-panel-text class="pb-2">
-            <div>
+            <div class="d-flex flex-wrap ga-1 ml-6 mb-1">
               <v-chip
                 v-for="tag in dataset.tags"
                 :text="tag"
                 variant="outlined"
                 size="small"
-                class="ml-3 mb-2"
+                color="grey"
               />
             </div>
             <div v-for="layer in dataset.layers" class="item-title">

web/src/components/sidebars/SideBars.vue

@@ -297,19 +297,7 @@ function togglePanelVisibility(id: string) {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  max-height: calc(100% - 175px);
-}
-
-.right .panel-set {
-  max-height: calc(100% - 100px);
-}
-
-.v-icon {
-  color: rgb(var(--v-theme-secondary-text)) !important;
-}
-
-.v-btn.bg-primary .v-icon {
-  color: rgb(var(--v-theme-button-text)) !important;
+  min-height: 0;
 }
 
 .v-text-field {