@canmingir/link 1.2.27 → 1.2.31

package/src/pages/LoginPage.jsx

@@ -7,9 +7,11 @@ import config from "../config/config";
 import { storage } from "@nucleoidjs/webstorage";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+
+import { Box, Stack, Typography, alpha } from "@mui/material";
+
 function LoginPage() {
   const { name, template, credentials } = config();
-  const formColor = "#a8a9ad";
   const navigate = useNavigate();
 
   function token() {
@@ -32,10 +34,78 @@ function LoginPage() {
 
   return (
     <Page title={`Sign in to ${name}`}>
+      <Stack
+        spacing={0}
+        sx={{
+          mb: 4,
+          position: "relative",
+        }}
+      >
+        <Typography
+          variant="overline"
+          sx={{
+            color: "primary.main",
+            fontWeight: 700,
+            letterSpacing: "0.2em",
+            fontSize: "0.65rem",
+            mb: 1,
+          }}
+        >
+          {name}
+        </Typography>
+
+        <Typography
+          variant="h3"
+          sx={{ fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}
+        >
+          Welcome{" "}
+          <Box
+            component="span"
+            sx={{
+              background: (theme) =>
+                `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.primary.light})`,
+              backgroundClip: "text",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+            }}
+          >
+            back.
+          </Box>
+        </Typography>
+
+        <Typography variant="body2" sx={{ color: "text.secondary", mt: 1.5 }}>
+          Enter your credentials to access the platform.
+        </Typography>
+
+        <Box
+          sx={{
+            mt: 2,
+            width: 32,
+            height: 3,
+            borderRadius: 2,
+            bgcolor: "primary.main",
+          }}
+        />
+      </Stack>
+
       {credentials?.provider === "COGNITO" && <CognitoLogin />}
       {credentials?.provider === "DEMO" && <DemoLogin />}
 
-      <LoginForm icon={template.login.icon} name={name} formColor={formColor} />
+      <LoginForm icon={template.login.icon} name={name} formColor="#a8a9ad" />
+
+      <Box
+        sx={{
+          mt: 4,
+          pt: 3,
+          borderTop: (theme) =>
+            `1px solid ${alpha(theme.palette.divider, 0.5)}`,
+          textAlign: "center",
+        }}
+      >
+        <Typography variant="caption" sx={{ color: "text.disabled" }}>
+          Secure · Encrypted · Private
+        </Typography>
+      </Box>
     </Page>
   );
 }

package/src/theme/index.jsx

@@ -23,8 +23,9 @@ export default function ThemeProvider({ children }) {
   const contrast = createContrast(settings.themeContrast, settings.themeMode);
   const presets = createPresets(settings.themeColorPresets);
 
-  const memoizedValue = useMemo(
-    () => ({
+  const theme = useMemo(() => {
+    // 1. Define the base configuration
+    const baseOptions = {
       palette: {
         ...palette(settings.themeMode),
         ...presets.palette,
@@ -38,56 +39,54 @@ export default function ThemeProvider({ children }) {
       shadows: shadows(settings.themeMode),
       shape: { borderRadius: 8 },
       typography,
-    }),
-    [
-      settings.themeMode,
-      settings.themeDirection,
-      presets.palette,
-      presets.customShadows,
-      contrast.palette,
-    ]
-  );
-
-  const theme = createTheme(memoizedValue);
-
-  theme.components = merge(componentsOverrides(theme), contrast.components, {
-    MuiCssBaseline: {
-      styleOverrides: {
-        body: {
-          scrollbarColor:
-            theme.palette.mode === "dark"
-              ? `${theme.palette.grey[700]} ${theme.palette.background.default}`
-              : `${theme.palette.grey[500]} ${theme.palette.background.default}`,
-          scrollbarWidth: "thin",
-
-          "&::-webkit-scrollbar": {
-            width: 10,
-            height: 10,
-          },
+    };
 
-          "&::-webkit-scrollbar-track": {
-            backgroundColor: theme.palette.background.default,
-          },
-
-          "&::-webkit-scrollbar-thumb": {
-            backgroundColor:
-              theme.palette.mode === "dark"
-                ? theme.palette.grey[700]
-                : theme.palette.grey[500],
-            borderRadius: 8,
-            border: `2px solid ${theme.palette.background.default}`,
-          },
+    // 2. Create a temporary theme instance to generate overrides
+    // (Overrides often need access to the palette/spacing of the theme)
+    const tempTheme = createTheme(baseOptions);
 
-          "&::-webkit-scrollbar-thumb:hover": {
-            backgroundColor:
-              theme.palette.mode === "dark"
-                ? theme.palette.grey[600]
-                : theme.palette.grey[700],
+    // 3. Merge components into the configuration
+    baseOptions.components = merge(
+      componentsOverrides(tempTheme),
+      contrast.components,
+      {
+        MuiCssBaseline: {
+          styleOverrides: {
+            body: {
+              scrollbarColor:
+                tempTheme.palette.mode === "dark"
+                  ? `${tempTheme.palette.grey[700]} ${tempTheme.palette.background.default}`
+                  : `${tempTheme.palette.grey[500]} ${tempTheme.palette.background.default}`,
+              scrollbarWidth: "thin",
+              "&::-webkit-scrollbar": { width: 10, height: 10 },
+              "&::-webkit-scrollbar-track": {
+                backgroundColor: tempTheme.palette.background.default,
+              },
+              "&::-webkit-scrollbar-thumb": {
+                backgroundColor:
+                  tempTheme.palette.mode === "dark"
+                    ? tempTheme.palette.grey[700]
+                    : tempTheme.palette.grey[500],
+                borderRadius: 8,
+                border: `2px solid ${tempTheme.palette.background.default}`,
+              },
+            },
           },
         },
-      },
-    },
-  });
+      }
+    );
+
+    // 4. Return the final, complete theme
+    return createTheme(baseOptions);
+  }, [
+    settings.themeMode,
+    settings.themeDirection,
+    settings.themeContrast, // Added this to the dependency array
+    presets.palette,
+    presets.customShadows,
+    contrast.palette,
+    contrast.components,
+  ]);
 
   return (
     <MuiThemeProvider theme={theme}>

package/src/theme/overrides/components/loading-button.js

@@ -1,4 +1,4 @@
-import { loadingButtonClasses } from "@mui/lab/LoadingButton";
+import { buttonClasses } from "@mui/material/Button";
 
 // ----------------------------------------------------------------------
 
@@ -8,17 +8,17 @@ export function loadingButton(theme) {
       styleOverrides: {
         root: ({ ownerState }) => ({
           ...(ownerState.variant === "soft" && {
-            [`& .${loadingButtonClasses.loadingIndicatorStart}`]: {
+            [`& .${buttonClasses.loadingIndicatorStart}`]: {
               left: 10,
             },
-            [`& .${loadingButtonClasses.loadingIndicatorEnd}`]: {
+            [`& .${buttonClasses.loadingIndicatorEnd}`]: {
               right: 14,
             },
             ...(ownerState.size === "small" && {
-              [`& .${loadingButtonClasses.loadingIndicatorStart}`]: {
+              [`& .${buttonClasses.loadingIndicatorStart}`]: {
                 left: 10,
               },
-              [`& .${loadingButtonClasses.loadingIndicatorEnd}`]: {
+              [`& .${buttonClasses.loadingIndicatorEnd}`]: {
                 right: 10,
               },
             }),

package/src/theme/overrides/default-props.jsx

@@ -105,11 +105,14 @@ export function defaultProps(theme) {
     },
     MuiCardHeader: {
       defaultProps: {
-        titleTypographyProps: { variant: "h6" },
-        subheaderTypographyProps: {
-          variant: "body2",
-          marginTop: theme.spacing(0.5),
-        },
+        slotProps: {
+          title: { variant: "h6" },
+
+          subheader: {
+            variant: "body2",
+            marginTop: theme.spacing(0.5),
+          }
+        }
       },
     },
     MuiChip: {
@@ -134,12 +137,15 @@ export function defaultProps(theme) {
     },
     MuiListItemText: {
       defaultProps: {
-        primaryTypographyProps: {
-          typography: "subtitle2",
-        },
-        secondaryTypographyProps: {
-          component: "span",
-        },
+        slotProps: {
+          primary: {
+            typography: "subtitle2",
+          },
+
+          secondary: {
+            component: "span",
+          }
+        }
       },
     },
     MuiPaper: {

package/src/widgets/Login/CognitoLogin.jsx

@@ -15,31 +15,13 @@ import {
   alpha,
 } from "@mui/material";
 import {
-  CheckOutlined,
-  EmailOutlined,
   LockOutlined,
   MarkEmailReadOutlined,
   Visibility,
   VisibilityOff,
 } from "@mui/icons-material";
 import { confirmSignup, getTokens, login, signup } from "./amplifyAuth";
-
-const inputSx = {
-  "& .MuiOutlinedInput-root": {
-    fontSize: "1rem",
-    "& input": { py: 1.5 },
-    "&:hover fieldset": { borderColor: "primary.main" },
-  },
-};
-
-const primaryButtonSx = {
-  py: 1.5,
-  fontSize: "1rem",
-  fontWeight: 600,
-  textTransform: "none",
-  borderRadius: 1.5,
-  "&:active": { transform: "translateY(0px)" },
-};
+import { inputSx, primaryButtonSx } from "./styles";
 
 export default function CognitoLogin() {
   const [mode, setMode] = useState("login");
@@ -159,124 +141,107 @@ export default function CognitoLogin() {
 
   return (
     <Stack spacing={3} sx={{ mb: 2 }}>
-      <Box sx={{ textAlign: "center" }}>
+      <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
         <Box
           sx={{
-            width: 52,
-            height: 52,
-            borderRadius: 2,
+            width: 40,
+            height: 40,
+            borderRadius: 1.5,
             display: "inline-flex",
             alignItems: "center",
             justifyContent: "center",
-            mb: 2,
+            flexShrink: 0,
             bgcolor: (theme) => alpha(theme.palette.primary.main, 0.1),
             color: "primary.main",
           }}
         >
           {mode === "confirm" ? (
-            <MarkEmailReadOutlined sx={{ fontSize: 26 }} />
+            <MarkEmailReadOutlined sx={{ fontSize: 22 }} />
           ) : (
-            <LockOutlined sx={{ fontSize: 26 }} />
+            <LockOutlined sx={{ fontSize: 22 }} />
           )}
         </Box>
-
-        <Typography variant="h4" fontWeight={700} gutterBottom>
-          {titles[mode].heading}
-        </Typography>
-        <Typography variant="body2" color="text.secondary">
-          {titles[mode].sub}
-        </Typography>
+        <Box>
+          <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.2 }}>
+            {titles[mode].heading}
+          </Typography>
+          <Typography variant="caption" sx={{ color: "text.secondary" }}>
+            {titles[mode].sub}
+          </Typography>
+        </Box>
       </Box>
-
-      <Stack spacing={2}>
+      <Stack spacing={1.5}>
         <TextField
+          variant="filled"
           label="Email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           fullWidth
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <EmailOutlined sx={{ color: "text.secondary", fontSize: 22 }} />
-              </InputAdornment>
-            ),
-          }}
           sx={inputSx}
+          slotProps={{ input: { disableUnderline: true } }}
         />
 
         {mode !== "confirm" && (
           <TextField
+            variant="filled"
             type={showPassword ? "text" : "password"}
             label="Password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             fullWidth
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <LockOutlined
-                    sx={{ color: "text.secondary", fontSize: 22 }}
-                  />
-                </InputAdornment>
-              ),
-              endAdornment: passwordAdornment,
-            }}
             sx={inputSx}
+            slotProps={{
+              input: {
+                disableUnderline: true,
+                endAdornment: passwordAdornment,
+              },
+            }}
           />
         )}
 
         {mode === "signup" && (
           <TextField
+            variant="filled"
             type={showConfirmPassword ? "text" : "password"}
             label="Confirm Password"
             value={confirmPassword}
             onChange={(e) => setConfirmPassword(e.target.value)}
             fullWidth
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <LockOutlined
-                    sx={{ color: "text.secondary", fontSize: 22 }}
-                  />
-                </InputAdornment>
-              ),
-              endAdornment: (
-                <InputAdornment position="end">
-                  <IconButton
-                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                    edge="end"
-                    size="small"
-                    tabIndex={-1}
-                  >
-                    {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
-                  </IconButton>
-                </InputAdornment>
-              ),
-            }}
             sx={inputSx}
+            slotProps={{
+              input: {
+                disableUnderline: true,
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      onClick={() =>
+                        setShowConfirmPassword(!showConfirmPassword)
+                      }
+                      edge="end"
+                      size="small"
+                      tabIndex={-1}
+                    >
+                      {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              },
+            }}
           />
         )}
 
         {mode === "confirm" && (
           <TextField
+            variant="filled"
             label="Confirmation Code"
             value={code}
             onChange={(e) => setCode(e.target.value)}
             fullWidth
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <CheckOutlined
-                    sx={{ color: "text.secondary", fontSize: 22 }}
-                  />
-                </InputAdornment>
-              ),
-            }}
             sx={inputSx}
+            slotProps={{ input: { disableUnderline: true } }}
           />
         )}
       </Stack>
-
       {mode === "login" && (
         <Stack spacing={1.5}>
           <Button
@@ -284,20 +249,24 @@ export default function CognitoLogin() {
             onClick={handleLogin}
             size="large"
             fullWidth
+            disableElevation
             sx={primaryButtonSx}
           >
-            Sign in
+            Sign in &rarr;
           </Button>
           <Button
             onClick={() => setMode("signup")}
             fullWidth
-            sx={{ textTransform: "none", fontWeight: 500 }}
+            sx={{
+              textTransform: "none",
+              fontWeight: 600,
+              color: "text.secondary",
+            }}
           >
-            Create an account
+            No account? Create one
           </Button>
         </Stack>
       )}
-
       {mode === "signup" && (
         <Stack spacing={1.5}>
           <Button
@@ -305,29 +274,34 @@ export default function CognitoLogin() {
             onClick={handleSignup}
             size="large"
             fullWidth
+            disableElevation
             sx={primaryButtonSx}
           >
-            Sign Up
+            Create account &rarr;
           </Button>
           <Button
             onClick={() => setMode("login")}
             fullWidth
-            sx={{ textTransform: "none", fontWeight: 500 }}
+            sx={{
+              textTransform: "none",
+              fontWeight: 600,
+              color: "text.secondary",
+            }}
           >
-            Back to login
+            &larr; Back to sign in
           </Button>
         </Stack>
       )}
-
       {mode === "confirm" && (
         <Button
           variant="contained"
           onClick={handleConfirm}
           size="large"
           fullWidth
+          disableElevation
           sx={primaryButtonSx}
         >
-          Confirm
+          Verify &rarr;
         </Button>
       )}
     </Stack>