@canmingir/link 1.2.56 → 1.2.58

package/src/layouts/auth/special.jsx

@@ -0,0 +1,181 @@
+import {
+  ThemeProvider,
+  alpha,
+  createTheme,
+  useTheme,
+} from "@mui/material/styles";
+
+import Box from "@mui/material/Box";
+import Logo from "../../components/logo";
+import { Outlet } from "react-router";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import config from "../../config/config";
+import { useResponsive } from "../../hooks/use-responsive";
+
+const PAPER = "#e7decb";
+const ACCENT = "#ce4a25";
+const ACCENT_DARK = "#8c2f14";
+const ACCENT_LIGHT = "#e8794f";
+const DISPLAY_FONT = '"Poiret One", cursive';
+const TITLE_FONT = '"DM Mono", monospace';
+
+export default function AuthSpecialLayout({ image, title }) {
+  const { name } = config();
+
+  const mdUp = useResponsive("up", "md");
+
+  const outerTheme = useTheme();
+
+  const loginTheme = React.useMemo(
+    () =>
+      createTheme(outerTheme, {
+        palette: {
+          primary: {
+            lighter: "#F7DDD2",
+            light: ACCENT_LIGHT,
+            main: ACCENT,
+            dark: ACCENT_DARK,
+            darker: "#5c1c07",
+            contrastText: "#FFFFFF",
+          },
+        },
+        customShadows: { primary: `0 8px 16px 0 ${alpha(ACCENT, 0.24)}` },
+      }),
+    [outerTheme],
+  );
+
+  const renderSection = (
+    <Stack
+      spacing={6}
+      sx={{
+        flexGrow: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+        overflow: "hidden",
+        bgcolor: alpha(ACCENT, 0.06),
+        borderRight: `1px solid ${alpha(ACCENT, 0.14)}`,
+      }}
+    >
+      <Box
+        sx={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: `radial-gradient(${alpha(
+            ACCENT,
+            0.14,
+          )} 1px, transparent 1px)`,
+          backgroundSize: "18px 18px",
+          pointerEvents: "none",
+        }}
+      />
+
+      <Stack
+        spacing={2}
+        sx={{ px: 6, maxWidth: 520, textAlign: "center", zIndex: 1 }}
+      >
+        <Typography
+          sx={{
+            fontFamily: DISPLAY_FONT,
+            fontSize: { md: "3.25rem", lg: "4rem" },
+            lineHeight: 1.05,
+            color: ACCENT_DARK,
+          }}
+        >
+          {title || name}
+        </Typography>
+
+        <Typography
+          sx={{
+            fontFamily: TITLE_FONT,
+            fontSize: "0.8rem",
+            letterSpacing: "0.18em",
+            textTransform: "uppercase",
+            color: alpha(ACCENT, 0.75),
+          }}
+        >
+          Learn · Explore · Grow
+        </Typography>
+      </Stack>
+
+      {image && (
+        <Box
+          component="img"
+          alt="auth"
+          src={image}
+          sx={{
+            zIndex: 1,
+            maxWidth: { md: 360, lg: 440 },
+            width: "100%",
+            objectFit: "contain",
+          }}
+        />
+      )}
+    </Stack>
+  );
+
+  const renderContent = (
+    <Stack
+      sx={{
+        width: 1,
+        mx: "auto",
+        maxWidth: 480,
+        justifyContent: "center",
+        px: { xs: 3, md: 8 },
+        py: { xs: 8, md: 0 },
+        position: "relative",
+        zIndex: 1,
+      }}
+    >
+      <Logo
+        isLogin={true}
+        maxSize={120}
+        sx={{ mb: 4, alignSelf: { xs: "center", md: "flex-start" } }}
+      />
+
+      <Box
+        sx={{
+          p: { xs: 3, md: 4 },
+          borderRadius: 3,
+          bgcolor: alpha("#ffffff", 0.4),
+          border: `1px solid ${alpha(ACCENT, 0.18)}`,
+          boxShadow: `0 12px 32px -12px ${alpha(ACCENT_DARK, 0.28)}`,
+          "& .MuiTypography-root": { fontFamily: TITLE_FONT, color: ACCENT },
+          "& .MuiTypography-h3, & .MuiTypography-h4": {
+            fontFamily: DISPLAY_FONT,
+            color: ACCENT_DARK,
+          },
+          "& .MuiButtonBase-root": {
+            fontFamily: TITLE_FONT,
+            color: PAPER,
+            backgroundColor: ACCENT,
+            "&:hover": {
+              backgroundColor: ACCENT_DARK,
+            },
+          },
+          "& .MuiOutlinedInput-root, & .MuiFilledInput-root": {
+            fontFamily: TITLE_FONT,
+          },
+        }}
+      >
+        <ThemeProvider theme={loginTheme}>
+          <Outlet />
+        </ThemeProvider>
+      </Box>
+    </Stack>
+  );
+
+  return (
+    <Stack
+      component="main"
+      direction="row"
+      sx={{ minHeight: "100vh", bgcolor: PAPER }}
+    >
+      {mdUp && renderSection}
+
+      {renderContent}
+    </Stack>
+  );
+}

package/src/layouts/common/ProjectBar/utils.js

@@ -1,7 +1,5 @@
 import { flattenArray } from "../../../utils/flatten-array";
 
-// ----------------------------------------------------------------------
-
 export function getAllItems({ data }) {
   const reduceItems = data
     .map((list) => handleLoop(list.items, list.subheader))
@@ -20,8 +18,6 @@ export function getAllItems({ data }) {
   return items;
 }
 
-// ----------------------------------------------------------------------
-
 export function applyFilter({ inputData, query }) {
   if (query) {
     inputData = inputData.filter(
@@ -32,8 +28,6 @@ export function applyFilter({ inputData, query }) {
   return inputData;
 }
 
-// ----------------------------------------------------------------------
-
 export function splitPath(array, key) {
   let stack = array.map((item) => ({
     path: [item.title],
@@ -59,8 +53,6 @@ export function splitPath(array, key) {
   return null;
 }
 
-// ----------------------------------------------------------------------
-
 export function handleLoop(array, subheader) {
   return array?.map((list) => ({
     subheader,
@@ -71,8 +63,6 @@ export function handleLoop(array, subheader) {
   }));
 }
 
-// ----------------------------------------------------------------------
-
 export function groupedData(array) {
   const group = array.reduce((groups, item) => {
     groups[item.group] = groups[item.group] || [];

package/src/layouts/common/account-popover.jsx

@@ -16,8 +16,6 @@ import { varHover } from "../../components/animate";
 
 import CustomPopover, { usePopover } from "../../components/custom-popover";
 
-// ----------------------------------------------------------------------
-
 export default function AccountPopover() {
   const { options } = config().menu;
   const router = useRouter();

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

@@ -1,8 +1,6 @@
 import Box from "@mui/material/Box";
 import React from "react";
 
-// ----------------------------------------------------------------------
-
 export default function HeaderShadow({ sx, ...other }) {
   return (
     <Box

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

@@ -9,7 +9,6 @@ import Toolbar from "@mui/material/Toolbar";
 import { bgBlur } from "../../theme/css";
 import { useOffSetTop } from "../../hooks/use-off-set-top";
 import { useTheme } from "@mui/material/styles";
-// ----------------------------------------------------------------------
 
 export default function HeaderSim() {
   const theme = useTheme();
@@ -41,9 +40,13 @@ export default function HeaderSim() {
       >
         <Logo />
 
-        <Stack direction="row" spacing={1} sx={{
-          alignItems: "center"
-        }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: "center",
+          }}
+        >
           <SettingsButton />
         </Stack>
       </Toolbar>

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

@@ -16,8 +16,6 @@ import { useOffSetTop } from "../../hooks/use-off-set-top";
 import { useResponsive } from "../../hooks/use-responsive";
 import { useTheme } from "@mui/material/styles";
 
-// ----------------------------------------------------------------------
-
 export default function HeaderSimple({
   handleItemSelect,
   selectedItem,
@@ -52,9 +50,13 @@ export default function HeaderSimple({
           }),
         }}
       >
-        <Stack direction="row" spacing={5} sx={{
-          alignItems: "center"
-        }}>
+        <Stack
+          direction="row"
+          spacing={5}
+          sx={{
+            alignItems: "center",
+          }}
+        >
           <Logo />
           <ProjectBar
             handleItemSelect={handleItemSelect}
@@ -62,9 +64,13 @@ export default function HeaderSimple({
             setSelectedItem={setSelectedItem}
           />
         </Stack>
-        <Stack direction="row" spacing={1} sx={{
-          alignItems: "center"
-        }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: "center",
+          }}
+        >
           {mdUp && <NavDesktop data={topMenu} />}
           <NotificationsPopover />
 

package/src/layouts/common/nav-toggle-button.jsx

@@ -7,8 +7,6 @@ import { useResponsive } from "../../hooks/use-responsive";
 import { useSettingsContext } from "../../components/settings";
 import { useTheme } from "@mui/material/styles";
 
-// ----------------------------------------------------------------------
-
 export default function NavToggleButton({ sx, ...other }) {
   const theme = useTheme();
 
@@ -26,7 +24,7 @@ export default function NavToggleButton({ sx, ...other }) {
       onClick={() =>
         settings.onUpdate(
           "themeLayout",
-          settings.themeLayout === "vertical" ? "mini" : "vertical",
+          settings.themeLayout === "vertical" ? "mini" : "vertical"
         )
       }
       sx={{

package/src/layouts/common/notifications-popover/index.jsx

@@ -18,8 +18,6 @@ import { varHover } from "../../../components/animate";
 
 import { useCallback, useState } from "react";
 
-// ----------------------------------------------------------------------
-
 const TABS = [
   {
     value: "all",
@@ -38,8 +36,6 @@ const TABS = [
   },
 ];
 
-// ----------------------------------------------------------------------
-
 export default function NotificationsPopover() {
   const drawer = useBoolean();
 
@@ -74,8 +70,9 @@ export default function NotificationsPopover() {
         py: 2,
         pl: 2.5,
         pr: 1,
-        minHeight: 68
-      }}>
+        minHeight: 68,
+      }}
+    >
       <Typography variant="h6" sx={{ flexGrow: 1 }}>
         Notifications
       </Typography>
@@ -153,8 +150,9 @@ export default function NotificationsPopover() {
 
           paper: {
             sx: { width: 1, maxWidth: 420 },
-          }
-        }}>
+          },
+        }}
+      >
         {renderHead}
 
         <Divider />
@@ -165,8 +163,9 @@ export default function NotificationsPopover() {
             alignItems: "center",
             justifyContent: "space-between",
             pl: 2.5,
-            pr: 1
-          }}>
+            pr: 1,
+          }}
+        >
           {renderTabs}
           <IconButton onClick={handleMarkAllAsRead}>
             <Iconify icon="solar:settings-bold-duotone" />

package/src/layouts/common/notifications-popover/notification-item.jsx

@@ -11,8 +11,6 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { fToNow } from "../../../utils/format-time";
 
-// ----------------------------------------------------------------------
-
 export default function NotificationItem({ notification }) {
   const renderAvatar = (
     <ListItemAvatar>
@@ -29,8 +27,9 @@ export default function NotificationItem({ notification }) {
             width: 40,
             height: 40,
             borderRadius: "50%",
-            bgcolor: "background.neutral"
-          }}>
+            bgcolor: "background.neutral",
+          }}
+        >
           <Box
             component="img"
             src={`/assets/icons/notification/${
@@ -67,8 +66,9 @@ export default function NotificationItem({ notification }) {
           sx={{
             alignItems: "center",
             typography: "caption",
-            color: "text.disabled"
-          }}>
+            color: "text.disabled",
+          }}
+        >
           {fToNow(notification.createdAt)}
           {notification.category}
         </Stack>
@@ -102,9 +102,11 @@ export default function NotificationItem({ notification }) {
   );
 
   const projectAction = (
-    <Stack sx={{
-      alignItems: "flex-start"
-    }}>
+    <Stack
+      sx={{
+        alignItems: "flex-start",
+      }}
+    >
       <Box
         sx={{
           p: 1.5,
@@ -147,8 +149,9 @@ export default function NotificationItem({ notification }) {
         direction={{ xs: "column", sm: "row" }}
         sx={{
           flexGrow: 1,
-          minWidth: 0
-        }}>
+          minWidth: 0,
+        }}
+      >
         <ListItemText
           disableTypography
           primary={
@@ -178,8 +181,9 @@ export default function NotificationItem({ notification }) {
               sx={{
                 alignItems: "center",
                 typography: "caption",
-                color: "text.disabled"
-              }}>
+                color: "text.disabled",
+              }}
+            >
               <span>2.3 GB</span>
               <span>30 min ago</span>
             </Stack>
@@ -199,8 +203,9 @@ export default function NotificationItem({ notification }) {
       spacing={0.75}
       sx={{
         flexWrap: "wrap",
-        mt: 1.5
-      }}>
+        mt: 1.5,
+      }}
+    >
       <Label variant="outlined" color="info">
         Design
       </Label>
@@ -247,8 +252,6 @@ export default function NotificationItem({ notification }) {
   );
 }
 
-// ----------------------------------------------------------------------
-
 function reader(data) {
   return (
     <Box

package/src/layouts/common/settings-button.jsx

@@ -6,8 +6,6 @@ import SettingsDialog from "../../widgets/SettingsDialog";
 import { motion } from "framer-motion";
 import { varHover } from "../../components/animate";
 
-// ----------------------------------------------------------------------
-
 export default function SettingsButton({ sx }) {
   const [settingsOpen, setSettingsOpen] = React.useState(false);
 

package/src/layouts/config-layout.js

@@ -1,5 +1,3 @@
-// ----------------------------------------------------------------------
-
 export const HEADER = {
   H_MOBILE: 64,
   H_DESKTOP: 80,

package/src/lib/Image/utils.js

@@ -1,5 +1,3 @@
-// ----------------------------------------------------------------------
-
 export function getRatio(ratio = "1/1") {
   return {
     "4/3": "calc(100% / 4 * 3)",

package/src/lib/Scrollbar/styles.js

@@ -2,8 +2,6 @@ import SimpleBar from "simplebar-react";
 
 import { alpha, styled } from "@mui/material/styles";
 
-// ----------------------------------------------------------------------
-
 export const StyledRootScrollbar = styled("div")(() => ({
   flexGrow: 1,
   height: "100%",

package/src/pages/404.jsx

@@ -2,8 +2,6 @@ import { Helmet } from "react-helmet-async";
 import { NotFoundView } from "../widgets/error";
 import React from "react";
 
-// ----------------------------------------------------------------------
-
 export default function NotFoundPage() {
   return (
     <>

package/src/routes/components/router-link.jsx

@@ -2,8 +2,6 @@ import { Link } from "react-router-dom";
 import React from "react";
 import { forwardRef } from "react";
 
-// ----------------------------------------------------------------------
-
 const RouterLink = forwardRef(({ href, ...other }, ref) => (
   <Link ref={ref} to={href} {...other} />
 ));

package/src/routes/hooks/use-active-link.js

@@ -1,7 +1,5 @@
 import { matchPath, useLocation } from "react-router-dom";
 
-// ----------------------------------------------------------------------
-
 export function useActiveLink(path, deep = true) {
   const { pathname } = useLocation();
 

package/src/routes/hooks/use-pathname.js

@@ -1,8 +1,6 @@
 import { useLocation } from "react-router-dom";
 import { useMemo } from "react";
 
-// ----------------------------------------------------------------------
-
 export function usePathname() {
   const { pathname } = useLocation();
 

package/src/routes/hooks/use-router.js

@@ -1,8 +1,6 @@
 import { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 
-// ----------------------------------------------------------------------
-
 export function useRouter() {
   const navigate = useNavigate();
 

package/src/theme/css.js

@@ -4,8 +4,6 @@ import { checkboxClasses } from "@mui/material/Checkbox";
 import { dividerClasses } from "@mui/material/Divider";
 import { menuItemClasses } from "@mui/material/MenuItem";
 
-// ----------------------------------------------------------------------
-
 export const paper = ({ theme, bgcolor, dropdown }) => ({
   ...bgBlur({
     blur: 20,
@@ -29,8 +27,6 @@ export const paper = ({ theme, bgcolor, dropdown }) => ({
   }),
 });
 
-// ----------------------------------------------------------------------
-
 export const menuItem = (theme) => ({
   ...theme.typography.body2,
   padding: theme.spacing(0.75, 1),
@@ -61,8 +57,6 @@ export const menuItem = (theme) => ({
   },
 });
 
-// ----------------------------------------------------------------------
-
 export function bgBlur(props) {
   const color = props?.color || "#000000";
   const blur = props?.blur || 6;
@@ -95,8 +89,6 @@ export function bgBlur(props) {
   };
 }
 
-// ----------------------------------------------------------------------
-
 export function bgGradient(props) {
   const direction = props?.direction || "to bottom";
   const startColor = props?.startColor;
@@ -120,8 +112,6 @@ export function bgGradient(props) {
   };
 }
 
-// ----------------------------------------------------------------------
-
 export function textGradient(value) {
   return {
     background: `-webkit-linear-gradient(${value})`,
@@ -130,8 +120,6 @@ export function textGradient(value) {
   };
 }
 
-// ----------------------------------------------------------------------
-
 export const hideScroll = {
   x: {
     msOverflowStyle: "none",

package/src/theme/custom-shadows.js

@@ -11,8 +11,6 @@ import {
   warning,
 } from "./palette";
 
-// ----------------------------------------------------------------------
-
 export function customShadows(mode) {
   const color = mode === "light" ? grey[500] : common.black;
 

package/src/theme/options/contrast.js

@@ -1,8 +1,6 @@
 import { customShadows } from "../custom-shadows";
 import { grey } from "../palette";
 
-// ----------------------------------------------------------------------
-
 export function createContrast(contrast, mode) {
   const theme = {
     ...(contrast === "bold" &&

package/src/theme/options/presets.js

@@ -2,8 +2,6 @@ import { alpha } from "@mui/material/styles";
 
 import { grey, primary } from "../palette";
 
-// ----------------------------------------------------------------------
-
 export function createPresets(preset) {
   const primaryColor = getPrimary(preset);
 
@@ -21,8 +19,6 @@ export function createPresets(preset) {
   };
 }
 
-// ----------------------------------------------------------------------
-
 const cyan = {
   lighter: "#CCF4FE",
   light: "#68CDF9",

package/src/theme/options/right-to-left.jsx

@@ -4,8 +4,6 @@ import createCache from "@emotion/cache";
 import rtlPlugin from "stylis-plugin-rtl";
 import { useEffect } from "react";
 
-// ----------------------------------------------------------------------
-
 export default function RTL({ children, themeDirection }) {
   useEffect(() => {
     document.dir = themeDirection;

package/src/theme/overrides/components/accordion.js

@@ -2,8 +2,6 @@ import { accordionClasses } from "@mui/material/Accordion";
 import { accordionSummaryClasses } from "@mui/material/AccordionSummary";
 import { typographyClasses } from "@mui/material/Typography";
 
-// ----------------------------------------------------------------------
-
 export function accordion(theme) {
   return {
     MuiAccordion: {

package/src/theme/overrides/components/alert.js

@@ -1,12 +1,8 @@
 import { alertClasses } from "@mui/material/Alert";
 import { alpha } from "@mui/material/styles";
 
-// ----------------------------------------------------------------------
-
 const COLORS = ["info", "success", "warning", "error"];
 
-// ----------------------------------------------------------------------
-
 export function alert(theme) {
   const lightMode = theme.palette.mode === "light";