diff --git a/src/Components/AddUsersPage/index.jsx b/src/Components/AddUsersPage/index.jsx index 7bad770..e55707e 100644 --- a/src/Components/AddUsersPage/index.jsx +++ b/src/Components/AddUsersPage/index.jsx @@ -1,9 +1,28 @@ import styles from './style.module.scss'; +import { useState } from 'react'; import avatar from '../../img/profilePage/avatar.png'; import Header from '../Header'; +import Modal from '@mui/material/Modal'; +import Box from '@mui/material/Box'; import del from '../../img/AddUsers/delete.png'; import perm from '../../img/AddUsers/permission.png'; +import newAvatar from '../../img/AddUsers/newAvatar.png'; +const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: "46%", + height: "60vh", + bgcolor: 'background.paper', + borderRadius: '25px', + boxShadow: 24, + p: 4, + }; const AddUsers = () => { + const [open, setOpen] = useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); return ( <>
@@ -20,7 +39,7 @@ const AddUsers = () => {
-
+
+
+
Добавить пользователя
@@ -85,6 +104,46 @@ const AddUsers = () => {
+ + +
+
Добавление пользователя
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + + + +
+ + +
+
+
+
+
diff --git a/src/Components/AddUsersPage/style.module.scss b/src/Components/AddUsersPage/style.module.scss index 39b42fc..2b2b1b7 100644 --- a/src/Components/AddUsersPage/style.module.scss +++ b/src/Components/AddUsersPage/style.module.scss @@ -164,6 +164,7 @@ } } .round { + cursor: pointer; border-radius: 80%; height: 50px; border: 1px solid var(--yellow, #FD0); @@ -227,4 +228,311 @@ height: 100%; width: 100%; } - } \ No newline at end of file + } +.addModal { + + + &__close { + cursor: pointer; + transform: rotate(-45deg); + position: absolute; + height: 96px; + height: 45px; + color: #000; + font-family: Montserrat; + font-size: 78.625px; + font-style: normal; + font-weight: 200; + line-height: normal; + top: 13px; + right: 50px; + } + &__title { + color: #000; + font-family: Montserrat; + font-size: 36px; + font-style: normal; + font-weight: 400; + line-height: normal; + } + &_form { + margin-top: 100px; + height: 100%; + width: 30%; + } + &_user { + border-radius: 7.794px; + border: 0.779px solid var(--gray_stroke, #D0D2D8); + height: 35px; + width: 200px; + margin-bottom: 12px; + text-align: center; + &_select { + border-radius: 7.794px; + border: 0.779px solid var(--gray_stroke, #D0D2D8); + height: 40px; + width: 210px; + margin-bottom: 12px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + } + &_input_container { + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; + margin-top: 100px; + margin-left: 10%; + } + &_container { + height: 100%; + + display: flex; + align-items: start; + } + } + +} +.input_file_row { + display: inline-block; + height: 100%; + +} +.input_file { + position: relative; + display: inline-block; +} +.input_file span { + margin-top: 159px; + padding-top: 200px; + position: relative; + display: inline-block; + cursor: pointer; + outline: none; + text-decoration: none; + font-size: 14px; + vertical-align: middle; + color: rgb(255 255 255); + text-align: center; + border-radius: 4px; + line-height: 22px; + height: 40px; + padding: 10px 20px; + box-sizing: border-box; + border: none; + margin: 0; + transition: background-color 0.2s; +} +.input_file input[type=file] { + position: absolute; + z-index: -1; + opacity: 0; + display: block; + width: 0; + height: 0; +} + +/* Focus */ +// .input_file input[type=file]:focus + span { +// box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); +// } + +/* Hover/active */ + + +/* Disabled */ + + +/* Список c превью */ +.input_file_list { + padding: 10px 0; +} +.input_file_list_item { + display: inline-block; + margin: 0 15px 15px; + width: 150px; + vertical-align: top; + position: relative; +} +.input_file_list_item img { + width: 150px; +} +.input_file_list_name { + text-align: center; + display: block; + font-size: 12px; + text-overflow: ellipsis; + overflow: hidden; +} +.input_file_list_remove { + color: #fff; + text-decoration: none; + display: inline-block; + position: absolute; + padding: 0; + margin: 0; + top: 5px; + right: 5px; + background: #ff0202; + width: 16px; + height: 16px; + text-align: center; + line-height: 16px; + border-radius: 50%; +} +.modal { + background-color: #fff; + position: absolute; + height: 400px; + width: 300px; + &__container { + position: absolute; + top: 0px; + height: 5000px; + width: 100%; + background-color: rgba(0, 0, 0, 0.40); + } + &__title { + color: #000; + font-family: Montserrat; + font-size: 48px; + font-style: normal; + font-weight: 400; + line-height: normal; + } + &__line { + height: 1px; + width: 100%; + stroke-width: 1px; + background-color: #D0D2D8; + width: 100%; + margin-top: 40px; + } + &__close { + cursor: pointer; + transform: rotate(-45deg); + position: absolute; + height: 96px; + height: 45px; + color: #000; + font-family: Montserrat; + font-size: 58.625px; + font-style: normal; + font-weight: 200; + line-height: normal; + top: 0px; + right: 50px; + } + &__question { + &_number { + margin-top: 50px; + color: #000; + font-family: Montserrat; + font-size: 32px; + font-style: normal; + font-weight: 600; + line-height: normal; + span { + color: #000; + font-family: Montserrat; + font-size: 32px; + font-style: normal; + font-weight: 400; + line-height: normal; + } + } + &_container { + margin-top: 60px; + display: flex; + justify-content: space-between; + } + &_containerSecond { + width: 48%; + height: 250px; + display: flex; + flex-direction: column; + position: relative; + } + &_user { + &_img { + margin-right: 25px; + &_container { + display: flex; + align-items:center; + color: #000; + font-family: Montserrat; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: normal; + } + } + &_descr { + color: #000; + font-family: Montserrat; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-top: 25px; + } + } + &_time { + display: flex; + justify-content: center; + align-items: center; + &_container { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 20px; + } + } + &_like { + display: flex; + justify-content: center; + align-items: center; + margin: 5px 0 0 10px; + &_container { + display: flex; + justify-content: center; + align-items: center; + + } + } + &_input { + margin-top: 40px; + border-radius: 10px; + border: 1px solid var(--gray_stroke, #D0D2D8); + width: 100%; + height: 235px; + padding-top: 20px; + padding-left: 10px; + } + &_containerThird { + margin-right: 3%; + } + &_button { + &_container { + display: flex; + justify-content: center; + align-items: center; + } + } + } +} +.yellow { + border-radius: 10px; + background-color: #60AD1E; + width: 190px; + height: 50px; + margin-right: 30px; +} +.gray { + border-radius: 10px; + background: var(--gray_stroke, #D0D2D8); + width: 140px; + height: 40px; +} diff --git a/src/Components/Calendar/index.jsx b/src/Components/Calendar/index.jsx index 9b8521f..b14bb4f 100644 --- a/src/Components/Calendar/index.jsx +++ b/src/Components/Calendar/index.jsx @@ -1,6 +1,6 @@ -import * as React from 'react'; + import dayjs from 'dayjs'; -import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; diff --git a/src/Components/MeetAuthPage/index.jsx b/src/Components/MeetAuthPage/index.jsx index 1046961..09f329a 100644 --- a/src/Components/MeetAuthPage/index.jsx +++ b/src/Components/MeetAuthPage/index.jsx @@ -12,10 +12,7 @@ import newAvatar from '../../img/MeetPage/newAvatar.png'; import vk from '../../img/MeetPage/Vk.png'; import tg from '../../img/MeetPage/Telegram.png'; import book from '../../img/MeetPage/Book.png'; -import { useState } from "react"; import * as React from 'react'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; import Modal from '@mui/material/Modal'; const style = { @@ -230,7 +227,7 @@ const MeetPage = () => { >
Вопросы
-
+
+
+
Всего 1
diff --git a/src/Components/modal/index.jsx b/src/Components/modal/index.jsx index 3f32a46..cdc5d74 100644 --- a/src/Components/modal/index.jsx +++ b/src/Components/modal/index.jsx @@ -1,6 +1,5 @@ -import * as React from 'react'; + import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; import Modal from '@mui/material/Modal'; diff --git a/src/img/AddUsers/newAvatar.png b/src/img/AddUsers/newAvatar.png new file mode 100644 index 0000000..b155bf6 Binary files /dev/null and b/src/img/AddUsers/newAvatar.png differ