From 48f23a1f98e5a0cd6204ea05506da8f71529a821 Mon Sep 17 00:00:00 2001
From: AdRiley <riley.ad@gmail.com>
Date: Tue, 4 Mar 2025 18:10:46 +0200
Subject: [PATCH] Make side bar icons match between dashboard and graph editor
 (#12410)

* Make side bar icons match between dashboard and graph editor

* Code review feedback

* Fix

* corepack pnpm run ci:prettier --write
---
 app/gui/src/project-view/assets/icons.svg     | 20 ++++++++++++++++---
 .../src/project-view/components/DockPanel.vue | 16 +++++++--------
 app/gui/src/project-view/stores/rightDock.ts  |  2 +-
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/app/gui/src/project-view/assets/icons.svg b/app/gui/src/project-view/assets/icons.svg
index 420753256b9a..dbc67b426bde 100644
--- a/app/gui/src/project-view/assets/icons.svg
+++ b/app/gui/src/project-view/assets/icons.svg
@@ -98,7 +98,14 @@
   </symbol>
 
   <symbol id="bottom_panel" viewBox="0 0 16 16" width="16" height="16" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.66667C2 2.29848 2.29848 2 2.66667 2H13.3333C13.7015 2 14 2.29848 14 2.66667V13.3333C14 13.7015 13.7015 14 13.3333 14H2.66667C2.29848 14 2 13.7015 2 13.3333V2.66667ZM5.33333 10C4.96514 10 4.66667 10.2985 4.66667 10.6667C4.66667 11.0349 4.96514 11.3333 5.33333 11.3333H10.6667C11.0349 11.3333 11.3333 11.0349 11.3333 10.6667C11.3333 10.2985 11.0349 10 10.6667 10H5.33333Z" fill="currentColor"></path>
+    <g clip-path="url(#clip0_961_899)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M16 5.11884V10.8812C16 11.5967 16 12.1872 15.9607 12.6683C15.9199 13.1679 15.8323 13.6272 15.6125 14.0587C15.2716 14.7276 14.7277 15.2716 14.0586 15.6124C13.6272 15.8323 13.1679 15.9199 12.6683 15.9607C12.1872 16 11.5967 16 10.8812 16H5.11884C4.40329 16 3.8128 16 3.33173 15.9607C2.83209 15.9199 2.3728 15.8323 1.94133 15.6124C1.27236 15.2716 0.728445 14.7276 0.387556 14.0587C0.167734 13.6272 0.0800896 13.1679 0.0392896 12.6683C6.78831e-07 12.1872 -1.19209e-07 11.5967 -1.19209e-07 10.8812V5.11883C-1.19209e-07 4.40331 6.78831e-07 3.81277 0.0392896 3.33172C0.0800896 2.83207 0.167734 2.37277 0.387556 1.94137C0.728445 1.27235 1.27236 0.728417 1.94133 0.387533C2.3728 0.167719 2.83209 0.0801068 3.33173 0.0392844C3.8128 -1.96927e-05 4.40329 -1.06242e-05 5.11884 3.6591e-07H10.8812C11.5967 -1.06242e-05 12.1872 -1.9696e-05 12.6683 0.0392844C13.1679 0.0801068 13.6272 0.167719 14.0586 0.387533C14.7277 0.728417 15.2716 1.27235 15.6125 1.94137C15.8323 2.37277 15.9199 2.83207 15.9607 3.33172C16 3.81277 16 4.40331 16 5.11884ZM4.44444 10.6667C3.95351 10.6667 3.55556 11.0646 3.55556 11.5556C3.55556 12.0465 3.95351 12.4444 4.44444 12.4444H11.5556C12.0465 12.4444 12.4444 12.0465 12.4444 11.5556C12.4444 11.0646 12.0465 10.6667 11.5556 10.6667H4.44444Z" fill="currentColor"></path>
+    </g>
+    <defs>
+      <clipPath id="clip0_961_899">
+        <rect width="16" height="16" fill="white" transform="matrix(0 1 -1 0 16 0)"></rect>
+      </clipPath>
+    </defs>
   </symbol>
 
   <symbol id="braces" viewBox="0 0 16 16" width="16" height="16" fill="none">
@@ -520,7 +527,7 @@
   </symbol>
 
   <symbol id="help" viewBox="0 0 16 16" width="16" height="16" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.33334C4.3181 1.33334 1.33333 4.3181 1.33333 8C1.33333 11.6819 4.3181 14.6667 8 14.6667C11.6819 14.6667 14.6667 11.6819 14.6667 8C14.6667 4.3181 11.6819 1.33334 8 1.33334ZM6 5.16667C6 4.89053 6.22385 4.66667 6.5 4.66667H9.5C9.77614 4.66667 10 4.89053 10 5.16667V7C10 7.16718 9.91644 7.3233 9.77735 7.41603L8.5 8.26759V8.83334C8.5 9.10948 8.27614 9.33334 8 9.33334C7.72385 9.33334 7.5 9.10948 7.5 8.83334V8C7.5 7.83283 7.58355 7.67671 7.72264 7.58398L9 6.73241V5.66667H7V6.16667C7 6.44281 6.77614 6.66667 6.5 6.66667C6.22385 6.66667 6 6.44281 6 6.16667V5.16667ZM8 10C7.6318 10 7.33333 10.2985 7.33333 10.6667C7.33333 11.0349 7.6318 11.3333 8 11.3333C8.36819 11.3333 8.66666 11.0349 8.66666 10.6667C8.66666 10.2985 8.36819 10 8 10Z" fill="currentColor"></path>
+    <path d="M6.50001 6.16667V5.16667H9.50001V7L8.00001 8V8.83333M8.00001 10.6667V10.66M14.1667 8C14.1667 11.4058 11.4058 14.1667 8.00001 14.1667C4.59425 14.1667 1.83334 11.4058 1.83334 8C1.83334 4.59424 4.59425 1.83333 8.00001 1.83333C11.4058 1.83333 14.1667 4.59424 14.1667 8ZM8.16668 10.6667C8.16668 10.7587 8.09206 10.8333 8.00001 10.8333C7.90796 10.8333 7.83334 10.7587 7.83334 10.6667C7.83334 10.5746 7.90796 10.5 8.00001 10.5C8.09206 10.5 8.16668 10.5746 8.16668 10.6667Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
   </symbol>
 
   <symbol id="home" viewBox="0 0 16 16" width="16" height="16" fill="none">
@@ -934,7 +941,14 @@
   </symbol>
 
   <symbol id="right_panel" viewBox="0 0 16 16" width="16" height="16" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.66667C2 2.29848 2.29848 2 2.66667 2H13.3333C13.7015 2 14 2.29848 14 2.66667V13.3333C14 13.7015 13.7015 14 13.3333 14H2.66667C2.29848 14 2 13.7015 2 13.3333V2.66667ZM10 10.6667C10 11.0349 10.2985 11.3333 10.6667 11.3333C11.0349 11.3333 11.3333 11.0349 11.3333 10.6667V5.33333C11.3333 4.96514 11.0349 4.66667 10.6667 4.66667C10.2985 4.66667 10 4.96514 10 5.33333V10.6667Z" fill="currentColor"></path>
+    <g clip-path="url(#clip0_961_893)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M5.11884 3.65909e-07H10.8812C11.5967 -1.06242e-05 12.1872 -1.9696e-05 12.6683 0.0392844C13.1679 0.0801068 13.6272 0.167719 14.0587 0.387533C14.7276 0.728417 15.2716 1.27235 15.6124 1.94137C15.8323 2.37277 15.9199 2.83207 15.9607 3.33172C16 3.81276 16 4.40331 16 5.11883V10.8812C16 11.5967 16 12.1872 15.9607 12.6683C15.9199 13.1679 15.8323 13.6272 15.6124 14.0587C15.2716 14.7276 14.7276 15.2716 14.0587 15.6124C13.6272 15.8323 13.1679 15.9199 12.6683 15.9607C12.1872 16 11.5967 16 10.8812 16H5.11883C4.40331 16 3.81277 16 3.33172 15.9607C2.83207 15.9199 2.37277 15.8323 1.94137 15.6124C1.27235 15.2716 0.728417 14.7276 0.387533 14.0587C0.167719 13.6272 0.0801068 13.1679 0.0392844 12.6683C-1.96927e-05 12.1872 -1.06242e-05 11.5967 3.6591e-07 10.8812V5.11884C-1.06242e-05 4.40332 -1.9696e-05 3.81277 0.0392844 3.33172C0.0801068 2.83207 0.167719 2.37277 0.387533 1.94137C0.728417 1.27235 1.27235 0.728417 1.94137 0.387533C2.37277 0.167719 2.83207 0.0801068 3.33172 0.0392844C3.81277 -1.96927e-05 4.40331 -1.06242e-05 5.11884 3.65909e-07ZM10.6667 11.5556C10.6667 12.0465 11.0646 12.4444 11.5556 12.4444C12.0465 12.4444 12.4444 12.0465 12.4444 11.5556V4.44444C12.4444 3.95353 12.0465 3.55556 11.5556 3.55556C11.0646 3.55556 10.6667 3.95353 10.6667 4.44444V11.5556Z" fill="currentColor"></path>
+    </g>
+    <defs>
+      <clipPath id="clip0_961_893">
+        <rect width="16" height="16" fill="white"></rect>
+      </clipPath>
+    </defs>
   </symbol>
 
   <symbol id="right_side_panel" viewBox="0 0 16 16" width="16" height="16" fill="none">
diff --git a/app/gui/src/project-view/components/DockPanel.vue b/app/gui/src/project-view/components/DockPanel.vue
index 68ee38c5256b..d39d80e66a35 100644
--- a/app/gui/src/project-view/components/DockPanel.vue
+++ b/app/gui/src/project-view/components/DockPanel.vue
@@ -2,6 +2,7 @@
 import { documentationEditorBindings } from '@/bindings'
 import ResizeHandles from '@/components/ResizeHandles.vue'
 import SizeTransition from '@/components/SizeTransition.vue'
+import SvgButton from '@/components/SvgButton.vue'
 import ToggleIcon from '@/components/ToggleIcon.vue'
 import { useResizeObserver } from '@/composables/events'
 import { Rect } from '@/util/data/rect'
@@ -65,14 +66,10 @@ const tabStyle = {
               v-for="{ tab, title, icon } in props.tabButtons"
               :key="tab"
               class="tab"
+              :class="{ activeTab: currentTab === tab }"
               :style="tabStyle"
             >
-              <ToggleIcon
-                :modelValue="currentTab == tab"
-                :title="title"
-                :icon="icon"
-                @update:modelValue="currentTab = tab"
-              />
+              <SvgButton :title="title" :name="icon" @click="currentTab = tab" />
             </div>
           </div>
           <ResizeHandles
@@ -135,9 +132,10 @@ const tabStyle = {
   display: flex;
   align-items: center;
   justify-content: center;
-  &:has(.toggledOn) {
-    background-color: #fff;
-  }
+}
+
+.activeTab {
+  background-color: #fff;
 }
 
 .toggleDock {
diff --git a/app/gui/src/project-view/stores/rightDock.ts b/app/gui/src/project-view/stores/rightDock.ts
index da5458b98e21..e8988a01c696 100644
--- a/app/gui/src/project-view/stores/rightDock.ts
+++ b/app/gui/src/project-view/stores/rightDock.ts
@@ -14,7 +14,7 @@ export type RightDockStore = ReturnType<typeof useRightDock>
 
 export type RightDockTab = ExtractTabs<typeof tabButtons>
 export const { buttons: tabButtons, isValidTab } = defineTabButtons([
-  { tab: 'docs', icon: 'text', title: 'Documentation Editor' },
+  { tab: 'docs', icon: 'document', title: 'Documentation Editor' },
   { tab: 'help', icon: 'help', title: 'Component Help' },
 ])