fix theme refs

src/frontend/src/components/nav/Layout.tsx

@@ -59,7 +59,7 @@ export default function LayoutComponent() {
           //searchIcon={<IconSearch size="1.2rem" />}
           //searchPlaceholder={t`Search...`}
           shortcut={['mod + K', '/']}
-          //nothingFoundMessage={t`Nothing found...`}
+          nothingFound={t`Nothing found...`}
         />
       </Flex>
     </ProtectedRoute>

src/frontend/src/components/nav/MainMenu.tsx

@@ -12,7 +12,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { doLogout } from '../../functions/auth';
 import * as classes from '../../main.css';
 import { useUserState } from '../../states/UserState';
-import { theme } from '../../theme';
+import { theme, vars } from '../../theme';
 
 export function MainMenu() {
   const navigate = useNavigate();
@@ -27,7 +27,7 @@ export function MainMenu() {
               {userState.username() ? (
                 userState.username()
               ) : (
-                <Skeleton height={20} width={40} radius={theme.defaultRadius} />
+                <Skeleton height={20} width={40} radius={vars.radiusDefault} />
               )}
             </Text>
             <IconChevronDown />

src/frontend/src/components/nav/NavHoverMenu.tsx

@@ -10,6 +10,7 @@ import {
   Text,
   UnstyledButton
 } from '@mantine/core';
+import { useColorScheme } from '@mantine/hooks';
 import { IconLayoutSidebar } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 
@@ -17,7 +18,7 @@ import { menuItems } from '../../defaults/menuItems';
 import * as classes from '../../main.css';
 import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
-import { theme } from '../../theme';
+import { theme, vars } from '../../theme';
 import { InvenTreeLogo } from '../items/InvenTreeLogo';
 import { MenuLinks } from '../items/MenuLinks';
 
@@ -34,6 +35,7 @@ export function NavHoverMenu({
   ]);
   const [servername] = useServerApiState((state) => [state.server.instance]);
   const [instanceName, setInstanceName] = useState<string>();
+  const [preferredColorScheme] = useColorScheme();
 
   useEffect(() => {
     if (hostKey && hostList[hostKey]) {
@@ -68,13 +70,13 @@ export function NavHoverMenu({
             {instanceName ? (
               instanceName
             ) : (
-              <Skeleton height={20} width={40} radius={theme.defaultRadius} />
+              <Skeleton height={20} width={40} radius={vars.radiusDefault} />
             )}{' '}
             |{' '}
             {servername ? (
               servername
             ) : (
-              <Skeleton height={20} width={40} radius={theme.defaultRadius} />
+              <Skeleton height={20} width={40} radius={vars.radiusDefault} />
             )}
           </Group>
           <Anchor href="#" fz="xs" onClick={openDrawer}>
@@ -85,7 +87,11 @@ export function NavHoverMenu({
         <Divider
           my="sm"
           mx="-md"
-          color={theme.colorScheme === 'dark' ? 'dark.5' : 'gray.1'}
+          color={
+            preferredColorScheme === 'dark'
+              ? vars.colors.dark[5]
+              : vars.colors.gray[1]
+          }
         />
         <MenuLinks links={onlyItems} highlighted={true} />
         <div className={classes.headerDropdownFooter}>

src/frontend/src/components/widgets/FeedbackWidget.tsx

@@ -1,17 +1,22 @@
 import { Trans } from '@lingui/macro';
 import { Button, Stack, Title } from '@mantine/core';
+import { useColorScheme } from '@mantine/hooks';
 import { IconExternalLink } from '@tabler/icons-react';
+import { useCodeMirror } from '@uiw/react-codemirror';
+
+import { vars } from '../../theme';
 
 export default function FeedbackWidget() {
+  const [preferredColorScheme] = useColorScheme();
   return (
     <Stack
-      sx={(theme) => ({
+      style={{
         backgroundColor:
-          theme.colorScheme === 'dark'
-            ? theme.colors.gray[9]
-            : theme.colors.gray[1],
-        borderRadius: theme.radius.md
-      })}
+          preferredColorScheme === 'dark'
+            ? vars.colors.gray[9]
+            : vars.colors.gray[1],
+        borderRadius: vars.radius.md
+      }}
       p={15}
     >
       <Title order={5}>

src/frontend/src/main.css.ts

@@ -31,7 +31,7 @@ export const layoutHeaderUser = style({
     //theme.colorScheme === 'dark' ? vars.colors.dark[0] : vars.black,
     vars.colors.black,
   padding: `${vars.spacing.xs}px ${vars.spacing.sm}px`,
-  borderRadius: vars.defaultRadius,
+  borderRadius: vars.radiusDefault,
   transition: 'background-color 100ms ease',
 
   [vars.smallerThan('xs')]: {
@@ -84,7 +84,7 @@ export const link = style({
 export const subLink = style({
   width: '100%',
   padding: `${vars.spacing.xs} ${vars.spacing.md}`,
-  borderRadius: vars.defaultRadius,
+  borderRadius: vars.radiusDefault,
 
   // ...theme.fn.hover({
   //   backgroundColor:

src/frontend/src/pages/Auth/Login.tsx

@@ -36,6 +36,7 @@ export default function Login() {
 
   // Data manipulation functions
   function ChangeHost(newHost: string | null): void {
+    if (newHost === null) return;
     setHost(hostList[newHost]?.host, newHost);
     setApiDefaults();
     fetchServerApiState();

src/frontend/src/pages/Index/Scan.tsx

@@ -301,7 +301,7 @@ export default function Scan() {
                   data={inputOptions}
                   searchable
                   placeholder={t`Select input method`}
-                  nothingFound={t`Nothing found`}
+                  nothingFoundMessage={t`Nothing found`}
                 />
               </Group>
               {inp}

src/frontend/src/tables/stock/StockItemTestResultTable.tsx

@@ -134,9 +134,9 @@ export default function StockItemTestResultTable({
           return (
             <Group justify="apart">
               <Text
-                italic={installed}
+                style={{ fontStyle: installed ? 'italic' : undefined }}
                 fw={required && 700}
-                color={enabled ? undefined : 'red'}
+                c={enabled ? undefined : 'red'}
               >
                 {!record.templateId && '- '}
                 {record.test_name ?? record.template_detail?.test_name}