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

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>

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>

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

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"

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>