misc fixes

src/frontend/src/components/buttons/SplitButton.css.ts

@@ -6,7 +6,8 @@ import { vars } from '../../theme';
 export const button = style({
   borderTopRightRadius: 0,
   borderBottomRightRadius: 0,
-  '&::before': {
+
+  ':before': {
     borderRadius: '0 !important'
   }
 });

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

@@ -120,7 +120,7 @@ function UploadModal({
       >
         <Image
           src={imageUrl}
-          imageProps={{ onLoad: () => URL.revokeObjectURL(imageUrl) }}
+          onLoad={() => URL.revokeObjectURL(imageUrl)}
           radius="sm"
           height={75}
           fit="contain"

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

@@ -230,16 +230,16 @@ export function ApiFormField({
             id={fieldId}
             value={numericalValue}
             error={error?.message}
-            formatter={(value) => {
+            /*formatter={(props: any) => {
-              let v: any = parseFloat(value);
+              let v: any = parseFloat(props.value);
 
               if (Number.isNaN(v) || !Number.isFinite(v)) {
-                return value;
+                return props.value;
               }
 
               return `${1 * v.toFixed()}`;
-            }}
+            }}*/
-            precision={definition.field_type == 'integer' ? 0 : 10}
+            decimalScale={definition.field_type == 'integer' ? 0 : 10}
             onChange={(value) => onChange(value)}
           />
         );

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

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

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

@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { Input, useMantineTheme } from '@mantine/core';
+import { Input, darken, useMantineTheme } from '@mantine/core';
 import { useColorScheme, useDebouncedValue } from '@mantine/hooks';
 import { useId } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
@@ -245,16 +245,16 @@ export function RelatedModelField({
     } else {
       colors = {
         neutral0: vars.colors.white,
-        neutral5: theme.fn.darken(theme.white, 0.05),
+        neutral5: darken(vars.colors.white, 0.05),
-        neutral10: theme.fn.darken(theme.white, 0.1),
+        neutral10: darken(vars.colors.white, 0.1),
-        neutral20: theme.fn.darken(theme.white, 0.2),
+        neutral20: darken(vars.colors.white, 0.2),
-        neutral30: theme.fn.darken(theme.white, 0.3),
+        neutral30: darken(vars.colors.white, 0.3),
-        neutral40: theme.fn.darken(theme.white, 0.4),
+        neutral40: darken(vars.colors.white, 0.4),
-        neutral50: theme.fn.darken(theme.white, 0.5),
+        neutral50: darken(vars.colors.white, 0.5),
-        neutral60: theme.fn.darken(theme.white, 0.6),
+        neutral60: darken(vars.colors.white, 0.6),
-        neutral70: theme.fn.darken(theme.white, 0.7),
+        neutral70: darken(vars.colors.white, 0.7),
-        neutral80: theme.fn.darken(theme.white, 0.8),
+        neutral80: darken(vars.colors.white, 0.8),
-        neutral90: theme.fn.darken(theme.white, 0.9),
+        neutral90: darken(vars.colors.white, 0.9),
         primary: vars.colors.primaryColors[7],
         primary25: vars.colors.primaryColors[4],
         primary50: vars.colors.primaryColors[5],

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

@@ -11,10 +11,14 @@ import { useState } from 'react';
 
 import { api } from '../../App';
 
+interface ApiImageProps extends ImageProps {
+  onClick?: (event: any) => void;
+}
+
 /**
  * Construct an image container which will load and display the image
  */
-export function ApiImage(props: ImageProps) {
+export function ApiImage(props: ApiImageProps) {
   const [image, setImage] = useState<string>('');
 
   const [authorized, setAuthorized] = useState<boolean>(true);

src/frontend/src/components/items/GettingStartedCarousel.tsx

@@ -44,9 +44,8 @@ export function GettingStartedCarousel({
 
   return (
     <Carousel
-      slideSize="50%"
+      slideSize={{ base: '50%', sm: '100%' }}
-      breakpoints={[{ maxWidth: 'sm', slideSize: '100%', slideGap: rem(2) }]}
+      slideGap={{ base: 'xl', sm: rem(2) }}
-      slideGap="xl"
       align="start"
     >
       {slides}

src/frontend/src/main.css.ts

@@ -93,7 +93,7 @@ export const subLink = style({
   //       : vars.colors.gray[0]
   // })
 
-  '&:active': vars.activeStyles
+  ':active': vars.activeStyles
 });
 
 export const docHover = style({
@@ -145,7 +145,7 @@ export const tab = style({
   height: 38,
   backgroundColor: 'transparent',
 
-  '&:hover': {
+  ':hover': {
     backgroundColor:
       //theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1]
       vars.colors.gray[1]

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

@@ -406,7 +406,6 @@ function HistoryTable({
           <Checkbox
             checked={selection.includes(item.id)}
             onChange={() => toggleRow(item.id)}
-            transitionDuration={0}
           />
         </td>
         <td>
@@ -442,7 +441,6 @@ function HistoryTable({
                 indeterminate={
                   selection.length > 0 && selection.length !== data.length
                 }
-                transitionDuration={0}
               />
             </th>
             <th>

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

@@ -66,11 +66,13 @@ export function UserTheme({ height }: { height: number }) {
     { value: 'oval', label: t`oval` },
     { value: 'dots', label: t`dots` }
   ];
-  const [loader, setLoader] = useState<string>(theme.loader);
+  const [themeLoader, setThemeLoader] = useLocalState((state) => [
+    state.loader,
+    state.setLoader
+  ]);
   function changeLoader(value: string | null) {
     if (value === null) return;
-    setLoader(value);
+    setThemeLoader(value);
-    useLocalState.setState({ loader: value });
   }
 
   return (
@@ -133,10 +135,10 @@ export function UserTheme({ height }: { height: number }) {
               <Group align="center">
                 <Select
                   data={loaderDate}
-                  value={loader}
+                  value={themeLoader}
                   onChange={changeLoader}
                 />
-                <Loader type={loader} mah={18} />
+                <Loader type={themeLoader} mah={18} />
               </Group>
             </td>
           </tr>

src/frontend/src/states/LocalState.tsx

@@ -20,6 +20,7 @@ interface LocalStateProps {
   blackColor: string;
   radius: MantineSize | (string & {}) | number;
   loader: string;
+  setLoader: (value: string) => void;
   lastUsedPanels: Record<string, string>;
   setLastUsedPanel: (panelKey: string) => (value: string) => void;
   tableColumnNames: Record<string, Record<string, string>>;
@@ -56,6 +57,9 @@ export const useLocalState = create<LocalStateProps>()(
       blackColor: '#000',
       radius: 'xs',
       loader: 'oval',
+      setLoader(value) {
+        set({ loader: value });
+      },
       // panels
       lastUsedPanels: {},
       setLastUsedPanel: (panelKey) => (value) => {

src/frontend/src/tables/Column.tsx

@@ -14,7 +14,7 @@ export type TableColumn<T = any> = {
   width?: number; // The width of the column
   noWrap?: boolean; // Whether the column should wrap
   ellipsis?: boolean; // Whether the column should be ellipsized
-  textAlignment?: 'left' | 'center' | 'right'; // The text alignment of the column
+  textAlign?: 'left' | 'center' | 'right'; // The text alignment of the column
   cellsStyle?: any; // The style of the cells in the column
   extra?: any; // Extra data to pass to the render function
 };

src/frontend/src/tables/InvenTreeTable.tsx

@@ -633,10 +633,10 @@ export function InvenTreeTable<T = any>({
           />
 
           <DataTable
-            withBorder
+            withTableBorder
             striped
             highlightOnHover
-            loaderVariant="dots"
+            loaderType="dots"
             pinLastColumn={tableProps.rowActions != undefined}
             idAccessor={tableProps.idAccessor}
             minHeight={300}
@@ -663,11 +663,11 @@ export function InvenTreeTable<T = any>({
             onCellClick={tableProps.onCellClick}
             defaultColumnProps={{
               noWrap: true,
-              textAlignment: 'left',
+              textAlign: 'left',
-              cellsStyle: {
+              cellsStyle: () => (theme) => ({
                 // TODO @SchrodingersGat : Need a better way of handling "wide" cells,
                 overflow: 'hidden'
-              }
+              })
             }}
           />
         </Box>