new design register/login panel(inputs)

This commit is contained in:
aurinex
2025-12-02 23:30:23 +05:00
parent 59c7d7fd85
commit 205bb84fec
3 changed files with 270 additions and 195 deletions

View File

@ -1,4 +1,5 @@
import { Box, Button, TextField, Typography } from '@mui/material';
import GradientTextField from '../../components/GradientTextField';
interface AuthFormProps {
config: {
@ -19,72 +20,38 @@ const AuthForm = ({ config, handleInputChange, onLogin }: AuthFormProps) => {
alignItems: 'center',
}}
>
<Typography variant="h6">Логин</Typography>
<TextField
<GradientTextField
label="Никнейм"
required
name="username"
variant="outlined"
value={config.username}
onChange={handleInputChange}
sx={{
width: '100%',
// '& .MuiFormLabel-root': {
// color: 'white',
// },
'& .MuiInputBase-input': {
color: 'white',
},
'& .MuiInput-underline:after': {
borderBottomColor: '#B2BAC2',
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: '#E0E3E7',
color: 'white',
},
'&:hover fieldset': {
borderColor: '#B2BAC2',
},
'&.Mui-focused fieldset': {
borderColor: '#6F7E8C',
},
},
mt: '2.5vw',
mb: '0vw'
}}
/>
<Typography variant="h6">Пароль</Typography>
<TextField
<GradientTextField
label="Пароль"
required
type="password"
name="password"
variant="outlined"
value={config.password}
onChange={handleInputChange}
sx={{
width: '100%',
// '& .MuiFormLabel-root': {
// color: 'white',
// },
'& .MuiInputBase-input': {
color: 'white',
},
'& .MuiInput-underline:after': {
borderBottomColor: '#B2BAC2',
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: '#E0E3E7',
color: 'white',
},
'&:hover fieldset': {
borderColor: '#B2BAC2',
},
'&.Mui-focused fieldset': {
borderColor: '#6F7E8C',
},
},
}}
/>
<Button onClick={onLogin} variant="contained">
<Button onClick={onLogin} variant="contained"
sx={{
transition: 'transform 0.3s ease',
width: '60%',
mt: 2,
background: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
fontFamily: 'Benzin-Bold',
borderRadius: '2.5vw',
fontSize: '2vw',
'&:hover': {
transform: 'scale(1.1)',
},
}}>
Войти
</Button>
</Box>