Fixed modal and added new img

This commit is contained in:
MaxOvs19 2023-03-29 19:43:49 +03:00
parent df9e1d5a23
commit 9bab7d17cd
12 changed files with 270 additions and 83 deletions

View File

@ -40,11 +40,12 @@ export const ModalCreate = ({ active, setActive, title }) => {
onChange={(e) => setInputValue(e.target.value)}
></input>
</div>
</div>
<button className="create-project" onClick={createName}>
Создать
</button>
</div>
<span className="exit" onClick={() => setActive(false)}></span>
</div>
</div>
);
};

View File

@ -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);
}
}
}
}

View File

@ -41,7 +41,7 @@ export const ModalRegistration = ({ active, setActive }) => {
</div>
</div>
<div className="button-box">
<button>Отправить</button>
<button onClick={(e) => e.preventDefault()}>Отправить</button>
<h5>
У вас уже есть аккаунт? <p>Войти</p>
</h5>

View File

@ -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 }) => {
<h3 className="title-project">
<img src={category} className="title-project__category"></img>
Проект: {tiket.name}
<div className="title-project__menu">
<p>Редактировать</p>
<p>Удалить</p>
</div>
</h3>
<div className="content__task">
<span>Задача</span>
<h5>{tiket.code}</h5>
<div className="content__description">
<p>{tiket.descriptions}</p>
@ -58,20 +60,29 @@ export const ModalTiket = ({ active, setActive }) => {
<p>{tiket.descriptions}</p>
</div>
<div className="content__communication">
<p className="comment">
<img src={comments}></img>
<span>{0}</span>
Коментариев
<p className="tasks">
<button>
<img src={plus}></img>
Добавить под задачу
</button>
</p>
<p className="file">
<img src={files}></img>
<button>
<img src={file}></img>
Загрузить файл
</button>
<span>{0}</span>
Файлов
</p>
</div>
<div className="content__input">
<input placeholder="Оставить комментарий"></input>
<img src={send}></img>
</div>
</div>
</div>
<div className="workers">
<div className="workers_box">
<span className="exit" onClick={() => setActive(false)}></span>
<span>{tiket.code}</span>
<p className="workers__creator">Создатель : {tiket.creator}</p>
@ -90,7 +101,9 @@ export const ModalTiket = ({ active, setActive }) => {
<button>+</button>
<span>Добавить участников</span>
</div>
</div>
<div className="workers_box-middle">
<div className="time">
<img src={watch}></img>
<span>Длительность : </span>
@ -101,6 +114,26 @@ export const ModalTiket = ({ active, setActive }) => {
Начать делать <img src={arrow}></img>
</button>
</div>
<div className="workers_box-bottom">
<div>
<img src={edit}></img>
<p>редактировать</p>
</div>
<div>
<img src={link}></img>
<p>ссылка на проект</p>
</div>
<div>
<img src={archive}></img>
<p>в архив</p>
</div>
<div>
<img src={del}></img>
<p>удалить</p>
</div>
</div>
</div>
</div>
</div>
);

View File

@ -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;
}
}
}
}
}
}

6
src/images/archive.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.98912 7.33394C3.41566 7.33394 1.84259 7.33394 0.269128 7.33394C0.0946897 7.33394 0.0286895 7.2488 0.0711275 7.07853C0.444087 5.57966 0.816265 4.08118 1.19001 2.58271C1.33607 1.9973 1.48994 1.41345 1.63053 0.826867C1.65826 0.709316 1.69965 0.666748 1.82189 0.666748C3.94131 0.669872 6.06074 0.670263 8.18017 0.666748C8.30279 0.666748 8.34302 0.709707 8.37192 0.826086C8.89797 2.942 9.42753 5.05713 9.96217 7.17108C10.0051 7.34057 9.9239 7.33511 9.80635 7.33472C8.20047 7.33315 6.59499 7.33394 4.98912 7.33394ZM4.99302 5.66714C5.63584 5.66714 6.27827 5.66284 6.92108 5.67026C7.07378 5.67222 7.09175 5.62145 7.0605 5.48984C6.97263 5.11805 6.6645 4.84663 6.28452 4.84389C5.42768 4.83804 4.57085 4.83765 3.71402 4.84389C3.33833 4.84663 3.02278 5.12781 2.93921 5.49335C2.90757 5.6316 2.93921 5.67182 3.08448 5.67026C3.72066 5.66284 4.35684 5.66714 4.99302 5.66714ZM4.99536 2.34565C4.53024 2.34721 4.17368 2.70846 4.17524 3.17553C4.17681 3.63636 4.54547 4.00073 5.00708 3.99839C5.46596 3.99566 5.82954 3.62582 5.8272 3.16343C5.82486 2.69908 5.46361 2.34409 4.99536 2.34565Z" fill="#0B0C0C"/>
<path d="M4.9981 10.666C3.65154 10.666 2.30537 10.6667 0.95881 10.666C0.325755 10.6656 0.00317469 10.3395 0.00200309 9.70213C0.00122203 9.24052 0.00551789 8.77852 5.04254e-05 8.31691C-0.00151171 8.19897 0.0328552 8.1603 0.154311 8.16069C1.3056 8.16421 2.4569 8.16343 3.60819 8.15913C3.71285 8.15913 3.76714 8.19155 3.81908 8.2841C4.07449 8.74025 4.4658 8.98589 4.99263 8.98863C5.52766 8.99136 5.92483 8.74415 6.18415 8.28215C6.23726 8.18803 6.29389 8.15913 6.3966 8.15952C7.54125 8.16343 8.6863 8.16538 9.83095 8.15991C9.97545 8.15913 10.0028 8.21264 10.0012 8.34112C9.99536 8.81601 10.002 9.29051 9.9981 9.7654C9.99341 10.3262 9.65716 10.664 9.09558 10.6652C7.72949 10.6683 6.36418 10.6664 4.9981 10.666Z" fill="#0B0C0C"/>
<path d="M4.99302 5.66714C4.35684 5.66714 3.72066 5.66284 3.08448 5.67026C2.93921 5.67182 2.90757 5.6316 2.93921 5.49335C3.02278 5.12781 3.33833 4.84663 3.71402 4.84389C4.57085 4.83765 5.42768 4.83804 6.28452 4.84389C6.6645 4.84663 6.97263 5.11805 7.0605 5.48984C7.09175 5.62145 7.07378 5.67222 6.92108 5.67026C6.27827 5.66284 5.63584 5.66714 4.99302 5.66714Z" fill="#FCFCFC"/>
<path d="M4.99536 2.34565C5.46361 2.34409 5.82486 2.69908 5.8272 3.16343C5.82954 3.62582 5.46596 3.99566 5.00708 3.99839C4.54547 4.00073 4.17681 3.63636 4.17524 3.17553C4.17368 2.70846 4.53024 2.34721 4.99536 2.34565Z" fill="#FCFCFC"/>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

5
src/images/delete.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.1 KiB

11
src/images/edit.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_707_2182)">
<path d="M0.0781614 10.6664C-0.0413922 10.6732 0.00825629 10.6001 0.0233494 10.5512C0.0956376 10.3181 0.170706 10.0857 0.244186 9.85299C0.762516 8.21141 1.28045 6.56983 1.79878 4.92865C1.81864 4.86589 1.84644 4.8083 1.89609 4.75905C3.23859 3.41973 4.58148 2.08042 5.91921 0.735934C6.02764 0.627105 6.07768 0.659277 6.16665 0.748247C7.4174 2.00376 8.66973 3.25768 9.92723 4.50644C10.0404 4.61884 10.0166 4.67326 9.91809 4.77136C8.58751 6.09638 7.26051 7.42498 5.93311 8.75357C5.75795 8.92873 5.51447 8.94144 5.29959 9.01055C3.58533 9.55986 1.8667 10.0973 0.149655 10.6382C0.124632 10.6462 0.100404 10.6573 0.0781614 10.6664ZM2.7707 5.5578C2.68888 5.57765 2.69205 5.64637 2.67537 5.69919C2.45771 6.38355 2.2758 7.08181 2.01286 7.74829C1.84922 8.16375 1.92588 8.43185 2.26071 8.68525C2.36596 8.76509 2.44302 8.80163 2.57449 8.75913C3.32636 8.51526 4.08182 8.28171 4.83488 8.04101C4.9322 8.01003 5.08948 8.01162 5.10378 7.91431C5.11848 7.81581 4.99376 7.72883 4.90717 7.65932C4.60571 7.41703 4.25102 7.30264 3.87488 7.24267C3.47293 7.17832 3.48087 7.17594 3.41216 6.77478C3.33947 6.3486 3.22746 5.93512 2.87794 5.63684C2.84338 5.60705 2.80446 5.58242 2.7707 5.5578Z" fill="#070808"/>
<path d="M2.7707 5.5578C2.80446 5.58242 2.84338 5.60705 2.87794 5.63684C3.22746 5.93512 3.33947 6.3486 3.41216 6.77478C3.48087 7.17594 3.47293 7.17832 3.87488 7.24267C4.25102 7.30264 4.60571 7.41703 4.90717 7.65932C4.99376 7.72883 5.11848 7.81581 5.10378 7.91431C5.08948 8.01162 4.9322 8.01003 4.83488 8.04101C4.08182 8.28171 3.32636 8.51526 2.57449 8.75913C2.44302 8.80163 2.36596 8.76509 2.26071 8.68525C1.92588 8.43185 1.84922 8.16375 2.01286 7.74829C2.2758 7.08181 2.45771 6.38355 2.67537 5.69919C2.69205 5.64637 2.68888 5.57765 2.7707 5.5578Z" fill="#FBFBFB"/>
</g>
<defs>
<clipPath id="clip0_707_2182">
<rect width="10.0024" height="10" fill="white" transform="translate(0 0.666748)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

5
src/images/fileModal.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.5001 11V17C21.5001 21 20.5001 22 16.5001 22H6.50012C2.50012 22 1.50012 21 1.50012 17V7C1.50012 3 2.50012 2 6.50012 2H8.00012C9.50012 2 9.83012 2.44 10.4001 3.2L11.9001 5.2C12.2801 5.7 12.5001 6 13.5001 6H16.5001C20.5001 6 21.5001 7 21.5001 11Z" stroke="#1458DD" stroke-miterlimit="10"/>
<path d="M8 2H17C19 2 20 3 20 5V6.38" stroke="#1458DD" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 15H9" stroke="#1458DD" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 638 B

5
src/images/link.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="11" height="13" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.67079 8.63892C7.72497 8.01785 7.64798 7.41785 7.44023 6.84024C7.3938 6.71074 7.48301 6.64801 7.53759 6.57004C7.98363 5.93373 7.88261 5.06979 7.30337 4.5845C6.81293 4.17314 6.12085 4.23184 5.65078 4.73193C5.36319 5.03798 5.08335 5.35299 4.80065 5.66443C4.58028 5.9073 4.35665 6.14703 4.14035 6.39438C3.52649 7.09611 3.6605 8.13571 4.43445 8.61338C4.57621 8.70076 4.56602 8.74781 4.465 8.8558C4.1876 9.152 3.91224 9.45044 3.64665 9.75918C3.54685 9.87524 3.48209 9.85866 3.3774 9.77128C2.19325 8.78545 1.92359 6.90074 2.85682 5.60976C3.47964 4.74851 4.18679 3.94596 4.98803 3.28232C6.56567 1.9761 8.87571 3.01525 9.22073 5.15269C9.3857 6.17302 9.12052 7.05354 8.48425 7.80501C8.23577 8.09851 7.97711 8.38171 7.72334 8.66939C7.70582 8.65909 7.68831 8.64968 7.67079 8.63892Z" fill="#0A0B0C"/>
<path d="M1.6022 6.92494C1.57206 7.41381 1.57083 7.84668 1.68448 8.26162C1.78591 8.63175 1.83764 8.93243 1.60587 9.31959C1.25596 9.90481 1.47918 10.6563 2.0071 11.0699C2.49224 11.4499 3.18187 11.3768 3.62751 10.8897C4.12772 10.3435 4.62713 9.79547 5.12042 9.24117C5.74732 8.53631 5.61371 7.47744 4.83243 7.00828C4.6703 6.91104 4.71959 6.86579 4.81206 6.7672C5.07928 6.48087 5.34772 6.19498 5.60149 5.89475C5.71473 5.76077 5.79009 5.76122 5.91881 5.87145C7.15998 6.93166 7.3327 8.94184 6.26057 10.2364C5.72288 10.8862 5.15423 11.509 4.56602 12.1032C3.46253 13.2176 1.82461 13.1764 0.801365 12.0414C-0.25243 10.8723 -0.269946 9.07403 0.766741 7.84802C1.02296 7.54511 1.29751 7.26056 1.6022 6.92494Z" fill="#0A0B0C"/>
<path d="M11 0.669437C10.9947 0.672573 10.989 0.678847 10.9841 0.678399C10.9792 0.677951 10.9747 0.670781 10.9699 0.666748C10.98 0.667644 10.9898 0.668092 11 0.669437Z" fill="#EBEBEB"/>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

3
src/images/plus.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 0C5.26522 0 5.51957 0.105357 5.70711 0.292893C5.89464 0.48043 6 0.734784 6 1V4H9C9.26522 4 9.51957 4.10536 9.70711 4.29289C9.89464 4.48043 10 4.73478 10 5C10 5.26522 9.89464 5.51957 9.70711 5.70711C9.51957 5.89464 9.26522 6 9 6H6V9C6 9.26522 5.89464 9.51957 5.70711 9.70711C5.51957 9.89464 5.26522 10 5 10C4.73478 10 4.48043 9.89464 4.29289 9.70711C4.10536 9.51957 4 9.26522 4 9V6H1C0.734784 6 0.48043 5.89464 0.292893 5.70711C0.105357 5.51957 0 5.26522 0 5C0 4.73478 0.105357 4.48043 0.292893 4.29289C0.48043 4.10536 0.734784 4 1 4H4V1C4 0.734784 4.10536 0.48043 4.29289 0.292893C4.48043 0.105357 4.73478 0 5 0Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 784 B

11
src/images/send.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_707_2082)">
<path d="M17.4188 0.507812C17.7751 0.89063 17.7909 1.33346 17.6292 1.7965C17.079 3.36884 16.5218 4.93927 15.9684 6.51097C15.5054 7.82556 15.0436 9.14079 14.5818 10.456C13.7972 12.6916 13.0196 14.9292 12.2236 17.161C12.0493 17.6499 11.6867 17.9519 11.1428 17.9942C10.542 18.0403 10.1055 17.7997 9.83954 17.2583C8.86923 15.2804 7.90145 13.3012 6.92988 11.324C6.86102 11.1837 6.76879 11.0549 6.6873 10.921C6.6633 10.9033 6.63992 10.8856 6.61592 10.8679L6.61402 10.8717C6.6753 10.8003 6.73152 10.7232 6.79848 10.6575C8.10802 9.36821 9.43209 8.09404 10.7492 6.81167C11.4144 6.16416 12.0922 5.52866 12.7423 4.86473C13.6443 3.94243 14.6008 3.07319 15.5287 2.17553C15.952 1.76618 16.3538 1.33346 16.7852 0.932323C16.9697 0.761129 17.1295 0.529922 17.4201 0.509076L17.4188 0.507812Z" fill="#269CD0"/>
<path d="M17.4188 0.507947C17.1282 0.528794 16.9678 0.76 16.784 0.931194C16.3531 1.33233 15.9514 1.76505 15.5275 2.1744C14.5995 3.07143 13.6431 3.9413 12.741 4.8636C12.091 5.52816 11.4131 6.16366 10.7479 6.81054C9.43146 8.09228 8.10676 9.36644 6.79722 10.6564C6.73026 10.7221 6.67404 10.7992 6.61276 10.8706C5.97031 10.6387 5.38977 10.2774 4.78143 9.97541C3.42893 9.3039 2.08844 8.60776 0.740368 7.92804C0.306382 7.70883 -0.0189497 7.19967 0.000633386 6.73284C0.0240067 6.18577 0.359446 5.70946 0.868605 5.53069C1.93493 5.15608 3.00505 4.79348 4.07202 4.42077C5.9741 3.75621 7.87239 3.07965 9.77764 2.4233C11.0234 1.99373 12.2571 1.53195 13.4877 1.05943C14.2198 0.77832 14.9514 0.492154 15.674 0.187669C16.4466 -0.137031 16.9968 -0.0466959 17.4188 0.507947Z" fill="#40ACD9"/>
</g>
<defs>
<clipPath id="clip0_707_2082">
<rect width="17.7277" height="18" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB