Minus checkbox

packages/frontend-2/components/viewer/filters/filter/Header.vue

@@ -43,6 +43,7 @@
           size="sm"
           :icon-right="Ellipsis"
           class="!text-foreground"
+          :class="showActionsMenu ? '!bg-highlight-2' : ''"
           @click="showActionsMenu = !showActionsMenu"
         ></FormButton>
       </LayoutMenu>

packages/frontend-2/components/viewer/filters/filter/string/Checkboxes.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex w-full flex-row gap-1 justify-between">
+    <div class="flex justify-between items-center pr-1">
       <ViewerFiltersFilterStringSelectAll
         :selected-count="selectedCount"
         :total-count="filteredValues.length"
@@ -8,28 +8,26 @@
       />
 
       <!-- Sorting Controls -->
-      <div class="px-1 mb-2">
-        <LayoutMenu
-          v-model:open="showSortMenu"
-          :items="sortMenuItems"
-          show-ticks="right"
-          :menu-position="HorizontalDirection.Left"
-          :custom-menu-items-classes="['!text-body-2xs', '!w-36']"
-          @chosen="onSortOptionChosen"
-        >
-          <FormButton
-            size="sm"
-            color="subtle"
-            hide-text
-            :icon-right="ArrowUpDown"
-            :class="[
-              'text-xs transition-colors',
-              showSortMenu ? '!bg-highlight-2 !text-foreground' : 'text-foreground-2'
-            ]"
-            @click="showSortMenu = !showSortMenu"
-          />
-        </LayoutMenu>
-      </div>
+      <LayoutMenu
+        v-model:open="showSortMenu"
+        :items="sortMenuItems"
+        show-ticks="right"
+        :menu-position="HorizontalDirection.Left"
+        :custom-menu-items-classes="['!text-body-2xs', '!w-36']"
+        @chosen="onSortOptionChosen"
+      >
+        <FormButton
+          size="sm"
+          color="subtle"
+          hide-text
+          :icon-right="ArrowUpDown"
+          :class="[
+            'text-xs transition-colors hover:text-foreground',
+            showSortMenu ? '!bg-highlight-2 !text-foreground' : 'text-foreground-2'
+          ]"
+          @click="showSortMenu = !showSortMenu"
+        />
+      </LayoutMenu>
     </div>
     <div
       v-bind="containerProps"

packages/frontend-2/components/viewer/filters/filter/string/SelectAll.vue

@@ -1,21 +1,23 @@
 <!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
 <!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
 <template>
-  <div class="px-1">
+  <div class="px-1 w-full">
     <div
-      class="flex text-body-2xs items-center px-2 py-1.5 w-full hover:bg-highlight-1 rounded cursor-pointer"
+      class="flex text-body-2xs items-center px-2 py-0.5 w-full hover:bg-highlight-1 rounded cursor-pointer"
       @click="handleSelectAllChange"
     >
       <FormCheckbox
         :name="`select-all-${selectedCount}-${totalCount}`"
         :model-value="areAllValuesSelected"
         :indeterminate="areSomeValuesSelected"
-        class="mr-2.5 pointer-events-none"
+        class="pointer-events-none -mt-1"
         hide-label
       />
-      <span class="text-foreground ml-px">Select all</span>
-      <div class="text-foreground-2 text-body-3xs ml-1">
-        ({{ selectedCount }} of {{ totalCount }})
+      <div class="flex items-center">
+        <div class="text-foreground ml-1">Select all</div>
+        <div class="text-foreground-2 text-body-3xs ml-1">
+          ({{ selectedCount }} of {{ totalCount }})
+        </div>
       </div>
     </div>
   </div>

packages/ui-components/src/components/form/Checkbox.vue

@@ -4,10 +4,10 @@
     :class="labelPosition === 'left' ? 'flex-row-reverse items-center' : 'items-start'"
   >
     <div
-      class="flex h-6 items-center"
+      class="flex items-center"
       :class="labelPosition === 'left' ? 'w-1/2 justify-end mr-2' : ''"
     >
-      <div class="relative">
+      <div class="relative w-3.5 h-3.5">
         <input
           :id="finalId"
           :checked="coreChecked"
@@ -23,22 +23,9 @@
         <!-- Indeterminate state overlay -->
         <div
           v-if="indeterminate"
-          class="absolute inset-0 flex items-center justify-center pointer-events-none"
+          class="absolute w-full h-full top-0 left-0 flex items-center justify-center pointer-events-none"
         >
-          <svg
-            class="h-3 w-3 text-foreground"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M20 12H4"
-            />
-          </svg>
+          <Minus class="w-3 h-3 text-foreground" />
         </div>
       </div>
     </div>
@@ -65,6 +52,7 @@ import type { PropType } from 'vue'
 import type { Optional } from '@speckle/shared'
 import { nanoid } from 'nanoid'
 import type { LabelPosition } from '~~/src/composables/form/input'
+import { Minus } from 'lucide-vue-next'
 
 /**
  * Troubleshooting: