fix: breaking changes in migrating mantine v6

src/components/StatCard.tsx

@@ -3,7 +3,7 @@ import { ArrowDownRight, ArrowUpRight } from 'react-feather';
 
 const useStyles = createStyles((theme) => ({
   root: {
-    padding: theme.spacing.xl * 1.5,
+    padding: `calc(${theme.spacing.xl} * 1.5)`,
   },
 
   value: {

src/components/Theming.tsx

@@ -112,8 +112,10 @@ export default function ZiplineTheming({ Component, pageProps, ...props }) {
           },
           LoadingOverlay: {
             defaultProps: {
-              overlayBlur: 3,
+              overlayProps: {
-              overlayColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
+                blur: 3,
+                color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
+              },
             },
           },
           Loader: {

src/components/pages/Files/FilePagation.tsx

@@ -96,7 +96,7 @@ export default function FilePagation({ disableMediaPreview, exifEnabled, queryPa
           }}
         >
           {!isMobile && <div></div>}
-          <Pagination total={numPages} page={page} onChange={setPage} withEdges />
+          <Pagination total={numPages} value={page} onChange={setPage} withEdges />
           {!isMobile && (
             <Checkbox
               label='Show non-media files'

src/components/pages/Files/index.tsx

@@ -64,7 +64,7 @@ export default function Files({ disableMediaPreview, exifEnabled, queryPage }) {
                   paddingBottom: 3,
                 }}
               >
-                <Pagination total={favoriteNumPages} page={favoritePage} onChange={setFavoritePage} />
+                <Pagination total={favoriteNumPages} value={favoritePage} onChange={setFavoritePage} />
               </Box>
             </Accordion.Panel>
           </Accordion.Item>

src/components/pages/Invites.tsx

@@ -132,7 +132,7 @@ export default function Invites() {
     modals.openConfirmModal({
       title: `Delete ${invite.code}?`,
       centered: true,
-      overlayBlur: 3,
+      overlayProps: { blur: 3 },
       labels: { confirm: 'Yes', cancel: 'No' },
       onConfirm: async () => {
         const res = await useFetch(`/api/auth/invite?code=${invite.code}`, 'DELETE');

src/components/pages/Users/index.tsx

@@ -55,7 +55,7 @@ export default function Users() {
           title: `Delete ${user.username}'s files?`,
           labels: { confirm: 'Yes', cancel: 'No' },
           centered: true,
-          overlayBlur: 3,
+          overlayProps: { blur: 3 },
           onConfirm: () => {
             handleDelete(user, true);
             modals.closeAll();

src/pages/view/[id].tsx

@@ -129,7 +129,7 @@ export default function EmbeddedFile({
         withCloseButton={true}
         closeOnEscape={false}
         closeOnClickOutside={false}
-        overlayBlur={3}
+        overlayProps={{ blur: 3 }}
       >
         <PasswordInput
           label='Password'