misc fixes

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>

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" />
     }
   ];
 

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

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