@canmingir/link 1.2.27 → 1.2.31

package/src/components/settings/drawer/presets-options.jsx

@@ -7,11 +7,12 @@ import { presetOptions } from "../../../theme/options/presets";
 export default function PresetsOptions({ value, onChange }) {
   return (
     <Box
-      columnGap={2}
-      rowGap={1.5}
-      display="grid"
-      gridTemplateColumns="repeat(3, 1fr)"
-    >
+      sx={{
+        columnGap: 2,
+        rowGap: 1.5,
+        display: "grid",
+        gridTemplateColumns: "repeat(3, 1fr)"
+      }}>
       {presetOptions.map((option) => {
         const selected = value === option.name;
 

package/src/components/settings/drawer/settings-drawer.jsx

@@ -32,10 +32,13 @@ export default function SettingsDrawer() {
   const renderHead = (
     <Stack
       direction="row"
-      alignItems="center"
-      justifyContent="space-between"
-      sx={{ py: 2, pr: 1, pl: 2.5 }}
-    >
+      sx={{
+        alignItems: "center",
+        justifyContent: "space-between",
+        py: 2,
+        pr: 1,
+        pl: 2.5
+      }}>
       <Typography variant="h6" sx={{ flexGrow: 1 }}>
         Settings
       </Typography>

package/src/components/settings/drawer/stretch-options.jsx

@@ -30,16 +30,16 @@ export default function StretchOptions({ value, onChange }) {
     >
       <Stack
         direction="row"
-        alignItems="center"
-        justifyContent="space-between"
         sx={{
+          alignItems: "center",
+          justifyContent: "space-between",
           width: 0.24,
           transition: (theme) => theme.transitions.create(["width"]),
+
           ...(value && {
             width: 0.5,
-          }),
-        }}
-      >
+          })
+        }}>
         <Iconify
           icon={
             value ? "eva:arrow-ios-back-fill" : "eva:arrow-ios-forward-fill"

package/src/layouts/DashboardLayout/header.jsx

@@ -46,12 +46,13 @@ export default function Header({ onOpenNav }) {
       {projectBar && <ProjectBar />}
 
       <Stack
-        flexGrow={1}
         direction="row"
-        alignItems="center"
-        justifyContent="flex-end"
         spacing={{ xs: 0.5, sm: 1 }}
-      >
+        sx={{
+          flexGrow: 1,
+          alignItems: "center",
+          justifyContent: "flex-end"
+        }}>
         <NotificationsPopover />
 
         <SettingsButton />

package/src/layouts/DashboardLayout/nav-mini.jsx

@@ -39,7 +39,6 @@ export default function NavMini({ only }) {
           }}
         />
       )}
-
       <Stack
         sx={{
           pb: 2,
@@ -60,16 +59,15 @@ export default function NavMini({ only }) {
         <Box sx={{ flexGrow: 1 }} />
         <Stack
           direction={"column"}
-          alignItems={"center"}
-          justifyItems={"center"}
           sx={{
+            alignItems: "center",
+            justifyItems: "center",
+            gap: 2,
             marginBottom: 0,
             position: lgUp ? "static" : "fixed",
             bottom: lgUp ? "auto" : 66,
-            width: "100%",
-          }}
-          gap={2}
-        >
+            width: "100%"
+          }}>
           {actionButtons &&
             actionButtons.map((Action, index) => (
               <Box key={index} component={Action}></Box>

package/src/layouts/DashboardLayout/nav-vertical.jsx

@@ -123,16 +123,15 @@ export default function NavVertical({ openNav, onCloseNav }) {
       <Box sx={{ flexGrow: 1 }} />
       <Stack
         direction={"column"}
-        alignItems={"center"}
-        justifyItems={"center"}
         sx={{
+          alignItems: "center",
+          justifyItems: "center",
+          gap: 2,
           marginBottom: lgUp ? 3 : 0,
           position: lgUp ? "static" : "fixed",
           bottom: lgUp ? "auto" : 66,
-          width: "100%",
-        }}
-        gap={2}
-      >
+          width: "100%"
+        }}>
         {actionButtons &&
           actionButtons?.map((Action, index) => (
             <Box key={index} component={Action}></Box>
@@ -171,7 +170,6 @@ export default function NavVertical({ openNav, onCloseNav }) {
       }}
     >
       <NavToggleButton />
-
       {lgUp ? (
         <Stack
           sx={{
@@ -187,10 +185,12 @@ export default function NavVertical({ openNav, onCloseNav }) {
         <Drawer
           open={openNav}
           onClose={onCloseNav}
-          PaperProps={{
-            sx: {
-              width: NAV.W_VERTICAL,
-            },
+          slotProps={{
+            paper: {
+              sx: {
+                width: NAV.W_VERTICAL,
+              },
+            }
           }}
         >
           {renderContent}

package/src/layouts/FullScreenLayout/FullScreenLayout.jsx

@@ -63,7 +63,11 @@ export default function FullScreenLayout() {
         return (
           <>
             {renderHorizontal}
-            <Stack width={"100%"} sx={{ mt: 7 }}>
+            <Stack
+              sx={{
+                width: "100%",
+                mt: 7
+              }}>
               <Outlet />
             </Stack>
           </>

package/src/layouts/FullScreenLayout/nav-vertical.jsx

@@ -62,16 +62,15 @@ export default function NavVertical({ openNav, onCloseNav }) {
       <Box sx={{ flexGrow: 1 }} />
       <Stack
         direction={"column"}
-        alignItems={"center"}
-        justifyItems={"center"}
         sx={{
+          alignItems: "center",
+          justifyItems: "center",
+          gap: 2,
           marginBottom: lgUp ? 3 : 0,
           position: lgUp ? "static" : "fixed",
           bottom: lgUp ? "auto" : 66,
-          width: "100%",
-        }}
-        gap={2}
-      >
+          width: "100%"
+        }}>
         {actionButtons &&
           actionButtons.map((Action, index) => (
             <Box key={index} component={Action}></Box>
@@ -105,7 +104,6 @@ export default function NavVertical({ openNav, onCloseNav }) {
       }}
     >
       <NavToggleButton />
-
       {lgUp ? (
         <Stack
           sx={{
@@ -121,10 +119,12 @@ export default function NavVertical({ openNav, onCloseNav }) {
         <Drawer
           open={openNav}
           onClose={onCloseNav}
-          PaperProps={{
-            sx: {
-              width: NAV.W_VERTICAL,
-            },
+          slotProps={{
+            paper: {
+              sx: {
+                width: NAV.W_VERTICAL,
+              },
+            }
           }}
         >
           {renderContent}

package/src/layouts/MainLayout/footer.jsx

@@ -104,12 +104,11 @@ export default function Footer() {
 
             <Stack
               direction="row"
-              justifyContent={{ xs: "center", md: "flex-start" }}
               sx={{
+                justifyContent: { xs: "center", md: "flex-start" },
                 mt: 3,
-                mb: { xs: 5, md: 0 },
-              }}
-            ></Stack>
+                mb: { xs: 5, md: 0 }
+              }}></Stack>
           </Grid>
 
           <Grid xs={12} md={6}>
@@ -118,9 +117,10 @@ export default function Footer() {
                 <Stack
                   key={list.headline}
                   spacing={2}
-                  alignItems={{ xs: "center", md: "flex-start" }}
-                  sx={{ width: 1 }}
-                >
+                  sx={{
+                    alignItems: { xs: "center", md: "flex-start" },
+                    width: 1
+                  }}>
                   <Typography component="div" variant="overline">
                     {list.headline}
                   </Typography>

package/src/layouts/MainLayout/header.jsx

@@ -61,8 +61,10 @@ export default function Header() {
           {mdUp && <NavDesktop data={topMenu} />}
 
           <Stack
-            alignItems="center"
             direction={{ xs: "row", md: "row-reverse" }}
+            sx={{
+              alignItems: "center"
+            }}
           >
             <NotificationsPopover />
 
@@ -74,7 +76,6 @@ export default function Header() {
           </Stack>
         </Container>
       </Toolbar>
-
       {offsetTop && <HeaderShadow />}
     </AppBar>
   );

package/src/layouts/MainLayout/nav/desktop/nav-list.jsx

@@ -103,18 +103,19 @@ function NavSubList({ data, subheader, sx, ...other }) {
   return (
     <Stack
       spacing={2}
-      flexGrow={1}
-      alignItems="flex-start"
-      sx={{
+      {...other}
+      sx={[{
+        flexGrow: 1,
+        alignItems: "flex-start",
         pb: 2,
+
         ...(dashboard && {
           pb: 0,
           maxWidth: { md: 1 / 3, lg: 540 },
         }),
-        ...sx,
-      }}
-      {...other}
-    >
+
+        ...sx
+      }, ...(Array.isArray(other.sx) ? other.sx : [other.sx])]}>
       <ListSubheader
         disableSticky
         sx={{
@@ -126,7 +127,6 @@ function NavSubList({ data, subheader, sx, ...other }) {
       >
         {subheader}
       </ListSubheader>
-
       {data.map((item) =>
         dashboard ? (
           <NavItemDashboard key={item.title} path={item.path} />

package/src/layouts/MainLayout/nav/mobile/index.jsx

@@ -36,15 +36,16 @@ export default function NavMobile({ data }) {
       <IconButton onClick={handleOpenMenu} sx={{ ml: 1 }}>
         <SvgColor src="/assets/icons/navbar/ic_menu_item.svg" />
       </IconButton>
-
       <Drawer
         open={openMenu}
         onClose={handleCloseMenu}
-        PaperProps={{
-          sx: {
-            pb: 5,
-            width: 260,
-          },
+        slotProps={{
+          paper: {
+            sx: {
+              pb: 5,
+              width: 260,
+            },
+          }
         }}
       >
         <Scrollbar>

package/src/layouts/TwoSideLayout/TwoSideLayout.jsx

@@ -1,5 +1,5 @@
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Unstable_Grid2";
+import Grid from "@mui/material/Grid";
 import React from "react";
 import Typography from "@mui/material/Typography";
 // ----------------------------------------------------------------------
@@ -12,14 +12,20 @@ export default function TwoSideLayout({ rows, title }) {
       <Typography variant="h4" sx={{ mb: 5 }}>
         {title}
       </Typography>
-
       {Object.values(rowData).map((array, index) => {
         const eleman_sayisi = array.length;
         const grid_sayisi = 12 / eleman_sayisi;
         return (
           <Grid container spacing={3} key={index}>
             {array.map((component, i) => (
-              <Grid item xs={12} sm={6} md={grid_sayisi} key={i}>
+              <Grid
+                key={i}
+                size={{
+                  xs: 12,
+                  sm: 6,
+                  md: grid_sayisi,
+                }}
+              >
                 {component}
               </Grid>
             ))}

package/src/layouts/auth/classic.jsx

@@ -44,20 +44,20 @@ export default function AuthClassicLayout({ image, title }) {
 
   const renderSection = (
     <Stack
-      flexGrow={1}
       spacing={10}
-      alignItems="center"
-      justifyContent="center"
       sx={{
+        flexGrow: 1,
+        alignItems: "center",
+        justifyContent: "center",
+
         ...bgGradient({
           color: alpha(
             theme.palette.background.default,
             theme.palette.mode === "light" ? 0.88 : 0.94
           ),
           imgUrl: "https://minimals.cc/assets/background/overlay_2.jpg",
-        }),
-      }}
-    >
+        })
+      }}>
       <Typography variant="h3" sx={{ maxWidth: 480, textAlign: "center" }}>
         {title || "Hi, Welcome back"}
       </Typography>

package/src/layouts/auth/modern.jsx

@@ -5,108 +5,72 @@ import { Outlet } from "react-router";
 import React from "react";
 import Stack from "@mui/material/Stack";
 import { alpha } from "@mui/material/styles";
-import { useResponsive } from "../../hooks/use-responsive";
 
 // ----------------------------------------------------------------------
 
-export default function AuthModernLayout({ image }) {
-  const mdUp = useResponsive("up", "md");
-
-  const renderContent = (
+export default function AuthModernLayout() {
+  return (
     <Stack
+      component="main"
       sx={{
-        width: 1,
-        mx: "auto",
-        maxWidth: 600,
-        px: { xs: 3, md: 10 },
-        py: { xs: 4, md: 0 },
-        height: "100vh",
-        justifyContent: "center",
+        minHeight: "100vh",
         alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
       }}
     >
-      <Logo
-        maxSize={140}
+      <Box
         sx={{
-          mb: 1,
-          width: 80,
-          height: 80,
+          position: "fixed",
+          inset: 0,
+          backgroundImage: (theme) => `
+                  radial-gradient(
+                    ${alpha(theme.palette.divider, 0.08)} 1px,
+                    transparent 1px
+                  )
+                `,
+          backgroundSize: "16px 16px",
+          pointerEvents: "none",
+          zIndex: 0,
         }}
       />
-
-      <Card
+      <Stack
         sx={{
           width: 1,
-          py: { xs: 6, md: 4 },
-          px: { xs: 4, md: 6 },
-          boxShadow: {
-            xs: (theme) =>
+          mx: "auto",
+          maxWidth: 480,
+          px: { xs: 3, md: 6 },
+          py: { xs: 4, md: 0 },
+          position: "relative",
+          zIndex: 1,
+        }}
+      >
+        <Logo
+          maxSize={140}
+          sx={{
+            mb: 2,
+            width: 72,
+            height: 72,
+            alignSelf: "center",
+          }}
+        />
+
+        <Card
+          sx={{
+            width: 1,
+            py: { xs: 5, md: 5 },
+            px: { xs: 4, md: 5 },
+            boxShadow: (theme) =>
               `0 0 2px ${alpha(
                 theme.palette.grey[500],
                 0.16
               )}, 0 12px 24px -4px ${alpha(theme.palette.grey[500], 0.12)}`,
-            md: "none",
-          },
-          overflow: { md: "unset" },
-          bgcolor: { md: "transparent" },
-          borderRadius: 2,
-        }}
-      >
-        <Outlet />
-      </Card>
-    </Stack>
-  );
-
-  const renderSection = (
-    <Stack
-      flexGrow={1}
-      sx={{
-        position: "relative",
-      }}
-    >
-      <Box
-        component="img"
-        alt="auth"
-        src={image || "/assets/background/overlay_3.jpg"}
-        sx={{
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-          objectFit: "cover",
-          position: "absolute",
-          width: "calc(60% - 32px)",
-          height: "calc(60% - 32px)",
-          borderRadius: 3,
-        }}
-      />
-    </Stack>
-  );
-
-  return (
-    <Stack
-      component="main"
-      direction="row"
-      sx={{
-        minHeight: "100vh",
-        position: "relative",
-        "&:before": {
-          width: 1,
-          height: 1,
-          zIndex: -1,
-          content: "''",
-          position: "absolute",
-          backgroundSize: "cover",
-          opacity: { xs: 0.24, md: 0 },
-          backgroundRepeat: "no-repeat",
-          backgroundPosition: "center center",
-          backgroundImage:
-            "url(https://minimals.cc/assets/background/overlay_4.jpg)",
-        },
-      }}
-    >
-      {renderContent}
-
-      {mdUp && renderSection}
+            borderRadius: 2,
+          }}
+        >
+          <Outlet />
+        </Card>
+      </Stack>
     </Stack>
   );
 }

package/src/layouts/common/ProjectBar/index.jsx

@@ -175,10 +175,11 @@ function ProjectBar() {
   const renderButton = (
     <Stack
       direction="row"
-      alignItems="center"
-      justifyContent={"flex-start"}
-      sx={{ width: "100%" }}
-    >
+      sx={{
+        alignItems: "center",
+        justifyContent: "flex-start",
+        width: "100%"
+      }}>
       <IconButton
         data-cy="open-select-bar-button"
         onClick={search.onTrue}
@@ -270,7 +271,6 @@ function ProjectBar() {
   return (
     <>
       {renderButton}
-
       <Dialog
         data-cy="select-bar-dialog"
         fullWidth={true}
@@ -281,17 +281,19 @@ function ProjectBar() {
           enter: theme.transitions.duration.shortest,
           exit: 0,
         }}
-        PaperProps={{
-          sx: {
-            mt: 15,
-            overflow: "unset",
-          },
-        }}
         sx={{
           [`& .${dialogClasses.container}`]: {
             alignItems: "flex-start",
           },
         }}
+        slotProps={{
+          paper: {
+            sx: {
+              mt: 15,
+              overflow: "unset",
+            },
+          }
+        }}
       >
         <Box sx={{ p: 3, borderBottom: `solid 1px gray` }}>
           <InputBase

package/src/layouts/common/header-sim.jsx

@@ -41,11 +41,12 @@ export default function HeaderSim() {
       >
         <Logo />
 
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{
+          alignItems: "center"
+        }}>
           <SettingsButton />
         </Stack>
       </Toolbar>
-
       {offsetTop && <HeaderShadow />}
     </AppBar>
   );

package/src/layouts/common/header-simple.jsx

@@ -52,7 +52,9 @@ export default function HeaderSimple({
           }),
         }}
       >
-        <Stack direction="row" alignItems="center" spacing={5}>
+        <Stack direction="row" spacing={5} sx={{
+          alignItems: "center"
+        }}>
           <Logo />
           <ProjectBar
             handleItemSelect={handleItemSelect}
@@ -60,7 +62,9 @@ export default function HeaderSimple({
             setSelectedItem={setSelectedItem}
           />
         </Stack>
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{
+          alignItems: "center"
+        }}>
           {mdUp && <NavDesktop data={topMenu} />}
           <NotificationsPopover />
 
@@ -69,7 +73,6 @@ export default function HeaderSimple({
           <AccountPopover />
         </Stack>
       </Toolbar>
-
       {offsetTop && <HeaderShadow />}
     </AppBar>
   );