@canmingir/link 1.2.27 → 1.2.31

package/src/widgets/Login/DemoLogin.jsx

@@ -12,13 +12,9 @@ import {
   Typography,
   alpha,
 } from "@mui/material";
-import {
-  LockOutlined,
-  PersonOutline,
-  Visibility,
-  VisibilityOff,
-} from "@mui/icons-material";
 import React, { useState } from "react";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+import { inputSx, primaryButtonSx } from "./styles";
 
 export default function DemoLogin() {
   const [username, setUsername] = useState("");
@@ -56,73 +52,47 @@ export default function DemoLogin() {
 
   return (
     <Stack spacing={2.5} sx={{ mb: 2 }}>
-      <Stack spacing={2}>
+      <Stack spacing={1.5}>
         <TextField
+          variant="filled"
           label="Username"
           value={username}
           onChange={(e) => setUsername(e.target.value)}
           fullWidth
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <PersonOutline sx={{ color: "text.secondary", fontSize: 22 }} />
-              </InputAdornment>
-            ),
-          }}
-          sx={{
-            "& .MuiOutlinedInput-root": {
-              fontSize: "1rem",
-              "& input": {
-                py: 1.5,
-              },
-              "&:hover fieldset": {
-                borderColor: "primary.main",
-              },
-            },
-          }}
+          sx={inputSx}
+          slotProps={{ input: { disableUnderline: true } }}
         />
 
         <TextField
+          variant="filled"
           label="Password"
           type={showPassword ? "text" : "password"}
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           fullWidth
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <LockOutlined sx={{ color: "text.secondary", fontSize: 22 }} />
-              </InputAdornment>
-            ),
-            endAdornment: (
-              <InputAdornment position="end">
-                <IconButton
-                  onClick={() => setShowPassword(!showPassword)}
-                  edge="end"
-                  size="small"
-                  tabIndex={-1}
-                >
-                  {showPassword ? <VisibilityOff /> : <Visibility />}
-                </IconButton>
-              </InputAdornment>
-            ),
-          }}
-          sx={{
-            "& .MuiOutlinedInput-root": {
-              fontSize: "1rem",
-              "& input": {
-                py: 1.5,
-              },
-              "&:hover fieldset": {
-                borderColor: "primary.main",
-              },
-            },
-          }}
+          sx={inputSx}
           onKeyPress={(e) => {
             if (e.key === "Enter") {
               handleLogin();
             }
           }}
+          slotProps={{
+            input: {
+              disableUnderline: true,
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    onClick={() => setShowPassword(!showPassword)}
+                    edge="end"
+                    size="small"
+                    tabIndex={-1}
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            },
+          }}
         />
       </Stack>
 
@@ -131,47 +101,27 @@ export default function DemoLogin() {
         onClick={handleLogin}
         size="large"
         fullWidth
-        sx={{
-          mt: 1,
-          py: 1.5,
-          fontSize: "1rem",
-          fontWeight: 600,
-          textTransform: "none",
-          borderRadius: 1.5,
-          boxShadow: (theme) =>
-            `0 8px 16px ${alpha(theme.palette.primary.main, 0.24)}`,
-          transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-          "&:hover": {
-            transform: "translateY(-2px)",
-            boxShadow: (theme) =>
-              `0 12px 24px ${alpha(theme.palette.primary.main, 0.32)}`,
-          },
-          "&:active": {
-            transform: "translateY(0px)",
-          },
-        }}
+        disableElevation
+        sx={primaryButtonSx}
       >
-        Sign in
+        Sign in &rarr;
       </Button>
 
-      <Box
-        sx={{
-          mt: 1,
-          textAlign: "center",
-          p: 2,
-          borderRadius: 1.5,
-          bgcolor: (theme) => alpha(theme.palette.info.main, 0.08),
-          border: (theme) =>
-            `1px dashed ${alpha(theme.palette.info.main, 0.24)}`,
-        }}
-      >
-        <Typography
-          variant="caption"
-          color="text.secondary"
-          sx={{ fontSize: "0.8125rem" }}
-        >
-          Demo credentials:{" "}
-          <Box component="strong" sx={{ color: "text.primary" }}>
+      <Box sx={{ display: "flex", justifyContent: "center" }}>
+        <Typography variant="caption" sx={{ color: "text.disabled" }}>
+          Demo credentials:&nbsp;
+          <Box
+            component="span"
+            sx={{
+              color: "text.secondary",
+              fontWeight: 600,
+              fontFamily: "monospace",
+              px: 0.5,
+              py: 0.25,
+              borderRadius: 0.5,
+              bgcolor: (theme) => alpha(theme.palette.grey[500], 0.1),
+            }}
+          >
             admin / admin
           </Box>
         </Typography>

package/src/widgets/Login/styles.jsx

@@ -0,0 +1,35 @@
+import { alpha } from "@mui/material";
+export const inputSx = {
+  "& .MuiFilledInput-root": {
+    borderRadius: 1.5,
+    fontSize: "0.9375rem",
+    bgcolor: (theme) => alpha(theme.palette.grey[500], 0.08),
+    "&:hover": {
+      bgcolor: (theme) => alpha(theme.palette.grey[500], 0.12),
+    },
+    "&.Mui-focused": {
+      bgcolor: (theme) => alpha(theme.palette.primary.main, 0.06),
+    },
+    "&:before, &:after": { display: "none" },
+  },
+  "& .MuiInputLabel-root.Mui-focused": {
+    color: "primary.main",
+  },
+};
+
+export const primaryButtonSx = {
+  py: 1.5,
+  fontSize: "0.9375rem",
+  fontWeight: 700,
+  textTransform: "none",
+  borderRadius: 1.5,
+  letterSpacing: "0.01em",
+  background: (theme) =>
+    `linear-gradient(135deg, ${theme.palette.primary.dark} 0%, ${theme.palette.primary.main} 100%)`,
+  transition: "opacity 0.2s",
+  "&:hover": {
+    opacity: 0.88,
+    background: (theme) =>
+      `linear-gradient(135deg, ${theme.palette.primary.dark} 0%, ${theme.palette.primary.main} 100%)`,
+  },
+};

package/src/widgets/SettingsDialog.jsx

@@ -167,11 +167,13 @@ function SettingsDialog({ handleClose, open }) {
       maxWidth={"md"}
       onClose={() => handleClose()}
       sx={{ bgcolor: "custom.darkDialogBg", zIndex: 2147483647 }}
-      PaperProps={{
-        style: {
-          color: "white",
-          minHeight: 600,
-        },
+      slotProps={{
+        paper: {
+          style: {
+            color: "white",
+            minHeight: 600,
+          },
+        }
       }}
     >
       <DialogContent>
@@ -212,9 +214,13 @@ const Permission = () => {
   }, [event, event2]);
 
   return (
-    <Stack direction="column" spacing={2} p={2}>
+    <Stack direction="column" spacing={2} sx={{
+      p: 2
+    }}>
       <Typography variant="h6">Users</Typography>
-      <Typography variant="subtitle2" color="text.secondary">
+      <Typography variant="subtitle2" sx={{
+        color: "text.secondary"
+      }}>
         Users with access to the project.
       </Typography>
       <List>
@@ -300,9 +306,13 @@ const Settings = () => {
   };
 
   return (
-    <Stack direction="column" spacing={2} p={2}>
+    <Stack direction="column" spacing={2} sx={{
+      p: 2
+    }}>
       <Typography variant="h6">Settings</Typography>
-      <Typography variant="subtitle2" color="text.secondary">
+      <Typography variant="subtitle2" sx={{
+        color: "text.secondary"
+      }}>
         Configure your application settings.
       </Typography>
       <List>
@@ -363,7 +373,9 @@ const About = () => {
   const description = pkg.description;
 
   return (
-    <Stack direction="column" spacing={2} p={2}>
+    <Stack direction="column" spacing={2} sx={{
+      p: 2
+    }}>
       <Box
         sx={{
           p: 3,
@@ -374,7 +386,9 @@ const About = () => {
             "linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01))",
         }}
       >
-        <Stack direction="row" spacing={2.5} alignItems="center">
+        <Stack direction="row" spacing={2.5} sx={{
+          alignItems: "center"
+        }}>
           <Avatar
             src={iconSrc}
             variant="rounded"
@@ -390,16 +404,20 @@ const About = () => {
           </Avatar>
 
           <Box sx={{ flex: 1, minWidth: 0 }}>
-            <Typography variant="h5" fontWeight={600}>
+            <Typography variant="h5" sx={{
+              fontWeight: 600
+            }}>
               {appName.toUpperCase()}
             </Typography>
 
             {description && (
               <Typography
                 variant="body2"
-                color="text.secondary"
-                sx={{ mt: 0.5, maxWidth: 520 }}
-              >
+                sx={{
+                  color: "text.secondary",
+                  mt: 0.5,
+                  maxWidth: 520
+                }}>
                 {description}
               </Typography>
             )}
@@ -442,7 +460,9 @@ const About = () => {
             textAlign: "center",
           }}
         >
-          <Typography variant="caption" color="text.secondary">
+          <Typography variant="caption" sx={{
+            color: "text.secondary"
+          }}>
             © 2026 greycollar.ai. All rights reserved.
           </Typography>
         </Box>
@@ -453,11 +473,17 @@ const About = () => {
 
 const InfoRow = ({ label, value, link }) => {
   return (
-    <Stack direction="row" spacing={1.5} alignItems="center">
-      <Typography variant="body2" color="text.secondary" sx={{ minWidth: 110 }}>
+    <Stack direction="row" spacing={1.5} sx={{
+      alignItems: "center"
+    }}>
+      <Typography
+        variant="body2"
+        sx={{
+          color: "text.secondary",
+          minWidth: 110
+        }}>
         {label}
       </Typography>
-
       {link ? (
         <Link href={link} target="_blank" rel="noreferrer" underline="hover">
           {value}