chore(MUI): bump to latest

boklisten · Dec 13, 2024 · 955a040 · 955a040
1 parent 75dc9a3
commit 955a040
Show file tree

Hide file tree

Showing 22 changed files with 345 additions and 251 deletions.
diff --git a/package.json b/package.json
@@ -25,11 +25,11 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@fontsource/roboto": "^5.1.0",
-    "@mui/icons-material": "^5.15.21",
-    "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "^5.15.21",
-    "@mui/material-nextjs": "^5.15.11",
-    "@mui/x-date-pickers": "^7.8.0",
+    "@mui/icons-material": "^6.2.0",
+    "@mui/lab": "^6.0.0-beta.19",
+    "@mui/material": "^6.2.0",
+    "@mui/material-nextjs": "^6.2.0",
+    "@mui/x-date-pickers": "^7.23.2",
     "@yudiel/react-qr-scanner": "^2.0.8",
     "draft-js": "^0.11.7",
     "moment": "^2.30.1",

diff --git a/src/app/matches/page.tsx b/src/app/matches/page.tsx
@@ -13,7 +13,12 @@ export const metadata: Metadata = {
 export default function MatchesPage() {
   return (
     <Box sx={{ padding: 2 }}>
-      <Typography variant="h1" mb={2}>
+      <Typography
+        variant="h1"
+        sx={{
+          mb: 2,
+        }}
+      >
         Mine overleveringer
       </Typography>
       <Suspense>

diff --git a/src/app/sjekk/page.tsx b/src/app/sjekk/page.tsx
@@ -14,9 +14,18 @@ export default function PublicBlidSearchPage() {
   return (
     <Card sx={{ paddingBottom: 4 }}>
       <Container component="main" maxWidth="xs">
-        <Stack alignItems={"center"} mt={4}>
+        <Stack
+          sx={{
+            alignItems: "center",
+            mt: 4,
+          }}
+        >
           <Typography variant="h1">Boksøk</Typography>
-          <Box width="100%">
+          <Box
+            sx={{
+              width: "100%",
+            }}
+          >
             <PublicBlidSearch />
           </Box>
         </Stack>

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -55,8 +55,12 @@ export default function NavBar() {
         <Toolbar sx={{ paddingY: "10px" }}>
           <DynamicLink href={"/"}>
             <Box
-              sx={{ display: "flex", alignItems: "center", cursor: "pointer" }}
-              color="secondary"
+              sx={{
+                color: "secondary",
+                display: "flex",
+                alignItems: "center",
+                cursor: "pointer",
+              }}
             >
               <Image
                 src="/boklisten_logo_v2_icon_white_lg.png"

diff --git a/src/components/RapidHandoutDetails.tsx b/src/components/RapidHandoutDetails.tsx
@@ -78,7 +78,14 @@ export default function RapidHandoutDetails({
     </Alert>
   ) : (
     <>
-      <Typography variant={"h2"} textAlign={"center"} mt={6} mb={2}>
+      <Typography
+        variant={"h2"}
+        sx={{
+          textAlign: "center",
+          mt: 6,
+          mb: 2,
+        }}
+      >
         Plukkliste
       </Typography>
       <Button

diff --git a/src/components/matches/MatchScannerContent.tsx b/src/components/matches/MatchScannerContent.tsx
@@ -26,11 +26,19 @@ export default function MatchScannerContent({
   }, [expectedItems.length, fulfilledItems.length, handleClose, scannerOpen]);
   return (
     <>
-      <Box width={0.9}>
+      <Box
+        sx={{
+          width: 0.9,
+        }}
+      >
         <ProgressBar
           percentComplete={(fulfilledItems.length * 100) / expectedItems.length}
           subtitle={
-            <Typography textAlign={"center"}>
+            <Typography
+              sx={{
+                textAlign: "center",
+              }}
+            >
               {fulfilledItems.length} av {expectedItems.length} bøker mottatt
             </Typography>
           }

diff --git a/src/components/matches/UserMatchDetail.tsx b/src/components/matches/UserMatchDetail.tsx
@@ -58,9 +58,12 @@ const UserMatchDetail = ({
       <Typography variant="h1">
         <UserMatchTitle match={match} isSender={isSender} />
       </Typography>
-
       {isFulfilled && (
-        <Box my={2}>
+        <Box
+          sx={{
+            my: 2,
+          }}
+        >
           <Alert>
             Du har {isSender ? "levert" : "mottatt"} alle bøkene for denne
             overleveringen.
@@ -70,7 +73,6 @@ const UserMatchDetail = ({
           )}
         </Box>
       )}
-
       <ProgressBar
         percentComplete={
           (fulfilledItems.length * 100) / match.expectedItems.length
@@ -82,7 +84,6 @@ const UserMatchDetail = ({
           </>
         }
       />
-
       {isSender &&
         otherPersonFulfilledItems.some(
           (item) => !fulfilledItems.includes(item),
@@ -101,7 +102,6 @@ const UserMatchDetail = ({
             </Typography>
           </Alert>
         )}
-
       {!isFulfilled && (
         <>
           <Box sx={{ my: 2 }}>
@@ -118,7 +118,6 @@ const UserMatchDetail = ({
           <OtherPersonContact match={match} currentUserId={currentUserId} />
         </>
       )}
-
       {!isSender && !isFulfilled && (
         <>
           <MatchHeader>Når du skal motta bøkene</MatchHeader>
@@ -141,14 +140,12 @@ const UserMatchDetail = ({
           </Box>
         </>
       )}
-
       {!isFulfilled && (
         <MatchHeader>
           Du skal {isSender ? "levere" : "motta"} disse bøkene
         </MatchHeader>
       )}
       <MatchItemTable itemStatuses={itemStatuses} isSender={isSender} />
-
       <ScannerModal
         onScan={(blid) =>
           BlFetcher.post(BL_CONFIG.collection.match + "/transfer-item", {

diff --git a/src/components/scanner/ScannerModal.tsx b/src/components/scanner/ScannerModal.tsx
@@ -111,7 +111,13 @@ const ScannerModal = ({
           <BlidScanner onResult={handleRegistration} />
         </Box>
         {children}
-        <Stack direction={"row"} gap={1} mt={2}>
+        <Stack
+          direction={"row"}
+          sx={{
+            gap: 1,
+            mt: 2,
+          }}
+        >
           {allowManualRegistration && (
             <Button
               color={"info"}

diff --git a/src/components/search/PublicBlidSearch.tsx b/src/components/search/PublicBlidSearch.tsx
@@ -82,8 +82,8 @@ export default function PublicBlidSearch() {
       >
         <Typography
           variant="body2"
-          textAlign={"center"}
           sx={{
+            textAlign: "center",
             color: "gray",
             fontSize: 14,
             mb: 1,
@@ -98,18 +98,20 @@ export default function PublicBlidSearch() {
           label={"Unik ID"}
           value={blidSearch}
           onChange={(event) => onBlidSearch(event.target.value)}
-          InputProps={{
-            endAdornment: (
-              <Button onClick={() => setScannerModalOpen(true)}>
-                <QrCodeScannerIcon />
-              </Button>
-            ),
+          slotProps={{
+            input: {
+              endAdornment: (
+                <Button onClick={() => setScannerModalOpen(true)}>
+                  <QrCodeScannerIcon />
+                </Button>
+              ),
+            },
           }}
         />
         <Typography
           variant="body2"
-          textAlign={"center"}
           sx={{
+            textAlign: "center",
             color: "gray",
             fontSize: 14,
             mb: 1,
@@ -123,10 +125,15 @@ export default function PublicBlidSearch() {
             blidSearch.length === 0) &&
             "Venter på unik ID"}
         </Typography>
-
         {searchResult !== "inactive" && searchResult !== null && (
           <>
-            <Typography variant={"h5"} textAlign={"center"} mt={0}>
+            <Typography
+              variant={"h5"}
+              sx={{
+                textAlign: "center",
+                mt: 0,
+              }}
+            >
               Denne boken tilhører
             </Typography>
             <Box
@@ -138,7 +145,13 @@ export default function PublicBlidSearch() {
                 margin: "0 auto",
               }}
             >
-              <Typography variant="h5" gutterBottom textAlign="center">
+              <Typography
+                variant="h5"
+                gutterBottom
+                sx={{
+                  textAlign: "center",
+                }}
+              >
                 {searchResult.name}
               </Typography>
 
@@ -203,7 +216,6 @@ export default function PublicBlidSearch() {
             </Box>
           </>
         )}
-
         <ScannerModal
           allowManualRegistration={true} // TEMP
           onScan={async (blid) => {

diff --git a/src/components/search/UserDetailSearchField.tsx b/src/components/search/UserDetailSearchField.tsx
@@ -64,9 +64,11 @@ export default function UserDetailSearchField({
           <TextField
             {...params}
             label="Søk etter kunde"
-            InputProps={{
-              ...params.InputProps,
-              type: "search",
+            slotProps={{
+              input: {
+                ...params.InputProps,
+                type: "search",
+              },
             }}
           />
         )}

diff --git a/src/components/search/UserDetailSearchResult.tsx b/src/components/search/UserDetailSearchResult.tsx
@@ -11,16 +11,38 @@ export default function UserDetailSearchResult({
 }) {
   return (
     <ListItemButton onClick={onClick}>
-      <Stack gap={0.5}>
-        <Stack gap={0.5} direction={"row"} alignItems={"center"}>
+      <Stack
+        sx={{
+          gap: 0.5,
+        }}
+      >
+        <Stack
+          direction={"row"}
+          sx={{
+            gap: 0.5,
+            alignItems: "center",
+          }}
+        >
           <Person />
           <Typography>{userDetail.name}</Typography>
         </Stack>
-        <Stack gap={0.5} direction={"row"} alignItems={"center"}>
+        <Stack
+          direction={"row"}
+          sx={{
+            gap: 0.5,
+            alignItems: "center",
+          }}
+        >
           <Email />
           <Typography>{userDetail.email}</Typography>
         </Stack>
-        <Stack gap={0.5} direction={"row"} alignItems={"center"}>
+        <Stack
+          direction={"row"}
+          sx={{
+            gap: 0.5,
+            alignItems: "center",
+          }}
+        >
           <Phone />
           <Typography>{userDetail.phone}</Typography>
         </Stack>

diff --git a/src/components/user/PasswordReset.tsx b/src/components/user/PasswordReset.tsx
@@ -58,7 +58,13 @@ export default function PasswordReset({ userId }: { userId: string }) {
       sx={{ width: "100%" }}
     >
       {success ? (
-        <Stack alignItems={"center"} gap={2} mt={1}>
+        <Stack
+          sx={{
+            alignItems: "center",
+            gap: 2,
+            mt: 1,
+          }}
+        >
           <Alert severity="success">
             Passordet ble oppdatert! Du kan nå logge inn.
           </Alert>

diff --git a/src/components/user/SignIn.tsx b/src/components/user/SignIn.tsx
@@ -72,7 +72,12 @@ export default function SignIn() {
           alignItems: "center",
         }}
       >
-        <Typography variant="h1" mb={2}>
+        <Typography
+          variant="h1"
+          sx={{
+            mb: 2,
+          }}
+        >
           Logg inn
         </Typography>
         <FacebookButton label={"Logg inn med Facebook"} />
@@ -103,9 +108,6 @@ export default function SignIn() {
           ))}
           <TextField
             data-testid="email-field"
-            inputProps={{
-              inputMode: "email",
-            }}
             required
             fullWidth
             id="email"
@@ -115,6 +117,11 @@ export default function SignIn() {
               validate: (v) =>
                 !v || isEmail(v) ? true : "Du må fylle inn en gyldig e-post",
             })}
+            slotProps={{
+              htmlInput: {
+                inputMode: "email",
+              },
+            }}
           />
           <PasswordField
             autoComplete="current-password"

diff --git a/src/components/user/fields/EmailField.tsx b/src/components/user/fields/EmailField.tsx
@@ -7,15 +7,17 @@ const EmailField = forwardRef(
     <TextField
       data-testid="email-field"
       label="E-post"
-      inputProps={{
-        inputMode: "email",
-      }}
       required
       fullWidth
       id="email"
       autoComplete="email"
       inputRef={ref}
       {...props}
+      slotProps={{
+        htmlInput: {
+          inputMode: "email",
+        },
+      }}
     />
   ),
 );