login page with material

src/Components/UI/LoginModal.jsx

@@ -1,11 +1,25 @@
 import React, { useState } from "react";
 import Modal from "./Modal";
 import "../../Style/LoginModal.css";
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Input from '@mui/material/Input';
+import FilledInput from '@mui/material/FilledInput';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputLabel from '@mui/material/InputLabel';
+import InputAdornment from '@mui/material/InputAdornment';
+import FormHelperText from '@mui/material/FormHelperText';
+import FormControl from '@mui/material/FormControl';
+import TextField from '@mui/material/TextField';
+
 
 const LoginModal = ({ onLogin, onClose }) => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -21,7 +35,7 @@ const LoginModal = ({ onLogin, onClose }) => {
     <Modal onClose={onClose}>
       <h2>Авторизация</h2>
       <form onSubmit={handleSubmit}>
-        <div>
+        {/* <div>
           <label>Логин:</label>
           <input
             type="text"
@@ -38,7 +52,61 @@ const LoginModal = ({ onLogin, onClose }) => {
             onChange={(e) => setPassword(e.target.value)}
             required
           />
-        </div>
+        </div> */}
+        
+        {/* <Box
+          component="form"
+          sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
+          noValidate
+          autoComplete="off"
+        > */}
+          <TextField 
+            fullWidth 
+            id="user-login" 
+            label="Логин" 
+            variant="filled" 
+            margin="normal"
+            required 
+            onChange={(e) => setUsername(e.target.value)} 
+            size="normal"
+          />
+
+          <TextField 
+            fullWidth 
+            id="user-password" 
+            label="Пароль" 
+            variant="filled" 
+            margin="normal"
+            required 
+            type={showPassword ? 'text' : 'password'}
+            onChange={(e) => setPassword(e.target.value)}
+            size="normal"
+          />
+          {/* <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
+            <InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
+            <OutlinedInput
+              id="outlined-adornment-password"
+              type={showPassword ? 'text' : 'password'}
+              endAdornment={
+                <InputAdornment position="end">
+                  <IconButton
+                    aria-label={
+                      showPassword ? 'hide the password' : 'display the password'
+                    }
+                    onClick={handleClickShowPassword}
+                    onMouseDown={handleMouseDownPassword}
+                    onMouseUp={handleMouseUpPassword}
+                    edge="end"
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              }
+              label="Password"
+            />
+          </FormControl> */}
+      {/* </Box> */}
+
         {error && <p className="error">{error}</p>}
         <button type="submit">Войти</button>
       </form>

src/Style/Dashboard.css

@@ -34,6 +34,7 @@
 /* Заголовки */
 h2 {
   color: var(--text-color);
+  text-align: center;
 }
 
 p {

src/Style/LoginModal.css

@@ -18,13 +18,13 @@
     /* box-shadow: 0 0.3vh 2vh #1E1E1E; */
     max-width: 400px;
     width: 100%;
-    color: var(--modal-text);
 }
 
 .modal h2 {
     margin-bottom: 20px;
     text-align: center;
     font-size: 4vh;
+    color: var(--header-color);
 }
 
 .modal label {
@@ -37,16 +37,16 @@
 }
 
 .modal input {
-    width: 94%;
+    /* width: 100%; */
     /* max-width: fit-content; */
-    padding: 3%;
+    /* padding: 3%;
     padding-top: 3%;
     padding-bottom: 3%;
-    margin-bottom: 10px;
+    margin-bottom: 10px; */
-    border: 1px solid #ccc;
+    /* border: 1px solid #ccc; */
     /* text-align: start; */
-    border-radius: 4px;
+    /* border-radius: 4px; */
-    font-size: larger;
+    /* font-size: larger; */
     background-color: var(--modal-background);
     color: var(--modal-text);
 }
@@ -69,6 +69,7 @@
 
 .modal button:hover {
     background: var(--hover-button);
+    color: var(--hover-text-color);
 }
 
 .error {

src/Style/SidebarMenu.css

@@ -26,10 +26,12 @@
 /* Заголовок меню */
 .sidebar-title {
     margin-bottom: 20px;
-    font-size: 18px;
+    font-size: 1.5em;
     font-weight: bold;
     color: var(--sidebar-text-color);
     padding: 10px;
+    text-align: center;
+    /* font-size: 2vh; */
 }
 
 /* Элементы меню */

src/Style/dark-theme.css

@@ -3,6 +3,7 @@
     :root {
         --background-color: #1E1E1E;
         --text-color: #E0E0E0;
+        --header-color: #FFFFFF;
         /* Основной цвет текста (светлый) */
         --sidebar-color: #2d2d2d;
         /* Темный цвет сайдбара */

src/Style/light-theme.css

@@ -1,13 +1,15 @@
 /* Светлая тема по умолчанию */
 :root {
     --background-color: #FFFFFF;
-    --text-color: #333333;
+    --text-color: #FFFFFF;
+    --header-color: #333333;
     /* Основной цвет текста (черный) */
     --sidebar-color: #3d74c7;
     /* Синий цвет сайдбара */
     --sidebar-text-color: #FFFFFF;
     /* Белый текст в сайдбаре и вкладках */
     --modal-background: #FFFFFF;
+    --modal--btn-background: #0f55bec2;
     --modal-text: #333333;
     --table-border: #ddd;
     --table-header-background: #f9f9f9;
@@ -16,5 +18,6 @@
     /* Черный текст в таблице */
     
     /* hover for buttons */
-    --hover-button: #2c579c;
+    --hover-button: #2d62b1;
+    --hover-text-color : #FFFFFF
 }