@canmingir/link 1.2.30 → 1.2.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.30",
+  "version": "1.2.32",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/layouts/auth/modern.jsx

@@ -5,107 +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
-      sx={{
-        flexGrow: 1,
-        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/lib/APIDialogAction/APIDialogAction.jsx

@@ -1,8 +1,7 @@
-import DeleteIcon from "@mui/icons-material/Delete";
 import DialogTooltip from "../DialogTootip/DialogTooltip";
-import SaveIcon from "@mui/icons-material/Save";
 
 import { Box, Button, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import { Delete, Save } from "@mui/icons-material";
 import { useEffect, useState } from "react";
 
 function APIDialogAction({
@@ -72,7 +71,7 @@ function APIDialogAction({
               variant="contained"
               color="error"
               onClick={deleteMethod}
-              startIcon={<DeleteIcon />}
+              startIcon={<Delete />}
               data-cy="delete-api-button-yes"
             >
               Delete
@@ -85,7 +84,7 @@ function APIDialogAction({
             color="error"
             onClick={handleTooltipOpen}
             disabled={deleteDisable}
-            startIcon={<DeleteIcon />}
+            startIcon={<Delete />}
             data-cy="delete-api-button"
           >
             Delete
@@ -96,7 +95,7 @@ function APIDialogAction({
           color="primary"
           onClick={saveApiDialog}
           disabled={saveDisable}
-          startIcon={<SaveIcon />}
+          startIcon={<Save />}
           data-cy="save-api-button"
         >
           Save

package/src/lib/APIParams/APIParams.jsx

@@ -1,4 +1,4 @@
-import AddIcon from "@mui/icons-material/Add";
+import { Add } from "@mui/icons-material";
 import ParamTable from "../ParamTable";
 
 import { Box, Fab } from "@mui/material";
@@ -47,7 +47,7 @@ const APIParams = ({ types, paramsRef, addParams }) => {
           onClick={handleAddParams}
           data-cy="add-param-button"
         >
-          <AddIcon />
+          <Add />
         </Fab>
       </Box>
     </Box>

package/src/lib/APIPath/APIPath.jsx

@@ -1,4 +1,4 @@
-import LanguageIcon from "@mui/icons-material/Language";
+import { Language } from "@mui/icons-material";
 import styles from "./styles";
 
 import {
@@ -72,7 +72,7 @@ const APIPath = ({
         </Grid>
       </Grid>
       <Button onClick={onTypesButtonClick} data-cy="types-button">
-        <LanguageIcon sx={styles.icon} />
+        <Language sx={styles.icon} />
         Types
       </Button>
     </Grid>