From 65f28c322af691840f239d9442e1ca490013f80a Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Mon, 20 May 2024 14:59:03 +0200
Subject: [PATCH] Icon highlight and SvgButton (#10002)

Fixes #9904

Refactored our button: the common logic of "button being an SVG icon" moved to new `SvgButton` component. Simplified and unified CSS. Added hover highlight.

![image](https://github.com/enso-org/enso/assets/3919101/40aa628c-4181-487c-a0f7-b49e06d274b8)
---
 app/gui2/e2e/componentBrowser.spec.ts         |  4 +-
 app/gui2/src/assets/icons.svg                 |  4 +-
 app/gui2/src/components/CircularMenu.vue      | 49 +++++++----------
 app/gui2/src/components/ComponentBrowser.vue  |  8 +--
 app/gui2/src/components/ExtendedMenu.vue      | 54 +++++--------------
 .../src/components/GraphEditor/GraphNode.vue  |  2 +-
 app/gui2/src/components/NavBar.vue            |  2 +-
 app/gui2/src/components/RecordControl.vue     | 13 +++--
 app/gui2/src/components/SelectionMenu.vue     | 24 ++-------
 app/gui2/src/components/SmallPlusButton.vue   |  1 -
 app/gui2/src/components/SvgButton.vue         | 47 ++++++++++++++++
 app/gui2/src/components/SvgIcon.vue           | 21 ++------
 app/gui2/src/components/ToggleIcon.vue        | 22 +++++---
 .../src/components/VisualizationContainer.vue | 52 +++++-------------
 .../src/components/VisualizationSelector.vue  |  4 ++
 .../visualizations/GeoMapVisualization.vue    | 18 ++-----
 .../visualizations/HistogramVisualization.vue | 10 ++--
 .../ScatterplotVisualization.vue              | 15 +++---
 .../visualizations/WarningsVisualization.vue  | 17 +++---
 19 files changed, 160 insertions(+), 207 deletions(-)
 create mode 100644 app/gui2/src/components/SvgButton.vue

diff --git a/app/gui2/e2e/componentBrowser.spec.ts b/app/gui2/e2e/componentBrowser.spec.ts
index 33e9c4203bb6..a01ea2aced15 100644
--- a/app/gui2/e2e/componentBrowser.spec.ts
+++ b/app/gui2/e2e/componentBrowser.spec.ts
@@ -274,7 +274,7 @@ test('Component browser handling of overridden record-mode', async ({ page }) =>
 
   // Enable record mode for the node.
   await locate.graphNodeIcon(node).hover()
-  await expect(recordModeToggle).not.toHaveClass(/recording-overridden/)
+  await expect(recordModeToggle).toHaveClass(/toggledOff/)
   await recordModeToggle.click()
   // TODO[ao]: The simple move near top-left corner not always works i.e. not always
   //  `pointerleave` event is emitted. Investigated in https://github.com/enso-org/enso/issues/9478
@@ -283,7 +283,7 @@ test('Component browser handling of overridden record-mode', async ({ page }) =>
   await page.mouse.move(700, 1200, { steps: 20 })
   await expect(recordModeIndicator).toBeVisible()
   await locate.graphNodeIcon(node).hover()
-  await expect(recordModeToggle).toHaveClass(/recording-overridden/)
+  await expect(recordModeToggle).toHaveClass(/toggledOn/)
   // Ensure editing in the component browser doesn't display the override expression.
   await locate.graphNodeIcon(node).click({ modifiers: [CONTROL_KEY] })
   await expect(locate.componentBrowser(page)).toBeVisible()
diff --git a/app/gui2/src/assets/icons.svg b/app/gui2/src/assets/icons.svg
index 44593f53f0dc..969933b05e31 100644
--- a/app/gui2/src/assets/icons.svg
+++ b/app/gui2/src/assets/icons.svg
@@ -287,9 +287,7 @@
   </symbol>
 
   <symbol id="eye" viewBox="0 0 16 16" width="16" height="16" fill="none">
-    <g opacity="0.54">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C14 5.25 11.5 2.5 8 2.5C4.5 2.5 2 5.25 0 8C2 10.75 4.5 13.5 8 13.5C11.5 13.5 14 10.75 16 8ZM5.5 8C5.5 9.38071 6.61929 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C6.61929 5.5 5.5 6.61929 5.5 8Z" fill="currentColor"></path>
-    </g>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C14 5.25 11.5 2.5 8 2.5C4.5 2.5 2 5.25 0 8C2 10.75 4.5 13.5 8 13.5C11.5 13.5 14 10.75 16 8ZM5.5 8C5.5 9.38071 6.61929 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C6.61929 5.5 5.5 6.61929 5.5 8Z" fill="currentColor"></path>
   </symbol>
 
   <symbol id="find" viewBox="0 0 16 16" width="16" height="16" fill="none">
diff --git a/app/gui2/src/components/CircularMenu.vue b/app/gui2/src/components/CircularMenu.vue
index b6787f3b3cbf..170026586312 100644
--- a/app/gui2/src/components/CircularMenu.vue
+++ b/app/gui2/src/components/CircularMenu.vue
@@ -2,7 +2,7 @@
 import ColorRing from '@/components/ColorRing.vue'
 import type { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
 import SmallPlusButton from '@/components/SmallPlusButton.vue'
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgButton from '@/components/SvgButton.vue'
 import ToggleIcon from '@/components/ToggleIcon.vue'
 import { ref } from 'vue'
 
@@ -37,45 +37,44 @@ const showColorPicker = ref(false)
       :class="`${props.isFullMenuVisible ? 'full' : 'partial'}`"
     >
       <div v-if="!isFullMenuVisible" class="More" @pointerdown.stop="emit('openFullMenu')"></div>
-      <SvgIcon
+      <SvgButton
         v-if="isFullMenuVisible"
         name="comment"
-        class="icon-container button slot2"
+        class="slot2"
         :alt="`Edit comment`"
         @click.stop="emit('startEditingComment')"
       />
-      <SvgIcon
+      <SvgButton
         v-if="isFullMenuVisible"
         name="paint_palette"
-        class="icon-container button slot3"
+        class="slot3"
         :alt="`Choose color`"
         @click.stop="showColorPicker = true"
       />
-      <SvgIcon
+      <SvgButton
         v-if="isFullMenuVisible"
         name="trash2"
-        class="icon-container button slot4"
+        class="slot4"
         :alt="`Delete component`"
         @click.stop="emit('delete')"
       />
       <ToggleIcon
         icon="eye"
-        class="icon-container button slot5"
+        class="slot5"
         :alt="`${props.isVisualizationVisible ? 'Hide' : 'Show'} visualization`"
         :modelValue="props.isVisualizationVisible"
         @update:modelValue="emit('update:isVisualizationVisible', $event)"
       />
-      <SvgIcon
+      <SvgButton
         name="edit"
-        class="icon-container button slot6"
+        class="slot6"
         data-testid="edit-button"
         @click.stop="emit('startEditing')"
       />
       <ToggleIcon
         icon="record"
-        class="icon-container button slot7"
+        class="overrideRecordingButton slot7"
         data-testid="overrideRecordingButton"
-        :class="{ 'recording-overridden': props.isRecordingOverridden }"
         :alt="`${props.isRecordingOverridden ? 'Disable' : 'Enable'} recording`"
         :modelValue="props.isRecordingOverridden"
         @update:modelValue="emit('update:isRecordingOverridden', $event)"
@@ -180,27 +179,19 @@ const showColorPicker = ref(false)
   clip-path: var(--full-ring-path);
 }
 
-.icon-container {
-  display: inline-flex;
-  background: none;
-  padding: 0;
-  border: none;
-  opacity: 30%;
-  pointer-events: all;
-}
-
-.toggledOn {
-  opacity: unset;
-}
-
 .inactive {
   pointer-events: none;
   opacity: 10%;
 }
 
-.recording-overridden {
-  opacity: 100%;
-  color: red;
+.overrideRecordingButton {
+  &.toggledOn {
+    opacity: 100%;
+    color: red;
+  }
+  &.toggledOff {
+    opacity: unset;
+  }
 }
 
 /**
@@ -247,7 +238,7 @@ const showColorPicker = ref(false)
 
 .below-slot5 {
   position: absolute;
-  top: calc(var(--outer-diameter) - 32px);
+  top: calc(var(--outer-diameter) - 24px);
   pointer-events: all;
 }
 
diff --git a/app/gui2/src/components/ComponentBrowser.vue b/app/gui2/src/components/ComponentBrowser.vue
index 0e133280dd29..a10544f18e71 100644
--- a/app/gui2/src/components/ComponentBrowser.vue
+++ b/app/gui2/src/components/ComponentBrowser.vue
@@ -693,20 +693,16 @@ const handler = componentBrowserBindings.handler({
   gap: 12px;
   padding: 7px;
 
-  & svg {
+  & * {
     color: rgba(0, 0, 0, 0.18);
     transition: color 0.2s;
   }
   & .first-on-right {
     margin-left: auto;
   }
-  & > svg.toggledOn {
+  & > .toggledOn {
     color: rgba(0, 0, 0, 0.6);
   }
-
-  & > svg:not(.toggledOn):hover {
-    color: rgba(0, 0, 0, 0.3);
-  }
 }
 
 .bottom-panel {
diff --git a/app/gui2/src/components/ExtendedMenu.vue b/app/gui2/src/components/ExtendedMenu.vue
index 387bc030254a..c77182b76a7b 100644
--- a/app/gui2/src/components/ExtendedMenu.vue
+++ b/app/gui2/src/components/ExtendedMenu.vue
@@ -4,6 +4,7 @@ import SvgIcon from '@/components/SvgIcon.vue'
 import { injectInteractionHandler, type Interaction } from '@/providers/interactionHandler'
 import { targetIsOutside } from '@/util/autoBlur'
 import { ref } from 'vue'
+import SvgButton from './SvgButton.vue'
 
 const showCodeEditor = defineModel<boolean>('showCodeEditor', { required: true })
 const showDocumentationEditor = defineModel<boolean>('showDocumentationEditor', { required: true })
@@ -55,20 +56,19 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
       <div class="row">
         <div class="label">Zoom</div>
         <div class="zoomControl">
-          <div class="zoomButtonHighlight">
-            <SvgIcon :scale="12 / 16" name="minus" title="Decrease zoom" @click="emit('zoomOut')" />
-          </div>
+          <SvgButton
+            class="zoomButton"
+            name="minus"
+            title="Decrease zoom"
+            @click="emit('zoomOut')"
+          />
           <span
             class="zoomScaleLabel"
             v-text="props.zoomLevel ? props.zoomLevel.toFixed(0) + '%' : '?'"
           ></span>
-          <div class="zoomButtonHighlight">
-            <SvgIcon :scale="12 / 16" name="add" title="increase zoom" @click="emit('zoomIn')" />
-          </div>
+          <SvgButton class="zoomButton" name="add" title="Increase zoom" @click="emit('zoomIn')" />
           <div class="divider"></div>
-          <div class="showAllIconHighlight">
-            <SvgIcon name="show_all" class="showAllIcon" @click="emit('fitToAllClicked')" />
-          </div>
+          <SvgButton name="show_all" class="showAllIcon" @click="emit('fitToAllClicked')" />
         </div>
       </div>
       <div
@@ -126,6 +126,9 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
   &:hover {
     background-color: var(--color-menu-entry-hover-bg);
   }
+  &:active {
+    background-color: var(--color-menu-entry-active-bg);
+  }
   &.selected {
     background-color: var(--color-menu-entry-selected-bg);
   }
@@ -160,22 +163,6 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
   align-items: center;
 }
 
-.showAllIconHighlight {
-  display: flex;
-  justify-items: center;
-  align-items: center;
-  padding-left: 4px;
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin: -4px -4px;
-  border-radius: var(--radius-full);
-  transition: background-color 0.3s;
-  &:hover {
-    background-color: var(--color-menu-entry-hover-bg);
-  }
-}
-
 .zoomScaleLabel {
   width: 4em;
   text-align: center;
@@ -186,21 +173,8 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
   left: 8px;
 }
 
-.zoomButtonHighlight {
-  width: 16px;
-  height: 16px;
-  border-radius: var(--radius-full);
-  position: relative;
-  margin: 0px;
-  padding: 2px;
-  display: inline-block;
-  vertical-align: middle;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.zoomButtonHighlight:hover {
-  background-color: var(--color-menu-entry-hover-bg);
+.zoomButton {
+  --icon-transform: scale(12/16);
 }
 
 .dropdown-enter-active,
diff --git a/app/gui2/src/components/GraphEditor/GraphNode.vue b/app/gui2/src/components/GraphEditor/GraphNode.vue
index 1c77c6401d37..9b6434bf3828 100644
--- a/app/gui2/src/components/GraphEditor/GraphNode.vue
+++ b/app/gui2/src/components/GraphEditor/GraphNode.vue
@@ -280,7 +280,7 @@ const dragPointer = usePointer(
   // is not going to be a node drag.
   { pointerCapturedBy: 'target' },
 )
-const isDragged = computed(() => dragPointer.dragging && significantMove)
+const isDragged = computed(() => dragPointer.dragging && significantMove.value)
 
 const isRecordingOverridden = computed({
   get() {
diff --git a/app/gui2/src/components/NavBar.vue b/app/gui2/src/components/NavBar.vue
index e1d7c07bb960..d21329e84019 100644
--- a/app/gui2/src/components/NavBar.vue
+++ b/app/gui2/src/components/NavBar.vue
@@ -12,7 +12,7 @@ const emit = defineEmits<{ back: []; forward: []; breadcrumbClick: [index: numbe
 
 <template>
   <div class="NavBar">
-    <SvgIcon name="graph_editor" draggable="false" class="icon" />
+    <SvgIcon name="graph_editor" draggable="false" />
     <div class="breadcrumbs-controls">
       <SvgIcon
         name="arrow_left"
diff --git a/app/gui2/src/components/RecordControl.vue b/app/gui2/src/components/RecordControl.vue
index 81bf66d9a933..27e50e396b4e 100644
--- a/app/gui2/src/components/RecordControl.vue
+++ b/app/gui2/src/components/RecordControl.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgButton from '@/components/SvgButton.vue'
 import ToggleIcon from '@/components/ToggleIcon.vue'
 
 const props = defineProps<{ recordMode: boolean }>()
@@ -18,7 +18,7 @@ const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolea
       />
     </div>
     <div class="control right-end" @click.stop="() => emit('recordOnce')">
-      <SvgIcon alt="Record once" class="button" name="record_once" draggable="false" :scale="1.5" />
+      <SvgButton alt="Record once" class="button" name="record_once" draggable="false" />
     </div>
   </div>
 </template>
@@ -34,7 +34,7 @@ const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolea
 .control {
   background: var(--color-frame-bg);
   backdrop-filter: var(--blur-app-bg);
-  padding: 8px 8px;
+  padding: 4px 4px;
   width: 42px;
   cursor: pointer;
 }
@@ -43,7 +43,7 @@ const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolea
   border-radius: var(--radius-full) 0 0 var(--radius-full);
 
   .button {
-    margin: 0 4px 0 auto;
+    margin: 0 0 0 auto;
   }
 }
 
@@ -52,8 +52,11 @@ const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolea
 
   .button {
     position: relative;
-    top: -4px;
     margin: 0 auto 0 0;
+    width: 32px;
+    height: 24px;
+    --icon-transform: scale(1.5) translateY(calc(-4px / 1.5));
+    --icon-transform-origin: left top;
   }
 }
 
diff --git a/app/gui2/src/components/SelectionMenu.vue b/app/gui2/src/components/SelectionMenu.vue
index 8574652b8263..f54922604725 100644
--- a/app/gui2/src/components/SelectionMenu.vue
+++ b/app/gui2/src/components/SelectionMenu.vue
@@ -2,6 +2,7 @@
 import ColorPickerMenu from '@/components/ColorPickerMenu.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import ToggleIcon from '@/components/ToggleIcon.vue'
+import SvgButton from './SvgButton.vue'
 
 const showColorPicker = defineModel<boolean>('showColorPicker', { required: true })
 const _props = defineProps<{ selectedComponents: number }>()
@@ -16,31 +17,18 @@ const emit = defineEmits<{
     <span
       v-text="`${selectedComponents} component${selectedComponents === 1 ? '' : 's'} selected`"
     />
-    <SvgIcon
-      name="group"
-      draggable="false"
-      class="icon button"
-      alt="Group components"
-      @click.stop="emit('collapseNodes')"
-    />
+    <SvgButton name="group" alt="Group components" @click.stop="emit('collapseNodes')" />
     <ToggleIcon
       v-model="showColorPicker"
       :alt="`${showColorPicker ? 'Hide' : 'Show'} the component color chooser`"
       icon="paint_palette"
-      class="toggle button"
       :class="{
         // Any `pointerdown` event outside the color picker will close it. Ignore clicks that occur while the color
         // picker is open, so that it isn't toggled back open.
         disableInput: showColorPicker,
       }"
     />
-    <SvgIcon
-      name="trash"
-      draggable="false"
-      class="icon button"
-      alt="Delete components"
-      @click.stop="emit('removeNodes')"
-    />
+    <SvgButton name="trash" alt="Delete components" @click.stop="emit('removeNodes')" />
     <ColorPickerMenu v-if="showColorPicker" class="submenu" @close="showColorPicker = false" />
   </div>
 </template>
@@ -69,14 +57,10 @@ const emit = defineEmits<{
   backdrop-filter: var(--blur-app-bg);
 }
 
-.toggle {
+.toggledOff {
   opacity: 0.6;
 }
 
-.toggledOn {
-  opacity: unset;
-}
-
 .disableInput {
   pointer-events: none;
 }
diff --git a/app/gui2/src/components/SmallPlusButton.vue b/app/gui2/src/components/SmallPlusButton.vue
index bb5d99d9e3d9..b191eb6d50ba 100644
--- a/app/gui2/src/components/SmallPlusButton.vue
+++ b/app/gui2/src/components/SmallPlusButton.vue
@@ -40,6 +40,5 @@ function addNode() {
   margin: 8px;
   padding: 0;
   border: none;
-  opacity: 30%;
 }
 </style>
diff --git a/app/gui2/src/components/SvgButton.vue b/app/gui2/src/components/SvgButton.vue
new file mode 100644
index 000000000000..3d1a93144ad3
--- /dev/null
+++ b/app/gui2/src/components/SvgButton.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon.vue'
+import type { URLString } from '@/util/data/urlString'
+import type { Icon } from '@/util/iconName'
+
+const _props = defineProps<{
+  name: Icon | URLString
+  disabled?: boolean
+}>()
+</script>
+
+<template>
+  <button class="SvgButton button" :class="{ disabled }" :disabled="disabled ?? false">
+    <SvgIcon :name="name" draggable="false" />
+  </button>
+</template>
+
+<style scoped>
+.SvgButton {
+  border: none;
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  padding: 4px;
+  cursor: pointer;
+  margin: -4px -4px;
+  border-radius: var(--radius-full);
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: var(--color-menu-entry-hover-bg);
+  }
+
+  & > svg {
+    transform: var(--icon-transform);
+    transform-origin: var(--icon-transform-origin);
+  }
+
+  &.disabled {
+    opacity: 0.3;
+
+    &:hover {
+      background-color: unset;
+    }
+  }
+}
+</style>
diff --git a/app/gui2/src/components/SvgIcon.vue b/app/gui2/src/components/SvgIcon.vue
index f432105c53e7..d1254400aab6 100644
--- a/app/gui2/src/components/SvgIcon.vue
+++ b/app/gui2/src/components/SvgIcon.vue
@@ -10,31 +10,20 @@ import type { Icon } from '@/util/iconName'
 
 const props = defineProps<{
   name: Icon | URLString
-  width?: number
-  height?: number
-  scale?: number
 }>()
 </script>
 
 <template>
-  <svg
-    :style="{
-      '--width': `${props.width ?? 16}px`,
-      '--height': `${props.height ?? 16}px`,
-      '--scale': props.scale ?? 1,
-    }"
-  >
+  <svg>
     <use :href="props.name.includes(':') ? props.name : `${icons}#${props.name}`"></use>
   </svg>
 </template>
 
 <style scoped>
 svg {
-  width: var(--width);
-  min-width: var(--width);
-  height: var(--height);
-  min-height: var(--height);
-  transform: scale(var(--scale));
-  transform-origin: top left;
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  min-height: 16px;
 }
 </style>
diff --git a/app/gui2/src/components/ToggleIcon.vue b/app/gui2/src/components/ToggleIcon.vue
index 2cd0f410907a..7dc441bca128 100644
--- a/app/gui2/src/components/ToggleIcon.vue
+++ b/app/gui2/src/components/ToggleIcon.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 /**
- * A toggleable `SvgIcon`.
+ * A toggleable `SvgButton`.
  *
- * Clicking the icon will add `toggledOn` css class on its root `svg` element. The component
- * does not have any style by itself, so the `toggledOn` style should be specified in the usage
- * place.
+ * Clicking the icon will switch between `toggledOn` and `toggledOff` css classes on its root `svg`
+ * element.
  */
 
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgButton from '@/components/SvgButton.vue'
 import type { Icon } from '@/util/iconName'
 
 const props = withDefaults(defineProps<{ icon: Icon; modelValue?: boolean }>(), {
@@ -19,9 +18,16 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <SvgIcon
-    :name="props.icon"
-    :class="{ toggledOn: modelValue }"
+  <SvgButton
+    :name="icon"
+    class="ToggleIcon"
+    :class="{ toggledOn: modelValue, toggledOff: !modelValue }"
     @click.stop="emit('update:modelValue', !modelValue)"
   />
 </template>
+
+<style scoped>
+.toggledOff {
+  opacity: 0.4;
+}
+</style>
diff --git a/app/gui2/src/components/VisualizationContainer.vue b/app/gui2/src/components/VisualizationContainer.vue
index 3d3f2828bc6b..c2a036e0ce60 100644
--- a/app/gui2/src/components/VisualizationContainer.vue
+++ b/app/gui2/src/components/VisualizationContainer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ResizeHandles from '@/components/ResizeHandles.vue'
 import SmallPlusButton from '@/components/SmallPlusButton.vue'
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgButton from '@/components/SvgButton.vue'
 import VisualizationSelector from '@/components/VisualizationSelector.vue'
 import { isTriggeredByKeyboard, useResizeObserver } from '@/composables/events'
 import { useVisualizationConfig } from '@/providers/visualizationConfig'
@@ -139,37 +139,25 @@ const nodeShortType = computed(() =>
             hidden: config.fullscreen,
           }"
         >
-          <button class="image-button active" @click.stop="config.hide()">
-            <SvgIcon class="icon" name="eye" alt="Hide visualization" />
-          </button>
+          <SvgButton name="eye" alt="Hide visualization" @click.stop="config.hide()" />
         </div>
         <div class="toolbar">
-          <button
-            class="image-button active"
+          <SvgButton
+            :name="config.fullscreen ? 'exit_fullscreen' : 'fullscreen'"
+            :alt="config.fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'"
             @click.stop.prevent="(config.fullscreen = !config.fullscreen), blur($event)"
-          >
-            <SvgIcon
-              class="icon"
-              :name="config.fullscreen ? 'exit_fullscreen' : 'fullscreen'"
-              :alt="config.fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'"
-            />
-          </button>
+          />
           <div class="icon-container">
-            <button
-              class="image-button active"
+            <SvgButton
+              :name="config.icon ?? 'columns_increasing'"
+              :alt="
+                isSelectorVisible ? 'Hide visualization selector' : 'Show visualization selector'
+              "
               @click.stop.prevent="
                 (!isSelectorVisible || isTriggeredByKeyboard($event)) &&
                   (isSelectorVisible = !isSelectorVisible)
               "
-            >
-              <SvgIcon
-                class="icon"
-                :name="config.icon ?? 'columns_increasing'"
-                :alt="
-                  isSelectorVisible ? 'Hide visualization selector' : 'Show visualization selector'
-                "
-              />
-            </button>
+            />
             <Suspense>
               <VisualizationSelector
                 v-if="isSelectorVisible"
@@ -296,6 +284,7 @@ const nodeShortType = computed(() =>
     left: 0;
     width: 100%;
     height: 100%;
+    z-index: -1;
     border-radius: var(--radius-full);
     background: var(--color-app-bg);
     backdrop-filter: var(--blur-app-bg);
@@ -328,19 +317,4 @@ const nodeShortType = computed(() =>
 .VisualizationContainer :deep(> .toolbars > .toolbar > *) {
   position: relative;
 }
-
-:deep(.image-button) {
-  background: none;
-  padding: 0;
-  border: none;
-  opacity: 30%;
-}
-
-:deep(.image-button.active) {
-  opacity: unset;
-}
-
-:deep(.image-button > *) {
-  vertical-align: top;
-}
 </style>
diff --git a/app/gui2/src/components/VisualizationSelector.vue b/app/gui2/src/components/VisualizationSelector.vue
index 383b91cdbaf5..c5b7958ee319 100644
--- a/app/gui2/src/components/VisualizationSelector.vue
+++ b/app/gui2/src/components/VisualizationSelector.vue
@@ -109,5 +109,9 @@ button {
   &:hover {
     background: var(--color-menu-entry-hover-bg);
   }
+
+  &:active {
+    background-color: var(--color-menu-entry-active-bg);
+  }
 }
 </style>
diff --git a/app/gui2/src/components/visualizations/GeoMapVisualization.vue b/app/gui2/src/components/visualizations/GeoMapVisualization.vue
index ce3965ad0b64..876c45eacedd 100644
--- a/app/gui2/src/components/visualizations/GeoMapVisualization.vue
+++ b/app/gui2/src/components/visualizations/GeoMapVisualization.vue
@@ -88,7 +88,7 @@ declare var deck: typeof import('deck.gl')
 
 <script setup lang="ts">
 /// <reference types="@danmarshall/deckgl-typings" />
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgButton from '@/components/SvgButton.vue'
 import { VisualizationContainer } from '@/util/visualizationBuiltins'
 import type { Deck } from 'deck.gl'
 import { computed, onUnmounted, ref, watchPostEffect } from 'vue'
@@ -399,18 +399,10 @@ function pushPoints(newPoints: Location[]) {
 <template>
   <VisualizationContainer :overflow="true">
     <template #toolbar>
-      <button class="image-button">
-        <SvgIcon name="find" />
-      </button>
-      <button class="image-button">
-        <SvgIcon name="path2" />
-      </button>
-      <button class="image-button">
-        <SvgIcon name="geo_map_distance" />
-      </button>
-      <button class="image-button">
-        <SvgIcon name="geo_map_pin" />
-      </button>
+      <SvgButton name="find" />
+      <SvgButton name="path2" />
+      <SvgButton name="geo_map_distance" />
+      <SvgButton name="geo_map_pin" />
     </template>
     <div ref="mapNode" class="GeoMapVisualization" @pointerdown.stop @wheel.stop></div>
   </VisualizationContainer>
diff --git a/app/gui2/src/components/visualizations/HistogramVisualization.vue b/app/gui2/src/components/visualizations/HistogramVisualization.vue
index 30aa0e4824dd..b2139e0adcd9 100644
--- a/app/gui2/src/components/visualizations/HistogramVisualization.vue
+++ b/app/gui2/src/components/visualizations/HistogramVisualization.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgButton from '@/components/SvgButton.vue'
 import { useEvent } from '@/composables/events'
 import { getTextWidthBySizeAndFamily } from '@/util/measurement'
 import { defineKeybinds } from '@/util/shortcuts'
@@ -573,12 +573,8 @@ useEvent(document, 'scroll', endBrushing)
 <template>
   <VisualizationContainer :belowToolbar="true">
     <template #toolbar>
-      <button class="image-button active">
-        <SvgIcon name="show_all" alt="Fit all" @click="zoomToSelected(false)" />
-      </button>
-      <button class="image-button" :class="{ active: brushExtent != null }">
-        <SvgIcon name="find" alt="Zoom to selected" @click="zoomToSelected(true)" />
-      </button>
+      <SvgButton name="show_all" alt="Fit all" @click="zoomToSelected(false)" />
+      <SvgButton name="find" alt="Zoom to selected" @click="zoomToSelected(true)" />
     </template>
     <div ref="containerNode" class="HistogramVisualization" @pointerdown.stop>
       <svg :width="width" :height="height">
diff --git a/app/gui2/src/components/visualizations/ScatterplotVisualization.vue b/app/gui2/src/components/visualizations/ScatterplotVisualization.vue
index 5dcf1832bc23..ab55eaba1d03 100644
--- a/app/gui2/src/components/visualizations/ScatterplotVisualization.vue
+++ b/app/gui2/src/components/visualizations/ScatterplotVisualization.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgButton from '@/components/SvgButton.vue'
 import { useEvent } from '@/composables/events'
 import { useVisualizationConfig } from '@/providers/visualizationConfig'
 import { Ast } from '@/util/ast'
@@ -539,12 +539,13 @@ useEvent(document, 'keydown', bindings.handler({ zoomToSelected: () => zoomToSel
 <template>
   <VisualizationContainer :belowToolbar="true">
     <template #toolbar>
-      <button class="image-button active">
-        <SvgIcon name="show_all" alt="Fit all" @click.stop="zoomToSelected(false)" />
-      </button>
-      <button class="image-button" :class="{ active: brushExtent != null }">
-        <SvgIcon name="find" alt="Zoom to selected" @click.stop="zoomToSelected" />
-      </button>
+      <SvgButton name="show_all" alt="Fit all" @click.stop="zoomToSelected(false)" />
+      <SvgButton
+        name="find"
+        alt="Zoom to selected"
+        :disabled="brushExtent == null"
+        @click.stop="zoomToSelected"
+      />
     </template>
     <div ref="containerNode" class="ScatterplotVisualization" @pointerdown.stop>
       <svg :width="width" :height="height">
diff --git a/app/gui2/src/components/visualizations/WarningsVisualization.vue b/app/gui2/src/components/visualizations/WarningsVisualization.vue
index b048ea649123..8d428d41bc73 100644
--- a/app/gui2/src/components/visualizations/WarningsVisualization.vue
+++ b/app/gui2/src/components/visualizations/WarningsVisualization.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgButton from '@/components/SvgButton.vue'
 import { Ast } from '@/util/ast'
 import { Pattern } from '@/util/ast/match'
 import { useVisualizationConfig, VisualizationContainer } from '@/util/visualizationBuiltins'
@@ -29,14 +29,13 @@ const config = useVisualizationConfig()
 <template>
   <VisualizationContainer :belowToolbar="true">
     <template #toolbar>
-      <button class="image-button" :class="{ active: props.data.length !== 0 }">
-        <SvgIcon
-          name="not_exclamation"
-          data-testid="remove-warnings-button"
-          alt="Remove warnings"
-          @click="config.createNodes({ content: removeWarnings, commit: true })"
-        />
-      </button>
+      <SvgButton
+        name="not_exclamation"
+        data-testid="remove-warnings-button"
+        alt="Remove warnings"
+        :disabled="props.data.length === 0"
+        @click="config.createNodes({ content: removeWarnings, commit: true })"
+      />
     </template>
     <template #default>
       <div class="WarningsVisualization">