diff --git a/src/Components/UI/LoginModal.jsx b/src/Components/UI/LoginModal.jsx index c4d5f09..7d77404 100755 --- a/src/Components/UI/LoginModal.jsx +++ b/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 }) => {

Авторизация

-
+ {/*
{ onChange={(e) => setPassword(e.target.value)} required /> -
+
*/} + + {/* :not(style)': { m: 1, width: '25ch' } }} + noValidate + autoComplete="off" + > */} + setUsername(e.target.value)} + size="normal" + /> + + setPassword(e.target.value)} + size="normal" + /> + {/* + Password + + + {showPassword ? : } + + + } + label="Password" + /> + */} + {/* */} + {error &&

{error}

}
diff --git a/src/Style/Dashboard.css b/src/Style/Dashboard.css index 3e1be18..a7f393c 100755 --- a/src/Style/Dashboard.css +++ b/src/Style/Dashboard.css @@ -34,6 +34,7 @@ /* Заголовки */ h2 { color: var(--text-color); + text-align: center; } p { diff --git a/src/Style/LoginModal.css b/src/Style/LoginModal.css index 10f969f..6228e3b 100755 --- a/src/Style/LoginModal.css +++ b/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; - border: 1px solid #ccc; + margin-bottom: 10px; */ + /* border: 1px solid #ccc; */ /* text-align: start; */ - border-radius: 4px; - font-size: larger; + /* border-radius: 4px; */ + /* 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 { diff --git a/src/Style/SidebarMenu.css b/src/Style/SidebarMenu.css index 66cc367..d4670ec 100755 --- a/src/Style/SidebarMenu.css +++ b/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; */ } /* Элементы меню */ diff --git a/src/Style/dark-theme.css b/src/Style/dark-theme.css index ae5c96a..e1b5215 100755 --- a/src/Style/dark-theme.css +++ b/src/Style/dark-theme.css @@ -3,6 +3,7 @@ :root { --background-color: #1E1E1E; --text-color: #E0E0E0; + --header-color: #FFFFFF; /* Основной цвет текста (светлый) */ --sidebar-color: #2d2d2d; /* Темный цвет сайдбара */ diff --git a/src/Style/light-theme.css b/src/Style/light-theme.css index 287b9f2..6e98f53 100755 --- a/src/Style/light-theme.css +++ b/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 } \ No newline at end of file