add function hide password to login

src/renderer/components/Icons/GradientVisibilityToggleIcon.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+
+type Props = SvgIconProps & {
+  crossed?: boolean; // true = перечеркнуть
+};
+
+export default function GradientVisibilityToggleIcon({ crossed, sx, ...props }: Props) {
+  const id = React.useId();
+
+  return (
+    <SvgIcon
+      {...props}
+      viewBox="0 0 24 24"
+      sx={{
+        ...sx,
+
+        // анимация "рисования" линии
+        "& .slash": {
+          strokeDasharray: 100,
+          strokeDashoffset: crossed ? 0 : 100,
+          transition: "stroke-dashoffset 520ms ease",
+        },
+      }}
+    >
+      <defs>
+        <linearGradient id={id} x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#F27121" />
+          <stop offset="70%" stopColor="#E940CD" />
+          <stop offset="100%" stopColor="#8A2387" />
+        </linearGradient>
+      </defs>
+
+      {/* сам "глаз" */}
+      <path
+        fill={`url(#${id})`}
+        d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"
+      />
+
+      {/* линия "перечёркивания" */}
+      <path
+        className="slash"
+        d="M4 4 L20 20"
+        fill="none"
+        stroke={`url(#${id})`}
+        strokeWidth="2.4"
+        strokeLinecap="round"
+      />
+    </SvgIcon>
+  );
+}

src/renderer/components/Login/AuthForm.tsx

@@ -1,5 +1,10 @@
-import { Box, Button, TextField, Typography } from '@mui/material';
+import { useState } from "react";
-import GradientTextField from '../../components/GradientTextField';
+import { Box, Button, TextField, Typography, InputAdornment, IconButton } from '@mui/material';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import GradientTextField from '../GradientTextField';
+import GradientVisibilityToggleIcon from '../Icons/GradientVisibilityToggleIcon'
+import GradientVisibilityIcon from '../Icons/GradientVisibilityIcon'
 
 interface AuthFormProps {
   config: {
@@ -11,6 +16,7 @@ interface AuthFormProps {
 }
 
 const AuthForm = ({ config, handleInputChange, onLogin }: AuthFormProps) => {
+  const [showPassword, setShowPassword] = useState(false);
   return (
     <Box
       sx={{
@@ -34,9 +40,42 @@ const AuthForm = ({ config, handleInputChange, onLogin }: AuthFormProps) => {
       <GradientTextField
         label="Пароль"
         required
+        type={showPassword ? "text" : "password"}
         name="password"
         value={config.password}
         onChange={handleInputChange}
+        sx={{
+          '& .MuiInputBase-input': {
+          color: 'white',
+          padding: '1rem 0.7rem 1.1rem 1.5rem',
+          fontFamily: 'Benzin-Bold',
+        },
+        }}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end" sx={{ margin: '0' }}>
+              <IconButton
+                disableRipple
+                disableFocusRipple
+                disableTouchRipple
+                onClick={() => setShowPassword((prev) => !prev)}
+                edge="end"
+                sx={{
+                  color: "white",
+                  margin: '0',
+                  padding: '0',
+                  '& MuiTouchRipple-root css-r3djoj-MuiTouchRipple-root': {
+                    display: 'none',
+                  },
+                }}>
+                <GradientVisibilityToggleIcon
+                  crossed={showPassword}     // когда type="text" -> перечеркнуть
+                  sx={{ fontSize: "2.5vw", mr: '0.5vw' }}
+                />
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
       />
       <Button onClick={onLogin} variant="contained"
       sx={{
@@ -48,7 +87,7 @@ const AuthForm = ({ config, handleInputChange, onLogin }: AuthFormProps) => {
         borderRadius: '2.5vw',
         fontSize: '2vw',
         '&:hover': {
-          transform: 'scale(1.1)',
+          transform: 'scale(1.02)',
 
         },
       }}>

src/renderer/components/TopBar.tsx

@@ -155,7 +155,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
         top: 0,
         left: 0,
         right: 0,
-        height: '7vh',
+        height: '9vh',
         zIndex: 1000,
         width: '100%',
         WebkitAppRegion: 'drag',
@@ -407,17 +407,21 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
               color: 'white',
               border: 'none',
-              transition: 'transform 0.3s ease',
+              transition: 'all 0.3s ease',
               '&:hover': {
                 background:
                   'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
                 transform: 'scale(1.05)',
                 boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)',
               },
+              '&:active': {
+                color: 'transparent',
+              },
               boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
+              userSelect: 'none',
             }}
           >
-            Регистрация
+            <Typography sx={{ fontSize: '1em', color: 'white' }}>Регистрация</Typography>
           </Button>
         )}
 

src/renderer/components/popa-popa.tsx

@@ -10,7 +10,8 @@ export default function PopaPopa() {
       <Typography
         variant="h3"
         sx={{
-          background: '-webkit-linear-gradient(200.96deg, #88BCFF, #FD71FF)',
+          backgroundImage: 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 30%, rgb(138,35,135) 100%)',
+          // background: '-webkit-linear-gradient(200.96deg, #88BCFF, #FD71FF)',
           WebkitBackgroundClip: 'text',
           WebkitTextFillColor: 'transparent',
         }}

src/renderer/pages/Registration.tsx

@@ -9,19 +9,18 @@ import {
   styled,
   Typography,
   Box,
-  TextField,
   Button,
   Snackbar,
 } from '@mui/material';
 import LoginRoundedIcon from '@mui/icons-material/LoginRounded';
 import VerifiedRoundedIcon from '@mui/icons-material/VerifiedRounded';
 import AssignmentIndRoundedIcon from '@mui/icons-material/AssignmentIndRounded';
+import QRCodeStyling from 'qr-code-styling';
 import {
   generateVerificationCode,
   registerUser,
   getVerificationStatus,
 } from '../api';
-import QRCodeStyling from 'qr-code-styling';
 import popalogo from '../../../assets/icons/popa-popa.svg';
 import GradientTextField from '../components/GradientTextField';
 import { FullScreenLoader } from '../components/FullScreenLoader';
@@ -33,7 +32,7 @@ const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
   [`&.${stepConnectorClasses.active}`]: {
     [`& .${stepConnectorClasses.line}`]: {
       backgroundImage:
-        //'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
+        // 'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
         'linear-gradient( 95deg,rgb(150,150,150) 0%, rgb(242,113,33) 80%,rgb(233,64,87) 110%,rgb(138,35,135) 150%)',
     },
   },