fix more arg renames

src/frontend/src/components/details/DetailsImage.tsx

@@ -358,8 +358,8 @@ export function DetailsImage(props: DetailImageProps) {
         <>
           <ApiImage
             src={img}
-            height={IMAGE_DIMENSION}
+            h={IMAGE_DIMENSION}
-            width={IMAGE_DIMENSION}
+            w={IMAGE_DIMENSION}
             onClick={expandImage}
           />
           {permissions.hasChangeRole(props.appRole) &&

src/frontend/src/components/forms/HostOptionsForm.tsx

@@ -62,15 +62,15 @@ export function HostOptionsForm({
       <Box sx={{ maxWidth: 500 }} mx="auto">
         {fields.length > 0 ? (
           <Group mb="xs">
-            <Text weight={500} size="sm" sx={{ flex: 1 }}>
+            <Text fw={500} size="sm" sx={{ flex: 1 }}>
               <Trans>Host</Trans>
             </Text>
-            <Text weight={500} size="sm" sx={{ flex: 1 }}>
+            <Text fw={500} size="sm" sx={{ flex: 1 }}>
               <Trans>Name</Trans>
             </Text>
           </Group>
         ) : (
-          <Text c="dimmed" align="center">
+          <Text c="dimmed" ta="center">
             <Trans>No one here...</Trans>
           </Text>
         )}

src/frontend/src/components/forms/InstanceOptions.tsx

@@ -15,7 +15,7 @@ export function InstanceOptions({
   setHostEdit
 }: {
   hostKey: string;
-  ChangeHost: (newHost: string) => void;
+  ChangeHost: (newHost: string | null) => void;
   setHostEdit: () => void;
 }) {
   const [HostListEdit, setHostListEdit] = useToggle([false, true] as const);

src/frontend/src/components/forms/fields/RelatedModelField.tsx

@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Input, useMantineTheme } from '@mantine/core';
-import { useDebouncedValue } from '@mantine/hooks';
+import { useColorScheme, useDebouncedValue } from '@mantine/hooks';
 import { useId } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -12,6 +12,7 @@ import {
 import Select from 'react-select';
 
 import { api } from '../../../App';
+import { vars } from '../../../theme';
 import { RenderInstance } from '../../render/Instance';
 import { ApiFormFieldType } from './ApiFormField';
 
@@ -218,29 +219,32 @@ export function RelatedModelField({
   // Define color theme to pass to field based on Mantine theme
   const theme = useMantineTheme();
 
+  const colorschema = vars.colors.primaryColors;
+  const [preferredColorScheme] = useColorScheme();
+
   const colors = useMemo(() => {
     let colors: any;
-    if (theme.colorScheme === 'dark') {
+    if (preferredColorScheme === 'dark') {
       colors = {
-        neutral0: theme.colors[theme.colorScheme][6],
+        neutral0: colorschema[6],
-        neutral5: theme.colors[theme.colorScheme][4],
+        neutral5: colorschema[4],
-        neutral10: theme.colors[theme.colorScheme][4],
+        neutral10: colorschema[4],
-        neutral20: theme.colors[theme.colorScheme][4],
+        neutral20: colorschema[4],
-        neutral30: theme.colors[theme.colorScheme][3],
+        neutral30: colorschema[3],
-        neutral40: theme.colors[theme.colorScheme][2],
+        neutral40: colorschema[2],
-        neutral50: theme.colors[theme.colorScheme][1],
+        neutral50: colorschema[1],
-        neutral60: theme.colors[theme.colorScheme][0],
+        neutral60: colorschema[0],
-        neutral70: theme.colors[theme.colorScheme][0],
+        neutral70: colorschema[0],
-        neutral80: theme.colors[theme.colorScheme][0],
+        neutral80: colorschema[0],
-        neutral90: theme.colors[theme.colorScheme][0],
+        neutral90: colorschema[0],
-        primary: theme.colors[theme.primaryColor][7],
+        primary: vars.colors.primaryColors[7],
-        primary25: theme.colors[theme.primaryColor][6],
+        primary25: vars.colors.primaryColors[6],
-        primary50: theme.colors[theme.primaryColor][5],
+        primary50: vars.colors.primaryColors[5],
-        primary75: theme.colors[theme.primaryColor][4]
+        primary75: vars.colors.primaryColors[4]
       };
     } else {
       colors = {
-        neutral0: theme.white,
+        neutral0: vars.colors.white,
         neutral5: theme.fn.darken(theme.white, 0.05),
         neutral10: theme.fn.darken(theme.white, 0.1),
         neutral20: theme.fn.darken(theme.white, 0.2),
@@ -251,10 +255,10 @@ export function RelatedModelField({
         neutral70: theme.fn.darken(theme.white, 0.7),
         neutral80: theme.fn.darken(theme.white, 0.8),
         neutral90: theme.fn.darken(theme.white, 0.9),
-        primary: theme.colors[theme.primaryColor][7],
+        primary: vars.colors.primaryColors[7],
-        primary25: theme.colors[theme.primaryColor][4],
+        primary25: vars.colors.primaryColors[4],
-        primary50: theme.colors[theme.primaryColor][5],
+        primary50: vars.colors.primaryColors[5],
-        primary75: theme.colors[theme.primaryColor][6]
+        primary75: vars.colors.primaryColors[6]
       };
     }
     return colors;

src/frontend/src/components/images/ApiImage.tsx

@@ -67,10 +67,7 @@ export function ApiImage(props: ImageProps) {
       {image && image.length > 0 ? (
         <Image {...props} src={image} withPlaceholder fit="contain" />
       ) : (
-        <Skeleton
+        <Skeleton h={props?.h ?? props.w} w={props?.w ?? props.h} />
-          height={props?.height ?? props.width}
-          width={props?.width ?? props.height}
-        />
       )}
     </Stack>
   );

src/frontend/src/components/items/DashboardItem.tsx

@@ -18,7 +18,7 @@ export function StatisticItem({
 }) {
   return (
     <Paper withBorder p="xs" key={id} pos="relative">
-      <LoadingOverlay visible={isLoading} overlayBlur={2} />
+      <LoadingOverlay visible={isLoading} overlayProps={{ blur: 2 }} />
       <Group justify="apart">
         <Text size="xs" color="dimmed" className={classes.dashboardItemTitle}>
           {data.title}

src/frontend/src/components/items/LanguageToggle.tsx

@@ -9,7 +9,7 @@ export function LanguageToggle() {
 
   return (
     <Group
-      position="center"
+      justify="center"
       style={{
         border: open === true ? `1px dashed ` : ``,
         margin: open === true ? 2 : 12,

src/frontend/src/components/items/Placeholder.tsx

@@ -9,7 +9,7 @@ export function PlaceholderPill() {
   return (
     <Tooltip
       multiline
-      width={220}
+      w={220}
       withArrow
       label={t`This feature/button/site is a placeholder for a feature that is not implemented, only partial or intended for testing.`}
     >

src/frontend/src/components/items/ProgressBar.tsx

@@ -24,7 +24,7 @@ export function ProgressBar(props: ProgressBarProps) {
   return (
     <Stack gap={2} style={{ flexGrow: 1, minWidth: '100px' }}>
       {props.progressLabel && (
-        <Text align="center" size="xs">
+        <Text ta="center" size="xs">
           {props.value} / {props.maximum}
         </Text>
       )}

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

@@ -23,7 +23,7 @@ export function MainMenu() {
       <Menu.Target>
         <UnstyledButton className={classes.layoutHeaderUser}>
           <Group gap={7}>
-            <Text weight={500} size="sm" sx={{ lineHeight: 1 }} mr={3}>
+            <Text fw={500} size="sm" sx={{ lineHeight: 1 }} mr={3}>
               {userState.username() ? (
                 userState.username()
               ) : (

src/frontend/src/components/nav/PageDetail.tsx

@@ -46,7 +46,7 @@ export function PageDetail({
           <Group justify="apart" wrap="nowrap">
             <Group justify="left" wrap="nowrap">
               {imageUrl && (
-                <ApiImage src={imageUrl} radius="sm" height={64} width={64} />
+                <ApiImage src={imageUrl} radius="sm" h={64} w={64} />
               )}
               <Stack gap="xs">
                 {title && <StylishText size="lg">{title}</StylishText>}

src/frontend/src/components/nav/PanelGroup.tsx

@@ -72,7 +72,7 @@ function BasePanelGroup({
   }, [setLastUsedPanel]);
 
   // Callback when the active panel changes
-  function handlePanelChange(panel: string) {
+  function handlePanelChange(panel: string | null) {
     if (activePanels.findIndex((p) => p.name === panel) === -1) {
       setLastUsedPanel('');
       return navigate('../');
@@ -81,7 +81,7 @@ function BasePanelGroup({
     navigate(`../${panel}`);
 
     // Optionally call external callback hook
-    if (onPanelChange) {
+    if (panel && onPanelChange) {
       onPanelChange(panel);
     }
   }
@@ -111,7 +111,7 @@ function BasePanelGroup({
         onChange={handlePanelChange}
         keepMounted={false}
       >
-        <Tabs.List position="left">
+        <Tabs.List justify="left">
           {panels.map(
             (panel) =>
               !panel.hidden && (

src/frontend/src/components/nav/PartCategoryTree.tsx

@@ -1,12 +1,6 @@
 import { t } from '@lingui/macro';
-import {
+import { Drawer, Group, LoadingOverlay, Stack, Text } from '@mantine/core';
-  Drawer,
+import { useColorScheme } from '@mantine/hooks';
-  Group,
-  LoadingOverlay,
-  Stack,
-  Text,
-  useMantineTheme
-} from '@mantine/core';
 import { ReactTree, ThemeSettings } from '@naisutech/react-tree';
 import {
   IconChevronDown,
@@ -20,6 +14,7 @@ import { useNavigate } from 'react-router-dom';
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { apiUrl } from '../../states/ApiState';
+import { theme, vars } from '../../theme';
 import { StylishText } from '../items/StylishText';
 
 export function PartCategoryTree({
@@ -80,57 +75,57 @@ export function PartCategoryTree({
     return open ? <IconChevronDown /> : <IconChevronRight />;
   }
 
-  const mantineTheme = useMantineTheme();
+  const [prefferedColorScheme] = useColorScheme();
 
   const themes: ThemeSettings = useMemo(() => {
     const currentTheme =
-      mantineTheme.colorScheme === 'dark'
+      prefferedColorScheme === 'dark'
-        ? mantineTheme.colorScheme
+        ? vars.colors.defaultColor
-        : mantineTheme.primaryColor;
+        : vars.colors.primaryColors;
 
     return {
       dark: {
         text: {
-          ...mantineTheme.fn.fontStyles()
+          ...vars.fontStyles()
         },
         nodes: {
           height: '2.5rem',
           folder: {
-            selectedBgColor: mantineTheme.colors[currentTheme][4],
+            selectedBgColor: currentTheme[4],
-            hoverBgColor: mantineTheme.colors[currentTheme][6]
+            hoverBgColor: currentTheme[6]
           },
           leaf: {
-            selectedBgColor: mantineTheme.colors[currentTheme][4],
+            selectedBgColor: currentTheme[4],
-            hoverBgColor: mantineTheme.colors[currentTheme][6]
+            hoverBgColor: currentTheme[6]
           },
           icons: {
-            folderColor: mantineTheme.colors[currentTheme][3],
+            folderColor: currentTheme[3],
-            leafColor: mantineTheme.colors[currentTheme][3]
+            leafColor: currentTheme[3]
           }
         }
       },
       light: {
         text: {
-          ...mantineTheme.fn.fontStyles()
+          ...theme.fn.fontStyles()
         },
         nodes: {
           height: '2.5rem',
           folder: {
-            selectedBgColor: mantineTheme.colors[currentTheme][4],
+            selectedBgColor: currentTheme[4],
-            hoverBgColor: mantineTheme.colors[currentTheme][2]
+            hoverBgColor: currentTheme[2]
           },
           leaf: {
-            selectedBgColor: mantineTheme.colors[currentTheme][4],
+            selectedBgColor: currentTheme[4],
-            hoverBgColor: mantineTheme.colors[currentTheme][2]
+            hoverBgColor: currentTheme[2]
           },
           icons: {
-            folderColor: mantineTheme.colors[currentTheme][8],
+            folderColor: currentTheme[8],
-            leafColor: mantineTheme.colors[currentTheme][6]
+            leafColor: currentTheme[6]
           }
         }
       }
     };
-  }, [mantineTheme]);
+  }, [theme]);
 
   return (
     <Drawer
@@ -162,7 +157,7 @@ export function PartCategoryTree({
           RenderIcon={renderIcon}
           defaultSelectedNodes={selectedCategory ? [selectedCategory] : []}
           showEmptyItems={false}
-          theme={mantineTheme.colorScheme}
+          theme={theme.colorScheme}
           themes={themes}
         />
       </Stack>

src/frontend/src/components/nav/StockLocationTree.tsx

@@ -51,7 +51,7 @@ export function StockLocationTree({
   function renderNode({ node }: { node: any }) {
     return (
       <Group
-        position="apart"
+        justify="apart"
         key={node.id}
         wrap="nowrap"
         onClick={() => {

src/frontend/src/components/settings/SettingItem.tsx

@@ -6,9 +6,9 @@ import {
   Space,
   Stack,
   Switch,
-  Text,
+  Text
-  useMantineTheme
 } from '@mantine/core';
+import { useColorScheme } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
 import { IconEdit } from '@tabler/icons-react';
 import { useMemo } from 'react';
@@ -19,6 +19,7 @@ import { openModalApiForm } from '../../functions/forms';
 import { apiUrl } from '../../states/ApiState';
 import { SettingsStateProps } from '../../states/SettingsState';
 import { Setting, SettingType } from '../../states/states';
+import { vars } from '../../theme';
 import { ApiFormFieldType } from '../forms/fields/ApiFormField';
 
 /**
@@ -165,14 +166,14 @@ export function SettingItem({
   shaded: boolean;
   onChange?: () => void;
 }) {
-  const theme = useMantineTheme();
+  const [prefferedColorScheme] = useColorScheme();
 
   const style: Record<string, string> = { paddingLeft: '8px' };
   if (shaded) {
     style['backgroundColor'] =
-      theme.colorScheme === 'light'
+      prefferedColorScheme === 'light'
-        ? theme.colors.gray[1]
+        ? vars.colors.gray[1]
-        : theme.colors.gray[9];
+        : vars.colors.gray[9];
   }
 
   return (

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

@@ -26,7 +26,7 @@ export default function FeedbackWidget() {
         component="a"
         href="https://github.com/inventree/InvenTree/discussions/5328"
         variant="outline"
-        leftIcon={<IconExternalLink size="0.9rem" />}
+        leftSection={<IconExternalLink size="0.9rem" />}
       >
         <Trans>Provide Feedback</Trans>
       </Button>

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

@@ -70,7 +70,7 @@ export default function Login() {
         ) : (
           <>
             <Paper radius="md" p="xl" withBorder>
-              <Text size="lg" weight={500}>
+              <Text size="lg" fw={500}>
                 {loginMode ? (
                   <Trans>Welcome, log in below</Trans>
                 ) : (

src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx

@@ -168,7 +168,7 @@ function EmailContent({}: {}) {
           <TextInput
             label={t`E-Mail`}
             placeholder={t`E-Mail address`}
-            icon={<IconAt />}
+            leftSection={<IconAt />}
             value={newEmailValue}
             onChange={(event) => setNewEmailValue(event.currentTarget.value)}
           />

src/frontend/src/tables/Search.tsx

@@ -19,7 +19,7 @@ export function TableSearchInput({
   return (
     <TextInput
       value={value}
-      icon={<IconSearch />}
+      leftSection={<IconSearch />}
       placeholder={t`Search`}
       onChange={(event) => setValue(event.target.value)}
       rightSection={

src/frontend/src/tables/TableHoverCard.tsx

@@ -38,7 +38,7 @@ export function TableHoverCard({
         <Stack gap="xs">
           <Group gap="xs" justify="left">
             <IconInfoCircle size="16" color="blue" />
-            <Text weight="bold">{title}</Text>
+            <Text fw="bold">{title}</Text>
           </Group>
           <Divider />
           {extra}

src/frontend/src/tables/part/PartTestTemplateTable.tsx

@@ -37,7 +37,7 @@ export default function PartTestTemplateTable({ partId }: { partId: number }) {
         render: (record: any) => {
           return (
             <Text
-              weight={record.required && 700}
+              fw={record.required && 700}
               c={record.enabled ? undefined : 'red'}
             >
               {record.test_name}