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

@@ -14,8 +14,8 @@ export const ApiIcon = ({ name: _name, size = 22 }: ApiIconProps) => {
 
   const unicode = icon ? String.fromCodePoint(Number.parseInt(icon, 16)) : '';
 
-  if (!unicode) {
+  if (!unicode && _name !== '') {
-    console.warn(`ApiIcon not found: ${_name}`);
+    console.warn(`ApiIcon not found: '${_name}'`);
   }
 
   return (

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>

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
+    }
+  }
+});

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(

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
+    }
   }
 });