From ec5ddc20d049827681531fa925ea9b457e7be29a Mon Sep 17 00:00:00 2001
From: Maxim Sherstkov <maxim.sherstkov@saritasa.com>
Date: Tue, 10 Sep 2024 17:21:01 +0700
Subject: [PATCH] Refactor auth page styles JC-725

---
 .../auth/components/LoginForm/LoginForm.tsx   | 42 ++++----
 .../components/RegisterForm/RegisterForm.tsx  | 95 ++++++++-----------
 .../src/features/auth/pages/AuthPage.tsx      |  2 +-
 3 files changed, 59 insertions(+), 80 deletions(-)

diff --git a/apps/react/src/features/auth/components/LoginForm/LoginForm.tsx b/apps/react/src/features/auth/components/LoginForm/LoginForm.tsx
index 3c0bac5..1198d30 100644
--- a/apps/react/src/features/auth/components/LoginForm/LoginForm.tsx
+++ b/apps/react/src/features/auth/components/LoginForm/LoginForm.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography, Grid, TextField, Button, CircularProgress } from '@mui/material';
+import { Box, Typography, TextField, Button, CircularProgress, Stack } from '@mui/material';
 import { FC, memo, useEffect, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -63,29 +63,23 @@ const LoginFormComponent: FC = () => {
 		<Box>
 			<Typography variant="h5">Login page</Typography>
 			<Box component="form" onSubmit={handleSubmit(handleUserLogin)} noValidate sx={{ mt: 3 }}>
-				<Grid container spacing={2}>
-					<Grid item xs={12}>
-						<TextField
-							{...register('email')}
-							required
-							fullWidth
-							label="Email"
-							error={!!errors.email}
-							helperText={errors.email?.message?.toString()}
-						/>
-					</Grid>
-					<Grid item xs={12}>
-						<TextField
-							{...register('password')}
-							required
-							fullWidth
-							label="Password"
-							type="password"
-							error={!!errors.password}
-							helperText={errors.password?.message?.toString()}
-						/>
-					</Grid>
-				</Grid>
+				<Stack spacing={2}>
+					<TextField
+						{...register('email')}
+						required
+						label="Email"
+						error={errors.email != null}
+						helperText={errors.email?.message?.toString()}
+					/>
+					<TextField
+						{...register('password')}
+						required
+						label="Password"
+						type="password"
+						error={errors.password != null}
+						helperText={errors.password?.message?.toString()}
+					/>
+				</Stack>
 				<Button
 					type="submit"
 					fullWidth
diff --git a/apps/react/src/features/auth/components/RegisterForm/RegisterForm.tsx b/apps/react/src/features/auth/components/RegisterForm/RegisterForm.tsx
index 0d36ef3..5f00d85 100644
--- a/apps/react/src/features/auth/components/RegisterForm/RegisterForm.tsx
+++ b/apps/react/src/features/auth/components/RegisterForm/RegisterForm.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography, Grid, TextField, Button, CircularProgress } from '@mui/material';
+import { Box, Typography, TextField, Button, CircularProgress, Stack } from '@mui/material';
 import { FC, memo, useEffect, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -62,60 +62,45 @@ const RegisterFormComponent: FC = () => {
 		<Box>
 			<Typography variant="h5">Register page</Typography>
 			<Box component="form" onSubmit={handleSubmit(handleUserRegister)} noValidate sx={{ mt: 3 }}>
-				<Grid container spacing={2}>
-					<Grid item xs={12}>
-						<TextField
-							{...register('email')}
-							required
-							fullWidth
-							label="Email"
-							error={!!errors.email}
-							helperText={errors.email?.message?.toString()}
-						/>
-					</Grid>
-					<Grid item xs={12}>
-						<TextField
-							{...register('firstName')}
-							required
-							fullWidth
-							label="First name"
-							error={!!errors.firstName}
-							helperText={errors.firstName?.message?.toString()}
-						/>
-					</Grid>
-					<Grid item xs={12}>
-						<TextField
-							{...register('lastName')}
-							required
-							fullWidth
-							label="Last name"
-							error={!!errors.lastName}
-							helperText={errors.lastName?.message?.toString()}
-						/>
-					</Grid>
-					<Grid item xs={12}>
-						<TextField
-							{...register('password')}
-							required
-							fullWidth
-							label="Password"
-							type="password"
-							error={!!errors.password}
-							helperText={errors.password?.message?.toString()}
-						/>
-					</Grid>
-					<Grid item xs={12}>
-						<TextField
-							{...register('confirmPassword')}
-							required
-							fullWidth
-							label="Confirm password"
-							type="password"
-							error={!!errors.confirmPassword}
-							helperText={errors.confirmPassword?.message?.toString()}
-						/>
-					</Grid>
-				</Grid>
+				<Stack spacing={2}>
+					<TextField
+						{...register('email')}
+						required
+						label="Email"
+						error={errors.email != null}
+						helperText={errors.email?.message?.toString()}
+					/>
+					<TextField
+						{...register('firstName')}
+						required
+						label="First name"
+						error={errors.firstName != null}
+						helperText={errors.firstName?.message?.toString()}
+					/>
+					<TextField
+						{...register('lastName')}
+						required
+						label="Last name"
+						error={errors.lastName != null}
+						helperText={errors.lastName?.message?.toString()}
+					/>
+					<TextField
+						{...register('password')}
+						required
+						label="Password"
+						type="password"
+						error={errors.password != null}
+						helperText={errors.password?.message?.toString()}
+					/>
+					<TextField
+						{...register('confirmPassword')}
+						required
+						label="Confirm password"
+						type="password"
+						error={errors.confirmPassword != null}
+						helperText={errors.confirmPassword?.message?.toString()}
+					/>
+				</Stack>
 				<Button
 					type="submit"
 					fullWidth
diff --git a/apps/react/src/features/auth/pages/AuthPage.tsx b/apps/react/src/features/auth/pages/AuthPage.tsx
index 570f0bc..f72f58e 100644
--- a/apps/react/src/features/auth/pages/AuthPage.tsx
+++ b/apps/react/src/features/auth/pages/AuthPage.tsx
@@ -9,7 +9,7 @@ const AuthPageComponent: FC = () => (
 		display: 'flex',
 		flexDirection: 'column',
 		justifyContent: 'center',
-		maxWidth: 480,
+		width: 480,
 	}}>
 		<Outlet />
 	</Box>