Merge remote-tracking branch 'origin/update-modal-app' into candidate-area

This commit is contained in:
Николай Полтщук 2023-04-18 14:00:55 +03:00
commit 7ae079e6bb
23 changed files with 1215 additions and 591 deletions

View File

@ -1,18 +1,12 @@
import React from "react"; import React from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { scrollToForm } from "../../helper";
import userIcon from "../../images/userIcon.png"; import userIcon from "../../images/userIcon.png";
import "./authHeader.scss"; import "./authHeader.scss";
export const AuthHeader = ({}) => { export const AuthHeader = ({}) => {
function scrollToForm() {
window.scrollTo({
top: 850,
behavior: "smooth",
});
}
return ( return (
<div className="auth-header"> <div className="auth-header">
<div className="auth-header__logo"> <div className="auth-header__logo">
@ -25,10 +19,8 @@ export const AuthHeader = ({}) => {
<div className="auth-nav"> <div className="auth-nav">
<ul> <ul>
<li> <li>
<NavLink to={'/auth'}> <NavLink to={"/auth"}>
<span> <span>Главная</span>
Главная
</span>
</NavLink> </NavLink>
</li> </li>
<li> <li>
@ -38,10 +30,8 @@ export const AuthHeader = ({}) => {
<a href="#">Школа</a> <a href="#">Школа</a>
</li> </li>
<li> <li>
<NavLink to={'/auth-candidate'} className="candidate"> <NavLink to={"/auth-candidate"} className="candidate">
<span> <span>Войти в команду</span>
Войти в команду
</span>
</NavLink> </NavLink>
</li> </li>
</ul> </ul>

View File

@ -1,12 +1,23 @@
@use 'sass:math'; @use "sass:math";
.candidate { .candidate {
padding-top: 23px; padding-top: 23px;
z-index: 0;
&__wrapper { &__wrapper {
background: #F1F1F1; background: #f1f1f1;
min-height: 100vh; min-height: 100vh;
} }
.profileBreadcrumbs {
position: relative;
z-index: -1;
}
.row {
position: relative;
z-index: -1;
}
&__header { &__header {
display: flex; display: flex;
@ -19,14 +30,21 @@
} }
} }
.col-xl-8 {
position: relative;
z-index: -1;
}
&__main { &__main {
margin-top: 60px; margin-top: 60px;
position: relative;
z-index: -1;
&-description { &-description {
padding-left: 16px; padding-left: 16px;
h2 { h2 {
font-family: 'GT Eesti Pro Display', sans-serif; font-family: "GT Eesti Pro Display", sans-serif;
font-size: 2.8em; font-size: 2.8em;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
@ -36,7 +54,7 @@
} }
p { p {
font-family: 'GT Eesti Pro Display', sans-serif; font-family: "GT Eesti Pro Display", sans-serif;
font-size: 1.2em; font-size: 1.2em;
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
@ -50,7 +68,7 @@
&__text { &__text {
p { p {
font-family: 'GT Eesti Pro Display', sans-serif; font-family: "GT Eesti Pro Display", sans-serif;
font-size: 1.6em; font-size: 1.6em;
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
@ -63,7 +81,7 @@
} }
&-secondary { &-secondary {
font-family: 'GT Eesti Pro Display', sans-serif; font-family: "GT Eesti Pro Display", sans-serif;
font-size: 1.6em; font-size: 1.6em;
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
@ -92,7 +110,7 @@
position: absolute; position: absolute;
right: 20%; right: 20%;
top: 40%; top: 40%;
font-family: 'GT Eesti Pro Display', sans-serif; font-family: "GT Eesti Pro Display", sans-serif;
font-size: 1.8em; font-size: 1.8em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
@ -112,7 +130,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: #D3E4BC; background: #d3e4bc;
border-radius: 50px; border-radius: 50px;
margin-right: 20px; margin-right: 20px;
@ -122,7 +140,7 @@
} }
&-sp { &-sp {
font-size: 12px; font-size: 12px;
color: #5B6871; color: #5b6871;
max-width: 75px; max-width: 75px;
@media (max-width: 768px) { @media (max-width: 768px) {
@ -133,6 +151,8 @@
footer { footer {
margin-top: 2.5rem !important; margin-top: 2.5rem !important;
position: relative;
z-index: -2;
} }
} }
@ -235,7 +255,7 @@
rgba(255, 255, 255, 0) 100% rgba(255, 255, 255, 0) 100%
); );
color: #ffffff; color: #ffffff;
font-family: 'Muller', sans-serif; font-family: "Muller", sans-serif;
font-size: 1.3em; font-size: 1.3em;
letter-spacing: normal; letter-spacing: normal;
border: none; border: none;
@ -311,13 +331,12 @@
top: 80px !important; top: 80px !important;
} }
.candidate__works {
.candidate__works{
@media (min-width: 576px) { @media (min-width: 576px) {
padding: 0 0 45px 0; padding: 0 0 45px 0;
} }
} }
.works__body{ .works__body {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -15px -30px; margin: 0 -15px -30px;
@ -331,7 +350,7 @@
&__info { &__info {
width: 100%; width: 100%;
background: #E1FCCF; background: #e1fccf;
border-radius: 12px 12px 0px 0px; border-radius: 12px 12px 0px 0px;
padding: 20px 0 20px 50px; padding: 20px 0 20px 50px;
@ -342,7 +361,7 @@
} }
} }
} }
.item-works{ .item-works {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 0 1 49%; flex: 0 1 49%;
@ -352,10 +371,10 @@
flex: 0 1 100%; flex: 0 1 100%;
} }
&__body{ &__body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #FFFFFF; background: #ffffff;
height: 170px; height: 170px;
padding: 25px 40px 25px 25px; padding: 25px 40px 25px 25px;
border-radius: 12px; border-radius: 12px;
@ -376,7 +395,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50px; border-radius: 50px;
background: #DDEEC6; background: #ddeec6;
margin: auto 0; margin: auto 0;
} }
} }
@ -395,11 +414,10 @@
width: 100%; width: 100%;
height: 8px; height: 8px;
border-radius: 12px; border-radius: 12px;
background: #D4F123; background: #d4f123;
bottom: -36%; bottom: -36%;
left: 10%; left: 10%;
} }
} }
&__project { &__project {

View File

@ -1,79 +1,93 @@
import React from 'react' import React, { useState } from "react";
import {Link} from 'react-router-dom' import { Link } from "react-router-dom";
import {Achievement} from '../Achievement/Achievement' import { Achievement } from "../Achievement/Achievement";
import {LEVELS, SKILLS} from '../../constants/constants' import ModalAspt from "../UI/ModalAspt/ModalAspt";
import { urlForLocal } from "../../helper";
import { LEVELS, SKILLS } from "../../constants/constants";
import './candidateSidebar.scss' import "./candidateSidebar.scss";
import {urlForLocal} from "../../helper";
const getYearsString = (years) => { const getYearsString = (years) => {
let yearsString; let yearsString;
if (years % 10 === 1) { if (years % 10 === 1) {
yearsString = 'год' yearsString = "год";
} else if (years === 11 || years === 12 || years === 13 || years === 14) { } else if (years === 11 || years === 12 || years === 13 || years === 14) {
yearsString = 'лет' yearsString = "лет";
} else if (years % 10 === 2 || years % 10 === 3 || years % 10 === 4) { } else if (years % 10 === 2 || years % 10 === 3 || years % 10 === 4) {
yearsString = 'года' yearsString = "года";
} else { } else {
yearsString = 'лет' yearsString = "лет";
} }
return `${years} ${yearsString}` return `${years} ${yearsString}`;
}; };
const CandidateSidebar = ({candidate, setActiveSnippet, activeSnippet}) => { const CandidateSidebar = ({ candidate, setActiveSnippet, activeSnippet }) => {
const userId = localStorage.getItem('id'); const userId = localStorage.getItem("id");
const [addAspt, setAddAspt] = useState(false);
const showSnippet = () => { const showSnippet = () => {
setActiveSnippet(!activeSnippet) setActiveSnippet(!activeSnippet);
};
let levelAspt = {
spec: candidate.specification,
skils: SKILLS[candidate.position_id],
level: LEVELS[candidate.level],
}; };
return ( return (
<div className='candidate-sidebar'> <div className="candidate-sidebar">
<div className='candidate-sidebar__info'> <ModalAspt
<div className='candidate-sidebar__position'> active={addAspt}
<h2> setActive={setAddAspt}
{candidate.specification} {SKILLS[candidate.position_id]},{' '} level={levelAspt}
{LEVELS[candidate.level]}{' '} ></ModalAspt>
</h2>
</div> <div className="candidate-sidebar__info">
{candidate.photo && <img src={urlForLocal(candidate.photo)} alt=''/>} <div className="candidate-sidebar__position">
{candidate && candidate.years_of_exp && ( <h2>
<> {candidate.specification} {SKILLS[candidate.position_id]},{" "}
<p className='candidate-sidebar__experience-title'>Опыт работы</p> {LEVELS[candidate.level]}{" "}
<p className='candidate-sidebar__experience'> </h2>
{getYearsString(candidate.years_of_exp)}
</p>
</>
)}
<Link to={`/candidate/${candidate.id}/form`}>
<button className='candidate-sidebar__select'>
Выбрать к собеседованию
</button>
</Link>
{userId && (
<>
<Link to={`/${candidate.id}/calendar`}>
<button className='candidate-sidebar__select'>
Отчёты
</button>
</Link>
<button
className='candidate-sidebar__select'
onClick={showSnippet}
>
{activeSnippet ? "Показать" : "Скрыть"}
</button>
<div className='candidate-sidebar__achievements'>
{candidate &&
candidate.achievements &&
candidate.achievements.map((item) => {
return <Achievement key={item.id} achievement={item.achievement}/>
})}
</div>
</>)}
</div> </div>
{candidate.photo && <img src={urlForLocal(candidate.photo)} alt="" />}
{candidate && candidate.years_of_exp && (
<>
<p className="candidate-sidebar__experience-title">Опыт работы</p>
<p className="candidate-sidebar__experience">
{getYearsString(candidate.years_of_exp)}
</p>
</>
)}
<button
className="candidate-sidebar__select"
onClick={() => setAddAspt(true)}
>
Выбрать к собеседованию
</button>
{userId && (
<>
<button className="candidate-sidebar__select" onClick={showSnippet}>
{activeSnippet ? "Код разработчика" : "Скрыть"}
</button>
<div className="candidate-sidebar__achievements">
{candidate &&
candidate.achievements &&
candidate.achievements.map((item) => {
return (
<Achievement key={item.id} achievement={item.achievement} />
);
})}
</div>
</>
)}
</div> </div>
) </div>
);
}; };
export default CandidateSidebar export default CandidateSidebar;

View File

@ -5,7 +5,7 @@
border-radius: 12px; border-radius: 12px;
border-bottom: none !important; border-bottom: none !important;
position: sticky; position: sticky;
background: #FFFFFF; background: #ffffff;
top: 80px; top: 80px;
&__position { &__position {
@ -13,7 +13,7 @@
h2 { h2 {
font-size: 2.5rem; font-size: 2.5rem;
font-family: 'GT Eesti Pro Display', sans-serif; font-family: "GT Eesti Pro Display", sans-serif;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;
@ -29,6 +29,7 @@
} }
&__info { &__info {
padding-bottom: 40px;
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;
@ -53,7 +54,7 @@
} }
.candidate-sidebar__experience-title { .candidate-sidebar__experience-title {
font-family: 'GT Eesti Pro Display', sans-serif; font-family: "GT Eesti Pro Display", sans-serif;
font-size: 1.8em; font-size: 1.8em;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -63,7 +64,7 @@
} }
.candidate-sidebar__experience { .candidate-sidebar__experience {
font-family: 'GT Eesti Pro Display', sans-serif; font-family: "GT Eesti Pro Display", sans-serif;
font-size: 2.5em; font-size: 2.5em;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
@ -78,7 +79,7 @@
border: none; border: none;
background-color: #73c141; background-color: #73c141;
color: #ffffff; color: #ffffff;
font-family: 'Muller', sans-serif; font-family: "Muller", sans-serif;
font-size: 1.6em; font-size: 1.6em;
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;
@ -95,7 +96,7 @@
} }
.candidate-sidebar__info__l { .candidate-sidebar__info__l {
font-family: 'GT Eesti Pro Display', sans-serif; font-family: "GT Eesti Pro Display", sans-serif;
font-size: 1.8em; font-size: 1.8em;
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
@ -134,7 +135,7 @@
.candidate-sidebar__arrows-sp { .candidate-sidebar__arrows-sp {
color: #705fa3; color: #705fa3;
font-family: 'Circe', sans-serif; font-family: "Circe", sans-serif;
font-size: 1.3em; font-size: 1.3em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;

View File

@ -0,0 +1,69 @@
import React, { useEffect, useState } from "react";
import ModalSettings from "../UI/ModalSettings/ModalSettings";
import link from "../../images/link.svg";
import archiveSet from "../../images/archive.svg";
import del from "../../images/delete.svg";
import edit from "../../images/edit.svg";
import "./projectTiket.scss";
export const ProjectTiket = ({ project, index, setOpenProject }) => {
const [modalSettings, setModalSettings] = useState(false);
useEffect(() => {
initListeners();
}, []);
function initListeners() {
document.addEventListener("click", closeByClickingOut);
}
function closeByClickingOut(event) {
const path = event.path || (event.composedPath && event.composedPath());
if (
event &&
!path.find((item) => item.classList && item.classList.contains("project"))
) {
setModalSettings(false);
}
}
return (
<div className="project" key={index}>
<h3 onClick={() => setOpenProject(true)}>{project.name}</h3>
<div className="project__info">
<p>Открытые задачи</p>
<span className="count">{project.count}</span>
<span className="add">+</span>
<span className="menu-settings" onClick={() => setModalSettings(true)}>
...
</span>
</div>
<ModalSettings active={modalSettings}>
<div className="project__settings-menu">
<div>
<img src={edit}></img>
<p>редактировать</p>
</div>
<div>
<img src={link}></img>
<p>ссылка на проект</p>
</div>
<div>
<img src={archiveSet}></img>
<p>в архив</p>
</div>
<div>
<img src={del}></img>
<p>удалить</p>
</div>
</div>
</ModalSettings>
</div>
);
};
export default ProjectTiket;

View File

@ -0,0 +1,85 @@
.project {
position: relative;
width: 48%;
background: #f1f1f1;
border-radius: 12px;
padding: 17px 26px 16px;
cursor: pointer;
max-width: 440px;
@media (max-width: 1068px) {
width: 47%;
}
@media (max-width: 785px) {
width: 100%;
}
@media (max-width: 430px) {
padding: 8px 13px 8px;
}
h3 {
font-weight: 700;
font-size: 18px;
line-height: 32px;
color: #111112;
margin-bottom: 10px;
}
&__info {
display: flex;
align-items: center;
position: relative;
@media (max-width: 430px) {
justify-content: space-between;
}
p {
color: #6f6f6f;
font-weight: 500;
font-size: 12px;
line-height: 24px;
margin-bottom: 0;
}
.count {
margin-left: 8px;
width: 21px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #dddddd;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #6f6f6f;
}
.add {
color: #6f6f6f;
font-size: 17px;
margin: 0 25px 0 auto;
@media (max-width: 430px) {
display: none;
}
}
.menu-settings {
position: absolute;
font-size: 21px;
color: #6f6f6f;
right: 0;
top: -35%;
z-index: 999;
@media (max-width: 430px) {
display: none;
}
}
}
}

View File

@ -3,13 +3,15 @@ import React from "react";
import AuthHeader from "../../AuthHeader/AuthHeader"; import AuthHeader from "../../AuthHeader/AuthHeader";
import SideBar from "../../SideBar/SideBar"; import SideBar from "../../SideBar/SideBar";
import { Footer } from "../../Footer/Footer"; import { Footer } from "../../Footer/Footer";
import { Link } from "react-router-dom";
import { scrollToForm } from "../../../helper";
import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
import mockWorker from "../../../images/mokPerson.png"; import mockWorker from "../../../images/mokPerson.png";
import arrow from "../../../images/arrow_left.png"; import arrow from "../../../images/arrow_left.png";
import "./freeDevelopers.scss"; import "./freeDevelopers.scss";
import { Link } from "react-router-dom";
export const FreeDevelopers = ({}) => { export const FreeDevelopers = ({}) => {
return ( return (
@ -40,7 +42,9 @@ export const FreeDevelopers = ({}) => {
<div></div> <div></div>
</div> </div>
</div> </div>
<button className="button-green">Код разработчика</button> <button className="button-green" onClick={scrollToForm}>
Код разработчика
</button>
</div> </div>
<div className="free-dev__body"> <div className="free-dev__body">

View File

@ -0,0 +1,19 @@
import React from "react";
import "./modalAdd.scss";
export const ModalAdd = ({ children, active, setActive }) => {
return (
<div
className={active ? "modal-add active" : "modal-add"}
onClick={() => setActive(false)}
>
<div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
{children}
<span className="exit" onClick={() => setActive(false)}></span>
</div>
</div>
);
};
export default ModalAdd;

View File

@ -0,0 +1,117 @@
.modal-add {
z-index: 9;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.11);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0);
&__content {
position: relative;
width: 424px;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 40px;
padding: 60px 60px 30px 60px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.title-project {
display: flex;
align-items: flex-start;
flex-direction: column;
.input-container {
width: 287px;
height: 35px;
background: #ffffff;
border-radius: 8px;
}
h4 {
font-weight: 500;
font-size: 22px;
line-height: 26px;
color: #263238 !important;
margin-bottom: 22px !important;
}
&__decs {
font-weight: 300;
font-size: 12px;
line-height: 14px;
margin: -13px 0 16px 0;
}
&__textarea {
resize: none;
width: 302px;
height: 83px;
background: #ffffff;
border-radius: 8px;
border: none;
font-size: 15px;
line-height: 18px;
}
}
.name-project {
margin-left: 10px;
border: none;
outline: none;
height: 100%;
width: 90%;
font-size: 14px;
}
.button-add {
margin: 20px 40% 0 0;
width: 130px;
height: 37px;
background: #52b709;
border-radius: 44px;
border: none;
font-weight: 400;
font-size: 15px;
line-height: 32px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
}
.modal-add.active {
transform: scale(1);
}
.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

@ -0,0 +1,101 @@
import React, { useState } from "react";
import avatar from "../../../images/mokPerson.png";
import logoTg from "../../../images/TgLogo.svg";
import arrow from "../../../images/right-arrow.png";
import interview from "../../../images/interviewLogo.svg";
import { Link } from "react-router-dom";
import ModalAdd from "../ModalAdd/ModalAdd";
import "./modalAspt.scss";
export const ModalAspt = ({ active, setActive, level }) => {
const [date, setDate] = useState("");
const [time, setTime] = useState("");
const [modalSend, setModalSend] = useState(false);
const send = () => {
if (date != "" && time != "") {
setModalSend(true);
setTimeout(() => {
setModalSend(false);
setActive(false);
}, 3200);
}
};
return (
<div
className={active ? "modal-aspt active" : "modal-aspt"}
onClick={() => setActive(false)}
>
<div className="modal-aspt__content" onClick={(e) => e.stopPropagation()}>
<div className="aspt-decs">
<h1>Выбранный кандидат</h1>
<div className="aspt-decs__avatar">
<div className="aspt-decs__avatar_title">
<img src={avatar}></img>
<p>
{level.spec} {level.skils}, {level.level}{" "}
</p>
</div>
<div className="aspt-decs__avatar_back">
<Link to={"/profile/catalog"}>
<div>
<img src={arrow}></img>
</div>
<p>Вернуться к списку</p>
</Link>
</div>
</div>
<div className="aspt-decs__telega">
<h4>Есть вопросы?</h4>
<div className="aspt-decs__telega-logo">
<img src={logoTg}></img>
<p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
</div>
</div>
</div>
<div className="form-interview">
<p>Дата собеседования</p>
<div className="input">
<input
type="date"
value={date}
onChange={(e) => setDate(e.target.value)}
></input>
</div>
<p>Время собеседования</p>
<div className="input">
<input
type="time"
value={time}
onChange={(e) => setTime(e.target.value)}
></input>
</div>
<button onClick={send}>Отправить</button>
</div>
<span className="exit" onClick={() => setActive(false)}></span>
</div>
<ModalAdd active={modalSend} setActive={setModalSend}>
<div className="send">
<img src={interview}></img>
<h2>Спасибо, собеседование назначено</h2>
<p>
Дата: <span>{date}</span>
</p>
<p>
Время собеседования: <span>{time}</span>
</p>
</div>
</ModalAdd>
</div>
);
};
export default ModalAspt;

View File

@ -0,0 +1,195 @@
.modal-aspt {
z-index: 99;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.11);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0);
&__content {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid #dde2e4;
border-radius: 8px;
.aspt-decs {
padding: 54px 25px 51px 61px;
border-right: 1px solid #f1f1f1;
h1 {
display: block;
font-weight: 500;
font-size: 30px;
line-height: 32px;
color: #000000;
text-align: left;
}
&__avatar {
margin-top: 76px;
&_title {
display: flex;
flex-direction: row;
align-items: center;
img {
width: 48px;
height: 48px;
margin: 0 22px 0 0;
}
p {
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
}
&_back {
margin: 40px 0 0 0;
a {
display: flex;
align-items: center;
font-size: 12px;
line-height: 16px;
color: #5b6871;
text-decoration: none;
}
div {
background: #8dc63f;
opacity: 0.3;
width: 48px;
height: 48px;
border-radius: 44px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 15px 0 0;
img {
margin: 0;
width: 50%;
}
}
p {
font-size: 12px;
line-height: 16px;
color: #5b6871;
}
}
}
&__telega {
text-align: left;
h4 {
color: #52b709;
font-size: 14px;
margin: 55px 0 34px 0;
}
p,
h4 {
font-weight: 900;
line-height: 24px;
}
p {
width: 50%;
font-size: 12px;
}
&-logo {
display: flex;
flex-direction: row;
img {
margin: 0 19px 0 0;
}
}
}
}
.form-interview {
text-align: left;
padding: 54px 61px 51px 72px;
p {
font-weight: 400;
font-size: 15px;
line-height: 18px;
margin-bottom: 10px;
}
button {
width: 174px;
height: 46px;
color: white;
border: none;
font-size: 18px;
line-height: 32px;
background: #52b709;
border-radius: 44px;
}
.input {
background: #eff2f7;
border-radius: 8px;
display: flex;
justify-content: center;
width: 294px;
height: 35px;
margin: 0 0 36px 0;
input {
background: #eff2f7;
width: 90%;
border: none;
outline: none;
font-size: 15px;
}
}
}
}
.send {
display: flex;
flex-direction: column;
align-items: center;
h2 {
text-align: center;
margin: 25px 0 31px 0;
}
p {
font-size: 14px;
line-height: 17px;
font-weight: 700;
text-align: center;
color: #000000;
margin-bottom: 10px;
span {
color: #406128;
}
}
}
}
.modal-aspt.active {
transform: scale(1);
}

View File

@ -4,7 +4,7 @@ import { setProject } from "../../../redux/projectsTrackerSlice";
import "./ModalCreate.scss"; import "./ModalCreate.scss";
export const ModalCreate = ({ active, setActive, title, desc }) => { export const ModalCreate = ({ active, setActive, title }) => {
const [inputValue, setInputValue] = useState(""); const [inputValue, setInputValue] = useState("");
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -33,7 +33,6 @@ export const ModalCreate = ({ active, setActive, title, desc }) => {
> >
<div className="title-project"> <div className="title-project">
<h4>{title}</h4> <h4>{title}</h4>
<p>{desc}</p>
<div className="input-container"> <div className="input-container">
<input <input
className="name-project" className="name-project"

View File

@ -69,29 +69,6 @@
align-items: center; align-items: center;
justify-content: 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

@ -0,0 +1,13 @@
import React from "react";
import "./modalSettings.scss";
export const ModalSettings = ({ active, children }) => {
return (
<div className={active ? "project__settings active" : "project__settings "}>
{children}
</div>
);
};
export default ModalSettings;

View File

@ -0,0 +1,30 @@
.project {
&__settings {
position: absolute;
padding: 32px 23px 10px 11px;
background: #e1fccf;
border-radius: 12px;
transform: scale(0);
bottom: -148px;
right: -120px;
&-menu {
font-size: 14px;
line-height: 38px;
div {
display: flex;
align-items: center;
img {
margin-right: 12px;
}
}
}
}
&__settings.active {
transform: scale(1);
z-index: 99;
}
}

View File

@ -14,6 +14,7 @@ import edit from "../../../images/edit.svg";
import send from "../../../images/send.svg"; import send from "../../../images/send.svg";
import plus from "../../../images/plus.svg"; import plus from "../../../images/plus.svg";
import ModalAdd from "../ModalAdd/ModalAdd";
import "./ModalTiket.scss"; import "./ModalTiket.scss";
export const ModalTiket = ({ active, setActive }) => { export const ModalTiket = ({ active, setActive }) => {
@ -24,7 +25,6 @@ export const ModalTiket = ({ active, setActive }) => {
descriptions: descriptions:
"На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и Description.", "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и Description.",
}); });
const [workers] = useState([ const [workers] = useState([
{ {
name: "Дмитрий Рогов", name: "Дмитрий Рогов",
@ -35,6 +35,7 @@ export const ModalTiket = ({ active, setActive }) => {
avatar: avatarMock1, avatar: avatarMock1,
}, },
]); ]);
const [addSubtask, setAddSubtask] = useState(false);
return ( return (
<div <div
@ -61,7 +62,7 @@ export const ModalTiket = ({ active, setActive }) => {
</div> </div>
<div className="content__communication"> <div className="content__communication">
<p className="tasks"> <p className="tasks">
<button> <button onClick={() => setAddSubtask(true)}>
<img src={plus}></img> <img src={plus}></img>
Добавить под задачу Добавить под задачу
</button> </button>
@ -135,6 +136,20 @@ export const ModalTiket = ({ active, setActive }) => {
</div> </div>
</div> </div>
</div> </div>
<ModalAdd active={addSubtask} setActive={setAddSubtask}>
<div className="title-project subtask">
<h4>
Вы добавляете подзадачу <p>в колонку задачи {"Готово"}</p>
</h4>
<p className="title-project__decs">Введите текст</p>
<div>
<textarea className="title-project__textarea"></textarea>
</div>
</div>
<button className="button-add" onClick={(e) => e.preventDefault()}>
Добавить
</button>
</ModalAdd>
</div> </div>
); );
}; };

View File

@ -304,3 +304,12 @@
} }
} }
} }
.subtask {
h4 {
width: 90%;
p {
color: #1458dd;
}
}
}

View File

@ -1,22 +1,25 @@
export function createMarkup(text) { export function createMarkup(text) {
return {__html: text.split('</p>').join('</p>')} return { __html: text.split("</p>").join("</p>") };
} }
export function transformHtml(text) { export function transformHtml(text) {
let startHtml = {__html: text.split('<h3> || <h2>').join('<br><h2>').split('<br>')}; let startHtml = {
startHtml = startHtml.__html.filter((el) => __html: text.split("<h3> || <h2>").join("<br><h2>").split("<br>"),
el !== null && el !== "" || el === 0 };
startHtml = startHtml.__html.filter(
(el) => (el !== null && el !== "") || el === 0
); );
const finalHtml = startHtml.map((item) => const finalHtml = startHtml.map(
(item) =>
`<div class='experience__block'> `<div class='experience__block'>
<div class="summary__sections__head"> <div class="summary__sections__head">
<h3>Описание опыта работы</h3> <h3>Описание опыта работы</h3>
<button>Редактировать раздел</button> <button>Редактировать раздел</button>
</div> </div>
<div class="experience__content">${item.split('<h3>')[0]}</div> <div class="experience__content">${item.split("<h3>")[0]}</div>
</div>` </div>`
); );
return {__html: finalHtml.join('')} return { __html: finalHtml.join("") };
} }
// //
// export const setToken = () => { // export const setToken = () => {
@ -29,12 +32,22 @@ export function transformHtml(text) {
// }; // };
export const getToken = () => { export const getToken = () => {
const tParam = `Bearer ${localStorage.getItem('auth_token')}` const tParam = `Bearer ${localStorage.getItem("auth_token")}`;
return tParam ? {Authorization: tParam} : {}; return tParam ? { Authorization: tParam } : {};
}; };
export const urlHasParams = (url) => url.indexOf('?') > 0 ? `${url}&${window.location.search.substr(1)}` : `${url}${window.location.search}`; export const urlHasParams = (url) =>
url.indexOf("?") > 0
? `${url}&${window.location.search.substr(1)}`
: `${url}${window.location.search}`;
export const urlForLocal = (url) =>
process.env.NODE_ENV === "development" ? `https://itguild.info${url}` : url;
export const urlForLocal = (url) => process.env.NODE_ENV === 'development' ? `https://itguild.info${url}` : url; export function scrollToForm() {
window.scrollTo({
top: 850,
behavior: "smooth",
});
}

View File

@ -0,0 +1,27 @@
<svg width="71" height="66" viewBox="0 0 71 66" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M39.6252 37.2633C39.7229 28.6476 46.6035 21.91 55.1788 22.0315C63.6991 22.1507 70.4582 29.0432 70.3796 37.5327C70.2986 46.1055 63.3083 52.898 54.6759 52.7955C46.3176 52.6954 39.5298 45.6908 39.6276 37.2633H39.6252ZM63.0056 31.0786C62.0165 31.0881 61.4135 30.5376 61.3396 29.7868C61.2848 29.2315 61.4302 28.7287 61.8735 28.4069C62.7601 27.761 62.4717 27.3678 61.6876 26.9149C60.4793 26.2166 59.228 25.6804 57.8767 25.3062C56.8137 25.0107 56.3323 25.0726 56.4252 26.3501C56.492 27.2724 55.9271 27.8421 54.9619 27.8373C54.0538 27.8325 53.6201 27.2724 53.5128 26.4168C53.489 26.2214 53.4818 26.0188 53.5009 25.8234C53.5509 25.2371 53.3174 25.0345 52.7311 25.1584C51.0079 25.5255 49.4063 26.1666 47.9334 27.1461C47.3591 27.5298 47.4329 27.8039 47.9001 28.2091C48.6794 28.8836 48.9916 29.7058 48.2814 30.5996C47.688 31.3455 46.8157 31.2502 45.829 30.304C45.2951 29.7916 45.0449 29.8893 44.6659 30.4613C43.8031 31.7698 43.2574 33.1926 42.8355 34.6917C42.5686 35.6355 42.7449 35.9954 43.7817 35.9215C44.5444 35.8667 45.1831 36.2051 45.4 37.0345C45.5692 37.6876 45.3237 38.2 44.8113 38.6028C44.4395 38.8983 43.9819 38.8816 43.5577 38.853C42.7878 38.7982 42.5805 39.0532 42.7735 39.8183C43.1525 41.3293 43.7054 42.7498 44.5015 44.0939C44.9972 44.9281 45.3666 45.052 46.0339 44.2655C46.6655 43.5219 47.5283 43.4314 48.2266 44.1368C48.9154 44.8352 48.7962 45.6455 48.1146 46.3533C48.0598 46.4105 48.0145 46.482 47.9525 46.5273C47.2971 47.0064 47.4615 47.3353 48.0812 47.7261C49.3325 48.5126 50.6528 49.1061 52.0804 49.4898C53.0481 49.7496 53.6725 49.7639 53.5223 48.4459C53.4461 47.7738 53.8298 47.2423 54.5329 47.0064C55.1859 46.7895 55.6936 47.0064 56.1345 47.4735C56.4634 47.8239 56.4896 48.2767 56.4467 48.7057C56.3537 49.6209 56.6969 49.7424 57.5406 49.5565C59.0731 49.2157 60.4578 48.5913 61.7925 47.7929C62.4932 47.3734 62.7339 47.0231 61.9641 46.4415C61.7257 46.2604 61.5017 45.9744 61.4159 45.6908C61.2062 44.9948 61.3039 44.3132 61.9903 43.9176C62.6886 43.5148 63.4155 43.6054 63.9208 44.2441C64.6263 45.1426 65.01 44.8781 65.4986 44.0296C66.2159 42.7831 66.726 41.4794 67.1335 40.1019C67.4433 39.0556 67.1764 38.7625 66.1444 38.8411C65.203 38.9126 64.5881 38.3883 64.5381 37.4683C64.4833 36.4625 65.1434 35.9811 66.1063 35.9001C66.3041 35.8834 66.5043 35.8834 66.7021 35.8953C67.2765 35.9311 67.3552 35.6498 67.2431 35.1541C66.8594 33.4357 66.2255 31.8341 65.2459 30.3588C64.8574 29.7725 64.581 29.8417 64.183 30.2826C63.8064 30.702 63.3941 31.0738 63.0104 31.0715L63.0056 31.0786Z" fill="#52B709"/>
<path d="M18.9832 64.357C16.2471 64.357 13.5111 64.3594 10.775 64.357C9.13052 64.3546 8.82307 64.1258 8.29874 62.548C6.71383 57.7766 8.85882 52.0376 13.2298 49.5732C14.0902 49.0894 14.3524 48.8439 13.728 47.8882C12.1097 45.4191 12.3909 42.3994 14.2618 40.2878C16.1899 38.1094 19.1381 37.516 21.8503 38.7553C24.3314 39.8898 25.8043 42.7021 25.3729 45.5478C25.2227 46.5392 24.8223 47.4568 24.2098 48.2481C23.8166 48.7557 23.8714 48.9774 24.4529 49.3039C27.904 51.2439 29.8345 54.2207 30.3016 58.146C30.497 59.7929 30.2087 61.3731 29.7058 62.9389C29.3745 63.9661 28.7215 64.3737 27.668 64.3641C24.7747 64.3379 21.8789 64.3546 18.9856 64.3546L18.9832 64.357ZM16.6857 51.3536C12.715 52.3212 9.97898 56.8638 10.856 60.6509C11.0348 61.4279 11.4876 61.3874 12.0644 61.4088C12.8866 61.4374 12.6555 60.8583 12.6817 60.4316C12.7055 60.036 12.6626 59.6356 12.7007 59.2424C12.7889 58.3343 13.2322 57.7575 14.2213 57.7766C15.1603 57.7957 15.5536 58.3748 15.6227 59.2257C15.6608 59.7 15.6656 60.179 15.6299 60.6533C15.587 61.2229 15.8014 61.4207 16.3734 61.4088C17.7224 61.3778 19.0714 61.3993 20.4227 61.3993C21.7335 61.3993 22.4223 60.759 22.4891 59.4783C22.4986 59.2805 22.501 59.0779 22.5534 58.8896C22.7751 58.0888 23.3065 57.7004 24.1431 57.7838C24.932 57.86 25.3467 58.3343 25.4158 59.1017C25.4515 59.495 25.392 59.9002 25.4444 60.291C25.5016 60.7176 25.1107 61.3707 26.0307 61.416C26.7647 61.4541 27.1508 61.3254 27.2962 60.4817C27.8635 57.1665 26.0354 53.3984 23.0348 51.8755C22.5772 51.6443 22.1173 51.4417 21.5977 51.7015C22.7067 54.5726 22.3294 56.898 20.4656 58.6775C20.4084 58.7323 20.3465 58.7824 20.2892 58.8372C19.4885 59.5999 18.671 59.607 17.8773 58.8467C17.1909 58.1889 16.5617 57.4668 15.8586 56.8281C15.1317 56.1679 15.0316 55.4481 15.4011 54.5782C15.8324 53.5629 16.2209 52.5309 16.688 51.3536H16.6857ZM19.0618 41.1267C17.1576 41.1315 15.6608 42.6211 15.6704 44.4991C15.6823 46.3438 17.2434 47.9097 19.0738 47.9097C20.947 47.9097 22.4342 46.3915 22.4366 44.4848C22.4366 42.5567 20.9971 41.1219 19.0618 41.1267ZM19.0499 53.7774C18.8164 54.3494 18.1061 54.8261 18.7306 55.5196C18.9641 55.7794 19.2239 55.7484 19.436 55.5148C20.0652 54.8189 19.3669 54.3446 19.0499 53.7774Z" fill="#52B709"/>
<path d="M18.9713 35.2065C16.1947 35.2065 13.4157 35.1469 10.6416 35.2327C9.31404 35.2733 8.71344 34.6774 8.32496 33.5168C6.67331 28.5857 8.74681 23.104 13.4586 20.3107C14.2714 19.8293 14.2642 19.591 13.778 18.8521C11.9381 16.0541 12.4624 12.6198 14.9578 10.4819C17.3196 8.45609 20.9304 8.47992 23.2565 10.5343C25.6994 12.696 26.1761 16.1614 24.3171 18.9284C23.8285 19.6577 23.9763 19.8722 24.665 20.2821C29.415 23.0992 31.479 28.5833 29.7868 33.5978C29.4031 34.7322 28.7953 35.2613 27.5417 35.2304C24.6865 35.1612 21.8289 35.2089 18.9737 35.2089L18.9713 35.2065ZM16.7166 22.1268C12.6531 23.3829 10.1577 27.4131 10.8298 31.2764C10.949 31.9628 11.1969 32.3013 11.9881 32.2655C12.8437 32.2274 12.6698 31.6935 12.6864 31.2025C12.7007 30.7664 12.6769 30.3255 12.7365 29.8965C12.8533 29.0766 13.3657 28.6119 14.1856 28.6095C15.0221 28.6095 15.4988 29.1171 15.6036 29.9251C15.6656 30.3946 15.668 30.8784 15.6299 31.3503C15.575 32.0248 15.8348 32.2655 16.5093 32.2464C17.9369 32.2107 19.3645 32.2417 20.7921 32.2345C22.7274 32.2226 22.4628 32.43 22.4843 30.6329C22.4867 30.3946 22.4771 30.1539 22.52 29.9203C22.6797 29.0647 23.1969 28.5499 24.0764 28.6119C24.8795 28.6691 25.3705 29.1624 25.4182 30.0037C25.442 30.4399 25.442 30.876 25.4277 31.3122C25.411 31.8222 25.4015 32.2488 26.1284 32.2512C26.7552 32.2512 27.1651 32.1821 27.2748 31.4337C27.5632 29.4341 27.2605 27.5608 26.2166 25.8305C25.0178 23.8476 23.3351 22.5773 21.6287 22.3032C21.5143 22.6464 21.7431 22.9157 21.8503 23.197C22.818 25.7646 22.2754 27.9469 20.2225 29.7439C20.1915 29.7702 20.1677 29.8011 20.1367 29.8274C19.4289 30.447 18.6996 30.4589 18.0156 29.8226C17.2338 29.0933 16.5021 28.3068 15.7323 27.5656C15.0984 26.9555 15.0579 26.2762 15.3772 25.504C15.811 24.4506 16.2185 23.3852 16.7166 22.1245V22.1268ZM22.4366 15.4249C22.4628 13.5087 21.0162 11.9929 19.1357 11.9643C17.2648 11.9357 15.7228 13.4206 15.6751 15.2986C15.6298 17.1433 17.1433 18.7139 19.007 18.7544C20.8898 18.795 22.4104 17.3173 22.4366 15.4249ZM19.0285 24.6317C18.8211 25.2275 18.1014 25.7257 18.7496 26.4144C18.9927 26.6742 19.243 26.6194 19.4479 26.3739C20.0414 25.6637 19.3788 25.187 19.0285 24.6317Z" fill="#52B709"/>
<path d="M46.9229 65.9943C44.225 65.9943 41.5271 66.0015 38.8291 65.992C37.013 65.9872 36.6436 65.6201 36.6412 63.8422C36.6365 60.4698 36.6198 57.0974 36.6555 53.725C36.6627 53.0147 36.503 52.7144 35.7403 52.7907C35.073 52.8574 34.3914 52.8241 33.7193 52.7907C32.8255 52.7478 32.3155 52.2068 32.2726 51.3583C32.2321 50.5456 32.735 49.9164 33.5215 49.8735C35.1397 49.7829 36.7771 49.7496 38.3882 49.8926C39.3511 49.976 39.6562 50.8316 39.6538 51.7659C39.6419 55.0978 39.6824 58.432 39.6276 61.7639C39.6133 62.703 39.7944 63.0628 40.8383 63.0485C44.9638 62.9842 49.0917 62.9961 53.2173 63.0414C54.0729 63.0509 54.2922 62.7864 54.2588 61.9689C54.1968 60.4626 54.2278 58.954 54.2469 57.4453C54.2588 56.3347 54.8451 55.6531 55.7508 55.7127C56.7803 55.7818 57.1903 56.4563 57.1974 57.4048C57.2141 59.6666 57.2213 61.9284 57.1974 64.1901C57.1831 65.4795 56.685 65.9753 55.3694 65.9872C52.5523 66.011 49.7352 65.9943 46.9181 65.9943H46.9229Z" fill="#52B709"/>
<path d="M46.8729 8.78022C49.6113 8.78022 52.3497 8.77307 55.0906 8.78022C56.7494 8.78498 57.2022 9.24496 57.207 10.9061C57.2141 12.9701 57.2189 15.0341 57.207 17.098C57.1998 18.3898 56.623 19.1072 55.665 19.069C54.7474 19.0333 54.254 18.3636 54.2493 17.1147C54.2421 15.5655 54.2302 14.0188 54.2564 12.4696C54.2659 11.9167 54.1086 11.7046 53.5223 11.7069C49.1561 11.7284 44.7898 11.7355 40.4236 11.7022C39.6204 11.695 39.649 12.1216 39.649 12.6722C39.6585 16.047 39.6585 19.4194 39.649 22.7942C39.6466 24.453 39.1723 24.932 37.5374 24.9487C36.4267 24.9582 35.3137 24.963 34.2031 24.9487C32.9685 24.932 32.2798 24.4101 32.2512 23.4996C32.2226 22.5749 32.8923 22.0387 34.1268 22.0029C35.8031 21.9521 36.6412 21.1044 36.6412 19.4599C36.6412 16.5618 36.6365 13.6636 36.6436 10.7655C36.6484 9.2831 37.1441 8.78737 38.6575 8.78022C41.396 8.76592 44.1344 8.77545 46.8752 8.77545L46.8729 8.78022Z" fill="#52B709"/>
<path d="M30.0275 10.2555C27.158 10.2364 24.901 7.95797 24.9248 5.10275C24.9487 2.25944 27.2557 -0.0118699 30.1062 4.6677e-05C32.9328 0.0119633 35.2208 2.33571 35.2065 5.1814C35.1922 8.03662 32.909 10.2746 30.0275 10.2555ZM30.0156 3.00065C28.781 3.01972 27.8349 4.00403 27.8849 5.21715C27.9326 6.37068 28.8954 7.30256 30.049 7.30971C31.2621 7.31686 32.2369 6.33969 32.2273 5.1242C32.2178 3.88725 31.274 2.98159 30.0156 3.00065Z" fill="#52B709"/>
<path d="M8.80401 41.1196C8.77779 43.5196 6.76388 45.5001 4.37102 45.4763C1.99485 45.4524 -0.00238119 43.429 2.13085e-06 41.0457C0.00238546 38.6147 2.06396 36.6008 4.50687 36.6437C6.89496 36.6842 8.83261 38.7029 8.80639 41.1196H8.80401ZM4.39724 42.4971C5.37202 42.4066 5.85822 41.8632 5.82247 41.0028C5.78672 40.1448 5.26953 39.6133 4.34957 39.661C3.44629 39.7062 2.98393 40.2187 3.00776 41.1219C3.03398 42.0538 3.62266 42.4209 4.39724 42.4971Z" fill="#52B709"/>
<path d="M60.1456 57.2022C60.1361 54.7498 62.0356 52.805 64.4642 52.7836C66.9524 52.7621 68.9091 54.7212 68.8924 57.2189C68.8757 59.6404 66.9023 61.6138 64.5047 61.6042C62.0952 61.5971 60.1528 59.6356 60.1432 57.2022H60.1456ZM65.949 57.145C65.8918 56.3037 65.4151 55.8032 64.5547 55.7317C63.754 55.6674 63.0342 56.4134 63.0866 57.2285C63.1438 58.1198 63.7111 58.6394 64.5405 58.6203C65.3579 58.6012 65.9132 58.0912 65.949 57.145Z" fill="#52B709"/>
<path d="M2.89336 52.7955C2.04728 52.7669 1.46098 52.0924 1.52771 51.2058C1.59683 50.2977 2.16168 49.8187 3.00776 49.8473C3.86576 49.8759 4.36864 50.4479 4.4163 51.3154C4.4592 52.1186 3.70369 52.8217 2.89574 52.7931L2.89336 52.7955Z" fill="#52B709"/>
<path d="M32.2583 41.0314C32.275 41.8536 31.5767 42.5901 30.764 42.5305C29.9036 42.4661 29.3387 41.9537 29.3244 41.0981C29.3125 40.2568 29.7892 39.6943 30.6972 39.6371C31.5791 39.5823 32.2369 40.1781 32.2559 41.0314H32.2583Z" fill="#52B709"/>
<path d="M46.942 57.1641C47.7309 57.2833 48.3124 57.6503 48.3601 58.5703C48.403 59.4235 47.7666 60.1337 46.9515 60.1504C46.1745 60.1671 45.4 59.4092 45.4667 58.6227C45.5382 57.7719 46.0268 57.2642 46.942 57.1641Z" fill="#52B709"/>
<path d="M8.80162 10.2912C8.79209 11.1469 8.14383 11.7546 7.26438 11.7022C6.36348 11.6474 5.88443 11.1111 5.88682 10.2531C5.88682 9.37367 6.45405 8.88747 7.30489 8.81358C8.12476 8.74447 8.81116 9.45947 8.80162 10.2936V10.2912Z" fill="#52B709"/>
<path d="M44.0057 5.88209C43.2192 5.78914 42.621 5.44118 42.5424 4.52836C42.4685 3.65845 43.0572 3.01495 43.9318 2.98397C44.797 2.95537 45.4858 3.57742 45.45 4.41158C45.4119 5.28626 44.9066 5.76293 44.0057 5.88209Z" fill="#52B709"/>
<path d="M61.5827 17.6033C60.72 17.6033 60.117 16.9693 60.1504 16.0803C60.1861 15.1699 60.72 14.7028 61.5804 14.6909C62.467 14.6766 62.9579 15.2271 63.039 16.0827C63.1176 16.9074 62.4145 17.6033 61.5827 17.6057V17.6033Z" fill="#52B709"/>
<path d="M63.008 31.0786C63.3917 31.0786 63.804 30.7068 64.1806 30.2897C64.5786 29.8464 64.855 29.7797 65.2435 30.366C66.2231 31.8413 66.857 33.4429 67.2408 35.1612C67.3504 35.657 67.2741 35.9382 66.6997 35.9025C66.5019 35.8905 66.3017 35.8905 66.1039 35.9072C65.141 35.9883 64.4833 36.4697 64.5357 37.4755C64.5857 38.3954 65.2006 38.9221 66.142 38.8482C67.174 38.7696 67.441 39.0627 67.1311 40.109C66.7236 41.4866 66.2112 42.7903 65.4962 44.0368C65.0076 44.8876 64.6239 45.1498 63.9184 44.2512C63.4155 43.6101 62.6886 43.5219 61.9879 43.9247C61.3015 44.3204 61.2038 44.9996 61.4135 45.6979C61.4993 45.9792 61.7234 46.2675 61.9617 46.4487C62.7291 47.0302 62.4908 47.3806 61.7901 47.8C60.4554 48.5984 59.0707 49.2253 57.5382 49.5637C56.6945 49.7496 56.3513 49.628 56.4443 48.7128C56.4872 48.2838 56.461 47.831 56.1321 47.4807C55.6912 47.0135 55.1835 46.7966 54.5305 47.0135C53.8274 47.2471 53.4437 47.7786 53.52 48.453C53.6701 49.7686 53.0457 49.7567 52.078 49.4969C50.6504 49.1132 49.3301 48.5198 48.0788 47.7333C47.4568 47.3424 47.2923 47.0111 47.9501 46.5345C48.0121 46.4892 48.0574 46.4177 48.1122 46.3605C48.7938 45.6526 48.9154 44.8423 48.2242 44.144C47.5283 43.4385 46.6655 43.5291 46.0316 44.2727C45.3618 45.0616 44.9924 44.9376 44.4991 44.1011C43.7007 42.7545 43.1501 41.3364 42.7712 39.8254C42.5781 39.0604 42.7855 38.8054 43.5553 38.8602C43.9795 38.8888 44.4371 38.9054 44.8089 38.6099C45.3189 38.2071 45.5668 37.6947 45.3976 37.0417C45.1807 36.2123 44.542 35.8739 43.7793 35.9287C42.7402 36.0026 42.5662 35.6403 42.8331 34.6989C43.2574 33.1998 43.8008 31.7769 44.6635 30.4685C45.0425 29.8941 45.2927 29.7988 45.8266 30.3112C46.8109 31.2574 47.6856 31.3527 48.279 30.6067C48.9893 29.713 48.677 28.8907 47.8977 28.2162C47.4282 27.8111 47.3567 27.537 47.9311 27.1533C49.404 26.1713 51.0032 25.5302 52.7287 25.1656C53.315 25.0416 53.5486 25.2442 53.4985 25.8305C53.4818 26.026 53.4866 26.2285 53.5104 26.424C53.6177 27.2772 54.0514 27.8397 54.9595 27.8444C55.9247 27.8492 56.4896 27.2796 56.4229 26.3572C56.3299 25.0798 56.8137 25.0178 57.8743 25.3133C59.2256 25.6899 60.4769 26.2238 61.6852 26.9221C62.4693 27.3749 62.7577 27.7706 61.8711 28.414C61.4278 28.7358 61.2824 29.2387 61.3373 29.794C61.4135 30.5471 62.0141 31.0977 63.0032 31.0858L63.008 31.0786ZM53.5033 35.135C53.5033 36.086 53.4937 37.0369 53.5057 37.9879C53.5176 38.9865 54.0824 39.5847 55.031 39.6252C56.7327 39.6967 58.4391 39.7015 60.1408 39.6204C61.0251 39.5775 61.6399 38.9912 61.5732 38.0498C61.5089 37.1394 60.925 36.6413 59.9788 36.6413C59.1065 36.6413 58.2318 36.596 57.3643 36.6532C56.6087 36.7033 56.4157 36.4006 56.4467 35.6927C56.4967 34.5869 56.461 33.4739 56.4515 32.3656C56.4419 31.4266 55.951 30.8141 55.031 30.7974C54.0419 30.7783 53.5343 31.4242 53.508 32.4014C53.4866 33.3118 53.5033 34.2246 53.5033 35.135Z" fill="#FBFBFB"/>
<path d="M16.6857 51.3536C16.2185 52.5309 15.83 53.5629 15.3987 54.5782C15.0269 55.4481 15.1294 56.1679 15.8563 56.8281C16.5593 57.4668 17.1862 58.1889 17.8749 58.8467C18.6686 59.607 19.4861 59.5999 20.2869 58.8372C20.3441 58.7824 20.406 58.7323 20.4632 58.6775C22.327 56.898 22.7044 54.5726 21.5953 51.7015C22.1173 51.4417 22.5749 51.6419 23.0325 51.8755C26.0331 53.3984 27.8611 57.1665 27.2938 60.4817C27.1485 61.3254 26.7624 61.4517 26.0283 61.416C25.1083 61.3683 25.4992 60.7176 25.442 60.291C25.3896 59.9002 25.4515 59.4974 25.4134 59.1017C25.3419 58.3343 24.9296 57.8624 24.1407 57.7838C23.3042 57.7027 22.7751 58.0888 22.551 58.8896C22.4986 59.0779 22.4962 59.2805 22.4867 59.4783C22.4215 60.759 21.7328 61.3993 20.4203 61.3993C19.0714 61.3993 17.72 61.3778 16.3711 61.4088C15.8014 61.4207 15.5846 61.2229 15.6275 60.6533C15.6632 60.179 15.6585 59.7 15.6203 59.2257C15.5488 58.3748 15.158 57.7957 14.2189 57.7766C13.2298 57.7575 12.7865 58.3319 12.6984 59.2424C12.6602 59.6356 12.7031 60.036 12.6793 60.4316C12.6531 60.8583 12.8866 61.4374 12.062 61.4088C11.4852 61.3897 11.0348 61.4279 10.8537 60.6509C9.9766 56.8638 12.7127 52.3212 16.6833 51.3536H16.6857Z" fill="#EBEBEB"/>
<path d="M19.0642 41.1267C20.9995 41.1219 22.439 42.5567 22.439 44.4848C22.439 46.3915 20.9494 47.9073 19.0761 47.9097C17.2457 47.9097 15.6823 46.3462 15.6728 44.4991C15.6608 42.6234 17.1599 41.1315 19.0642 41.1267Z" fill="#FBFBFB"/>
<path d="M19.0523 53.7774C19.3693 54.3446 20.0676 54.8189 19.4384 55.5148C19.2287 55.7484 18.9665 55.7794 18.7329 55.5196C18.1085 54.8237 18.8187 54.3494 19.0523 53.7774Z" fill="#EBEBEB"/>
<path d="M16.7166 22.1268C16.2185 23.3876 15.811 24.453 15.3772 25.5064C15.0579 26.2786 15.0984 26.9578 15.7323 27.568C16.5045 28.3092 17.2338 29.0933 18.0156 29.825C18.6972 30.4637 19.4265 30.4494 20.1367 29.8297C20.1677 29.8035 20.1915 29.7725 20.2225 29.7463C22.2785 27.9493 22.8211 25.767 21.8503 23.1993C21.7431 22.9181 21.5143 22.6488 21.6287 22.3056C23.3351 22.5773 25.0202 23.8476 26.2166 25.8329C27.2605 27.5608 27.5632 29.4365 27.2748 31.4361C27.1651 32.1869 26.7552 32.256 26.1284 32.2536C25.4015 32.2512 25.4086 31.8246 25.4277 31.3146C25.442 30.8784 25.442 30.4423 25.4182 30.0061C25.3705 29.1648 24.8795 28.6714 24.0764 28.6143C23.1969 28.5523 22.6773 29.0671 22.52 29.9227C22.4771 30.1539 22.4891 30.397 22.4843 30.6353C22.4652 32.4323 22.7274 32.225 20.7921 32.2369C19.3645 32.2441 17.9369 32.2131 16.5093 32.2488C15.8348 32.2655 15.575 32.0248 15.6299 31.3527C15.668 30.8808 15.6656 30.397 15.6036 29.9275C15.4988 29.1195 15.0197 28.6095 14.1856 28.6119C13.3657 28.6119 12.8533 29.079 12.7365 29.8989C12.6769 30.3279 12.7007 30.7688 12.6864 31.2049C12.6698 31.6959 12.8414 32.2298 11.9881 32.2679C11.1969 32.3013 10.949 31.9628 10.8298 31.2788C10.1577 27.4154 12.6555 23.3876 16.7166 22.1292V22.1268Z" fill="#EBEBEB"/>
<path d="M22.4366 15.4249C22.4104 17.3173 20.8898 18.7973 19.007 18.7544C17.1433 18.7139 15.6298 17.1433 15.6751 15.2986C15.7228 13.4182 17.2624 11.9334 19.1357 11.9643C21.0162 11.9929 22.4628 13.5087 22.4366 15.4249Z" fill="#FBFBFB"/>
<path d="M19.0285 24.6317C19.3788 25.1894 20.0414 25.6637 19.4479 26.3739C19.243 26.6194 18.9927 26.6718 18.7496 26.4144C18.1014 25.7257 18.8211 25.2275 19.0285 24.6317Z" fill="#EBEBEB"/>
<path d="M30.0156 3.00065C31.2764 2.98159 32.2202 3.88725 32.2273 5.1242C32.2369 6.33731 31.2621 7.31447 30.049 7.30971C28.8954 7.30256 27.9302 6.37068 27.8849 5.21715C27.8349 4.00403 28.781 3.0221 30.0156 3.00065Z" fill="#EBEBEB"/>
<path d="M4.39724 42.4971C3.62266 42.4209 3.03398 42.0538 3.00776 41.1219C2.98393 40.2187 3.44629 39.7062 4.34957 39.661C5.26953 39.6133 5.78433 40.1448 5.82247 41.0028C5.85822 41.8632 5.3744 42.4042 4.39724 42.4971Z" fill="#EBEBEB"/>
<path d="M65.9466 57.1474C65.9109 58.0936 65.3556 58.606 64.5381 58.6227C63.7087 58.6418 63.1438 58.1222 63.0842 57.2308C63.0318 56.4157 63.7516 55.6674 64.5524 55.7341C65.4128 55.8032 65.8894 56.3061 65.9466 57.1474Z" fill="#EBEBEB"/>
<path d="M53.5009 35.135C53.5009 34.2246 53.4842 33.3118 53.5057 32.4014C53.5295 31.4242 54.0395 30.7783 55.0286 30.7974C55.9509 30.8141 56.4395 31.429 56.4491 32.3656C56.461 33.4739 56.4943 34.5869 56.4443 35.6927C56.4133 36.4006 56.6064 36.7033 57.3619 36.6532C58.2294 36.596 59.1041 36.6413 59.9764 36.6413C60.9226 36.6413 61.5065 37.1394 61.5708 38.0498C61.6376 38.9912 61.0227 39.5799 60.1385 39.6204C58.4391 39.7015 56.7303 39.6967 55.0286 39.6252C54.08 39.5847 53.5176 38.9865 53.5033 37.9879C53.4914 37.0369 53.5009 36.086 53.5009 35.135Z" fill="#52B709"/>
</svg>

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -13,6 +13,8 @@ import vectorBlack from "../../images/Vector_Smart_Object_black.png";
import { selectAuth } from "../../redux/outstaffingSlice"; import { selectAuth } from "../../redux/outstaffingSlice";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { scrollToForm } from "../../helper";
import { Footer } from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import SideBar from "../../components/SideBar/SideBar"; import SideBar from "../../components/SideBar/SideBar";
import AuthHeader from "../../components/AuthHeader/AuthHeader"; import AuthHeader from "../../components/AuthHeader/AuthHeader";
@ -31,13 +33,6 @@ const AuthForDevelopers = () => {
} }
}, [getToken]); }, [getToken]);
function scrollToForm() {
window.scrollTo({
top: 850,
behavior: "smooth",
});
}
return ( return (
<section className="auth-developers"> <section className="auth-developers">
<AuthHeader /> <AuthHeader />

View File

@ -6,9 +6,11 @@ import text from "../../images/Body_Text.png";
import arrowBtn from "../../images/arrowRight.png"; import arrowBtn from "../../images/arrowRight.png";
import vector from "../../images/Vector_Smart_Object.png"; import vector from "../../images/Vector_Smart_Object.png";
import vectorBlack from "../../images/Vector_Smart_Object_black.png"; import vectorBlack from "../../images/Vector_Smart_Object_black.png";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { selectAuth } from "../../redux/outstaffingSlice"; import { selectAuth } from "../../redux/outstaffingSlice";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { scrollToForm } from "../../helper";
import { Footer } from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import { AuthBox } from "../../components/AuthBox/AuthBox"; import { AuthBox } from "../../components/AuthBox/AuthBox";
@ -30,17 +32,14 @@ const AuthForPartners = () => {
} }
}, [getToken]); }, [getToken]);
function scrollToForm() {
window.scrollTo({
top: 850,
behavior: "smooth",
});
}
return ( return (
<section className="auth-partners"> <section className="auth-partners">
<AuthHeader /> <AuthHeader />
<SliderWorkers title={"Свободные разработчики"} titleInfo={"для Вашей команды"} subTitle={true} /> <SliderWorkers
title={"Свободные разработчики"}
titleInfo={"для Вашей команды"}
subTitle={true}
/>
<div className="auth-partners__background"> <div className="auth-partners__background">
<img className="auth-partners__vector" src={vector} alt="" /> <img className="auth-partners__vector" src={vector} alt="" />
<img className="auth-partners__vector-black" src={vectorBlack} alt="" /> <img className="auth-partners__vector-black" src={vectorBlack} alt="" />

View File

@ -1,7 +1,7 @@
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
@ -9,6 +9,8 @@ import { getProjects } from "../../redux/projectsTrackerSlice";
import ModalTiket from "../../components/UI/ModalTiket/ModalTiket"; import ModalTiket from "../../components/UI/ModalTiket/ModalTiket";
import ModalCreate from "../../components/UI/ModalCreate/ModalCreate"; import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";
import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
import project from "../../images/trackerProject.svg"; import project from "../../images/trackerProject.svg";
import tasks from "../../images/trackerTasks.svg"; import tasks from "../../images/trackerTasks.svg";
@ -18,8 +20,8 @@ import selectArrow from "../../images/select.svg";
import commentsBoard from "../../images/commentsBoard.svg"; import commentsBoard from "../../images/commentsBoard.svg";
import filesBoard from "../../images/filesBoard.svg"; import filesBoard from "../../images/filesBoard.svg";
import search from "../../images/serchIcon.png"; import search from "../../images/serchIcon.png";
import noProjects from "../../images/noProjects.png" import noProjects from "../../images/noProjects.png";
import arrow from '../../images/arrowCalendar.png' import arrow from "../../images/arrowCalendar.png";
import "./tracker.scss"; import "./tracker.scss";
@ -139,105 +141,104 @@ export const Tracker = () => {
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
]) ]);
const [archiveProjects] = useState([ const [archiveProjects] = useState([
{ {
name: "Будущее России", name: "Будущее России",
date: "7 марта 2023 г" date: "7 марта 2023 г",
}, },
{ {
name: "Будущее России", name: "Будущее России",
date: "7 марта 2023 г" date: "7 марта 2023 г",
}, },
{ {
name: "Будущее России", name: "Будущее России",
date: "7 марта 2023 г" date: "7 марта 2023 г",
}, },
{ {
name: "Будущее России", name: "Будущее России",
date: "7 марта 2023 г" date: "7 марта 2023 г",
}, },
{ {
name: "Будущее России", name: "Будущее России",
date: "7 марта 2023 г" date: "7 марта 2023 г",
}, },
{ {
name: "Будущее России", name: "Будущее России",
date: "7 марта 2023 г" date: "7 марта 2023 г",
}, },
{ {
name: "Будущее России", name: "Будущее России",
date: "7 марта 2023 г" date: "7 марта 2023 г",
}, },
{ {
name: "Будущее России", name: "Будущее России",
date: "7 марта 2023 г" date: "7 марта 2023 г",
}, },
{ {
name: "Будущее России", name: "Будущее России",
date: "7 марта 2023 г" date: "7 марта 2023 г",
}, },
] ]);
)
const [completeTasks] = useState([ const [completeTasks] = useState([
{ {
@ -245,112 +246,112 @@ export const Tracker = () => {
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
{ {
name: "PR - 2245", name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: "7 марта 2023 г", dateComplete: "7 марта 2023 г",
avatarDo: avatarTest, avatarDo: avatarTest,
project: "Будущее России" project: "Будущее России",
}, },
]); ]);
@ -358,6 +359,7 @@ export const Tracker = () => {
// Modal State // Modal State
const [modalActiveTicket, setModalActiveTicket] = useState(false); const [modalActiveTicket, setModalActiveTicket] = useState(false);
const [modalAddWorker, setModalAddWorker] = useState(false);
const [modalCreateProject, setModalCreateProject] = useState(false); const [modalCreateProject, setModalCreateProject] = useState(false);
const [modalCreateColl, setModalCreateColl] = useState(false); const [modalCreateColl, setModalCreateColl] = useState(false);
const [modalCreateTiket, setModalCreateTiket] = useState(false); const [modalCreateTiket, setModalCreateTiket] = useState(false);
@ -365,7 +367,7 @@ export const Tracker = () => {
const [valueColl, setValueColl] = useState(""); const [valueColl, setValueColl] = useState("");
// //
const [projectTasksOpen, setProjectTasksOpen] = useState(false) const [projectTasksOpen, setProjectTasksOpen] = useState(false);
const [selectedTab, setSelectedTab] = useState({ const [selectedTab, setSelectedTab] = useState({
name: "", name: "",
@ -385,7 +387,7 @@ export const Tracker = () => {
const toggleTabs = (index) => { const toggleTabs = (index) => {
if (projectTasksOpen) { if (projectTasksOpen) {
setProjectTasksOpen(false) setProjectTasksOpen(false);
} }
setToggleTab(index); setToggleTab(index);
}; };
@ -532,10 +534,11 @@ export const Tracker = () => {
<ProfileHeader /> <ProfileHeader />
<div className="container"> <div className="container">
<div className="tracker__content"> <div className="tracker__content">
<ProfileBreadcrumbs links={[ <ProfileBreadcrumbs
{name: 'Главная', link: '/profile'}, links={[
{name: 'Трекер', link: '/profile/tracker'} { name: "Главная", link: "/profile" },
]} { name: "Трекер", link: "/profile/tracker" },
]}
/> />
<h2 className="tracker__title">Управление проектами с трекером</h2> <h2 className="tracker__title">Управление проектами с трекером</h2>
</div> </div>
@ -543,22 +546,22 @@ export const Tracker = () => {
<div className="tracker__tabs"> <div className="tracker__tabs">
<div className="tracker__tabs__head"> <div className="tracker__tabs__head">
<div <div
className={toggleTab === 1 ? "tab active-tab" : "tab"} className={toggleTab === 1 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(1)} onClick={() => toggleTabs(1)}
> >
<img src={project} alt="img" /> <img src={project} alt="img" />
<p>Проекты </p> <p>Проекты </p>
</div> </div>
<div <div
className={toggleTab === 2 ? "tab active-tab" : "tab"} className={toggleTab === 2 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(2)} onClick={() => toggleTabs(2)}
> >
<img src={tasks} alt="img" /> <img src={tasks} alt="img" />
<p>Все мои задачи</p> <p>Все мои задачи</p>
</div> </div>
<div <div
className={toggleTab === 3 ? "tab active-tab" : "tab"} className={toggleTab === 3 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(3)} onClick={() => toggleTabs(3)}
> >
<img src={archive} alt="img" /> <img src={archive} alt="img" />
<p>Архив</p> <p>Архив</p>
@ -566,101 +569,127 @@ export const Tracker = () => {
</div> </div>
<div className="tracker__tabs__content"> <div className="tracker__tabs__content">
<div <div
className={ className={
toggleTab === 1 toggleTab === 1
? "tracker__tabs__content__projects active__content tracker__tabs__content__wrapper" ? "tracker__tabs__content__projects active__content tracker__tabs__content__wrapper"
: "tracker__tabs__content__projects tracker__tabs__content__wrapper" : "tracker__tabs__content__projects tracker__tabs__content__wrapper"
} }
> >
<ModalCreate <ModalCreate
active={modalCreateProject} active={modalCreateProject}
setActive={setModalCreateProject} setActive={setModalCreateProject}
title={"Укажите название проекта:"} title={"Укажите название проекта:"}
/> />
{Boolean(projects.length) && !projectTasksOpen &&
{Boolean(projects.length) &&
!projectTasksOpen &&
projects.map((project, index) => { projects.map((project, index) => {
return ( return (
<div className="project" key={index} onClick={() => setProjectTasksOpen(true)}> <ProjectTiket
<h3>{project.name}</h3> key={index}
<div className="project__info"> project={project}
<p>Открытые задачи</p> setOpenProject={setProjectTasksOpen}
<span className="count">{project.count}</span> ></ProjectTiket>
<span className="add">+</span>
</div>
</div>
); );
})} })}
{!Boolean(projects.length) && !projectTasksOpen && {!Boolean(projects.length) && !projectTasksOpen && (
<div className="no-projects"> <div className="no-projects">
<div className="no-projects__createNew"> <div className="no-projects__createNew">
<div> <div>
<img src={noProjects} alt="noProjectImg" /> <img src={noProjects} alt="noProjectImg" />
<p>Создайте свой первый проект</p> <p>Создайте свой первый проект</p>
</div>
<button className="createProjectBtn" onClick={() => setModalCreateProject(true)}>
<span>+</span>Создать проект
</button>
</div> </div>
<p className="no-projects__info">Ставьте задачи, следите за прогрессом, ведите учёт рабочего времени</p> <button
className="createProjectBtn"
onClick={() => setModalCreateProject(true)}
>
<span>+</span>Создать проект
</button>
</div> </div>
} <p className="no-projects__info">
{Boolean(projects.length) && !projectTasksOpen && Ставьте задачи, следите за прогрессом, ведите учёт рабочего
времени
</p>
</div>
)}
{Boolean(projects.length) && !projectTasksOpen && (
<div className="create-newProject"> <div className="create-newProject">
<button className="createProjectBtn" onClick={() => setModalCreateProject(true)}> <button
className="createProjectBtn"
onClick={() => setModalCreateProject(true)}
>
<span>+</span>Создать проект <span>+</span>Создать проект
</button> </button>
<p>Ставьте задачи, следите за прогрессом, ведите учёт рабочего времени</p> <p>
Ставьте задачи, следите за прогрессом, ведите учёт рабочего
времени
</p>
</div> </div>
} )}
</div> </div>
<div <div
className={ className={
toggleTab === 1 && projectTasksOpen toggleTab === 1 && projectTasksOpen
? "tracker__tabs__content__tasks tasks active__content" ? "tracker__tabs__content__tasks tasks active__content"
: "tracker__tabs__content__projects" : "tracker__tabs__content__projects"
} }
> >
<div className="tasks__head"> <div className="tasks__head">
<div className="tasks__head__wrapper"> <div className="tasks__head__wrapper">
<h4>Проект : Разработка трекера</h4> <h4>Проект : Разработка трекера</h4>
<div
className={ <ModalAdd
modalCreateColl ? "modal-project active" : "modal-project" active={modalCreateColl}
} setActive={setModalCreateColl}
onClick={() => setModalCreateColl(false)}
> >
<div <div className="title-project">
className="modal-project__content" <h4>Введите название колонки</h4>
onClick={(e) => e.stopPropagation()} <div className="input-container">
> <input
<div className="title-project"> className="name-project"
<h4>Введите название колонки</h4> value={valueColl}
<div className="input-container"> onChange={(e) => setValueColl(e.target.value)}
<input ></input>
className="name-project"
value={valueColl}
onChange={(e) => setValueColl(e.target.value)}
></input>
</div>
</div> </div>
<button className="create-project" onClick={createTab}>
Создать
</button>
</div> </div>
</div> <button className="button-add" onClick={createTab}>
<div className="tasks__head__add"> Создать
<span </button>
onClick={() => setModalCreateColl(true)} </ModalAdd>
<ModalAdd active={modalAddWorker} setActive={setModalAddWorker}>
<div className="title-project">
<h4>Добавьте участника</h4>
<p className="title-project__decs">
Введите имя или e-mail{" "}
</p>
<div className="input-container">
<input
className="name-project"
value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)}
></input>
</div>
</div>
<button
className="button-add"
onClick={(e) => e.preventDefault()}
> >
+ Добавить
</span> </button>
</ModalAdd>
<div className="tasks__head__add">
<span onClick={() => setModalCreateColl(true)}>+</span>
<p>добавить задачу в проект</p> <p>добавить задачу в проект</p>
</div> </div>
<div className="tasks__head__persons"> <div className="tasks__head__persons">
<img src={avatarTest} alt="avatar" /> <img src={avatarTest} alt="avatar" />
<img src={avatarTest} alt="avatar" /> <img src={avatarTest} alt="avatar" />
<span className="countPersons">+9</span> <span className="countPersons">+9</span>
<span className="addPerson">+</span> <span className="addPerson" onClick={setModalAddWorker}>
+
</span>
<p>добавить участника в проект</p> <p>добавить участника в проект</p>
</div> </div>
<div className="tasks__head__select"> <div className="tasks__head__select">
@ -671,183 +700,173 @@ export const Tracker = () => {
<span>Мои</span> <span>Мои</span>
<img src={selectArrow} alt="arrow" /> <img src={selectArrow} alt="arrow" />
</div> </div>
<div className="tasks__head__back" onClick={() => setProjectTasksOpen(false)}> <div
className="tasks__head__back"
onClick={() => setProjectTasksOpen(false)}
>
<p>Вернуться на проекты</p> <p>Вернуться на проекты</p>
<img src={arrow} alt="arrow"/> <img src={arrow} alt="arrow" />
</div> </div>
</div> </div>
</div> </div>
<ModalTiket <ModalTiket
active={modalActiveTicket} active={modalActiveTicket}
setActive={setModalActiveTicket} setActive={setModalActiveTicket}
/> />
<div <ModalAdd active={modalCreateTiket} setActive={setModalCreateTiket}>
className={ <div className="title-project">
modalCreateTiket ? "modal-project active" : "modal-project" <h4>Введите название карточки</h4>
} <div className="input-container">
onClick={() => setModalCreateTiket(false)} <input
> className="name-project"
<div value={valueTiket}
className="modal-project__content" onChange={(e) => setValueTiket(e.target.value)}
onClick={(e) => e.stopPropagation()} ></input>
>
<div className="title-project">
<h4>Введите название карточки</h4>
<div className="input-container">
<input
className="name-project"
value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)}
></input>
</div>
</div> </div>
<button className="create-project" onClick={createTiket}>
Создать
</button>
</div> </div>
</div> <button className="button-add" onClick={createTiket}>
Создать
</button>
</ModalAdd>
<div className="tasks__container"> <div className="tasks__container">
{tabTaskMok.map((section, wrapperIndex) => { {tabTaskMok.map((section, wrapperIndex) => {
return ( return (
<div <div
key={wrapperIndex} key={wrapperIndex}
onDragOver={(e) => dragOverHandler(e)} onDragOver={(e) => dragOverHandler(e)}
onDragEnter={(e) => dragEnterHandler(wrapperIndex)} onDragEnter={(e) => dragEnterHandler(wrapperIndex)}
onDrop={(e) => dragDropHandler(e, wrapperIndex)} onDrop={(e) => dragDropHandler(e, wrapperIndex)}
className={`tasks__board ${ className={`tasks__board ${
section.tasks.length >= 3 ? "tasks__board__more" : "" section.tasks.length >= 3 ? "tasks__board__more" : ""
} ${ } ${
wrapperHover[wrapperIndex] wrapperHover[wrapperIndex] ? "tasks__board__hover" : ""
? "tasks__board__hover" }`}
: "" >
}`} <div className="board__head">
> <span className={wrapperIndex === 3 ? "done" : ""}>
<div className="board__head"> {section.name}
<span className={wrapperIndex === 3 ? "done" : ""}> </span>
{section.name} <div>
</span> <span
<div> className="add"
<span onClick={(e) =>
className="add" selectedTabTask(
onClick={(e) => e,
selectedTabTask( wrapperIndex,
e, section.name,
wrapperIndex, section.tasks
section.name, )
section.tasks
)
}
>
+
</span>
<span className="more">...</span>
</div>
</div>
{section.tasks.map((task, index) => {
if (index > 2) {
if (!section.open) {
return;
} }
} >
return ( +
<div </span>
key={index} <span className="more">...</span>
className="tasks__board__item" </div>
draggable={true}
onDragStart={(e) =>
dragStartHandler(e, task, wrapperIndex)
}
onDragEnd={(e) => dragEndHandler(e)}
onClick={() => setModalActiveTicket(true)}
>
<div className="tasks__board__item__title">
<p>{task.task}</p>
</div>
<p className="tasks__board__item__description">
{task.description}
</p>
<div className="tasks__board__item__info">
<div className="tasks__board__item__info__more">
<img src={commentsBoard} alt="commentsImg" />
<span>{task.comments} коментариев</span>
</div>
<div className="tasks__board__item__info__more">
<img src={filesBoard} alt="filesImg" />
<span>{task.files} файлов</span>
</div>
<div className="tasks__board__item__info__avatars">
<img src={task.avatarCreated} alt="avatar" />
<img src={task.avatarDo} alt="avatar" />
</div>
</div>
</div>
);
})}
{section.tasks.length > 3 && (
<span
className={
section.open
? "lessItems openItems"
: "moreItems openItems"
}
onClick={() => toggleMoreTasks(wrapperIndex)}
>
{section.open ? "-" : "+"}
</span>
)}
</div> </div>
{section.tasks.map((task, index) => {
if (index > 2) {
if (!section.open) {
return;
}
}
return (
<div
key={index}
className="tasks__board__item"
draggable={true}
onDragStart={(e) =>
dragStartHandler(e, task, wrapperIndex)
}
onDragEnd={(e) => dragEndHandler(e)}
onClick={() => setModalActiveTicket(true)}
>
<div className="tasks__board__item__title">
<p>{task.task}</p>
</div>
<p className="tasks__board__item__description">
{task.description}
</p>
<div className="tasks__board__item__info">
<div className="tasks__board__item__info__more">
<img src={commentsBoard} alt="commentsImg" />
<span>{task.comments} коментариев</span>
</div>
<div className="tasks__board__item__info__more">
<img src={filesBoard} alt="filesImg" />
<span>{task.files} файлов</span>
</div>
<div className="tasks__board__item__info__avatars">
<img src={task.avatarCreated} alt="avatar" />
<img src={task.avatarDo} alt="avatar" />
</div>
</div>
</div>
);
})}
{section.tasks.length > 3 && (
<span
className={
section.open
? "lessItems openItems"
: "moreItems openItems"
}
onClick={() => toggleMoreTasks(wrapperIndex)}
>
{section.open ? "-" : "+"}
</span>
)}
</div>
); );
})} })}
</div> </div>
</div> </div>
<div <div
className={ className={
toggleTab === 2 toggleTab === 2
? "tracker__tabs__content__allTasks taskList tasks active__content" ? "tracker__tabs__content__allTasks taskList tasks active__content"
: "tracker__tabs__content__projects" : "tracker__tabs__content__projects"
} }
> >
<div className="taskList__head"> <div className="taskList__head">
<h3>Список всех задач</h3> <h3>Список всех задач</h3>
<div className="taskList__head__search"> <div className="taskList__head__search">
<img src={search} alt="search" /> <img src={search} alt="search" />
<input <input
type="text" type="text"
placeholder="Найти задачу" placeholder="Найти задачу"
onChange={(event) => filterArchiveTasks(event)} onChange={(event) => filterArchiveTasks(event)}
/> />
</div> </div>
</div> </div>
<div className="taskList__wrapper"> <div className="taskList__wrapper">
{allTasks.map((task, index) => { {allTasks.map((task, index) => {
return( return (
<div className="task" key={index}> <div className="task" key={index}>
<div className="task__info"> <div className="task__info">
<h5>{task.name}</h5> <h5>{task.name}</h5>
<p>{task.description}</p> <p>{task.description}</p>
</div> </div>
<div className="task__person"> <div className="task__person">
<img src={task.avatarDo} alt="avatar" /> <img src={task.avatarDo} alt="avatar" />
<div className="task__project"> <div className="task__project">
<p>{task.project}</p> <p>{task.project}</p>
<span>{task.dateComplete}</span> <span>{task.dateComplete}</span>
</div>
</div>
</div> </div>
) </div>
}) </div>
} );
})}
</div> </div>
</div> </div>
<div <div
className={ className={
toggleTab === 3 toggleTab === 3
? "tracker__tabs__content__archive active__content" ? "tracker__tabs__content__archive active__content"
: "tracker__tabs__content__projects" : "tracker__tabs__content__projects"
} }
> >
<div className="archive__tasks"> <div className="archive__tasks">
<div className="archive__title"> <div className="archive__title">
@ -856,36 +875,36 @@ export const Tracker = () => {
<div className="archive__tasks__search"> <div className="archive__tasks__search">
<img src={search} alt="search" /> <img src={search} alt="search" />
<input <input
type="text" type="text"
placeholder="Найти задачу" placeholder="Найти задачу"
onChange={(event) => filterArchiveTasks(event)} onChange={(event) => filterArchiveTasks(event)}
/> />
</div> </div>
</div> </div>
<div className="archive__tasksWrapper"> <div className="archive__tasksWrapper">
{Boolean(filterCompleteTasks.length) ? {Boolean(filterCompleteTasks.length) ? (
filterCompleteTasks.map((task, index) => { filterCompleteTasks.map((task, index) => {
return ( return (
<div className="archive__completeTask" key={index}> <div className="archive__completeTask" key={index}>
<div className="archive__completeTask__description"> <div className="archive__completeTask__description">
<p>{task.description}</p> <p>{task.description}</p>
<p className="date">{task.dateComplete}</p> <p className="date">{task.dateComplete}</p>
</div> </div>
<div className="archive__completeTask__info"> <div className="archive__completeTask__info">
<img src={task.avatarDo} alt="avatar" /> <img src={task.avatarDo} alt="avatar" />
<div className="archive__completeTask__info__project"> <div className="archive__completeTask__info__project">
<span>Проект</span> <span>Проект</span>
<p>{task.project}</p> <p>{task.project}</p>
</div>
</div> </div>
</div> </div>
</div>
); );
}) })
: ) : (
<div className="archive__noItem"> <div className="archive__noItem">
<p>В архиве задач нет</p> <p>В архиве задач нет</p>
</div> </div>
} )}
</div> </div>
</div> </div>
<div className="archive__projects"> <div className="archive__projects">
@ -894,22 +913,22 @@ export const Tracker = () => {
<p>{archiveProjects.length} проект(ов)</p> <p>{archiveProjects.length} проект(ов)</p>
</div> </div>
<div className="archive__tasksWrapper"> <div className="archive__tasksWrapper">
{Boolean(archiveProjects) ? {Boolean(archiveProjects) ? (
archiveProjects.map((project, index) => { archiveProjects.map((project, index) => {
return ( return (
<div className="archive__completeTask" key={index}> <div className="archive__completeTask" key={index}>
<div className="archive__completeTask__description"> <div className="archive__completeTask__description">
<p>{project.name}</p> <p>{project.name}</p>
<p className="date">{project.date}</p> <p className="date">{project.date}</p>
</div> </div>
</div> </div>
) );
}) })
: ) : (
<div className="archive__noItem"> <div className="archive__noItem">
<p>В архиве проектов нет</p> <p>В архиве проектов нет</p>
</div> </div>
} )}
</div> </div>
</div> </div>
</div> </div>

View File

@ -41,7 +41,7 @@
display: flex; display: flex;
max-width: 1160px; max-width: 1160px;
width: 100%; width: 100%;
background: #E1FCCF; background: #e1fccf;
border-radius: 12px; border-radius: 12px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
@ -89,7 +89,8 @@
} }
img { img {
filter: invert(0%) sepia(0%) saturate(2411%) hue-rotate(-25deg) brightness(118%) contrast(119%); filter: invert(0%) sepia(0%) saturate(2411%) hue-rotate(-25deg)
brightness(118%) contrast(119%);
} }
} }
@ -119,91 +120,6 @@
padding: 15px; padding: 15px;
} }
.project {
width: 48%;
background: #f1f1f1;
border-radius: 12px;
padding: 17px 26px 16px;
cursor: pointer;
max-width: 440px;
@media (max-width: 1068px) {
width: 47%;
}
@media (max-width: 785px) {
width: 100%;
}
@media (max-width: 430px) {
padding: 8px 13px 8px;
}
h3 {
font-weight: 700;
font-size: 18px;
line-height: 32px;
color: #111112;
margin-bottom: 10px;
}
&__info {
display: flex;
align-items: center;
position: relative;
@media (max-width: 430px) {
justify-content: space-between;
}
p {
color: #6f6f6f;
font-weight: 500;
font-size: 12px;
line-height: 24px;
margin-bottom: 0;
}
.count {
margin-left: 8px;
width: 21px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #dddddd;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #6f6f6f;
}
.add {
color: #6f6f6f;
font-size: 17px;
margin: 0 25px 0 auto;
@media (max-width: 430px) {
display: none;
}
}
&:after {
content: "...";
position: absolute;
font-size: 21px;
color: #6f6f6f;
right: 0;
top: -35%;
@media (max-width: 430px) {
display: none;
}
}
}
}
.no-projects { .no-projects {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -226,7 +142,6 @@
} }
} }
button { button {
} }
} }
@ -239,25 +154,25 @@
} }
.createProjectBtn { .createProjectBtn {
background: #52b709; background: #52b709;
border-radius: 44px; border-radius: 44px;
max-width: 188px; max-width: 188px;
height: 50px; height: 50px;
width: 100%; width: 100%;
border: none; border: none;
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
line-height: 32px; line-height: 32px;
color: #ffffff; color: #ffffff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
span { span {
margin-right: 9px; margin-right: 9px;
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
} }
} }
.create-newProject { .create-newProject {
@ -307,7 +222,7 @@
} }
h4 { h4 {
color: #1458DD; color: #1458dd;
font-weight: 700; font-weight: 700;
font-size: 22px; font-size: 22px;
line-height: 32px; line-height: 32px;
@ -376,7 +291,7 @@
} }
.addPerson { .addPerson {
background: #00C5A8; background: #00c5a8;
color: white; color: white;
font-size: 14px; font-size: 14px;
left: -35px; left: -35px;
@ -642,7 +557,7 @@
font-size: 18px; font-size: 18px;
line-height: 32px; line-height: 32px;
margin-bottom: 0; margin-bottom: 0;
color: #1458DD; color: #1458dd;
@media (max-width: 590px) { @media (max-width: 590px) {
font-size: 15px; font-size: 15px;
@ -654,8 +569,8 @@
padding: 6px 12px; padding: 6px 12px;
display: flex; display: flex;
align-items: center; align-items: center;
background: #FFFFFF; background: #ffffff;
border: 1px solid #DDE2E4; border: 1px solid #dde2e4;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 6px; border-radius: 6px;
max-width: 450px; max-width: 450px;
@ -720,7 +635,7 @@
.task { .task {
display: flex; display: flex;
background: #F1F1F1; background: #f1f1f1;
border-radius: 12px; border-radius: 12px;
padding: 12px 42px 7px 32px; padding: 12px 42px 7px 32px;
justify-content: space-between; justify-content: space-between;
@ -792,7 +707,7 @@
padding-bottom: 8px; padding-bottom: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
color: #1458DD; color: #1458dd;
min-height: 48px; min-height: 48px;
h3 { h3 {
@ -855,7 +770,7 @@
justify-content: space-between; justify-content: space-between;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
background: #F1F1F1; background: #f1f1f1;
border-radius: 12px; border-radius: 12px;
padding: 12px 42px 7px 32px; padding: 12px 42px 7px 32px;
@ -883,7 +798,7 @@
font-weight: 500; font-weight: 500;
font-size: 10px; font-size: 10px;
line-height: 24px; line-height: 24px;
color: #6F6F6F; color: #6f6f6f;
} }
} }
@ -904,7 +819,7 @@
font-size: 10px; font-size: 10px;
} }
p { p {
color: #1A1919; color: #1a1919;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
@ -930,8 +845,8 @@
padding: 6px 12px; padding: 6px 12px;
display: flex; display: flex;
align-items: center; align-items: center;
background: #FFFFFF; background: #ffffff;
border: 1px solid #DDE2E4; border: 1px solid #dde2e4;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 6px; border-radius: 6px;
max-width: 300px; max-width: 300px;
@ -976,7 +891,7 @@
} }
&__noItem { &__noItem {
background: #F1F1F1; background: #f1f1f1;
border-radius: 12px; border-radius: 12px;
padding: 23px 0 19px; padding: 23px 0 19px;