From 3260d94369652d49f2e1ae9416769404fd76c2c4 Mon Sep 17 00:00:00 2001
From: Lukas <76838159+wolflu05@users.noreply.github.com>
Date: Wed, 19 Mar 2025 22:24:35 +0100
Subject: [PATCH] added some visual improvements (#9342)

* added some visual improvements

* fix lint

* Undo changes to sample icons for now

* use primary color
---
 src/frontend/src/components/items/ApiIcon.tsx        |  4 ++--
 src/frontend/src/components/nav/NavigationTree.tsx   |  1 +
 src/frontend/src/components/panels/PanelGroup.css.ts | 10 ++++++++++
 src/frontend/src/components/panels/PanelGroup.tsx    |  2 ++
 src/frontend/src/main.css.ts                         |  6 ++++++
 5 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 src/frontend/src/components/panels/PanelGroup.css.ts

diff --git a/src/frontend/src/components/items/ApiIcon.tsx b/src/frontend/src/components/items/ApiIcon.tsx
index f480516d50..58e02662a1 100644
--- a/src/frontend/src/components/items/ApiIcon.tsx
+++ b/src/frontend/src/components/items/ApiIcon.tsx
@@ -14,8 +14,8 @@ export const ApiIcon = ({ name: _name, size = 22 }: ApiIconProps) => {
 
   const unicode = icon ? String.fromCodePoint(Number.parseInt(icon, 16)) : '';
 
-  if (!unicode) {
-    console.warn(`ApiIcon not found: ${_name}`);
+  if (!unicode && _name !== '') {
+    console.warn(`ApiIcon not found: '${_name}'`);
   }
 
   return (
diff --git a/src/frontend/src/components/nav/NavigationTree.tsx b/src/frontend/src/components/nav/NavigationTree.tsx
index 4f192c9042..75df079467 100644
--- a/src/frontend/src/components/nav/NavigationTree.tsx
+++ b/src/frontend/src/components/nav/NavigationTree.tsx
@@ -168,6 +168,7 @@ export default function NavigationTree({
           <Anchor
             onClick={(event: any) => follow(payload.node, event)}
             aria-label={`nav-tree-item-${payload.node.value}`}
+            c='var(--mantine-color-text)'
           >
             {payload.node.label}
           </Anchor>
diff --git a/src/frontend/src/components/panels/PanelGroup.css.ts b/src/frontend/src/components/panels/PanelGroup.css.ts
new file mode 100644
index 0000000000..e4be833415
--- /dev/null
+++ b/src/frontend/src/components/panels/PanelGroup.css.ts
@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../theme';
+
+export const selectedPanelTab = style({
+  selectors: {
+    '&[data-active]': {
+      background: vars.colors.primaryColors.light
+    }
+  }
+});
diff --git a/src/frontend/src/components/panels/PanelGroup.tsx b/src/frontend/src/components/panels/PanelGroup.tsx
index dcdc60594a..e101b42770 100644
--- a/src/frontend/src/components/panels/PanelGroup.tsx
+++ b/src/frontend/src/components/panels/PanelGroup.tsx
@@ -37,6 +37,7 @@ import { useLocalState } from '../../states/LocalState';
 import { Boundary } from '../Boundary';
 import { StylishText } from '../items/StylishText';
 import type { PanelType } from '../panels/Panel';
+import * as classes from './PanelGroup.css';
 
 /**
  * Set of properties which define a panel group:
@@ -161,6 +162,7 @@ function BasePanelGroup({
           orientation='vertical'
           keepMounted={false}
           aria-label={`panel-group-${pageKey}`}
+          classNames={{ tab: classes.selectedPanelTab }}
         >
           <Tabs.List justify='left' aria-label={`panel-tabs-${pageKey}`}>
             {allPanels.map(
diff --git a/src/frontend/src/main.css.ts b/src/frontend/src/main.css.ts
index 81be4294a1..1a1d5da079 100644
--- a/src/frontend/src/main.css.ts
+++ b/src/frontend/src/main.css.ts
@@ -109,6 +109,12 @@ export const tab = style({
   ':hover': {
     [vars.lightSelector]: { backgroundColor: vars.colors.gray[1] },
     [vars.darkSelector]: { backgroundColor: vars.colors.dark[5] }
+  },
+
+  selectors: {
+    '&[data-active]': {
+      backgroundColor: vars.colors.primaryColors.light
+    }
   }
 });