switch sx to style

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

@@ -165,7 +165,7 @@ function UploadModal({
   const redColor = vars.colors.red[preferredColorScheme === 'dark' ? 4 : 6];
 
   return (
-    <Paper sx={{ height: '220px' }}>
+    <Paper style={{ height: '220px' }}>
       <Dropzone
         onDrop={(files) => setFile(files[0])}
         maxFiles={1}

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

@@ -35,13 +35,13 @@ export function HostOptionsForm({
           <TextInput
             placeholder={t`Host`}
             withAsterisk
-            sx={{ flex: 1 }}
+            style={{ flex: 1 }}
             {...form.getInputProps(`${key}.host`)}
           />
           <TextInput
             placeholder={t`Name`}
             withAsterisk
-            sx={{ flex: 1 }}
+            style={{ flex: 1 }}
             {...form.getInputProps(`${key}.name`)}
           />
           <ActionIcon
@@ -59,13 +59,13 @@ export function HostOptionsForm({
 
   return (
     <form onSubmit={form.onSubmit(saveOptions)}>
-      <Box sx={{ maxWidth: 500 }} mx="auto">
+      <Box style={{ maxWidth: 500 }} mx="auto">
         {fields.length > 0 ? (
           <Group mb="xs">
-            <Text fw={500} size="sm" sx={{ flex: 1 }}>
+            <Text fw={500} size="sm" style={{ flex: 1 }}>
               <Trans>Host</Trans>
             </Text>
-            <Text fw={500} size="sm" sx={{ flex: 1 }}>
+            <Text fw={500} size="sm" style={{ flex: 1 }}>
               <Trans>Name</Trans>
             </Text>
           </Group>
@@ -84,7 +84,7 @@ export function HostOptionsForm({
             <IconSquarePlus />
             <Trans>Add Host</Trans>
           </Button>
-          <Space sx={{ flex: 1 }} />
+          <Space style={{ flex: 1 }} />
           <Button type="submit">
             <Trans>Save</Trans>
           </Button>

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

@@ -19,7 +19,7 @@ export function NestedObjectField({
           <Text>{definition.label}</Text>
         </Accordion.Control>
         <Accordion.Panel>
-          <Divider sx={{ marginTop: '-10px', marginBottom: '10px' }} />
+          <Divider style={{ marginTop: '-10px', marginBottom: '10px' }} />
           <Stack gap="xs">
             {Object.entries(definition.children ?? {}).map(
               ([childFieldName, field]) => (

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

@@ -150,7 +150,7 @@ export function QrCodeModal({
     <Stack>
       <Group>
         <Text size="sm">{camId?.label}</Text>
-        <Space sx={{ flex: 1 }} />
+        <Space style={{ flex: 1 }} />
         <Badge>{ScanningEnabled ? t`Scanning` : t`Not scanning`}</Badge>
       </Group>
       <Container px={0} id="reader" w={'100%'} mih="300px" />
@@ -162,14 +162,14 @@ export function QrCodeModal({
         <>
           <Group>
             <Button
-              sx={{ flex: 1 }}
+              style={{ flex: 1 }}
               onClick={() => startScanning()}
               disabled={camId != undefined && ScanningEnabled}
             >
               <Trans>Start scanning</Trans>
             </Button>
             <Button
-              sx={{ flex: 1 }}
+              style={{ flex: 1 }}
               onClick={() => stopScanning()}
               disabled={!ScanningEnabled}
             >
@@ -181,7 +181,7 @@ export function QrCodeModal({
               <Trans>No scans yet!</Trans>
             </Text>
           ) : (
-            <ScrollArea sx={{ height: 200 }} type="auto" offsetScrollbars>
+            <ScrollArea style={{ height: 200 }} type="auto" offsetScrollbars>
               {values.map((value, index) => (
                 <div key={index}>{value}</div>
               ))}

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

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

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

@@ -55,7 +55,7 @@ export function NavHoverMenu({
         </UnstyledButton>
       </HoverCard.Target>
 
-      <HoverCard.Dropdown sx={{ overflow: 'hidden' }}>
+      <HoverCard.Dropdown style={{ overflow: 'hidden' }}>
         <Group justify="apart" px="md">
           <ActionIcon
             onClick={openDrawer}

src/frontend/src/pages/Index/Playground.tsx

@@ -129,7 +129,7 @@ function ApiFormsPlayground() {
         <Button onClick={() => openCreatePart()}>Create Part new Modal</Button>
         {createPartModal}
       </Group>
-      <Card sx={{ padding: '30px' }}>
+      <Card style={{ padding: '30px' }}>
         <OptionsApiForm
           props={{
             url: ApiEndpoints.part_list,

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

@@ -719,7 +719,7 @@ function InputImageBarcode({ action }: inputProps) {
             <IconPlayerPlayFilled />
           </ActionIcon>
         )}
-        <Space sx={{ flex: 1 }} />
+        <Space style={{ flex: 1 }} />
         <Badge color={ScanningEnabled ? 'green' : 'orange'}>
           {ScanningEnabled ? t`Scanning` : t`Not scanning`}
         </Badge>

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

@@ -341,7 +341,7 @@ function MachineDrawer({
                 <Trans>Errors</Trans>:
               </Text>
               {machine && machine?.machine_errors.length > 0 ? (
-                <Badge color="red" sx={{ marginLeft: '10px' }}>
+                <Badge color="red" style={{ marginLeft: '10px' }}>
                   {machine?.machine_errors.length}
                 </Badge>
               ) : (

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

@@ -261,7 +261,7 @@ function MachineDriverDrawer({
                 <Trans>Errors</Trans>:
               </Text>
               {machineDriver && machineDriver?.driver_errors.length > 0 ? (
-                <Badge color="red" sx={{ marginLeft: '10px' }}>
+                <Badge color="red" style={{ marginLeft: '10px' }}>
                   {machineDriver.driver_errors.length}
                 </Badge>
               ) : (