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
enso-org · Mar 4, 2025 · 48f23a1 · 48f23a1
1 parent 4b827c3
commit 48f23a1
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/app/gui/src/project-view/assets/icons.svg b/app/gui/src/project-view/assets/icons.svg
diff --git 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
@@ -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' },
 ])