From d0a86f7d5e5c1cb562bf02604a20549d35dc2512 Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Mon, 15 Apr 2024 12:44:01 +0200
Subject: [PATCH] misc fixes

---
 .../src/components/items/ColorToggle.tsx      | 10 ++---
 src/frontend/src/defaults/actions.tsx         | 39 +++++++++++--------
 .../AccountSettings/UserThemePanel.tsx        |  3 +-
 .../src/tables/machine/MachineListTable.tsx   |  6 +--
 4 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/frontend/src/components/items/ColorToggle.tsx b/src/frontend/src/components/items/ColorToggle.tsx
index af17ecb5dc..1893a82362 100644
--- a/src/frontend/src/components/items/ColorToggle.tsx
+++ b/src/frontend/src/components/items/ColorToggle.tsx
@@ -1,6 +1,8 @@
 import { ActionIcon, Group, useMantineColorScheme } from '@mantine/core';
 import { IconMoonStars, IconSun } from '@tabler/icons-react';
 
+import { vars } from '../../theme';
+
 export function ColorToggle() {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
@@ -9,12 +11,10 @@ export function ColorToggle() {
       <ActionIcon
         onClick={() => toggleColorScheme()}
         size="lg"
-        sx={(theme) => ({
+        style={{
           color:
-            theme.colorScheme === 'dark'
-              ? theme.colors.yellow[4]
-              : theme.colors.blue[6]
-        })}
+            colorScheme === 'dark' ? vars.colors.yellow[4] : vars.colors.blue[6]
+        }}
       >
         {colorScheme === 'dark' ? <IconSun /> : <IconMoonStars />}
       </ActionIcon>
diff --git a/src/frontend/src/defaults/actions.tsx b/src/frontend/src/defaults/actions.tsx
index 4ffac3055f..a171c853a6 100644
--- a/src/frontend/src/defaults/actions.tsx
+++ b/src/frontend/src/defaults/actions.tsx
@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import type { SpotlightAction } from '@mantine/spotlight';
+import type { SpotlightAction, SpotlightActionData } from '@mantine/spotlight';
 import { IconHome, IconLink, IconPointer } from '@tabler/icons-react';
 import { NavigateFunction } from 'react-router-dom';
 
@@ -10,48 +10,55 @@ import { menuItems } from './menuItems';
 export function getActions(navigate: NavigateFunction) {
   const setNavigationOpen = useLocalState((state) => state.setNavigationOpen);
 
-  const actions: SpotlightAction[] = [
+  const actions: SpotlightActionData[] = [
     {
+      id: 'home',
       title: t`Home`,
       description: `Go to the home page`,
-      onTrigger: () => navigate(menuItems.home.link),
-      icon: <IconHome size="1.2rem" />
+      onClick: () => navigate(menuItems.home.link),
+      leftSection: <IconHome size="1.2rem" />
     },
     {
+      id: 'dashboard',
       title: t`Dashboard`,
       description: t`Go to the InvenTree dashboard`,
-      onTrigger: () => navigate(menuItems.dashboard.link),
-      icon: <IconLink size="1.2rem" />
+      onClick: () => navigate(menuItems.dashboard.link),
+      leftSection: <IconLink size="1.2rem" />
     },
     {
+      id: 'documentation',
       title: t`Documentation`,
       description: t`Visit the documentation to learn more about InvenTree`,
-      onTrigger: () => (window.location.href = docLinks.faq),
-      icon: <IconLink size="1.2rem" />
+      onClick: () => (window.location.href = docLinks.faq),
+      leftSection: <IconLink size="1.2rem" />
     },
     {
+      id: 'about',
       title: t`About InvenTree`,
       description: t`About the InvenTree org`,
-      onTrigger: () => aboutInvenTree(),
-      icon: <IconLink size="1.2rem" />
+      onClick: () => aboutInvenTree(),
+      leftSection: <IconLink size="1.2rem" />
     },
     {
+      id: 'server-info',
       title: t`Server Information`,
       description: t`About this Inventree instance`,
-      onTrigger: () => serverInfo(),
-      icon: <IconLink size="1.2rem" />
+      onClick: () => serverInfo(),
+      leftSection: <IconLink size="1.2rem" />
     },
     {
+      id: 'license-info',
       title: t`License Information`,
       description: t`Licenses for dependencies of the service`,
-      onTrigger: () => licenseInfo(),
-      icon: <IconLink size="1.2rem" />
+      onClick: () => licenseInfo(),
+      leftSection: <IconLink size="1.2rem" />
     },
     {
+      id: 'navigation',
       title: t`Open Navigation`,
       description: t`Open the main navigation menu`,
-      onTrigger: () => setNavigationOpen(true),
-      icon: <IconPointer size="1.2rem" />
+      onClick: () => setNavigationOpen(true),
+      leftSection: <IconPointer size="1.2rem" />
     }
   ];
 
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
index 1c91a6b640..b82b77d9a8 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
@@ -67,7 +67,8 @@ export function UserTheme({ height }: { height: number }) {
     { value: 'dots', label: t`dots` }
   ];
   const [loader, setLoader] = useState<string>(theme.loader);
-  function changeLoader(value: string) {
+  function changeLoader(value: string | null) {
+    if (value === null) return;
     setLoader(value);
     useLocalState.setState({ loader: value });
   }
diff --git a/src/frontend/src/tables/machine/MachineListTable.tsx b/src/frontend/src/tables/machine/MachineListTable.tsx
index 0e2e375033..2ca40c8c3c 100644
--- a/src/frontend/src/tables/machine/MachineListTable.tsx
+++ b/src/frontend/src/tables/machine/MachineListTable.tsx
@@ -66,12 +66,12 @@ interface MachineI {
 }
 
 function MachineStatusIndicator({ machine }: { machine: MachineI }) {
-  const sx = { marginLeft: '4px' };
+  const style = { marginLeft: '4px' };
 
   // machine is not active, show a gray dot
   if (!machine.active) {
     return (
-      <Indicator sx={sx} color="gray">
+      <Indicator style={style} color="gray">
         <Box></Box>
       </Indicator>
     );
@@ -90,7 +90,7 @@ function MachineStatusIndicator({ machine }: { machine: MachineI }) {
     machine.initialized && machine.status > 0 && machine.status < 300;
 
   return (
-    <Indicator processing={processing} sx={sx} color={color}>
+    <Indicator processing={processing} style={style} color={color}>
       <Box></Box>
     </Indicator>
   );