Update selection info

packages/frontend-2/components/viewer/models/versions/Versions.vue

@@ -6,14 +6,16 @@
   />
   <ViewerLayoutSidePanel v-else>
     <template #title>
-      <FormButton
-        :icon-left="ChevronLeftIcon"
-        color="subtle"
-        class="-ml-3"
-        @click="handleClose"
-      >
-        Exit versions
-      </FormButton>
+      <div class="flex items-center gap-x-1">
+        <FormButton
+          :icon-left="ChevronLeftIcon"
+          color="subtle"
+          hide-text
+          size="sm"
+          @click="handleClose"
+        />
+        <span>Versions</span>
+      </div>
     </template>
 
     <div class="flex flex-col h-full">

packages/frontend-2/components/viewer/selection/Object.vue

@@ -8,17 +8,15 @@
   >
     <div class="mb-1 flex items-center">
       <button
-        class="flex h-full w-full pl-1 pr-2 py-0.5 items-center gap-1 rounded-[2px] bg-foundation-2"
+        class="flex h-full w-full pl-1 pr-2 py-1 items-center gap-1 rounded-[2px] bg-foundation-2"
         @click="unfold = !unfold"
         @mouseenter="highlightObject"
         @focusin="highlightObject"
         @mouseleave="unhighlightObject"
         @focusout="unhighlightObject"
       >
-        <ChevronDownIcon
-          :class="`h-3 w-3 transition ${headerClasses} ${
-            !unfold ? '-rotate-90' : 'rotate-0'
-          }`"
+        <IconTriangle
+          :class="`h-3 w-3 ${headerClasses} ${unfold ? 'rotate-90' : ''}`"
         />
         <div :class="`truncate text-body-3xs font-medium ${headerClasses}`">
           {{ title || headerAndSubheader.header }}
@@ -30,7 +28,7 @@
         </div>
       </button>
     </div>
-    <div v-if="unfold" class="space-y-1 px-0 py-1">
+    <div v-if="unfold" class="space-y-1 pl-0 py-1 pr-2">
       <!-- key value pair display -->
       <div
         v-for="(kvp, index) in [
@@ -52,7 +50,7 @@
             {{ kvp.key }}
           </div>
           <div
-            class="group col-span-2 pl-1 truncate text-body-3xs flex gap-1 items-center"
+            class="group col-span-2 pl-1 truncate text-body-3xs flex gap-1 items-center text-foreground"
             :title="(kvp.value as string)"
           >
             <div class="flex gap-1 items-center w-full">
@@ -118,7 +116,9 @@
           >
             {{ kvp.key }}
           </div>
-          <div class="col-span-2 flex w-full min-w-0 truncate text-xs pl-1">
+          <div
+            class="col-span-2 flex w-full min-w-0 truncate text-xs pl-1 text-foreground"
+          >
             <div class="flex-grow truncate">{{ kvp.innerType }} array</div>
             <div class="text-foreground-2">({{ kvp.arrayLength }})</div>
           </div>
@@ -133,7 +133,7 @@
             {{ kvp.key }}
           </div>
           <div
-            class="col-span-2 flex w-full min-w-0 truncate text-xs"
+            class="col-span-2 flex w-full min-w-0 truncate text-xs text-foreground"
             :title="(kvp.value as string)"
           >
             <div class="flex-grow truncate">{{ kvp.arrayPreview }}</div>
@@ -148,7 +148,6 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ChevronDownIcon } from '@heroicons/vue/24/solid'
 import { ClipboardDocumentIcon } from '@heroicons/vue/24/outline'
 import type { SpeckleObject } from '~~/lib/viewer/helpers/sceneExplorer'
 import { getHeaderAndSubheaderForSpeckleObject } from '~~/lib/object-sidebar/helpers'

packages/frontend-2/components/viewer/selection/Sidebar.vue

@@ -46,7 +46,7 @@
         </div>
       </template>
 
-      <div class="space-y-2">
+      <div class="space-y-1">
         <ViewerSelectionObject
           v-for="object in objectsLimited"
           :key="(object.id as string)"