From 9bab7d17cd7dc5aaaf31ad0d3fef90a92334c609 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Wed, 29 Mar 2023 19:43:49 +0300 Subject: [PATCH] Fixed modal and added new img --- src/components/UI/ModalCreate/ModalCreate.js | 7 +- .../UI/ModalCreate/ModalCreate.scss | 57 ++++++-- .../UI/ModalRegistration/ModalRegistration.js | 2 +- src/components/UI/ModalTiket/ModalTiket.js | 105 +++++++++----- src/components/UI/ModalTiket/ModalTiket.scss | 136 ++++++++++++++---- src/images/archive.svg | 6 + src/images/delete.svg | 5 + src/images/edit.svg | 11 ++ src/images/fileModal.svg | 5 + src/images/link.svg | 5 + src/images/plus.svg | 3 + src/images/send.svg | 11 ++ 12 files changed, 270 insertions(+), 83 deletions(-) create mode 100644 src/images/archive.svg create mode 100644 src/images/delete.svg create mode 100644 src/images/edit.svg create mode 100644 src/images/fileModal.svg create mode 100644 src/images/link.svg create mode 100644 src/images/plus.svg create mode 100644 src/images/send.svg diff --git a/src/components/UI/ModalCreate/ModalCreate.js b/src/components/UI/ModalCreate/ModalCreate.js index c6fd5af0..de7d8813 100644 --- a/src/components/UI/ModalCreate/ModalCreate.js +++ b/src/components/UI/ModalCreate/ModalCreate.js @@ -40,10 +40,11 @@ export const ModalCreate = ({ active, setActive, title }) => { onChange={(e) => setInputValue(e.target.value)} > + - + setActive(false)}> ); diff --git a/src/components/UI/ModalCreate/ModalCreate.scss b/src/components/UI/ModalCreate/ModalCreate.scss index 66d56d3b..b7b8492e 100644 --- a/src/components/UI/ModalCreate/ModalCreate.scss +++ b/src/components/UI/ModalCreate/ModalCreate.scss @@ -12,30 +12,36 @@ transform: scale(0); &__content { + position: relative; + width: 424px; + height: 248px; + background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); + border-radius: 40px; + padding: 15px; - background: #ffffff; - border: 1px solid #dde2e4; - border-radius: 8px; display: flex; flex-direction: column; align-items: center; + justify-content: center; .title-project { display: flex; - align-items: center; + align-items: flex-start; flex-direction: column; .input-container { - width: 220px; - height: 25px; - border-radius: 44px; - border: 1px solid #d1d1d1; + width: 287px; + height: 35px; + background: #ffffff; + border-radius: 8px; } h4 { - color: #111112; - margin-bottom: 10px; - font-size: 14px !important; + font-weight: 500; + font-size: 22px; + line-height: 26px; + color: #263238; + margin-bottom: 22px; } } @@ -49,9 +55,9 @@ } .create-project { - margin: 15px 0 0 0; - width: 188px; - height: 40px; + margin: 30px 0 0 0; + width: 130px; + height: 37px; background: #52b709; border-radius: 44px; border: none; @@ -63,6 +69,29 @@ align-items: center; justify-content: center; } + + .exit { + cursor: pointer; + position: absolute; + top: 35px; + right: 40px; + + &:before, + &:after { + content: ""; + position: absolute; + width: 16px; + height: 2px; + background: #263238; + } + + &:before { + transform: rotate(45deg); + } + &:after { + transform: rotate(-45deg); + } + } } } diff --git a/src/components/UI/ModalRegistration/ModalRegistration.js b/src/components/UI/ModalRegistration/ModalRegistration.js index aa8fae28..07566aff 100644 --- a/src/components/UI/ModalRegistration/ModalRegistration.js +++ b/src/components/UI/ModalRegistration/ModalRegistration.js @@ -41,7 +41,7 @@ export const ModalRegistration = ({ active, setActive }) => {
- +
У вас уже есть аккаунт?

Войти

diff --git a/src/components/UI/ModalTiket/ModalTiket.js b/src/components/UI/ModalTiket/ModalTiket.js index eb62a34a..6e39d147 100644 --- a/src/components/UI/ModalTiket/ModalTiket.js +++ b/src/components/UI/ModalTiket/ModalTiket.js @@ -1,15 +1,20 @@ import React, { useState } from "react"; -import "./ModalTiket.scss"; -import creatorMock from "../../../images/avatarMoсkCreator.png"; import avatarMock1 from "../../../images/avatarMoсk1.png"; import avatarMock2 from "../../../images/avatarMoсk2.png"; import category from "../../../images/category.png"; -import comments from "../../../images/commentsBoard.svg"; import watch from "../../../images/watch.png"; -import files from "../../../images/filesBoard.svg"; +import file from "../../../images/fileModal.svg"; import task from "../../../images/tasksMock.png"; import arrow from "../../../images/arrowStart.png"; +import link from "../../../images/link.svg"; +import archive from "../../../images/archive.svg"; +import del from "../../../images/delete.svg"; +import edit from "../../../images/edit.svg"; +import send from "../../../images/send.svg"; +import plus from "../../../images/plus.svg"; + +import "./ModalTiket.scss"; export const ModalTiket = ({ active, setActive }) => { const [tiket] = useState({ @@ -44,13 +49,10 @@ export const ModalTiket = ({ active, setActive }) => {

Проект: {tiket.name} -
-

Редактировать

-

Удалить

-

+ Задача
{tiket.code}

{tiket.descriptions}

@@ -58,48 +60,79 @@ export const ModalTiket = ({ active, setActive }) => {

{tiket.descriptions}

-

- - {0} - Коментариев +

+

- + {0} Файлов

+
+ + +
- setActive(false)}> - {tiket.code} -

Создатель : {tiket.creator}

-
- {workers.map((worker, index) => { - return ( -
- -

{worker.name}

-
- ); - })} +
+ setActive(false)}> + {tiket.code} +

Создатель : {tiket.creator}

+
+ {workers.map((worker, index) => { + return ( +
+ +

{worker.name}

+
+ ); + })} +
+ +
+ + Добавить участников +
-
- - Добавить участников +
+
+ + Длительность : +

{"8:30:22"}

+
+ +
-
- - Длительность : -

{"8:30:22"}

+
+
+ +

редактировать

+
+
+ +

ссылка на проект

+
+
+ +

в архив

+
+
+ +

удалить

+
- -
diff --git a/src/components/UI/ModalTiket/ModalTiket.scss b/src/components/UI/ModalTiket/ModalTiket.scss index cd9974f2..f8cef4e2 100644 --- a/src/components/UI/ModalTiket/ModalTiket.scss +++ b/src/components/UI/ModalTiket/ModalTiket.scss @@ -30,46 +30,35 @@ margin: 26px 0 0 21px; .title-project { + color: #1458dd; font-family: "LabGrotesque", sans-serif; display: flex; align-items: center; font-weight: 700; - font-size: 16px; + font-size: 22px; + line-height: 32px; &__category { margin-right: 17px; } - - &__menu { - display: flex; - align-items: center; - margin-left: 110px; - - p { - font-weight: 400; - font-size: 14px; - color: #252c32; - margin: 0 30px 0 0; - - &:hover { - cursor: pointer; - text-decoration: underline; - } - } - } } &__task { - margin-top: 22px; + margin-top: -5px; padding: 18px; + button { + img { + margin-right: 5px; + } + } + h5 { font-family: "Inter", sans-serif; font-weight: 500; font-style: normal; font-size: 16px; line-height: 24px; - color: #1a1919; } } @@ -93,12 +82,23 @@ flex-direction: row; margin: 29px 0 0 -5px; - .comment { - width: 100px; + .tasks { justify-content: space-evenly; + + button { + width: 180px; + height: 40px; + background: #52b709; + border-radius: 44px; + font-weight: 400; + font-size: 12px; + line-height: 32px; + border: none; + color: #ffffff; + } } - .comment, + .tasks, .file { display: flex; align-items: center; @@ -107,7 +107,61 @@ .file { justify-content: space-between; margin-left: 20px; - width: 70px; + + button { + display: flex; + align-items: center; + justify-content: center; + background: white; + width: 166px; + height: 40px; + border: 0.5px solid #1458dd; + border-radius: 44px; + font-weight: 400; + font-size: 12px; + line-height: 32px; + color: #1458dd; + + img { + margin-right: 9px; + } + } + + span { + margin: 0 3px 0 11px; + font-weight: 500; + font-size: 12px; + line-height: 15px; + color: #6e7c87; + } + } + } + + &__input { + margin: 20px 0 20px 0; + display: flex; + align-items: center; + justify-content: space-between; + width: 438px; + height: 40px; + background: #f1f1f1; + border-radius: 44px; + + input { + width: 80%; + background: inherit; + border: none; + outline: none; + padding-left: 30px; + font-weight: 400; + font-size: 12px; + line-height: 32px; + border-radius: 44px; + } + + img { + cursor: pointer; + margin-right: 18px; } } } @@ -115,14 +169,12 @@ .workers { position: relative; border-left: 1px solid #f1f1f1; - width: 300px; - padding: 40px; .exit { cursor: pointer; position: absolute; - top: 22px; - right: 31px; + top: 35px; + right: 40px; &:before, &:after { @@ -224,5 +276,31 @@ color: #807777; } } + + &_box { + padding: 25px 85px 40px 40px; + border-bottom: 1px solid #f1f1f1; + + &-middle { + padding: 0px 40px 25px 40px; + border-bottom: 1px solid #f1f1f1; + } + + &-bottom { + padding: 40px 0 75px 56px; + font-weight: 400; + font-size: 14px; + line-height: 38px; + + div { + display: flex; + align-items: center; + + p { + margin: 0 0 0 12px; + } + } + } + } } } diff --git a/src/images/archive.svg b/src/images/archive.svg new file mode 100644 index 00000000..f5239b62 --- /dev/null +++ b/src/images/archive.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/delete.svg b/src/images/delete.svg new file mode 100644 index 00000000..9484862d --- /dev/null +++ b/src/images/delete.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/edit.svg b/src/images/edit.svg new file mode 100644 index 00000000..bea8d068 --- /dev/null +++ b/src/images/edit.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/fileModal.svg b/src/images/fileModal.svg new file mode 100644 index 00000000..0a0dbb9d --- /dev/null +++ b/src/images/fileModal.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/link.svg b/src/images/link.svg new file mode 100644 index 00000000..e383f42e --- /dev/null +++ b/src/images/link.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/plus.svg b/src/images/plus.svg new file mode 100644 index 00000000..64f79cb0 --- /dev/null +++ b/src/images/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/send.svg b/src/images/send.svg new file mode 100644 index 00000000..67e53dcd --- /dev/null +++ b/src/images/send.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +