From 7eea29ee1fa6e832add260fed44dc7902ccea932 Mon Sep 17 00:00:00 2001
From: Benjamin Ottensten <benjamin@speckle.systems>
Date: Mon, 11 Mar 2024 16:06:56 +0100
Subject: [PATCH] Update Grid/List view toggle component to make the active
 item clearer (#2108)

* Make the active item clearer

* Add a tippy to each toggle button
---
 .../components/project/page/LatestItems.vue   |  2 +-
 .../project/page/discussions/Header.vue       |  6 +-----
 .../project/page/latest-items/Models.vue      |  5 +----
 .../components/project/page/models/Header.vue |  6 +-----
 .../src/components/layout/GridListToggle.vue  | 19 ++++++++++++-------
 5 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/packages/frontend-2/components/project/page/LatestItems.vue b/packages/frontend-2/components/project/page/LatestItems.vue
index 8dc1f0a5a..105ca21f7 100644
--- a/packages/frontend-2/components/project/page/LatestItems.vue
+++ b/packages/frontend-2/components/project/page/LatestItems.vue
@@ -25,7 +25,7 @@
       <slot v-if="!hideFilters" name="filters">
         <div class="flex space-x-4 items-center grow justify-end flex-wrap">
           <slot name="filters" />
-          <LayoutGridListToggle v-model="gridOrList" v-tippy="'Swap Grid/Card View'" />
+          <LayoutGridListToggle v-model="gridOrList" />
         </div>
       </slot>
     </div>
diff --git a/packages/frontend-2/components/project/page/discussions/Header.vue b/packages/frontend-2/components/project/page/discussions/Header.vue
index ed1bf441a..6f6a4c168 100644
--- a/packages/frontend-2/components/project/page/discussions/Header.vue
+++ b/packages/frontend-2/components/project/page/discussions/Header.vue
@@ -9,11 +9,7 @@
           :value="true"
           label="Include resolved"
         />
-        <LayoutGridListToggle
-          v-model="finalGridOrList"
-          v-tippy="'Swap Grid/Card View'"
-          class="shrink-0"
-        />
+        <LayoutGridListToggle v-model="finalGridOrList" class="shrink-0" />
       </div>
     </div>
   </div>
diff --git a/packages/frontend-2/components/project/page/latest-items/Models.vue b/packages/frontend-2/components/project/page/latest-items/Models.vue
index 525580d98..a76351571 100644
--- a/packages/frontend-2/components/project/page/latest-items/Models.vue
+++ b/packages/frontend-2/components/project/page/latest-items/Models.vue
@@ -49,10 +49,7 @@
               @change="($event) => updateSearchImmediately($event.value)"
               @update:model-value="updateDebouncedSearch"
             ></FormTextInput>
-            <LayoutGridListToggle
-              v-model="gridOrList"
-              v-tippy="'Swap Grid/Card View'"
-            />
+            <LayoutGridListToggle v-model="gridOrList" />
           </div>
           <div class="flex items-center space-x-2">
             <FormButton
diff --git a/packages/frontend-2/components/project/page/models/Header.vue b/packages/frontend-2/components/project/page/models/Header.vue
index 971cc5685..cc5409b35 100644
--- a/packages/frontend-2/components/project/page/models/Header.vue
+++ b/packages/frontend-2/components/project/page/models/Header.vue
@@ -63,11 +63,7 @@
               clearable
               fixed-height
             />
-            <LayoutGridListToggle
-              v-model="finalGridOrList"
-              v-tippy="'Swap Grid/Card View'"
-              class="shrink-0"
-            />
+            <LayoutGridListToggle v-model="finalGridOrList" class="shrink-0" />
           </div>
           <FormButton
             color="secondary"
diff --git a/packages/ui-components/src/components/layout/GridListToggle.vue b/packages/ui-components/src/components/layout/GridListToggle.vue
index a00826195..1c9f40c11 100644
--- a/packages/ui-components/src/components/layout/GridListToggle.vue
+++ b/packages/ui-components/src/components/layout/GridListToggle.vue
@@ -1,24 +1,29 @@
 <template>
   <button
-    class="max-w-max transition flex justify-center items-center gap-2 outline-none select-none h-8 text-foreground border-2 bg-foundation border-foundation-2 rounded-md hover:ring-2 active:scale-[0.97] grow"
+    class="max-w-max transition flex justify-center items-center gap-2 outline-none select-none h-8 text-foreground border-2 border-primary-muted dark:border-foundation bg-primary-muted rounded-md active:scale-[0.97] grow"
     @click="onClick"
   >
-    <div class="relative flex bg-foundation rounded-md">
+    <div class="relative flex bg-primary-muted rounded-md">
       <div
-        class="absolute -top-[2px] -left-[2px] transition"
+        class="absolute transition"
         :class="{
           'translate-x-7': value !== GridListToggleValue.Grid
         }"
       >
         <div
-          :class="value !== GridListToggleValue.Grid ? 'rounded-r-md' : 'rounded-l-md'"
-          class="w-8 h-8 bg-primary-muted shadow-inner transition"
+          class="w-7 h-7 bg-foundation dark:bg-foundation-2 transition rounded shadow"
         />
       </div>
-      <div class="relative z-10 flex gap-1 items-center p-1 rounded-l">
+      <div
+        v-tippy="'Grid View'"
+        class="relative z-10 flex gap-1 items-center p-1 rounded-l"
+      >
         <Squares2X2Icon class="h-5 w-5" />
       </div>
-      <div class="relative z-10 flex gap-1 items-center p-1 rounded-r">
+      <div
+        v-tippy="'List View'"
+        class="relative z-10 flex gap-1 items-center p-1 rounded-r"
+      >
         <Bars3Icon class="h-5 w-5" />
       </div>
     </div>