adapt arg names

src/frontend/src/components/buttons/CopyButton.tsx

@@ -17,7 +17,7 @@ export function CopyButton({
           onClick={copy}
           title={t`Copy to clipboard`}
           variant="subtle"
-          compact
+          size="compact-md"
         >
           <IconCopy size={10} />
           {label && <div>&nbsp;</div>}

src/frontend/src/components/buttons/SSOButton.tsx

@@ -50,7 +50,7 @@ export function SsoButton({ provider }: { provider: Provider }) {
 
   return (
     <Button
-      leftIcon={getBrandIcon(provider)}
+      leftSection={getBrandIcon(provider)}
       radius="xl"
       component="a"
       onClick={login}

src/frontend/src/components/buttons/SplitButton.tsx

@@ -89,7 +89,7 @@ export function SplitButton({
                 option.onClick();
               }}
               disabled={option.disabled}
-              icon={<option.icon />}
+              leftSection={<option.icon />}
             >
               <Tooltip label={option.tooltip} position="right">
                 <Text>{option.name}</Text>

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

@@ -7,11 +7,10 @@ import {
   Overlay,
   Paper,
   Text,
-  rem,
+  rem
-  useMantineTheme
 } from '@mantine/core';
 import { Dropzone, FileWithPath, IMAGE_MIME_TYPE } from '@mantine/dropzone';
-import { useHover } from '@mantine/hooks';
+import { useColorScheme, useHover } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
 import { useMemo, useState } from 'react';
 
@@ -21,6 +20,7 @@ import { cancelEvent } from '../../functions/events';
 import { InvenTreeIcon } from '../../functions/icons';
 import { useUserState } from '../../states/UserState';
 import { PartThumbTable } from '../../tables/part/PartThumbTable';
+import { vars } from '../../theme';
 import { ActionButton } from '../buttons/ActionButton';
 import { ApiImage } from '../images/ApiImage';
 import { StylishText } from '../items/StylishText';
@@ -87,8 +87,6 @@ function UploadModal({
   const [file1, setFile] = useState<FileWithPath | null>(null);
   let uploading = false;
 
-  const theme = useMantineTheme();
-
   // Components to show in the Dropzone when no file is selected
   const noFileIdle = (
     <Group>
@@ -160,9 +158,11 @@ function UploadModal({
     }
   };
 
+  const preferredColorScheme = useColorScheme();
+
   const primaryColor =
-    theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6];
+    vars.colors.primaryColors[preferredColorScheme === 'dark' ? 4 : 6];
-  const redColor = theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6];
+  const redColor = vars.colors.red[preferredColorScheme === 'dark' ? 4 : 6];
 
   return (
     <Paper sx={{ height: '220px' }}>
@@ -173,7 +173,7 @@ function UploadModal({
         loading={uploading}
       >
         <Group
-          position="center"
+          justify="center"
           gap="xl"
           style={{ minHeight: rem(140), pointerEvents: 'none' }}
         >

src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx

@@ -223,7 +223,7 @@ export function TemplateEditor(props: TemplateEditorProps) {
       <Split style={{ gap: '10px' }}>
         <Tabs
           value={editorValue}
-          onTabChange={async (v) => {
+          onChange={async (v) => {
             codeRef.current = await getCodeFromEditor();
             setEditorValue(v);
           }}
@@ -240,7 +240,7 @@ export function TemplateEditor(props: TemplateEditorProps) {
               <Tabs.Tab
                 key={Editor.key}
                 value={Editor.key}
-                icon={<Editor.icon size="0.8rem" />}
+                leftSection={<Editor.icon size="0.8rem" />}
               >
                 {Editor.name}
               </Tabs.Tab>
@@ -289,7 +289,7 @@ export function TemplateEditor(props: TemplateEditorProps) {
 
         <Tabs
           value={previewValue}
-          onTabChange={setPreviewValue}
+          onChange={setPreviewValue}
           style={{
             minWidth: '200px',
             display: 'flex',
@@ -301,7 +301,7 @@ export function TemplateEditor(props: TemplateEditorProps) {
               <Tabs.Tab
                 key={PreviewArea.key}
                 value={PreviewArea.key}
-                icon={<PreviewArea.icon size="0.8rem" />}
+                leftSection={<PreviewArea.icon size="0.8rem" />}
               >
                 {PreviewArea.name}
               </Tabs.Tab>

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

@@ -70,7 +70,7 @@ export function HostOptionsForm({
             </Text>
           </Group>
         ) : (
-          <Text color="dimmed" align="center">
+          <Text c="dimmed" align="center">
             <Trans>No one here...</Trans>
           </Text>
         )}

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

@@ -240,7 +240,7 @@ export function ApiFormField({
               return `${1 * v.toFixed()}`;
             }}
             precision={definition.field_type == 'integer' ? 0 : 10}
-            onChange={(value: number) => onChange(value)}
+            onChange={(value) => onChange(value)}
           />
         );
       case 'choice':

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

@@ -63,7 +63,7 @@ export function ChoiceField({
       placeholder={definition.placeholder}
       required={definition.required}
       disabled={definition.disabled}
-      icon={definition.icon}
+      leftSection={definition.icon}
       withinPortal={true}
     />
   );

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

@@ -61,7 +61,7 @@ export default function DateField({
       label={definition.label}
       description={definition.description}
       placeholder={definition.placeholder}
-      icon={definition.icon}
+      leftSection={definition.icon}
     />
   );
 }

src/frontend/src/components/items/ActionDropdown.tsx

@@ -77,7 +77,7 @@ export function ActionDropdown({
             >
               <Tooltip label={action.tooltip}>
                 <Menu.Item
-                  icon={action.icon}
+                  leftSection={action.icon}
                   onClick={() => {
                     if (action.onClick != undefined) {
                       action.onClick();

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

@@ -31,7 +31,7 @@ export function PlaceholderPanel() {
         title={t`This panel is a placeholder.`}
         icon={<IconInfoCircle />}
       >
-        <Text color="gray">This panel has not yet been implemented</Text>
+        <Text c="gray">This panel has not yet been implemented</Text>
       </Alert>
     </Stack>
   );

src/frontend/src/components/modals/QrCodeModal.tsx

@@ -177,7 +177,7 @@ export function QrCodeModal({
             </Button>
           </Group>
           {values.length == 0 ? (
-            <Text color={'grey'}>
+            <Text c={'grey'}>
               <Trans>No scans yet!</Trans>
             </Text>
           ) : (

src/frontend/src/components/nav/Header.tsx

@@ -128,11 +128,11 @@ function NavTabs() {
       defaultValue="home"
       classNames={{
         root: classes.tabs,
-        tabsList: classes.tabsList,
+        list: classes.tabsList,
         tab: classes.tab
       }}
       value={tabValue}
-      onTabChange={(value) =>
+      onChange={(value) =>
         value == '/' ? navigate('/') : navigate(`/${value}`)
       }
     >

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

@@ -38,12 +38,16 @@ export function MainMenu() {
         <Menu.Label>
           <Trans>Settings</Trans>
         </Menu.Label>
-        <Menu.Item icon={<IconUserCog />} component={Link} to="/settings/user">
+        <Menu.Item
+          leftSection={<IconUserCog />}
+          component={Link}
+          to="/settings/user"
+        >
           <Trans>Account settings</Trans>
         </Menu.Item>
         {userState.user?.is_staff && (
           <Menu.Item
-            icon={<IconSettings />}
+            leftSection={<IconSettings />}
             component={Link}
             to="/settings/system"
           >
@@ -53,7 +57,7 @@ export function MainMenu() {
         {userState.user?.is_staff && <Menu.Divider />}
         {userState.user?.is_staff && (
           <Menu.Item
-            icon={<IconUserBolt />}
+            leftSection={<IconUserBolt />}
             component={Link}
             to="/settings/admin"
           >
@@ -62,7 +66,7 @@ export function MainMenu() {
         )}
         <Menu.Divider />
         <Menu.Item
-          icon={<IconLogout />}
+          leftSection={<IconLogout />}
           onClick={() => {
             doLogout(navigate);
           }}

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

@@ -108,7 +108,7 @@ function BasePanelGroup({
       <Tabs
         value={panel}
         orientation="vertical"
-        onTabChange={handlePanelChange}
+        onChange={handlePanelChange}
         keepMounted={false}
       >
         <Tabs.List position="left">
@@ -124,7 +124,7 @@ function BasePanelGroup({
                     p="xs"
                     value={panel.name}
                     //                    icon={(<InvenTreeIcon icon={panel.name}/>)}  // Enable when implementing Icon manager everywhere
-                    icon={panel.icon}
+                    leftSection={panel.icon}
                     hidden={panel.hidden}
                     disabled={panel.disabled}
                     style={{ cursor: panel.disabled ? 'unset' : 'pointer' }}

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

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

src/frontend/src/components/nav/SearchDrawer.tsx

@@ -337,7 +337,7 @@ export function SearchDrawer({
             radius="xs"
             value={value}
             onChange={(event) => setValue(event.currentTarget.value)}
-            icon={<IconSearch size="0.8rem" />}
+            leftSection={<IconSearch size="0.8rem" />}
             rightSection={
               value && (
                 <IconBackspace color="red" onClick={() => setValue('')} />

src/frontend/src/components/widgets/WidgetLayout.tsx

@@ -160,13 +160,13 @@ function WidgetControlBar({
             <Trans>Layout</Trans>
           </Menu.Label>
           <Menu.Item
-            icon={<IconArrowBackUpDouble size={14} />}
+            leftSection={<IconArrowBackUpDouble size={14} />}
             onClick={resetLayout}
           >
             <Trans>Reset Layout</Trans>
           </Menu.Item>
           <Menu.Item
-            icon={
+            leftSection={
               <IconLayout2 size={14} color={editable ? 'red' : undefined} />
             }
             onClick={editFnc}
@@ -185,7 +185,7 @@ function WidgetControlBar({
             <Trans>Appearance</Trans>
           </Menu.Label>
           <Menu.Item
-            icon={
+            leftSection={
               boxShown ? (
                 <IconSquareCheck size={14} />
               ) : (

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

@@ -11,7 +11,6 @@ import {
   Table,
   Title
 } from '@mantine/core';
-import { LoaderType } from '@mantine/styles/lib/theme/types/MantineTheme';
 import { useState } from 'react';
 
 import { SizeMarks } from '../../../../defaults/defaults';
@@ -67,8 +66,8 @@ export function UserTheme({ height }: { height: number }) {
     { value: 'oval', label: t`oval` },
     { value: 'dots', label: t`dots` }
   ];
-  const [loader, setLoader] = useState<LoaderType>(theme.loader);
+  const [loader, setLoader] = useState<string>(theme.loader);
-  function changeLoader(value: LoaderType) {
+  function changeLoader(value: string) {
     setLoader(value);
     useLocalState.setState({ loader: value });
   }

src/frontend/src/tables/RowActions.tsx

@@ -114,7 +114,7 @@ export function RowActions({
       >
         <Menu.Item
           color={action.color}
-          icon={action.icon}
+          leftSection={action.icon}
           onClick={(event) => {
             // Prevent clicking on the action from selecting the row itself
             cancelEvent(event);

src/frontend/src/tables/bom/BomTable.tsx

@@ -217,7 +217,7 @@ export function BomTable({
           can_build = Math.trunc(can_build);
 
           return (
-            <Text color={can_build <= 0 ? 'red' : undefined}>{can_build}</Text>
+            <Text c={can_build <= 0 ? 'red' : undefined}>{can_build}</Text>
           );
         }
       },

src/frontend/src/tables/build/BuildLineTable.tsx

@@ -109,7 +109,7 @@ export default function BuildLineTable({ params = {} }: { params?: any }) {
           available > 0 ? (
             available
           ) : (
-            <Text color="red" italic>{t`No stock available`}</Text>
+            <Text c="red" italic>{t`No stock available`}</Text>
           )
         }
         title={t`Available Stock`}

src/frontend/src/tables/machine/MachineListTable.tsx

@@ -287,7 +287,10 @@ function MachineDrawer({
             </ActionIcon>
           </Group>
           <Stack pos="relative" gap="xs">
-            <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{ opacity: 0 }}
+            />
             <InfoItem name={t`Machine Type`}>
               <Group gap="xs">
                 {machineType ? (

src/frontend/src/tables/machine/MachineTypeTable.tsx

@@ -102,7 +102,10 @@ function MachineTypeDrawer({ machineTypeSlug }: { machineTypeSlug: string }) {
           </Group>
 
           <Stack pos="relative" gap="xs">
-            <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{ opacity: 0 }}
+            />
             <InfoItem name={t`Name`} value={machineType?.name} type="text" />
             <InfoItem name={t`Slug`} value={machineType?.slug} type="text" />
             <InfoItem
@@ -206,7 +209,10 @@ function MachineDriverDrawer({
           </Group>
 
           <Stack pos="relative" gap="xs">
-            <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{ opacity: 0 }}
+            />
             <InfoItem name={t`Name`} value={machineDriver?.name} type="text" />
             <InfoItem name={t`Slug`} value={machineDriver?.slug} type="text" />
             <InfoItem

src/frontend/src/tables/part/PartTable.tsx

@@ -141,7 +141,7 @@ function partTableColumns(): TableColumn[] {
           <TableHoverCard
             value={
               <Group gap="xs" justify="left" wrap="nowrap">
-                <Text color={color}>{text}</Text>
+                <Text c={color}>{text}</Text>
                 {record.units && (
                   <Text size="xs" color={color}>
                     [{record.units}]

src/frontend/src/tables/plugin/PluginListTable.tsx

@@ -158,7 +158,7 @@ export function PluginDrawer({
         />
       </Group>
 
-      <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+      <LoadingOverlay visible={isFetching} overlayProps={{ opacity: 0 }} />
 
       <Card withBorder>
         <Stack gap="md">

src/frontend/src/tables/stock/StockItemTable.tsx

@@ -179,7 +179,7 @@ function stockItemTableColumns(): TableColumn[] {
           <TableHoverCard
             value={
               <Group gap="xs" justify="left" wrap="nowrap">
-                <Text color={color}>{text}</Text>
+                <Text c={color}>{text}</Text>
                 {part.units && (
                   <Text size="xs" color={color}>
                     [{part.units}]