From bffd070793692557732d37c1eb7d553c91a00c85 Mon Sep 17 00:00:00 2001 From: "Vsevo;od" <96574851+vsevolod22@users.noreply.github.com> Date: Sun, 24 Dec 2023 01:49:42 +0300 Subject: [PATCH] =?UTF-8?q?adduser=20=D0=B3=D0=BE=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/AddUsersPage/index.jsx | 61 +++- src/Components/AddUsersPage/style.module.scss | 310 +++++++++++++++++- src/Components/Calendar/index.jsx | 4 +- src/Components/MeetAuthPage/index.jsx | 5 +- src/Components/modal/index.jsx | 3 +- src/img/AddUsers/newAvatar.png | Bin 0 -> 5346 bytes 6 files changed, 373 insertions(+), 10 deletions(-) create mode 100644 src/img/AddUsers/newAvatar.png 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 0000000000000000000000000000000000000000..b155bf6edb117d389b5e8f6073a8761ed60010c8 GIT binary patch literal 5346 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