rework registration

src/renderer/components/GradientTextField.tsx

@@ -0,0 +1,90 @@
+// GradientTextField.tsx
+import React from 'react';
+import TextField, { TextFieldProps } from '@mui/material/TextField';
+
+const GRADIENT =
+  'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)';
+
+const GradientTextField: React.FC<TextFieldProps> = ({ sx, ...props }) => {
+  return (
+    <TextField
+      {...props}
+      variant={props.variant ?? 'outlined'}
+      sx={{
+        width: '100%',
+        position: 'relative',
+        mt: '1.5vw',
+        mb: '1.5vw',
+
+        // Рамка инпута
+        '& .MuiOutlinedInput-root': {
+          position: 'relative',
+          zIndex: 1,
+          background: 'transparent',
+          borderRadius: '3.5vw',
+
+          '&:hover fieldset': {
+            borderColor: 'transparent',
+          },
+          '&.Mui-focused fieldset': {
+            borderColor: 'transparent',
+          },
+          '& fieldset': {
+            borderColor: 'transparent',
+          },
+        },
+
+        // Градиентная рамка через псевдоэлемент
+        '& .MuiOutlinedInput-root::before': {
+          content: '""',
+          position: 'absolute',
+          inset: 0,
+          padding: '0.4vw', // толщина рамки
+          borderRadius: '3.5vw',
+          background: GRADIENT,
+          WebkitMask:
+            'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+          WebkitMaskComposite: 'xor',
+          maskComposite: 'exclude',
+          zIndex: 0,
+        },
+
+        // Вводимый текст
+        '& .MuiInputBase-input': {
+          color: 'white',
+          padding: '1rem 1.5rem 1.1rem',
+          fontFamily: 'Benzin-Bold',
+        },
+
+        // Лейбл как плейсхолдер, который уезжает вверх
+        '& .MuiInputLabel-root': {
+          fontFamily: 'Benzin-Bold',
+          fontSize: '0.95rem',
+          background: 'black',
+
+          // позиция "по умолчанию" — внутри инпута
+          transform: 'translate(1.5rem, 1.1rem) scale(1)',
+
+          // градиентный текст
+          color: 'transparent',
+          backgroundImage: GRADIENT,
+          backgroundClip: 'text',
+          WebkitBackgroundClip: 'text',
+
+          // когда лейбл "съежился" (есть фокус или значение)
+          '&.MuiInputLabel-shrink': {
+            transform: 'translate(1.5rem, -1.3rem) scale(0.75)',
+          },
+
+          '&.Mui-focused': {
+            color: 'transparent', // не даём MUI перекрашивать
+          },
+        },
+
+        ...(sx as object),
+      }}
+    />
+  );
+};
+
+export default GradientTextField;

src/renderer/components/Login/AuthForm.tsx

@@ -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>