Adjust color and login page

src/components/LoginPage/LoginForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FormHelperText } from "@mui/material";
+import { FormHelperText, SxProps } from "@mui/material";
 import Button from "@mui/material/Button";
 import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
@@ -31,7 +31,7 @@ const getHumanFriendlyErrorMessage = (
   }
 };
 
-const LoginForm: React.FC = () => {
+const LoginForm: React.FC<{ sx?: SxProps }> = ({ sx }) => {
   const { t } = useTranslation("login");
   const {
     register,
@@ -65,6 +65,7 @@ const LoginForm: React.FC = () => {
       margin={5}
       component="form"
       onSubmit={handleSubmit(onSubmit)}
+      sx={sx}
     >
       <Typography variant="h1">{t("Sign In")}</Typography>
       <TextField

src/components/LoginPage/LoginPage.tsx

@@ -7,14 +7,44 @@ import { Box } from "@mui/material";
 const LoginPage = () => {
   return (
     <Grid container height="100vh">
-      <Grid item sm sx={{ backgroundColor: 'neutral.000', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <Box sx={{ width: '100%', padding: 5, paddingBlockStart: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', svg: { maxHeight: 120 } }}>
+      <Grid
+        item
+        xs={12}
+        md={6}
+        sx={{
+          backgroundColor: "neutral.000",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexGrow: 1,
+        }}
+      >
+        <Box
+          sx={{
+            width: "100%",
+            padding: 5,
+            paddingBlockStart: 10,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            svg: { maxHeight: 120 },
+          }}
+        >
           <Logo />
         </Box>
       </Grid>
-      <Grid item xs={12} sm={8} lg={5} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <Paper square sx={{ width: '100%', padding: 5 }}>
-          <LoginForm />
+      <Grid item xs={12} md={6} sx={{ height: { md: "100%" }, flexGrow: 1 }}>
+        <Paper
+          square
+          sx={{
+            height: "100%",
+            width: "100%",
+            padding: { lg: 5, md: 3 },
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <LoginForm sx={{ flex: 1 }} />
         </Paper>
       </Grid>
     </Grid>

src/theme/devias-material-kit/colors.ts

@@ -11,7 +11,25 @@ export const neutral = {
   900: "#111927",
 };
 
+// export const primary = {
+//   lightest: "#F5F7FF",
+//   light: "#EBEEFE",
+//   main: "#6366F1",
+//   dark: "#4338CA",
+//   darkest: "#312E81",
+//   contrastText: "#FFFFFF",
+// };
+
 export const primary = {
+  lightest: "#f9fff5",
+  light: "#f9feeb",
+  main: "#8dba00",
+  dark: "#638a01",
+  darkest: "#4a5f14",
+  contrastText: "#FFFFFF",
+};
+
+export const secondary = {
   lightest: "#F5F7FF",
   light: "#EBEEFE",
   main: "#6366F1",

src/theme/devias-material-kit/palette.ts

@@ -1,6 +1,14 @@
 import { common } from "@mui/material/colors";
 import { PaletteOptions } from "@mui/material/styles";
-import { error, primary, info, neutral, success, warning } from "./colors";
+import {
+  error,
+  primary,
+  secondary,
+  info,
+  neutral,
+  success,
+  warning,
+} from "./colors";
 
 const palette = {
   action: {
@@ -20,6 +28,7 @@ const palette = {
   info,
   mode: "light",
   primary,
+  secondary,
   success,
   text: {
     primary: neutral[900],