From eec11f303c6aeb8657f719a1fa2302db6ccab0d3 Mon Sep 17 00:00:00 2001
From: mohadeseh safari <mohadeseh.safari1992@gmail.com>
Date: Wed, 23 Apr 2025 23:28:35 -0400
Subject: [PATCH] applied the feedback

---
 .../Pages/Auth/Login/Components/EmailStep.jsx |  9 ++
 .../Auth/Login/Components/PasswordStep.jsx    | 19 +++-
 client/src/Pages/Auth/Login/Login.jsx         | 87 +++++++++++--------
 3 files changed, 80 insertions(+), 35 deletions(-)

diff --git a/client/src/Pages/Auth/Login/Components/EmailStep.jsx b/client/src/Pages/Auth/Login/Components/EmailStep.jsx
index ec5a4b2db..d50212e85 100644
--- a/client/src/Pages/Auth/Login/Components/EmailStep.jsx
+++ b/client/src/Pages/Auth/Login/Components/EmailStep.jsx
@@ -70,8 +70,17 @@ const EmailStep = ({ form, errors, onSubmit, onChange }) => {
 							color="accent"
 							type="submit"
 							disabled={errors.email && true}
+							className="dashboard-style-button"
 							sx={{
 								width: "30%",
+								px: theme.spacing(6),
+								borderRadius: `${theme.shape.borderRadius}px !important`,
+								'&.MuiButtonBase-root': {
+									borderRadius: `${theme.shape.borderRadius}px !important`
+								},
+								'&.MuiButton-root': {
+									borderRadius: `${theme.shape.borderRadius}px !important`
+								},
 								"&.Mui-focusVisible": {
 									outline: `2px solid ${theme.palette.primary.main}`,
 									outlineOffset: `2px`,
diff --git a/client/src/Pages/Auth/Login/Components/PasswordStep.jsx b/client/src/Pages/Auth/Login/Components/PasswordStep.jsx
index 0b8142161..a57246e23 100644
--- a/client/src/Pages/Auth/Login/Components/PasswordStep.jsx
+++ b/client/src/Pages/Auth/Login/Components/PasswordStep.jsx
@@ -75,8 +75,16 @@ const PasswordStep = ({ form, errors, onSubmit, onChange, onBack }) => {
 							variant="outlined"
 							color="info"
 							onClick={onBack}
+							className="dashboard-style-button"
 							sx={{
 								px: theme.spacing(5),
+								borderRadius: `${theme.shape.borderRadius}px !important`,
+								'&.MuiButtonBase-root': {
+									borderRadius: `${theme.shape.borderRadius}px !important`
+								},
+								'&.MuiButton-root': {
+									borderRadius: `${theme.shape.borderRadius}px !important`
+								},
 								"& svg.MuiSvgIcon-root": {
 									mr: theme.spacing(3),
 								},
@@ -95,13 +103,22 @@ const PasswordStep = ({ form, errors, onSubmit, onChange, onBack }) => {
 							type="submit"
 							loading={authState.isLoading}
 							disabled={errors.password && true}
+							className="dashboard-style-button"
 							sx={{
 								width: "30%",
+								px: theme.spacing(4),
+								borderRadius: `${theme.shape.borderRadius}px !important`,
+								'&.MuiButtonBase-root': {
+									borderRadius: `${theme.shape.borderRadius}px !important`
+								},
+								'&.MuiButton-root': {
+									borderRadius: `${theme.shape.borderRadius}px !important`
+								},
 								"&.Mui-focusVisible": {
 									outline: `2px solid ${theme.palette.primary.main}`,
 									outlineOffset: `2px`,
-									boxShadow: `none`,
 								},
+								boxShadow: `none`,
 							}}
 						>
 							{t("continue")}
diff --git a/client/src/Pages/Auth/Login/Login.jsx b/client/src/Pages/Auth/Login/Login.jsx
index a5eec8898..bbf14be8b 100644
--- a/client/src/Pages/Auth/Login/Login.jsx
+++ b/client/src/Pages/Auth/Login/Login.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
-import { Box, Stack, Typography, Alert, Button } from "@mui/material";
+import { Box, Stack, Typography, Button } from "@mui/material";
+import Alert from "../../../Components/Alert";
 import { useTheme } from "@emotion/react";
 import { credentials } from "../../../Validation/validation";
 import { login } from "../../../Features/Auth/authSlice";
@@ -281,39 +282,52 @@ const Login = () => {
 					</Stack>
 				) : !backendReachable ? (
 					<Stack spacing={theme.spacing(6)} alignItems="center">
-						<Alert 
-							severity="error" 
-							sx={{ 
-								width: '100%',
-								'& .MuiAlert-message': { 
-									display: 'flex',
-									alignItems: 'center'
-								},
-								'& .MuiAlert-icon': {
-									display: 'flex',
+						<Box sx={{ 
+								width: theme.spacing(220), 
+								mx: 'auto', 
+								'& .alert.row-stack': { 
+									width: '100%',
 									alignItems: 'center',
-									marginRight: theme.spacing(2)
-								}
-							}}
-						>
-							{t("backendUnreachable")}
-						</Alert>
-						<Typography 
-							variant="body1" 
-							align="center"
-							mt={theme.spacing(2)}
-						>
-							{t("backendUnreachableMessage")}
-						</Typography>
-						<Button 
-							variant="contained" 
-							color="accent" 
-							onClick={handleRetry}
-							disabled={isCheckingConnection}
-							mt={theme.spacing(4)}
-						>
-							{isCheckingConnection ? t("retryingConnection") : t("retryConnection")}
-						</Button>
+									gap: theme.spacing(3)
+								} 
+							}}>
+							<Alert 
+								variant="error"
+								body={t("backendUnreachable")}
+								hasIcon={true}
+							/>
+						</Box>
+						<Box mt={theme.spacing(2)}>
+							<Typography 
+								variant="body1" 
+								align="center"
+								color={theme.palette.primary.contrastTextSecondary}
+							>
+								{t("backendUnreachableMessage")}
+							</Typography>
+						</Box>
+						<Box sx={{ mt: theme.spacing(4) }}>
+							<Button 
+								variant="contained" 
+								color="accent" 
+								onClick={handleRetry}
+								disabled={isCheckingConnection}
+								loading={isCheckingConnection}
+								className="dashboard-style-button"
+								sx={{ 
+									px: theme.spacing(6),
+									borderRadius: `${theme.shape.borderRadius}px !important`,
+									'&.MuiButtonBase-root': {
+										borderRadius: `${theme.shape.borderRadius}px !important`
+									},
+									'&.MuiButton-root': {
+										borderRadius: `${theme.shape.borderRadius}px !important`
+									}
+								}}
+							>
+								{isCheckingConnection ? t("retryingConnection") : t("retryConnection")}
+							</Button>
+						</Box>
 					</Stack>
 				) : step === 0 ? (
 					<EmailStep
@@ -353,7 +367,12 @@ const Login = () => {
 								component="span"
 								color={theme.palette.accent.main}
 								ml={theme.spacing(2)}
-								sx={{ userSelect: "none" }}
+								sx={{ 
+									cursor: 'pointer',
+									'&:hover': {
+										color: theme.palette.accent.darker
+									}
+								}}
 								onClick={() => navigate("/register")}
 							>
 								{t("registerHere")}