Merge branch 'feature/initial-viewer-ui-updates' of github.com:specklesystems/speckle-server into feature/initial-viewer-ui-updates

packages/frontend-2/components/viewer/compare-changes/Panel.vue

@@ -1,9 +1,18 @@
 <template>
   <ViewerLayoutSidePanel>
     <template #title>
-      <FormButton color="subtle" text :icon-left="ChevronLeftIcon" @click="handleBack">
+      <div class="flex items-center gap-1">
+        <FormButton
+          color="subtle"
+          :icon-left="ChevronLeftIcon"
+          hide-text
+          size="sm"
+          @click="handleBack"
+        >
+          Go back
+        </FormButton>
         Go back
-      </FormButton>
+      </div>
     </template>
     <div class="flex flex-col text-sm p-2">
       <div
@@ -33,6 +42,7 @@
         <FormRange
           v-model="localDiffTime"
           label="Diff time"
+          hide-header
           :min="0"
           :max="1"
           :step="0.01"

packages/frontend-2/components/viewer/models/Actions.vue

@@ -1,24 +1,22 @@
 <template>
   <div class="flex pr-1">
     <div v-tippy="'Versions'" class="flex">
-      <FormButton
-        color="subtle"
-        :icon-left="IconVersions"
-        hide-text
+      <button
+        class="group-hover:opacity-100 hover:bg-highlight-3 rounded-md h-6 w-6 flex items-center justify-center shrink-0"
         @click="$emit('showVersions')"
       >
-        Versions
-      </FormButton>
+        <IconVersions class="w-4 h-4" />
+        <span class="sr-only">Versions</span>
+      </button>
     </div>
     <div v-tippy="'Add model'" class="flex">
-      <FormButton
-        color="subtle"
-        hide-text
-        :icon-left="IconPlus"
+      <button
+        class="group-hover:opacity-100 hover:bg-highlight-3 rounded-md h-6 w-6 flex items-center justify-center shrink-0"
         @click="$emit('addModel')"
       >
-        Add model
-      </FormButton>
+        <IconPlus class="w-4 h-4" />
+        <span class="sr-only">Add model</span>
+      </button>
     </div>
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <div class="flex items-center justify-between">
+    <div v-if="!hideHeader" class="flex items-center justify-between">
       <label
         :for="name"
         class="block text-body-2xs"
@@ -50,6 +50,7 @@ const props = defineProps<{
   name: string
   label: string
   disabled?: boolean
+  hideHeader?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])