apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into trackerTask

Browse Source 
# Conflicts:
#	src/pages/Quiz/QuizPage.js
This commit is contained in:
Mikola
2024-02-14 14:59:20 +03:00
parent 6ec0264bbf 04db457944
commit f1a21a0821
98 changed files with 1071 additions and 931 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/Auth/auth.scss
View File

@ -326,14 +326,14 @@
}
}
&__partnersForPart {
&__partners-for-part {
background: #406128;
color: white;
margin-left: -35px;
}
&__partnersForPart,
&__developersForPart {
&__partners-for-part,
&__developers-for-part {
width: 220px;
height: 50px;
border-radius: 44px;
@ -341,7 +341,7 @@
border: none;
}
&__developersForPart {
&__developers-for-part {
background-color: #52b7098c;
color: #2d6505;
}
@ -353,7 +353,7 @@
flex-direction: column;
}
&__partnersForPart {
&__partners-for-part {
margin: 15px 0 0 0;
}
}

2
src/pages/AuthForCandidate/AuthForCandidate.jsx
View File

@ -128,7 +128,7 @@ export const AuthForCandidate = () => {
<p className="auth-candidate__start__description">
Для нас не имеет значение Ваша локация.
</p>
<div className="auth-candidate__start__categoriesWrapper">
<div className="auth-candidate__start__categories-wrapper">
<StepsForCandidate step="шаг 1 - выберите специализацию" />
{personalInfoItems.map((item, index) => {
return (

4
src/pages/AuthForCandidate/authForCandidate.scss
View File

@ -32,7 +32,7 @@
line-height: 32px;
}
&__categoriesWrapper {
&__categories-wrapper {
position: relative;
margin-top: 200px;
width: 100%;
@ -47,7 +47,7 @@
grid-template-columns: 1fr;
}
.categoriesItem {
.categories-item {
@media (max-width: 1094px) {
flex: 0 0 48.6%;
}

18
src/pages/CatalogSpecialists/CatalogSpecialists.jsx
View File

@ -145,25 +145,25 @@ const CatalogSpecialists = () => {
}
];
return (
<section className="catalogSpecialists">
<section className="catalog-specialists">
<AuthHeader />
<div className="container catalogSpecialists__wrapper">
<div className="container catalog-specialists__wrapper">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/auth" },
{ name: "Свободные разработчики", link: "/" }
]}
/>
<div className="catalogSpecialists__head">
<div className="catalog-specialists__head">
<h2>Каталог специалистов</h2>
<div className="catalogSpecialists__count countInfo">
<div className="countInfo__imgWrapper">
<div className="catalog-specialists__count count-info">
<div className="count-info__imgWrapper">
<img src={mockWorker} alt="worker" />
</div>
<p>🖐 50+ специалистов доступны</p>
</div>
</div>
<div className="catalogSpecialists__items">
<div className="catalog-specialists__items">
{personalInfoItems.map((item, index) => {
return (
<CategoriesItem
@ -177,14 +177,14 @@ const CatalogSpecialists = () => {
);
})}
</div>
<h3 className="catalogSpecialists__searchTitle">
<h3 className="catalog-specialists__search-title">
Найти специалиста по навыкам
</h3>
<div className="catalogSpecialists__searchBlock">
<div className="catalog-specialists__search-block">
<input type="text" />
<button>Поиск</button>
</div>
<div className="catalogSpecialists__employees">
<div className="catalog-specialists__employees">
{mockPersons.map((person, index) => {
return (
<CatalogPersonCard

22
src/pages/CatalogSpecialists/catalogSpecialists.scss
View File

@ -1,12 +1,12 @@
.catalogSpecialists {
.catalog-specialists {
background: #f1f1f1;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
&__wrapper {
padding-top: 24px;
}
&__wrapper {
padding-top: 24px;
}
&__head {
display: flex;
@ -24,7 +24,7 @@
&__count {
border-radius: 38px;
border: 1px solid #E3E3E9;
border: 1px solid #e3e3e9;
padding: 6px 32px 6px 6px;
width: 100%;
max-width: 450px;
@ -40,7 +40,7 @@
}
}
.countInfo {
.count-info {
&__imgWrapper {
width: 46px;
height: 46px;
@ -64,22 +64,22 @@
margin-bottom: 45px;
}
&__searchTitle {
&__search-title {
font-size: 25px;
line-height: 32px;
color: #000000;
margin-bottom: 25px;
}
&__searchBlock {
&__search-block {
display: flex;
justify-content: space-between;
margin-bottom: 39px;
input {
border-radius: 5px;
border: 0.5px solid #B0BABF;
background: #F4F4F4;
border: 0.5px solid #b0babf;
background: #f4f4f4;
outline: none;
height: 50px;
padding: 0 10px;
@ -91,7 +91,7 @@
padding: 9px 36px;
border-radius: 44px;
border: none;
background-color: #52B709;
background-color: #52b709;
color: white;
font-size: 16px;
margin-left: 20px;

42
src/pages/CompanyInfo/CompanyInfo.jsx
View File

@ -13,54 +13,54 @@ import "./companyInfo.scss";
export const CompanyInfo = () => {
return (
<div className="companyInfo">
<div className="company-info">
<AuthHeader />
<SideBar />
<div className="companyInfo__content">
<div className="company-info__content">
<div className="container">
<h1 className="companyInfo__title">
<h1 className="company-info__title">
<span>Арендуйте IT специалистов:</span>
<br />
быстро, выгодно, на любой срок.
</h1>
<div className="arrowElement arrowDown">
<div className="arrow-element arrow-down">
<img src={arrow} alt="arrow" />
</div>
<p className="companyInfo__subTitle">
<p className="company-info__subTitle">
Мы предоставляем вам «в аренду» IT-специалистов. При этом они
находятся в нашем штате. Оплата происходит за отработанные часы
</p>
<div className="companyInfo__info">
<div className="companyInfo__countingBlock">
<div className="companyInfo__countingBlock__head">
<div className="company-info__info">
<div className="company-info__counting-block">
<div className="company-info__counting-block__head">
<img src={countingImg} alt="countingImg" />
<div className="countingBlock__info">
<h3 className="countingBlock__title">
<div className="counting-block__info">
<h3 className="counting-block__title">
Экономия бюджета компании - главное преимущество
аутстаффинга
</h3>
<p className="countingBlock__subTitle">
<p className="counting-block__subTitle">
Приблизительный просчет дал результаты в экономии до 50%
бюджета
</p>
</div>
<div className="arrowElement">
<div className="arrow-element">
<img src={arrow} alt="arrow" />
</div>
</div>
<div className="companyInfo__countingBlock__bottom">
<span className="titleBottom">Давайте просчитаем:</span>
<p className="subTitleBottom">
<div className="company-info__counting-block__bottom">
<span className="title-bottom">Давайте просчитаем:</span>
<p className="subtitle-bottom">
Оплата работы <span>разработчика</span> в штат 1500 руб/ч (250
000 руб/мес).
</p>
</div>
<img className="countingBlockImg" src={calcImg} alt="calc" />
<img className="counting-block-img" src={calcImg} alt="calc" />
</div>
<div className="companyInfo__info__img">
<div className="company-info__info__img">
<img src={braceImg} alt="brace" />
</div>
<div className="companyInfo__info__items">
<div className="company-info__info__items">
<div className="info__item">
<ul>
<li>НДФЛ (13% от зарплаты)</li>
@ -80,11 +80,11 @@ export const CompanyInfo = () => {
</ul>
</div>
</div>
<div className="companyInfo__info__total">
<span className="companyInfo__info__total__title">
<div className="company-info__info__total">
<span className="company-info__info__total__title">
В итоге у нас получается:
</span>
<div className="companyInfo__info__total__text">
<div className="company-info__info__total__text">
<p>
Специалист с изначальной расценкой в 1 500 руб/ч с учетом всех
остальных расходов

30
src/pages/CompanyInfo/companyInfo.scss
View File

@ -1,7 +1,7 @@
.companyInfo {
.company-info {
&__content {
font-family: "LabGrotesque", sans-serif;
background-color: #F1F1F1;
background-color: #f1f1f1;
padding-top: 60px;
@media (max-width: 1375px) {
@ -18,7 +18,7 @@
margin: 0 auto;
text-align: center;
span {
color: #52B709;
color: #52b709;
font-weight: 700;
}
@ -39,10 +39,10 @@
}
}
.arrowElement {
.arrow-element {
width: 48px;
height: 48px;
background-color: #D3E4BC;
background-color: #d3e4bc;
border-radius: 50px;
display: flex;
justify-content: center;
@ -53,7 +53,7 @@
}
}
.arrowDown {
.arrow-down {
margin: 35px auto 45px;
img {
transform: rotate(90deg);
@ -118,7 +118,7 @@
}
span {
color: #52B709;
color: #52b709;
font-weight: 700;
}
@ -145,7 +145,7 @@
}
}
&__countingBlock {
&__counting-block {
padding: 27px 185px 26px 45px;
border-radius: 12px;
background: white;
@ -190,13 +190,13 @@
flex-direction: column;
row-gap: 12px;
.titleBottom {
.title-bottom {
font-size: 21px;
font-weight: 700;
line-height: 48px;
}
.subTitleBottom {
.subtitle-bottom {
color: #000000;
font-weight: 500;
font-size: 18px;
@ -204,7 +204,7 @@
}
span {
color: #52B709;
color: #52b709;
}
@media (max-width: 780px) {
@ -213,7 +213,7 @@
}
}
.countingBlock__info {
.counting-block__info {
display: flex;
flex-direction: column;
row-gap: 12px;
@ -223,7 +223,7 @@
}
}
.countingBlock {
.counting-block {
&__title {
font-size: 18px;
font-weight: 500;
@ -232,13 +232,13 @@
}
&__subTitle {
color: #6F6F6F;
color: #6f6f6f;
font-size: 12px;
line-height: 20px;
}
}
.countingBlockImg {
.counting-block-img {
position: absolute;
right: -140px;
top: -55px;

119
src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.scss
View File

@ -1,60 +1,65 @@
@import './../../assets/functions.scss';
@import "./../../assets/functions.scss";
.frequently-asked-question {
background: #f5f5f5;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
display: flex;
flex-direction: column;
@media (max-width: 1375px) {
margin-top: 80px;
background: #f5f5f5;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
display: flex;
flex-direction: column;
@media (max-width: 1375px) {
margin-top: 80px;
}
&__container {
flex: 1 1 auto;
margin-top: 30px;
}
&__title {
font-weight: 500;
@include adaptiv-value("font-size", 38, 24, 1);
line-height: 84%;
margin: 42px 0 30px 0;
color: #000000;
}
&__back {
margin: 0 0 30px 0;
display: flex;
align-items: center;
cursor: pointer;
gap: 19px;
p {
font-size: 12px;
line-height: 167%;
color: #6f6f6f;
}
}
&__arrow {
background: rgba(141, 198, 63, 0.5098039216);
width: 48px;
height: 48px;
border-radius: 44px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(180deg);
}
&__answer {
font-weight: 400;
font-size: 20px;
line-height: 120%;
background: #ffffff;
border-radius: 12px;
word-break: break-word;
color: #000000;
@include adaptiv-value("padding-top", 33, 15, 1);
@include adaptiv-value("padding-bottom", 33, 15, 1);
@include adaptiv-value("padding-left", 41, 22, 1);
@include adaptiv-value("padding-right", 41, 22, 1);
}
}
&__container {
flex: 1 1 auto;
margin-top: 30px;
}
&__title {
font-weight: 500;
@include adaptiv-value("font-size", 38, 24, 1);
line-height: 84%;
margin: 42px 0 30px 0;
color: #000000;
}
&__back {
margin: 0 0 30px 0;
display: flex;
align-items: center;
cursor: pointer;
gap: 19px;
p {
font-size: 12px;
line-height: 167%;
color: #6f6f6f;
}
}
&__arrow {
background: rgba(141, 198, 63, 0.5098039216);
width: 48px;
height: 48px;
border-radius: 44px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(180deg);
}
&__answer {
font-weight: 400;
font-size: 20px;
line-height: 120%;
background: #ffffff;
border-radius: 12px;
word-break: break-word;
color: #000000;
@include adaptiv-value("padding-top", 33, 15, 1);
@include adaptiv-value("padding-bottom", 33, 15, 1);
@include adaptiv-value("padding-left", 41, 22, 1);
@include adaptiv-value("padding-right", 41, 22, 1);
}
}

12
src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.scss
View File

@ -5,32 +5,39 @@
font-family: "LabGrotesque", sans-serif;
display: flex;
flex-direction: column;
@media (max-width: 1375px) {
margin-top: 80px;
}
&__container {
flex: 1 1 auto;
margin: 30px 0;
}
&__about {
display: flex;
align-items: center;
margin: 30px 0;
@media (max-width: 600px) {
flex-wrap: wrap;
row-gap: 25px;
}
}
&__title {
font-weight: 500;
font-size: 48px;
line-height: 67%;
color: #000000;
margin: 0 13px 0 0;
@media (max-width: 600px) {
order: 1;
}
}
&__arrow {
background: rgba(128, 119, 119, 0.3);
flex: 0 0 27px;
@ -40,10 +47,12 @@
align-items: center;
justify-content: center;
margin: 0 24px 0 0;
@media (max-width: 600px) {
order: 2;
}
}
&__description {
font-weight: 400;
font-size: 18px;
@ -52,15 +61,16 @@
color: #000000;
white-space: pre-line;
}
&__items {
display: grid;
grid-row-gap: 49px;
grid-column-gap: 29px;
grid-template-columns: 1fr 1fr;
@media (max-width: 750px) {
grid-template-columns: 1fr;
grid-gap: 60px;
}
}
}

28
src/pages/PartnerAddRequest/PartnerAddRequest.js
View File

@ -168,7 +168,7 @@ export const PartnerAddRequest = () => {
};
return (
<div className="partnerAddRequest">
<div className="partner-add-request">
<ProfileHeader />
<Navigation />
<div className="container">
@ -184,14 +184,14 @@ export const PartnerAddRequest = () => {
}
]}
/>
<h2 className="partnerAddRequest__title">
<h2 className="partner-add-request__title">
{editRequest
? "Страница редактирования заявки"
: "Страница добавления заявки"}
</h2>
<div className="partnerAddRequest__section">
<div className="partnerAddRequest__form">
<div className="partnerAddRequest__form__block form__block">
<div className="partner-add-request__section">
<div className="partner-add-request__form">
<div className="partner-add-request__form__block form__block">
<h3 className="form__block__title">Данные открытой позиции</h3>
<div className="form__block__section">
<h3>Название вакансии</h3>
@ -326,7 +326,7 @@ export const PartnerAddRequest = () => {
)}
</div>
</div>
<div className="partnerAddRequest__form__block form__block">
<div className="partner-add-request__form__block form__block">
<h3 className="form__block__title">Квалификация</h3>
<div className="form__block__section">
<h3>Выберите уровень знаний </h3>
@ -421,9 +421,9 @@ export const PartnerAddRequest = () => {
</div>
</div>
</div>
<div className="partnerAddRequest__info">
<div className="partnerAddRequest__info__block">
<div className="partnerAddRequest__info__block__title">
<div className="partner-add-request__info">
<div className="partner-add-request__info__block">
<div className="partner-add-request__info__block__title">
<img src={processImg} alt="process" />
<h4>Процесс:</h4>
</div>
@ -436,8 +436,8 @@ export const PartnerAddRequest = () => {
проекты и Git.
</p>
</div>
<div className="partnerAddRequest__info__block">
<div className="partnerAddRequest__info__block__title">
<div className="partner-add-request__info__block">
<div className="partner-add-request__info__block__title">
<img src={reportImg} alt="reportImg" />
<h4>Отчетность:</h4>
</div>
@ -452,8 +452,8 @@ export const PartnerAddRequest = () => {
Можем выделить руководителя проекта и тестировщиков.
</p>
</div>
<div className="partnerAddRequest__info__block">
<div className="partnerAddRequest__info__block__title">
<div className="partner-add-request__info__block">
<div className="partner-add-request__info__block__title">
<img src={documentsImg} alt="documentsImg" />
<h4>
Обмен <br />
@ -462,7 +462,7 @@ export const PartnerAddRequest = () => {
</div>
<p>
В Личном кабинете платформы получайте отчеты выполненных работ и
счета на согласование и оплату
счеты на согласование и оплату
</p>
</div>
</div>

38
src/pages/PartnerAddRequest/partnerAddRequest.scss
View File

@ -1,8 +1,8 @@
.partnerAddRequest {
background: #F1F1F1;
.partner-add-request {
background: #f1f1f1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
font-family: "LabGrotesque", sans-serif;
.container {
max-width: 1160px;
@ -17,7 +17,7 @@
color: #000000;
font-weight: 700;
font-size: 22px;
line-height: 32px
line-height: 32px;
}
&__section {
@ -42,7 +42,7 @@
}
.form__block {
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
padding: 25px 95px 30px 55px;
min-width: 600px;
@ -58,7 +58,7 @@
font-weight: 700;
font-size: 20px;
line-height: 24px;
color: #5B6871;
color: #5b6871;
margin-bottom: 35px;
}
@ -79,7 +79,7 @@
}
&__input {
background: #EFF2F7;
background: #eff2f7;
border-radius: 8px;
padding: 8px 12px;
margin-bottom: 35px;
@ -115,7 +115,7 @@
&__select {
padding: 8px 15px 9px 12px;
background: #EFF2F7;
background: #eff2f7;
border-radius: 12px;
cursor: pointer;
display: flex;
@ -140,7 +140,7 @@
}
textarea {
background: #EFF2F7;
background: #eff2f7;
border-radius: 8px;
width: 100%;
border: none;
@ -177,9 +177,9 @@
display: flex;
align-items: center;
justify-content: center;
border: 0.5px solid #8DC63F;
border: 0.5px solid #8dc63f;
border-radius: 44px;
color: #6F6F6F;
color: #6f6f6f;
font-weight: 400;
font-size: 14px;
line-height: 32px;
@ -192,9 +192,9 @@
}
&__save {
background: #52B709;
background: #52b709;
border-radius: 44px;
color: #FFFFFF;
color: #ffffff;
font-weight: 700;
font-size: 14px;
line-height: 32px;
@ -210,14 +210,14 @@
display: flex;
gap: 5px;
flex-wrap: wrap;
background: #EFF2F7;
background: #eff2f7;
border-radius: 8px;
padding: 8px 12px 9px;
position: relative;
cursor: pointer;
.skill {
background: #8DC63F;
background: #8dc63f;
border-radius: 12px;
font-weight: 400;
font-size: 12px;
@ -304,7 +304,7 @@
font-size: 12px;
line-height: 14px;
color: #263238;
background: #8DC63F;
background: #8dc63f;
border-radius: 12px;
padding: 5px;
max-width: 100px;
@ -319,7 +319,7 @@
}
&__info {
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
width: 100%;
padding: 74px 48px 136px 62px;
@ -350,7 +350,7 @@
}
h4 {
color: #5B6871;
color: #5b6871;
font-weight: 700;
font-size: 20px;
line-height: 24px;
@ -367,7 +367,7 @@
}
&:last-child {
.partnerAddRequest__info__block__title {
.partner-add-request__info__block__title {
margin-bottom: 35px;
}
}

31
src/pages/PartnerBid/PartnerBid.jsx
View File

@ -74,7 +74,7 @@ export const PartnerBid = () => {
4: "Senior"
});
return (
<div className="partnerBid">
<div className="partner-bid">
<ProfileHeader />
<Navigation />
<ModalLayout active={modalDelete} setActive={setModalDelete}>
@ -110,13 +110,13 @@ export const PartnerBid = () => {
{ name: "Просмотр заявки - PHP разработчик", link: "/profile/bid" }
]}
/>
<h2 className="partnerBid__title">Страница заявки </h2>
<h2 className="partner-bid__title">Страница заявки </h2>
{loader && <Loader />}
{!loader && (
<>
<div className="partnerBid__qualification">
<div className="partner-bid__qualification">
<h3>{requestInfo.title}</h3>
<div className="partnerBid__qualification__buttons">
<div className="partner-bid__qualification__buttons">
<Link to="/profile/edit-request">Редактировать</Link>
<img
src={deleteBtn}
@ -125,14 +125,14 @@ export const PartnerBid = () => {
/>
</div>
</div>
<div className="partnerBid__switcher">
<div className="partner-bid__switcher">
<div
className={
partnerRequests[
partnerRequests.findIndex((el) => el.id === requestId) - 1
]?.id
? "partnerBid__switcher__prev switchDate"
: "partnerBid__switcher__prev switchDate disable"
? "partner-bid__switcher__prev switch-date"
: "partner-bid__switcher__prev switch-date disable"
}
onClick={() => {
dispatch(
@ -153,8 +153,8 @@ export const PartnerBid = () => {
partnerRequests[
partnerRequests.findIndex((el) => el.id === requestId) + 1
]?.id
? "partnerBid__switcher__next switchDate"
: "partnerBid__switcher__next switchDate disable"
? "partner-bid__switcher__next switch-date"
: "partner-bid__switcher__next switch-date disable"
}
onClick={() => {
dispatch(
@ -229,22 +229,25 @@ export const PartnerBid = () => {
</tbody>
</table>
</div>
<div className="partnerBid__suitable">
<div className="partnerBid__suitable__title">
<div className="partner-bid__suitable">
<div className="partner-bid__suitable__title">
<p>Подходящие сотрудники по запросу</p>
</div>
<div className="partnerBid__suitable__persons">
<div className="partner-bid__suitable__persons">
{requestInfo.result_profiles.length &&
requestInfo.result_profiles.map((person, index) => {
return (
<div key={index} className="partnerBid__suitable__person">
<div
key={index}
className="partner-bid__suitable__person"
>
<img src={urlForLocal(person.photo)} alt="avatar" />
<p>
{person.fio} - {person.position_title},{" "}
{levels[person.level]}
</p>
<Link
className="partnerBid__suitable__person__more"
className="partner-bid__suitable__person__more"
to={`/candidate/${person.id}`}
>
Подробнее

4
src/pages/PartnerBid/partnerBid.scss
View File

@ -1,4 +1,4 @@
.partnerBid {
.partner-bid {
background: #f1f1f1;
height: 100%;
min-height: 100vh;
@ -78,7 +78,7 @@
justify-content: space-between;
}
.switchDate {
.switch-date {
width: 48px;
height: 48px;
background: #8dc63f;

16
src/pages/PartnerEmployeeReport/PartnerEmployeeReport.jsx
View File

@ -73,7 +73,7 @@ export const PartnerEmployeeReport = () => {
}, [requestDates]);
return (
<div className="employeeReport">
<div className="employee-report">
<ProfileHeader />
<Navigation />
<div className="container">
@ -84,30 +84,30 @@ export const PartnerEmployeeReport = () => {
]}
/>
{!Object.keys(userInfo).length ? (
<div className="employeeReport__loader">
<div className="employee-report__loader">
<Loader style={"green"} height={80} width={80} />
</div>
) : (
<>
<div className="employeeReport__info">
<div className="employeeReport__name">
<div className="employee-report__info">
<div className="employee-report__name">
<h2>{userInfo.fio}</h2>
<p>{userInfo.position}</p>
</div>
<div className="employeeReport__skills">
<div className="employee-report__skills">
{userInfo?.stack &&
userInfo.stack.map((skill, index) => {
return <span key={index}>{skill}</span>;
})}
</div>
</div>
<div className="employeeReport__wrapper">
<div className="employee-report__wrapper">
{loader ? (
<div className="employeeReport__loader">
<div className="employee-report__loader">
<Loader style={"green"} height={80} width={80} />
</div>
) : (
<div className="employeeReport__calendar ">
<div className="employee-report__calendar ">
<ProfileCalendarComponent
userId={params.uuid}
setValueHandler={(value) => setValue(value)}

6
src/pages/PartnerEmployeeReport/partnerEmployeeReport.scss
View File

@ -1,5 +1,5 @@
.employeeReport {
background: #F1F1F1;
.employee-report {
background: #f1f1f1;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
@ -42,7 +42,7 @@
font-size: 12px;
line-height: 14px;
color: #263238;
background: #8DC63F;
background: #8dc63f;
border-radius: 12px;
padding: 5px;
max-width: 130px;

18
src/pages/PartnerEmployees/PartnerEmployees.js
View File

@ -23,7 +23,7 @@ export const PartnerEmployees = () => {
return <Navigate to="/profile/categories" replace />;
}
return (
<div className="partnerEmployees">
<div className="partner-employees">
<ProfileHeader />
<Navigation />
<div className="container">
@ -37,17 +37,17 @@ export const PartnerEmployees = () => {
}
]}
/>
<h2 className="partnerEmployees__title">Backend разработчики</h2>
<div className="partnerEmployees__items">
<h2 className="partner-employees__title">Backend разработчики</h2>
<div className="partner-employees__items">
{partnerEmployees.map((person) => {
return (
<div className="partnerEmployees__item" key={person.id}>
<div className="partnerEmployees__item__name">
<div className="partner-employees__item" key={person.id}>
<div className="partner-employees__item__name">
<img src={person.personAvatar} alt="avatar" />
<h4>{person.name}</h4>
</div>
<div className="partnerEmployees__item__info">
<div className="partnerEmployees__item__info__qualification">
<div className="partner-employees__item__info">
<div className="partner-employees__item__info__qualification">
<h5>{person.qualification}</h5>
<span>{person.level}</span>
<div className="info_summary">
@ -58,10 +58,10 @@ export const PartnerEmployees = () => {
</Link>
</div>
</div>
<div className="partnerEmployees__item__info__project">
<div className="partner-employees__item__info__project">
<span className="name">Проект:</span>
<h5>{person.project}</h5>
<div className="partnerEmployees__item__info__project__details">
<div className="partner-employees__item__info__project__details">
<div className="details__item">
<p>Открытые задачи</p>
<span className="count">

25
src/pages/PartnerEmployees/partnerEmployees.scss
View File

@ -1,8 +1,8 @@
.partnerEmployees {
background: #F1F1F1;
.partner-employees {
background: #f1f1f1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
font-family: "LabGrotesque", sans-serif;
&__title {
color: #000000;
@ -19,13 +19,13 @@
}
&__item {
background: #E1FCCF;
background: #e1fccf;
border-radius: 12px;
display: flex;
position: relative;
&__name {
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
padding: 25px 22px 25px;
display: flex;
@ -57,9 +57,9 @@
justify-content: space-between;
&:after {
content: '';
content: "";
position: absolute;
background: #52B709;
background: #52b709;
border-radius: 12px;
height: 4px;
width: 51%;
@ -80,7 +80,7 @@
}
span {
color: #6F6F6F;
color: #6f6f6f;
font-weight: 500;
font-size: 14px;
}
@ -102,7 +102,7 @@
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
background: #ffffff;
border-radius: 50px;
width: 41px;
height: 41px;
@ -135,7 +135,7 @@
p {
margin-bottom: 0;
color: #6F6F6F;
color: #6f6f6f;
font-weight: 500;
font-size: 13px;
line-height: 24px;
@ -153,12 +153,12 @@
justify-content: center;
margin-left: 8px;
padding: 0 6px;
background: #DDDDDD;
background: #dddddd;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #6F6F6F;
color: #6f6f6f;
}
}
}
@ -166,7 +166,6 @@
}
}
.container {
max-width: 1160px;
margin-top: 23px;

40
src/pages/PartnerRequests/PartnerRequests.jsx
View File

@ -41,7 +41,7 @@ export const PartnerRequests = () => {
});
}, []);
return (
<div className="partnerRequests">
<div className="partner-requests">
<ProfileHeader />
<Navigation />
<div className="container">
@ -51,26 +51,26 @@ export const PartnerRequests = () => {
{ name: "Запросы и открытые позиции", link: "/profile/requests" }
]}
/>
<h2 className="partnerRequests__title">Запросы</h2>
<h2 className="partner-requests__title">Запросы</h2>
{loader && <Loader />}
{Boolean(requests.length) && !loader && (
<div className="partnerRequests__section">
<div className="partnerRequests__section__items">
<div className="partner-requests__section">
<div className="partner-requests__section__items">
{requests.map((item, index) => {
return (
<Link
key={index}
to={"/profile/bid"}
className="partnerRequests__section__item"
className="partner-requests__section__item"
onClick={() => {
dispatch(setPartnerRequestId(item.id));
dispatch(setPartnerRequests(requests));
}}
>
<p className="partnerRequests__section__item__name">
<p className="partner-requests__section__item__name">
{item.position.name}
</p>
<p className="partnerRequests__section__item__count">
<p className="partner-requests__section__item__count">
Подходящие кандидаты
<span>{item.result_count}</span>
</p>
@ -78,11 +78,11 @@ export const PartnerRequests = () => {
);
})}
</div>
<div className="partnerRequests__section__info">
<h3>Инструкция: подачи заявки</h3>
<div className="partner-requests__section__info">
<h3>Инструкция по подаче заявки</h3>
<p>
Оператор компании заводит заявку и указывает необходимые
параметры — количество сотрудников, стек, уровень специалиста
Оператор компании создает заявку и указывает необходимые
параметры: количество сотрудников, стек, уровень специалиста
</p>
<BaseButton>
<Link to={"/profile/add-request"}>
@ -94,9 +94,9 @@ export const PartnerRequests = () => {
</div>
)}
{!Boolean(requests.length) && !loader && (
<div className="partnerRequests__noItems">
<div className="partnerRequests__noItems__create">
<div className="partnerRequests__noItems__create__link">
<div className="partner-requests__no-items">
<div className="partner-requests__no-items__create">
<div className="partner-requests__no-items__create__link">
<img src={cursorImg} alt="cursor" />
<p>У вас ещё нет запросов на сотрудников</p>
<BaseButton>
@ -106,20 +106,20 @@ export const PartnerRequests = () => {
</Link>
</BaseButton>
</div>
<div className="partnerRequests__noItems__create__instruction">
<h3>Инструкция: подачи заявки</h3>
<div className="partner-requests__no-items__create__instruction">
<h3>Инструкция по подаче заявки</h3>
<p>
Оператор компании заводит заявку и указывает необходимые
параметры — количество сотрудников, стек, уровень специалиста
Оператор компании создает заявку и указывает необходимые
параметры: количество сотрудников, стек, уровень специалиста
</p>
</div>
</div>
<div className="partnerRequests__noItems__freeEmployees">
<div className="partner-requests__no-items__free-employees">
<SliderWorkers
title={"Свободные разработчики"}
titleInfo={"в нашей базе"}
/>
<p className="catalogLink">
<p className="catalog-link">
Перейти в полный <Link to={"/profile/catalog"}>КАТАЛОГ</Link>{" "}
сотрудников
</p>

8
src/pages/PartnerRequests/partnerRequests.scss
View File

@ -1,4 +1,4 @@
.partnerRequests {
.partner-requests {
background: #f1f1f1;
height: 100%;
min-height: 100vh;
@ -189,7 +189,7 @@
}
}
&__noItems {
&__no-items {
display: flex;
flex-direction: column;
@ -330,14 +330,14 @@
}
}
&__freeEmployees {
&__free-employees {
h2 {
font-weight: 500;
font-size: 30px;
line-height: 32px;
}
.catalogLink {
.catalog-link {
margin-top: 70px;
width: 100%;
font-weight: 700;

2
src/pages/PartnerSettings/PartnerSettings.jsx
View File

@ -120,7 +120,7 @@ export const PartnerSettings = () => {
</div>
<p className="settings__label">Изменение пароля</p>
<div className="settings__input oldPassword">
<div className="settings__input old-password">
<input
className={inputsError.password ? "warning" : ""}
placeholder="Старый пароль"

2
src/pages/PartnerSettings/partnerSettings.scss
View File

@ -54,7 +54,7 @@
}
}
.oldPassword {
.old-password {
margin-bottom: 25px;
}

28
src/pages/PartnerTreaties/PartnerTreaties.js
View File

@ -31,10 +31,10 @@ export const PartnerTreaties = () => {
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Договора и отчетность", link: "/profile/treaties" }
{ name: "Договоры и отчетность", link: "/profile/treaties" }
]}
/>
<h2 className="treaties__title">Договора и отчетность</h2>
<h2 className="treaties__title">Договоры и отчетность</h2>
<div className="treaties__tabs">
<div className="treaties__tabs__head">
<div
@ -56,7 +56,7 @@ export const PartnerTreaties = () => {
onClick={() => toggleTabs(3)}
>
<img src={checkImg} alt="img" />
<p>Счета</p>
<p>Счеты</p>
</div>
</div>
<div className="treaties__tabs__content">
@ -73,7 +73,7 @@ export const PartnerTreaties = () => {
<img src={arrowDown} alt="arrow" />
</div>
</div>
<div className="treaties__tabs__content__main__item item notPaid">
<div className="treaties__tabs__content__main__item item not-paid">
<div className="item__info">
<p className="number">
Договор № К-1-2022
@ -166,7 +166,7 @@ export const PartnerTreaties = () => {
</div>
</div>
</div>
<div className="treaties__tabs__content__main__item item notPaid">
<div className="treaties__tabs__content__main__item item not-paid">
<div className="item__info">
<p className="number">Акт №4 от 10.03.23</p>
<div className="item__person__act">
@ -179,11 +179,11 @@ export const PartnerTreaties = () => {
</div>
</div>
<img
className="personArrow"
className="person-arrow"
src={arrowItem}
alt="arrow"
/>
<p className="moreInfo">к Доп. соглашению № 1</p>
<p className="more-info">к Доп. соглашению № 1</p>
</div>
<div className="arrow">
<img src={arrowDown} alt="arrow" />
@ -225,11 +225,11 @@ export const PartnerTreaties = () => {
</div>
</div>
<img
className="personArrow"
className="person-arrow"
src={arrowItem}
alt="arrow"
/>
<p className="moreInfo">к Доп. соглашению № 1</p>
<p className="more-info">к Доп. соглашению № 1</p>
</div>
<div className="arrow">
<img src={arrowDown} alt="arrow" />
@ -278,7 +278,7 @@ export const PartnerTreaties = () => {
</div>
</div>
</div>
<div className="treaties__tabs__content__main__item item notPaid">
<div className="treaties__tabs__content__main__item item not-paid">
<div className="item__info">
<p className="number">Акт №4 от 10.03.23</p>
<div className="item__person__act">
@ -291,11 +291,11 @@ export const PartnerTreaties = () => {
</div>
</div>
<img
className="personArrow"
className="person-arrow"
src={arrowItem}
alt="arrow"
/>
<p className="moreInfo">к Доп. соглашению № 1</p>
<p className="more-info">к Доп. соглашению № 1</p>
</div>
<div className="arrow">
<img src={arrowDown} alt="arrow" />
@ -337,11 +337,11 @@ export const PartnerTreaties = () => {
</div>
</div>
<img
className="personArrow"
className="person-arrow"
src={arrowItem}
alt="arrow"
/>
<p className="moreInfo">к Доп. соглашению № 1</p>
<p className="more-info">к Доп. соглашению № 1</p>
</div>
<div className="arrow">
<img src={arrowDown} alt="arrow" />

25
src/pages/PartnerTreaties/partnerTreaties.scss
View File

@ -1,8 +1,8 @@
.treaties {
background: #F1F1F1;
background: #f1f1f1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
font-family: "LabGrotesque", sans-serif;
&__title {
font-weight: 700;
@ -43,7 +43,7 @@
width: calc(100% - 150px);
&__main {
background: #FFFFFF;
background: #ffffff;
border-radius: 0 12px 12px 12px;
flex-wrap: wrap;
column-gap: 34px;
@ -69,7 +69,7 @@
.img {
width: 32px;
height: 32px;
background: #E2E5CF;
background: #e2e5cf;
border-radius: 50px;
display: flex;
align-items: center;
@ -101,8 +101,8 @@
}
}
.notPaid {
background: #EBEBEB;
.not-paid {
background: #ebebeb;
}
.persons {
@ -137,7 +137,7 @@
.img {
width: 48px;
height: 48px;
background: #CFE0B8;
background: #cfe0b8;
display: flex;
justify-content: center;
align-items: center;
@ -215,7 +215,7 @@
align-items: center;
.arrow {
background: #CFE0B8;
background: #cfe0b8;
border-radius: 50px;
display: flex;
align-items: center;
@ -229,12 +229,12 @@
display: flex;
flex-direction: column;
.personArrow {
.person-arrow {
margin-top: 20px;
max-width: 125px;
}
.moreInfo {
.more-info {
font-weight: 300;
font-size: 10px;
line-height: 17px;
@ -321,7 +321,7 @@
display: flex;
p {
color: #A29EB6;
color: #a29eb6;
}
}
@ -347,7 +347,7 @@
}
.total {
color: #1458DD;
color: #1458dd;
}
}
}
@ -377,7 +377,6 @@
}
}
.container {
max-width: 1160px;
margin-top: 23px;

14
src/pages/PartnerСategories/PartnerСategories.jsx
View File

@ -146,7 +146,7 @@ export const PartnerCategories = () => {
// }
// ]);
return (
<div className="partnerCategories">
<div className="partner-categories">
<ProfileHeader />
<Navigation />
<div className="container">
@ -156,11 +156,11 @@ export const PartnerCategories = () => {
{ name: "Данные моего персонала", link: "/profile/employees" }
]}
/>
<h2 className="partnerCategories__title">Данные персонала</h2>
<h2 className="partner-categories__title">Данные персонала</h2>
{loader ? (
<Loader style={"green"} height={80} width={80} />
) : (
<div className="partnerCategories__items">
<div className="partner-categories__items">
{Boolean(staff) ? (
staff.map((card) => {
return (
@ -173,7 +173,7 @@ export const PartnerCategories = () => {
);
})
) : (
<span className="partnerCategories__empty">
<span className="partner-categories__empty">
У вас нет нанятого персонала
</span>
)}
@ -184,8 +184,8 @@ export const PartnerCategories = () => {
{/* key={index}*/}
{/* className={*/}
{/* item.available*/}
{/* ? "partnerCategories__item item"*/}
{/* : "partnerCategories__item item item__disable"*/}
{/* ? "partner-categories__item item"*/}
{/* : "partner-categories__item item item__disable"*/}
{/* }*/}
{/* onClick={() => {*/}
{/* dispatch(setPartnerEmployees(mokPersons));*/}
@ -202,7 +202,7 @@ export const PartnerCategories = () => {
{/* </div>*/}
{/* </div>*/}
{/* {!item.available && (*/}
{/* <div className="item__disableHover">*/}
{/* <div className="item__disable-hover">*/}
{/* <p>У вас нет персонала из категории</p>*/}
{/* <button>Подобрать</button>*/}
{/* </div>*/}

30
src/pages/PartnerСategories/partnerСategories.scss
View File

@ -1,8 +1,8 @@
.partnerCategories {
background: #F1F1F1;
.partner-categories {
background: #f1f1f1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
font-family: "LabGrotesque", sans-serif;
&__title {
color: #000000;
@ -15,25 +15,20 @@
display: flex;
gap: 10px;
flex-wrap: wrap;
//flex-wrap: wrap;
//margin-top: 25px;
//row-gap: 24px;
//column-gap: 21px;
justify-content: center;
}
&__empty {
font-size: 18px;
font-weight: 500;
margin-top: 20px;
}
.item {
display: flex;
flex-direction: column;
padding: 33px 32px 25px 28px;
width: 32%;
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
transition: all 0.3s ease;
position: relative;
@ -65,12 +60,12 @@
opacity: 0;
}
.item__disableHover {
.item__disable-hover {
opacity: 1;
}
}
&Hover {
&-hover {
position: absolute;
display: flex;
left: 0;
@ -78,7 +73,7 @@
align-items: center;
justify-content: space-between;
padding: 16px 13px 16px 21px;
border: 3px solid #52B709;
border: 3px solid #52b709;
bottom: 0;
border-radius: 12px;
opacity: 0;
@ -97,12 +92,12 @@
width: 140px;
height: 50px;
border: none;
background: #52B709;
background: #52b709;
border-radius: 44px;
font-weight: 500;
font-size: 15px;
line-height: 32px;
color: #FFFFFF;
color: #ffffff;
}
}
}
@ -130,7 +125,7 @@
p {
max-width: 181px;
margin-bottom: 0;
color: #6F6F6F;
color: #6f6f6f;
font-weight: 400;
font-size: 12px;
line-height: 20px;
@ -142,13 +137,12 @@
justify-content: center;
width: 48px;
height: 48px;
background: #DDEEC6;
background: #ddeec6;
border-radius: 50px;
}
}
}
.container {
max-width: 1160px;
margin-top: 23px;

2
src/pages/Profile/Profile.js
View File

@ -81,7 +81,7 @@ export const Profile = () => {
{
path: "profile/treaties",
img: paymentIcon,
title: "Договора и отчетность",
title: "Договоры и отчетность",
description: "Ключевые условия<br/> договора"
},
{

287
src/pages/ProjectTracker/ProjectTracker.js
View File

@ -1,3 +1,4 @@
import moment from "moment";
import React, { useEffect, useRef, useState } from "react";
import { HexColorPicker } from "react-colorful";
import { useDispatch, useSelector } from "react-redux";
@ -44,6 +45,7 @@ import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectCo
import arrow from "assets/icons/arrows/arrowCalendar.png";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import calendarIcon from "assets/icons/calendar.svg";
import category from "assets/icons/category.svg";
import close from "assets/icons/close.png";
import commentsBoard from "assets/icons/commentsBoard.svg";
import del from "assets/icons/delete.svg";
@ -62,6 +64,7 @@ export const ProjectTracker = () => {
const dispatch = useDispatch();
const projectId = useParams();
const currentDate = new Date().getFullYear();
const [openColumnSelect, setOpenColumnSelect] = useState({});
const [selectedTab, setSelectedTab] = useState(0);
const [priorityTask, setPriorityTask] = useState(0);
@ -383,7 +386,7 @@ export const ProjectTracker = () => {
(div) =>
div.classList &&
(div.classList.contains("tasks__head__executor") ||
div.classList.contains("tasks__head__executorDropdown"))
div.classList.contains("tasks__head__executor-dropdown"))
)
) {
setSelectedExecutorOpen(false);
@ -483,8 +486,10 @@ export const ProjectTracker = () => {
<div className="tracker__tabs__content__tasks tasks active__content">
<div className="tasks__head">
<div className="tasks__head__wrapper">
<h5>{projectBoard.name}</h5>
<div className="tasks__head__title">
<img src={category}></img>
<h5>{projectBoard.name}</h5>
</div>
<div className="tasks__head__add">
<BaseButton
onClick={() => {
@ -509,8 +514,8 @@ export const ProjectTracker = () => {
<div
className={
projectBoard.projectUsers?.length == 1
? "onePerson"
: "projectPersons"
? "one-person"
: "project-persons"
}
>
{projectBoard.projectUsers.slice(0, 3).map((person) => {
@ -529,7 +534,7 @@ export const ProjectTracker = () => {
</div>
)}
{projectBoard.projectUsers?.length > 3 && (
<span className="countPersons">
<span className="count-persons">
+{projectBoard.projectUsers?.length - 3}
</span>
)}
@ -541,7 +546,6 @@ export const ProjectTracker = () => {
>
+
</span>
<p>добавить участника</p>
<ListEmployees
active={personListOpen}
@ -568,7 +572,7 @@ export const ProjectTracker = () => {
</div>
</div>
{selectedExecutor ? (
<div className="tasks__head__executorSelected">
<div className="tasks__head__executor-selected">
<p>{selectedExecutor.user.fio}</p>
<img
className="avatar"
@ -600,11 +604,11 @@ export const ProjectTracker = () => {
alt="arrow"
/>
{selectExecutorOpen && (
<div className="tasks__head__executorDropdown">
<div className="tasks__head__executor-dropdown">
{projectBoard.projectUsers.map((user) => {
return (
<div
className="executorDropdown__person"
className="executor-dropdown__person"
key={user.user_id}
onClick={() => executorFilter(user)}
>
@ -635,91 +639,80 @@ export const ProjectTracker = () => {
}}
>
<p>Список тегов</p>
<span>+</span>
<img
className={tags.open ? "open" : ""}
src={arrowDown}
alt="arrow"
/>
</div>
{tags.open && (
<div className="tags__list">
<div
className="addNewTag"
onClick={() =>
setTags((prevState) => ({
...prevState,
add: true
}))
}
>
<p>Добавить новый тег</p>
<span>+</span>
</div>
{!tags.add && !tags.edit && (
<div
className="add-new-tag"
onClick={() =>
setTags((prevState) => ({
...prevState,
add: true
}))
}
>
<p>Добавить новый тег</p>
<span>+</span>
</div>
)}
{!tags.add && !tags.edit && (
<div className="tags__list__created">
{projectBoard.mark.map((tag) => {
return (
<div className="tagItem" key={tag.id}>
<p className="tagItem__description">
{tag.title}
</p>
<div className="tagItem__info">
<span className="tagItem__info__name">
{tag.slug}
</span>
<div className="tag-item" key={tag.id}>
<div className="tag-item__info">
<span
className="tagItem__info__color"
className="tag-item__color"
style={{ background: tag.color }}
/>
<div className="tagItem__info__images">
<img
src={edit}
alt="edit"
onClick={() => {
setTags((prevState) => ({
...prevState,
edit: true
}));
setTagInfo({
description: tag.title,
name: tag.slug,
editMarkId: tag.id
});
setColor(tag.color);
}}
/>
<img
onClick={() => deleteTag(tag.id)}
className="delete"
src={close}
alt="delete"
/>
<div>
<span className="tag-item__info__name">
{tag.slug}
</span>
<p className="tag-item__description">
{tag.title}
</p>
</div>
</div>
<div className="tag-item__images">
<img
src={edit}
alt="edit"
onClick={() => {
setTags((prevState) => ({
...prevState,
edit: true
}));
setTagInfo({
description: tag.title,
name: tag.slug,
editMarkId: tag.id
});
setColor(tag.color);
}}
/>
<img
onClick={() => deleteTag(tag.id)}
className="delete"
src={close}
alt="delete"
/>
</div>
</div>
);
})}
</div>
)}
{(tags.add || tags.edit) && (
<div className="formTag">
<img
src={arrow}
className="arrow"
alt="arrow"
onClick={() => {
setTags((prevState) => ({
...prevState,
add: false,
edit: false
}));
setTagInfo({
description: "",
name: ""
});
setColor("#aabbcc");
}}
/>
<div className="form-tag">
<input
className="formTag__input"
className="form-tag__input"
placeholder="Описание метки"
maxLength="25"
value={tagInfo.description}
@ -731,7 +724,7 @@ export const ProjectTracker = () => {
}
/>
<input
className="formTag__input"
className="form-tag__input"
placeholder="Тег"
value={tagInfo.name}
maxLength="10"
@ -749,12 +742,31 @@ export const ProjectTracker = () => {
}}
className={
tagInfo.name && tagInfo.description
? "formTag__btn"
: "formTag__btn disable"
? "form-tag__btn"
: "form-tag__btn disable"
}
>
{tags.add ? "Добавить" : "Изменить"}
</button>
{(tags.add || tags.edit) && (
<button
className={"form-tag__btn"}
onClick={() => {
setTags((prevState) => ({
...prevState,
add: false,
edit: false
}));
setTagInfo({
description: "",
name: ""
});
setColor("#aabbcc");
}}
>
Отмена
</button>
)}
</div>
)}
</div>
@ -859,8 +871,17 @@ export const ProjectTracker = () => {
</div>
</div>
)}
<div className="tasksContainer">
<div className="tasks-container">
{column.tasks.map((task) => {
const dateDeadline = new Date(task.dead_line);
const currentDate = moment().format(
"YYYY-MM-DD HH:mm:ss"
);
const titleColor =
task.dead_line &&
dateDeadline < new Date(currentDate)
? "red"
: "#1a1919";
return (
<div
key={task.id}
@ -889,7 +910,10 @@ export const ProjectTracker = () => {
}
}}
>
<p className="task__board__item__title">
<p
className="task__board__item__title"
style={{ color: titleColor }}
>
{task.title}
</p>
</div>
@ -899,26 +923,12 @@ export const ProjectTracker = () => {
}}
className="tasks__board__item__description"
></p>
<div className="tasks__board__item__executor">
<img
src={
task.executor?.avatar
? urlForLocal(task.executor?.avatar)
: avatarMok
}
alt="avatar"
/>
<span>
{task.executor?.fio ||
"Исполнитель не назначен"}
</span>
</div>
{Boolean(task.mark.length) && (
<div className="tasks__board__item__tags">
{task.mark.map((tag) => {
return (
<div
className="tagItem"
className="tag-item"
key={tag.id}
style={{ background: tag.color }}
>
@ -928,38 +938,57 @@ export const ProjectTracker = () => {
})}
</div>
)}
{typeof task.execution_priority ===
"number" && (
<div className="tasks__board__item__priority">
<p>Приоритет:</p>
<span
className={
priorityClass[task.execution_priority]
}
>
{priority[task.execution_priority]}
</span>
</div>
)}
{task.dead_line && (
<div className="tasks__board__item__deadLine">
<img src={calendarIcon} alt="calendar" />
<span>
{getCorrectDate(task.dead_line)}
</span>
</div>
)}
<div className="tasks__board__item__container">
{typeof task.execution_priority ===
"number" && (
<div className="tasks__board__item__priority">
<p>⚡</p>
<span
className={
priorityClass[task.execution_priority]
}
>
{priority[task.execution_priority]}
</span>
</div>
)}
{task.dead_line && (
<div className="tasks__board__item__dead-line">
<p>⌛</p>
<span>
{getCorrectDate(task.dead_line)}
</span>
</div>
)}
</div>
<div className="tasks__board__item__info">
<div className="tasks__board__item__info__more">
<div className="tasks__board__item__executor">
<img
src={commentsBoard}
alt="commentsImg"
src={
task.executor?.avatar
? urlForLocal(task.executor?.avatar)
: avatarMok
}
alt="avatar"
/>
<span>{task.comment_count}</span>
<span>
{task.executor?.fio ||
"Исполнитель не назначен"}
</span>
</div>
<div className="tasks__board__item__info__more">
<img src={filesBoard} alt="filesImg" />
<span>{task.file_count}</span>
<div className="tasks__board__item__info__tags">
<div className="tasks__board__item__info__more">
<img
src={commentsBoard}
alt="commentsImg"
/>
<span>{task.comment_count}</span>
</div>
<div className="tasks__board__item__info__more">
<img src={filesBoard} alt="filesImg" />
<span>{task.file_count}</span>
</div>
</div>
</div>
<TrackerSelectColumn
@ -978,17 +1007,17 @@ export const ProjectTracker = () => {
})}
{Boolean(projectBoard?.columns) &&
!Boolean(projectBoard.columns.length) && (
<div className="tasks__board__noItems">
<div className="tasks__board__no-items">
В проекте нет задач.
</div>
)}
{filteredNoTasks && (
<div className="tasks__board__noTasks">
<div className="tasks__board__noTasksInfo">
<img src={trackerNoTasks} alt="noTasks" />
<div className="tasks__board__no-tasks">
<div className="tasks__board__no-tasks-info">
<img src={trackerNoTasks} alt="no-tasks" />
<p>Пока нет подходящих задач</p>
</div>
<p className="tasks__board__noTasksMore">
<p className="tasks__board__no-tasks-more">
Ставьте задачи, следите за прогрессом, ведите учёт
рабочего времени
</p>

9
src/pages/Quiz/QuizPage.js
View File

@ -137,7 +137,8 @@ export const QuizPage = () => {
{/*</div>*/}
<div className="quiz-page__block">Доступные тесты</div>
<div className="quiz-page__cards-test">
{questionnaires.length ? (
{questionnaires &&
questionnaires.length > 0 &&
questionnaires.map((item, index) => (
<CardAvailableTest
description={item.description}
@ -147,9 +148,9 @@ export const QuizPage = () => {
passedTest={item.passedTest}
key={index}
/>
))
) : (
<h1>Анкет нет</h1>
))}
{questionnaires && questionnaires.length === 0 && (
<h1>Нет доступных тестов</h1>
)}
</div>
{/*<div className="block-text">*/}

21
src/pages/Quiz/quiz-page.scss
View File

@ -5,6 +5,7 @@
font-family: "LabGrotesque", sans-serif;
display: flex;
flex-direction: column;
&__container {
max-width: 1160px;
margin: 23px auto 42px auto;
@ -12,9 +13,11 @@
width: 100%;
padding: 0 15px;
}
&__title {
margin: 0 0 39px 0;
}
&__block {
background: #e1fccf;
border-radius: 12px;
@ -25,21 +28,26 @@
padding: 20px;
margin: 0 0 16px 0;
}
&__cards-test {
display: grid;
grid-gap: 29px;
grid-template-columns: 1fr 1fr 1fr;
margin-bottom: 29px;
@media (max-width: 955px) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 668px) {
grid-template-columns: 1fr;
}
}
&__specialization {
margin: 0 0 26px 0;
}
&__categories-items {
display: grid;
grid-gap: 24px;
@ -53,6 +61,7 @@
}
}
}
.interjacent-page-quiz {
background: #f1f1f1;
height: 100%;
@ -60,12 +69,15 @@
font-family: "LabGrotesque", sans-serif;
display: flex;
flex-direction: column;
&__title {
margin: 0 0 39px 0;
}
&__passing-information {
margin: 0 0 32px 0;
}
&__container {
max-width: 1160px;
margin: 23px auto 42px auto;
@ -73,6 +85,7 @@
width: 100%;
padding: 0 15px;
}
&__introduction-items {
display: flex;
flex-wrap: wrap;
@ -88,6 +101,7 @@
font-family: "LabGrotesque", sans-serif;
display: flex;
flex-direction: column;
&__container {
max-width: 1160px;
margin: 23px auto 42px auto;
@ -95,12 +109,15 @@
width: 100%;
padding: 0 15px;
}
&__title {
margin: 0 0 39px 0;
}
&__passing-information {
margin: 0 0 29px 0;
}
&__block-green {
font-weight: 400;
font-size: 18px;
@ -110,6 +127,7 @@
border-radius: 12px 12px 0px 0px;
padding: 20px 51px;
}
&__introduction {
display: flex;
flex-wrap: wrap;
@ -123,6 +141,7 @@
font-family: "LabGrotesque", sans-serif;
display: flex;
flex-direction: column;
&__container {
max-width: 1160px;
margin: 23px auto 42px auto;
@ -130,9 +149,11 @@
width: 100%;
padding: 0 15px;
}
&__title {
margin: 0 0 39px 0;
}
&__report-quiz {
margin: 0 0 28px 0;
}

30
src/pages/RegistrationForCandidate/RegistrationForCandidate.js
View File

@ -51,10 +51,10 @@ export const RegistrationForCandidate = () => {
);
return (
<div className="registrationCandidate">
<div className="registration-candidate">
<AuthHeader />
<div className="container">
<div className="registrationCandidate__start">
<div className="registration-candidate__start">
<h2 className="auth-candidate__start__title">
Хочу в команду <span>IT-специалистов</span>
</h2>
@ -65,28 +65,28 @@ export const RegistrationForCandidate = () => {
Для нас не имеет значения Ваша локация.
</p>
<StepsForCandidate step="шаг 2 - заполните данные" />
<div className="registrationCandidate__formWrapper">
<div className="registrationCandidate__info">
<div className="registrationCandidate__info__category">
<div className="registration-candidate__form-wrapper">
<div className="registration-candidate__info">
<div className="registration-candidate__info__category">
<img src={BackEndImg} alt="img" />
<p>Backend разработчики</p>
</div>
<p className="registrationCandidate__info__skills">
<p className="registration-candidate__info__skills">
Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript
</p>
<Link
to="/auth-candidate"
className="registrationCandidate__info__arrow"
className="registration-candidate__info__arrow"
>
<img src={arrowBtn} alt="img" />
</Link>
</div>
{/* форма регистрации */}
<form
className="registrationCandidate__form"
className="registration-candidate__form"
onSubmit={handleSubmit}
>
<div className="registrationCandidate__form__input">
<div className="registration-candidate__form__input">
<label htmlFor="name">Ваше имя</label>
<input
className={validationErrors.username ? "error" : ""}
@ -98,7 +98,7 @@ export const RegistrationForCandidate = () => {
/>
<span>{validationErrors.username}</span>
</div>
<div className="registrationCandidate__form__input">
<div className="registration-candidate__form__input">
<label htmlFor="summary">Если есть ссылка на резюме</label>
<input
className={validationErrors.summary ? "error" : ""}
@ -110,7 +110,7 @@ export const RegistrationForCandidate = () => {
/>
<span>{validationErrors.summary}</span>
</div>
<div className="registrationCandidate__form__input">
<div className="registration-candidate__form__input">
<label htmlFor="email">Ваш e-mail</label>
<input
className={validationErrors.email ? "error" : ""}
@ -122,7 +122,7 @@ export const RegistrationForCandidate = () => {
/>
<span>{validationErrors.email}</span>
</div>
<div className="registrationCandidate__form__input">
<div className="registration-candidate__form__input">
<label htmlFor="tg">Ваш telegram</label>
<input
className={validationErrors.tg ? "error" : ""}
@ -134,7 +134,7 @@ export const RegistrationForCandidate = () => {
/>
<span>{validationErrors.tg}</span>
</div>
<div className="registrationCandidate__form__input">
<div className="registration-candidate__form__input">
<label htmlFor="password">Придумайте пароль</label>
<input
className={validationErrors.password ? "error" : ""}
@ -146,7 +146,7 @@ export const RegistrationForCandidate = () => {
/>
<span>{validationErrors.password}</span>
</div>
<div className="registrationCandidate__form__input">
<div className="registration-candidate__form__input">
<label htmlFor="secondPassword">Повторите пароль</label>
<input
className={validationErrors.secondPassword ? "error" : ""}
@ -158,7 +158,7 @@ export const RegistrationForCandidate = () => {
/>
<span>{validationErrors.secondPassword}</span>
</div>
<div className="registrationCandidate__form__submit">
<div className="registration-candidate__form__submit">
<button type="submit">Отправить</button>
</div>
</form>

4
src/pages/RegistrationForCandidate/registationForCandidate.scss
View File

@ -1,4 +1,4 @@
.registrationCandidate {
.registration-candidate {
font-family: "LabGrotesque", sans-serif;
position: relative;
background-color: #f1f1f1;
@ -39,7 +39,7 @@
}
}
&__formWrapper {
&__form-wrapper {
position: relative;
margin-top: 200px;
display: flex;

32
src/pages/RegistrationSetting/RegistrationSetting.js
View File

@ -71,33 +71,33 @@ export const RegistrationSetting = () => {
const [step, setStep] = useState(1);
return (
<div className="registrationSetting">
<div className="registration-setting">
<AuthHeader />
<SideBar />
<div className="registrationSetting__content">
<div className="registration-setting__content">
<div className="container">
<h1 className="registrationSetting__title">
<h1 className="registration-setting__title">
Добро пожаловать{" "}
<span>
в ITGuild
<img src={arrowInfo} alt="arrow" />
</span>
</h1>
<div className="registrationSetting__question questionBlock">
<div className="questionBlock__head">
<span className="questionBlock__suptitle">
<div className="registration-setting__question question-block">
<div className="question-block__head">
<span className="question-block__suptitle">
Эти ответы помогут сформировать кабинет
</span>
<div className="questionBlock__steps">
<div className="question-block__steps">
<span className="active" />
<span className={step >= 2 ? "active" : ""} />
<span className={step >= 3 ? "active" : ""} />
</div>
</div>
<h3 className="questionBlock__question">
<h3 className="question-block__question">
Со сколькими людьми ты будешь работать?
</h3>
<div className="questionBlock__answers">
<div className="question-block__answers">
{questions.countPeople.map((item, index) => {
return (
<button
@ -118,15 +118,15 @@ export const RegistrationSetting = () => {
})}
</div>
<img
className="registrationSetting__question__img"
className="registration-setting__question__img"
src={registrationImg}
alt="img"
/>
</div>
{step >= 2 && (
<div className="registrationSetting__question questionBlock">
<h3 className="questionBlock__question">Какая у тебя роль?</h3>
<div className="questionBlock__answers">
<div className="registration-setting__question question-block">
<h3 className="question-block__question">Какая у тебя роль?</h3>
<div className="question-block__answers">
{questions.role.map((item, index) => {
return (
<button
@ -147,7 +147,7 @@ export const RegistrationSetting = () => {
</div>
)}
{step >= 3 && (
<div className="registrationSetting__environment environment">
<div className="registration-setting__environment environment">
<span className="environment__suptitle">
Организуй комфортную среду для продуктивности
</span>
@ -191,7 +191,7 @@ export const RegistrationSetting = () => {
);
})}
</div>
<button className="registrationSetting__continue registrationSetting__done">
<button className="registration-setting__continue registration-setting__done">
Готово
</button>
</div>
@ -206,7 +206,7 @@ export const RegistrationSetting = () => {
setStep((prevState) => prevState + 1);
}
}}
className="registrationSetting__continue"
className="registration-setting__continue"
>
Продолжить
</button>

31
src/pages/RegistrationSetting/registrationSetting.scss
View File

@ -1,4 +1,4 @@
.registrationSetting {
.registration-setting {
&__content {
font-family: "LabGrotesque", sans-serif;
background-color: #f1f1f1;
@ -21,7 +21,7 @@
margin-bottom: 46px;
color: #000000;
span {
color: #52B709;
color: #52b709;
position: relative;
img {
position: absolute;
@ -48,7 +48,7 @@
}
&__question {
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
padding: 46.5px 75.5px 38px;
position: relative;
@ -60,17 +60,18 @@
}
}
.questionBlock {
.question-block {
display: flex;
flex-direction: column;
margin-bottom: 18px;
&__head {
display: flex;
margin-bottom: 33px;
}
&__suptitle {
color: #6F6F6F;
color: #6f6f6f;
font-size: 14px;
margin-right: 70px;
}
@ -83,12 +84,12 @@
span {
width: 75px;
height: 6.5px;
background: #B0BABF;
background: #b0babf;
border-radius: 77px;
}
.active {
background: #6F6F6F;
background: #6f6f6f;
}
}
@ -105,14 +106,14 @@
button {
border-radius: 12px;
border: 1px solid #8DC63F;
border: 1px solid #8dc63f;
padding: 4px 30px;
line-height: 32px;
font-size: 15px;
}
.active {
background: #1458DD;
background: #1458dd;
color: whitesmoke;
font-weight: 500;
border: none;
@ -123,13 +124,13 @@
&__environment {
margin-top: 13px;
padding: 32px 20px 42px 44px;
background: #E2EBEF;
background: #e2ebef;
border-radius: 12px;
.environment {
&__suptitle {
font-size: 14px;
color: #6F6F6F;
color: #6f6f6f;
margin-left: 31px;
}
@ -181,7 +182,7 @@
column-gap: 22.4px;
p {
color: #6F6F6F;
color: #6f6f6f;
font-size: 12px;
max-width: 189px;
}
@ -190,7 +191,7 @@
width: 48px;
height: 48px;
border-radius: 50px;
background: #DDEEC6;
background: #ddeec6;
margin-left: auto;
display: flex;
align-items: center;
@ -204,12 +205,12 @@
.item--active {
opacity: 1;
border: 2px solid #1458DD;
border: 2px solid #1458dd;
}
&__continue {
margin: 6px 0 0 75.5px;
background-color: #52B709;
background-color: #52b709;
width: 174px;
height: 46px;
color: white;

32
src/pages/Summary/Summary.js
View File

@ -95,7 +95,7 @@ export const Summary = () => {
<p>Вернуться</p>
</div>
)}
<div className={openGit ? "summary__info openGit" : "summary__info"}>
<div className={openGit ? "summary__info open-git" : "summary__info"}>
<div className="summary__person">
<img
src={
@ -136,7 +136,7 @@ export const Summary = () => {
</div>
<div className="skills__section__items">
{editSkills ? (
<div className="editSkills">
<div className="edit-skills">
{selectedSkills &&
selectedSkills.map((skill) => {
return (
@ -156,9 +156,9 @@ export const Summary = () => {
</span>
);
})}
<div className="selectSkills">
<div className="select-skills">
<div
className="selectSkills__name"
className="select-skills__name"
onClick={() => setSelectSkillsOpen(!selectSkillsOpen)}
>
Выберите скилл
@ -168,7 +168,7 @@ export const Summary = () => {
/>
</div>
{selectSkillsOpen && (
<div className="selectSkills__dropDown">
<div className="select-skills__dropDown">
{skillsList.map((skill) => {
return (
<p
@ -179,7 +179,7 @@ export const Summary = () => {
])
}
key={skill.id}
className="selectSkills__item"
className="select-skills__item"
>
{skill.name}
</p>
@ -253,12 +253,12 @@ export const Summary = () => {
</div>
)}
{openGit && (
<div className="summary__sectionGit">
<div className="summary__section-git">
<div className="summary__sections__head">
<h3>Ваши репозитории</h3>
<button>Редактировать</button>
</div>
<div className="summary__sectionGitItems">
<div className="summary__section-git-items">
{Boolean(gitInfo.length) &&
gitInfo.map((itemGit) => {
return (
@ -267,23 +267,23 @@ export const Summary = () => {
target="_blank"
rel="noreferrer"
key={itemGit.id}
className="summary__sectionGitItem gitItem"
className="summary__section-git-item git-item"
>
<div className="gitItem__info">
<div className="gitItem__info__about">
<div className="git-item__info">
<div className="git-item__info__about">
<img src={gitImgItem} alt="gitImg" />
<div className="gitItem__info__name">
<div className="git-item__info__name">
<h4>{itemGit.title}</h4>
<p>{itemGit.description}</p>
</div>
</div>
<div className="gitItem__info__specification">
<span className="gitItem__lineSkill" />
<div className="git-item__info__specification">
<span className="git-item__lineSkill" />
<p>{itemGit.main_stack}</p>
</div>
</div>
<a
className="gitItem__link"
className="git-item__link"
href={itemGit.link}
target="_blank"
rel="noreferrer"
@ -294,7 +294,7 @@ export const Summary = () => {
);
})}
{!Boolean(gitInfo.length) && (
<p className="noGitItems">Нет актуальных проектов</p>
<p className="no-git-items">Нет актуальных проектов</p>
)}
</div>
</div>

14
src/pages/Summary/summary.scss
View File

@ -86,7 +86,7 @@
}
}
.openGit {
.open-git {
.summary__name {
max-width: none;
@ -250,7 +250,7 @@
}
}
.editSkills {
.edit-skills {
display: flex;
flex-wrap: wrap;
gap: 14px;
@ -273,7 +273,7 @@
}
}
.selectSkills {
.select-skills {
position: relative;
display: flex;
flex-direction: column;
@ -384,10 +384,10 @@
padding: 15px 35px 15px 50px !important;
}
&__sectionGit {
&__section-git {
margin-top: 25px;
&Items {
&-items {
margin-top: 25px;
display: flex;
flex-wrap: wrap;
@ -395,7 +395,7 @@
column-gap: 25px;
justify-content: space-between;
.noGitItems {
.no-git-items {
width: 100%;
font-size: 20px;
background: #ffffff;
@ -405,7 +405,7 @@
font-weight: 600;
}
.gitItem {
.git-item {
width: 48%;
display: flex;
align-items: center;

59
src/pages/Tracker/Tracker.jsx
View File

@ -74,14 +74,20 @@ export const Tracker = () => {
});
apiRequest(
`/task/get-user-tasks?user_id=${localStorage.getItem("id")}&expand=timers`
).then((el) => {
const allTasks = el ? el.filter((item) => item.status !== 0) : [];
const completedTasks = el ? el.filter((item) => item.status === 0) : [];
setAllTasks(allTasks);
setFilteredAllTasks(allTasks);
setAllCompletedTasks(completedTasks);
setFilterCompleteTasks(completedTasks);
});
)
.then((el) => {
const allTasks = el?.length
? el.filter((item) => item.status !== 0)
: [];
const completedTasks = el?.length
? el.filter((item) => item.status === 0)
: [];
setAllTasks(allTasks);
setFilteredAllTasks(allTasks);
setAllCompletedTasks(completedTasks);
setFilterCompleteTasks(completedTasks);
})
.catch((err) => console.error(err));
}, []);
const toggleTabs = (index) => {
@ -211,8 +217,7 @@ export const Tracker = () => {
>
<img src={addProjectImg} alt="#"></img>
<p className="create-project-btn__text">
Ставьте задачи, следите за прогрессом, ведите учёт
рабочего времени
Добавить проект
</p>
</BaseButton>
</div>
@ -236,12 +241,12 @@ export const Tracker = () => {
<div
className={
tab === 2
? "tracker__tabs__content__allTasks taskList tasks active__content"
? "tracker__tabs__content__all-tasks task-list tasks active__content"
: "tracker__tabs__content__projects"
}
>
<div className="taskList__head">
<div className="taskList__tasks-period">
<div className="task-list__head">
<div className="task-list__tasks-period">
<div className="month-period">
<p>
{25} - {35}
@ -260,7 +265,7 @@ export const Tracker = () => {
</div>
</div>
<div className="taskList__head__search">
<div className="task-list__head__search">
<img src={search} alt="search" />
<input
type="text"
@ -269,12 +274,12 @@ export const Tracker = () => {
/>
</div>
<div className="taskList__filters">
<BaseButton styles={"taskList__filters-filter"}>
<div className="task-list__filters">
<BaseButton styles={"task-list__filters-filter"}>
<img src={filterIcon} alt="#" />
<p>Фильтр</p>
</BaseButton>
<BaseButton styles={"taskList__filters-clear"}>
<BaseButton styles={"task-list__filters-clear"}>
<p> Очистить фильтр</p>
</BaseButton>
</div>
@ -288,18 +293,18 @@ export const Tracker = () => {
projects={projects}
/>
<div className="taskList__time">
<div className="taskList__time-compited">
<div className="task-list__time">
<div className="task-list__time-compited">
<h4>Учет моего рабочего времени за день</h4>
<h3>
Задач выполнено: <p>{2}</p>
</h3>
</div>
<div className="taskList__time-all">
<div className="task-list__time-all">
<h3>Общее время:</h3>
<p>{"4 ч 34 мин"}</p>
</div>
<div className="taskList__time-status">
<div className="task-list__time-status">
<div>
<img src={statusTimeTask} alt="#" />
<p>Сверка пройдена</p>
@ -311,7 +316,7 @@ export const Tracker = () => {
</div>
</div>
<div className="taskList__end">
<div className="task-list__end">
<BaseButton styles={"close-day"}>
Закрыть сегодняшний день
</BaseButton>
@ -381,23 +386,23 @@ export const Tracker = () => {
)}`}
</p>
</div>
<div className="archive__tasksWrapper">
<div className="archive__tasks-wrapper">
{Boolean(
projects?.filter((project) => project.status === 10).length
) ? (
projects?.map((project, index) => {
return project.status === 10 ? (
<div
className="archive__completeTask-project"
className="archive__complete-task-project"
key={index}
>
<div className="archive__completeTask__description">
<div className="archive__complete-task__description">
<p className="project-title-archive">
{project.name}
</p>
<p className="date">{project.date}</p>
</div>
<div className="archive__completeTask__creator">
<div className="archive__complete-task__creator">
<img src={mockAvatar} alt="#" />
<div className="creator-title">
<h4>Создатель проекта:</h4>
@ -410,7 +415,7 @@ export const Tracker = () => {
);
})
) : (
<div className="archive__noItem-project">
<div className="archive__no-item-project">
<img src={archiveTrackerProjects} alt="#" />
<p>В архиве проектов нет</p>
</div>

152
src/pages/Tracker/tracker.scss
View File

@ -171,7 +171,7 @@
.create-project-btn {
width: 300px;
height: 113px;
height: 83px;
border-radius: 12px;
background: #ecf8e5;
color: #000000;
@ -219,6 +219,15 @@
border-bottom: 1px solid #dde2e4;
padding: 0 35px 15px;
&__title {
display: flex;
align-items: center;
column-gap: 5px;
img {
height: 22px;
}
}
@media (max-width: 1000px) {
padding: 0 15px 15px;
}
@ -250,7 +259,7 @@
font-size: 22px;
line-height: 32px;
margin-bottom: 0;
max-width: 21%;
max-width: 160px;
word-break: break-all;
overflow: hidden;
white-space: nowrap;
@ -366,7 +375,7 @@
border-color: gray;
}
&Selected {
&-selected {
display: flex;
align-items: center;
border-radius: 8px;
@ -427,7 +436,7 @@
transform: rotate(180deg);
}
&Dropdown {
&-dropdown {
position: absolute;
top: 33px;
left: 0;
@ -440,7 +449,7 @@
row-gap: 7px;
width: 100%;
.executorDropdown__person {
.executor-dropdown__person {
display: flex;
justify-content: space-between;
align-items: center;
@ -456,8 +465,8 @@
}
img {
width: 15px;
height: 15px;
width: 20px;
height: 20px;
}
&:hover {
@ -502,6 +511,13 @@
&__tags {
position: relative;
img {
transition: all 0.15s ease;
margin-left: 5px;
}
.open {
transform: rotate(180deg);
}
.tags {
&__add {
display: flex;
@ -538,16 +554,19 @@
}
&__list {
position: absolute;
border-radius: 2px;
border-radius: 8px;
background: #d9d9d9;
z-index: 8;
// padding: 0 8px 10px;
top: 30px;
width: 265px;
left: -35px;
width: 216px;
display: flex;
flex-direction: column;
@media (max-width: 900px) {
left: 0px;
}
.close {
cursor: pointer;
width: 20px;
@ -564,15 +583,16 @@
margin-top: 8px;
padding: 0 8px 8px;
.tagItem {
.tag-item {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
column-gap: 5px;
padding: 0px 8px;
border-radius: 8px;
height: 50px;
max-height: 50px;
height: 40px;
max-height: 40px;
background: #fff;
&__description {
@ -585,6 +605,29 @@
text-overflow: ellipsis;
}
&__color {
width: 22.25px;
height: 23.217px;
border-radius: 8px;
}
&__images {
display: flex;
flex-direction: column-reverse;
row-gap: 3px;
img {
height: 14px;
width: 14px;
cursor: pointer;
}
.delete {
width: 16px;
height: 16px;
}
}
&__info {
display: flex;
align-items: center;
@ -594,41 +637,21 @@
font-size: 12px;
font-weight: 600;
}
&__color {
width: 22.25px;
height: 23.217px;
border-radius: 8px;
}
&__images {
display: flex;
flex-direction: column-reverse;
row-gap: 6px;
img {
cursor: pointer;
}
.delete {
width: 14px;
height: 14px;
}
}
}
}
}
.addNewTag {
.add-new-tag {
display: flex;
align-items: center;
column-gap: 15px;
border-radius: 8px;
background: #252c32;
color: white;
height: 42px;
background: white;
color: #252c32;
height: 40px;
cursor: pointer;
justify-content: center;
margin: 8px 8px 0px;
p {
font-size: 15px;
@ -648,7 +671,7 @@
}
}
.formTag {
.form-tag {
display: flex;
flex-direction: column;
padding: 8px;
@ -676,7 +699,7 @@
border: none;
background: #252c32;
color: whitesmoke;
margin: 10px auto 0;
margin: 0 auto 0;
border-radius: 10px;
font-size: 15px;
padding: 5px 12px;
@ -749,7 +772,7 @@
transform: scaleX(1);
}
.tasksContainer {
.tasks-container {
display: flex;
flex-direction: column;
row-gap: 8px;
@ -785,7 +808,7 @@
&__item {
width: 328px;
padding: 6px 10px;
padding: 6px 10px 8px 10px;
position: relative;
box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06),
0px 5px 3px -2px rgba(0, 0, 0, 0.02);
@ -824,7 +847,7 @@
color: #1a1919;
font-weight: 500;
font-size: 16px;
line-height: 24px;
line-height: 20px;
margin-bottom: 0;
max-height: 100px;
overflow: hidden;
@ -860,13 +883,24 @@
-webkit-box-orient: vertical;
}
&__container {
display: flex;
justify-content: space-between;
}
&__info {
display: flex;
column-gap: 10px;
align-items: center;
justify-content: space-between;
pointer-events: none;
margin-top: 5px;
&__tags {
display: flex;
column-gap: 5px;
}
&__more {
cursor: pointer;
display: flex;
@ -921,7 +955,7 @@
}
}
&__deadLine {
&__dead-line {
display: flex;
align-items: center;
column-gap: 5px;
@ -970,7 +1004,7 @@
row-gap: 3px;
margin: 3px 0;
.tagItem {
.tag-item {
padding: 3px 10px;
border-radius: 10px;
color: white;
@ -979,7 +1013,7 @@
}
}
.openItems {
.open-items {
cursor: pointer;
border-radius: 44px;
width: 33px;
@ -994,11 +1028,11 @@
color: white;
}
.moreItems {
.more-items {
background: #8bcc60;
}
.lessItems {
.less-items {
background: #f92828;
}
@ -1037,7 +1071,7 @@
}
}
&__noItems {
&__no-items {
font-weight: 500;
font-size: 25px;
transform: scaleY(-1);
@ -1047,12 +1081,12 @@
}
}
&__noTasks {
&__no-tasks {
display: flex;
flex-direction: column;
transform: scaleY(-1);
&Info {
&-info {
display: flex;
align-items: center;
margin-bottom: 15px;
@ -1069,7 +1103,7 @@
}
}
&More {
&-more {
font-size: 14px;
line-height: 22px;
}
@ -1139,14 +1173,14 @@
display: flex;
}
&__allTasks {
&__all-tasks {
max-width: 1160px;
padding: 0 20px;
margin: 0 auto;
display: flex;
flex-direction: column;
.taskList {
.task-list {
&__head {
display: flex;
justify-content: space-between;
@ -1549,7 +1583,7 @@
}
}
&__tasksWrapper {
&__tasks-wrapper {
margin-top: 20px;
display: flex;
flex-direction: column;
@ -1581,7 +1615,7 @@
}
}
&__completeTask {
&__complete-task {
display: flex;
justify-content: space-between;
align-items: center;
@ -1599,7 +1633,7 @@
color: #111112;
}
.completeTask__title {
.complete-task__title {
font-weight: 700;
font-size: 18px;
line-height: 32px;
@ -1858,7 +1892,7 @@
}
}
&__noItem {
&__no-item {
padding: 23px 0 19px;
color: #6f6f6f;

40
src/pages/TrackerIntro/TrackerIntro.js
View File

@ -15,64 +15,64 @@ import "./trackerIntro.scss";
export const TrackerIntro = () => {
return (
<div className="trackerIntro">
<div className="tracker-intro">
<AuthHeader />
<SideBar />
<div className="trackerIntro__content">
<div className="tracker-intro__content">
<div className="container">
<div className="trackerIntro__intro">
<div className="trackerIntro__intro__info">
<div className="trackerIntro__intro__suptitle">
<div className="tracker-intro__intro">
<div className="tracker-intro__intro__info">
<div className="tracker-intro__intro__suptitle">
<img src={introInfo} alt="img" />
<span>Подключись и пользуйся бесплатно!</span>
</div>
<h1 className="trackerIntro__intro__title">
<h1 className="tracker-intro__intro__title">
Сервис для планирования и работы
<span> для Вашей команды</span>
<img src={arrowInfo} alt="img" />
</h1>
<p className="trackerIntro__intro__subtitle">
<p className="tracker-intro__intro__subtitle">
Российский сервис для совместной работы команд. Все процессы
компании в одном месте: проекты, задачи, цели, сотрудники,
документы, переписки, отчеты
</p>
<NavLink to="/tracker-auth" className="trackerIntro__btn">
<NavLink to="/tracker-auth" className="tracker-intro__btn">
Начать работу
</NavLink>
</div>
<img
className="trackerIntro__intro__img"
className="tracker-intro__intro__img"
src={introImg}
alt="img"
/>
</div>
</div>
<div className="trackerIntro__board">
<div className="trackerIntro__boardImg">
<div className="tracker-intro__board">
<div className="tracker-intro__board-img">
<img className="board" src={trackerBoard} alt="board" />
<img className="heard" src={trackerHeard} alt="heard" />
</div>
<div className="trackerIntro__board__info">
<div className="tracker-intro__board__info">
<p>
Управление большим количеством проектов и гибкая настройка
структуры под любые процессы
</p>
<NavLink to="/tracker-registration" className="trackerIntro__btn">
<NavLink to="/tracker-registration" className="tracker-intro__btn">
Начать работу
</NavLink>
</div>
</div>
<div className="container">
<div className="trackerIntro__info">
<h2 className="trackerIntro__info__title">
<div className="tracker-intro__info">
<h2 className="tracker-intro__info__title">
Используйте сервис, который позаботится о персональных данных
вашей компании и<br />
<span> не уйдет с рынка.</span>
<img src={arrowInfo} alt="img" />
</h2>
<div className="trackerIntro__info__items">
<div className="trackerIntro__info__item">
<div className="trackerIntro__info__itemHead">
<div className="tracker-intro__info__items">
<div className="tracker-intro__info__item">
<div className="tracker-intro__info__item-head">
<span>+</span>
<h3>
Настраиваемые
@ -85,8 +85,8 @@ export const TrackerIntro = () => {
работу вашей команды.
</p>
</div>
<div className="trackerIntro__info__item">
<div className="trackerIntro__info__itemHead">
<div className="tracker-intro__info__item">
<div className="tracker-intro__info__item-head">
<span>+</span>
<h3>
Учет

18
src/pages/TrackerIntro/trackerIntro.scss
View File

@ -1,4 +1,4 @@
.trackerIntro {
.tracker-intro {
&__content {
font-family: "LabGrotesque", sans-serif;
background-color: #f1f1f1;
@ -14,7 +14,7 @@
}
&__intro {
display: flex;
display: flex;
justify-content: space-between;
align-items: end;
padding: 50px 0 75px;
@ -73,7 +73,7 @@
margin-bottom: 75px;
span {
color: #52B709;
color: #52b709;
}
img {
@ -137,7 +137,7 @@
}
&__btn {
background: #52B709;
background: #52b709;
border-radius: 44px;
padding: 9px 48px;
color: white;
@ -160,7 +160,7 @@
align-items: end;
margin: 0 auto 115px;
&Img {
&-img {
position: relative;
margin-bottom: 34px;
}
@ -242,7 +242,7 @@
margin-bottom: 100px;
span {
color: #52B709;
color: #52b709;
}
img {
@ -281,20 +281,20 @@
max-width: none;
}
&Head {
&-head {
display: flex;
align-items: center;
margin-bottom: 45px;
span {
background: #52B709;
background: #52b709;
border-radius: 44px;
display: flex;
align-items: center;
justify-content: center;
width: 71px;
height: 71px;
color: #FFFFFF;
color: #ffffff;
font-size: 30px;
@media (max-width: 650px) {

8
src/pages/TrackerRegistration/TrackerRegistration.js
View File

@ -66,7 +66,7 @@ export const TrackerRegistration = () => {
</h1>
<div className="tracker-registration__form">
<div className="tracker-registration__form__inputs">
<div className="tracker-registration__inputContainer">
<div className="tracker-registration__input-container">
<h5>Ваше имя</h5>
<input
placeholder="Имя"
@ -77,7 +77,7 @@ export const TrackerRegistration = () => {
/>
<span>{validationErrors.username}</span>
</div>
<div className="tracker-registration__inputContainer">
<div className="tracker-registration__input-container">
<h5>Ваш e-mail</h5>
<input
onChange={handleChange}
@ -89,7 +89,7 @@ export const TrackerRegistration = () => {
/>
<span>{validationErrors.email}</span>
</div>
<div className="tracker-registration__inputContainer">
<div className="tracker-registration__input-container">
<h5>Придумайте пароль</h5>
<input
placeholder="Пароль"
@ -101,7 +101,7 @@ export const TrackerRegistration = () => {
/>
<span>{validationErrors.password}</span>
</div>
<div className="tracker-registration__inputContainer">
<div className="tracker-registration__input-container">
<h5>Повторите пароль</h5>
<input
placeholder="Повторите пароль"

10
src/pages/TrackerRegistration/trackerRegistration.scss
View File

@ -18,7 +18,7 @@
&__form {
position: relative;
border-radius: 12px;
background: #FFF;
background: #fff;
padding: 20px;
@media (max-width: 1000px) {
@ -46,10 +46,10 @@
button {
border-radius: 44px;
padding: 9px 39px;
background: #52B709;
background: #52b709;
font-weight: 500;
font-size: 18px;
color: #FFF;
color: #fff;
border: none;
margin-right: 165px;
}
@ -99,7 +99,7 @@
}
}
}
&__inputContainer {
&__input-container {
display: flex;
flex-direction: column;
max-width: 300px;
@ -119,7 +119,7 @@
input {
outline: none;
padding: 8px 12px 9px;
background-color: #EFF2F7;
background-color: #eff2f7;
border-radius: 8px;
margin: 10px 0;
border: none;

42
src/pages/ViewReport/ViewReport.jsx
View File

@ -101,11 +101,11 @@ export const ViewReport = () => {
}, []);
return (
<div className="viewReport">
<div className="view-report">
<ProfileHeader />
<Navigation />
<div className="container">
<div className="viewReport__info">
<div className="view-report__info">
{localStorage.getItem("role_status") !== "18" && (
<>
<ProfileBreadcrumbs
@ -115,13 +115,13 @@ export const ViewReport = () => {
{ name: "Просмотр отчета за день", link: "/profile/view" }
]}
/>
<h2 className="viewReport__title">
<h2 className="view-report__title">
Ваши отчеты - <span>просмотр отчета за день</span>
</h2>
</>
)}
<Link
className="viewReport__back"
className="view-report__back"
to={
localStorage.getItem("role_status") === "18"
? `/profile/employees/report/${params.id}`
@ -132,14 +132,14 @@ export const ViewReport = () => {
<p>Вернуться</p>
</Link>
{localStorage.getItem("role_status") !== "18" && (
<div className="viewReport__bar">
<div className="view-report__bar">
<Link
to="/profile/calendar/report"
onClick={() => dispatch(setEditReport(reportInfo))}
className={
taskText.length
? "viewReport__bar__edit"
: "viewReport__bar__edit disable"
? "view-report__bar__edit"
: "view-report__bar__edit disable"
}
>
Редактировать
@ -151,24 +151,24 @@ export const ViewReport = () => {
onClick={deleteReport}
className={
taskText.length
? "viewReport__bar__delete"
: "viewReport__bar__delete disable"
? "view-report__bar__delete"
: "view-report__bar__delete disable"
}
>
Удалить отчет
Удалить
</button>
)}
</div>
)}
</div>
<div className="viewReport__switch-date">
<div className="view-report__switch-date">
<div onClick={() => previousDay()}>
<Link
to={`/profile/calendar/view/${getCreatedDate(
previousReportDay
)}/${params.id}`}
>
<div className="viewReport__switch-date__prev switch-date">
<div className="view-report__switch-date__prev switch-date">
<img src={arrowSwitchDate} alt="arrow" />
</div>
</Link>
@ -187,7 +187,7 @@ export const ViewReport = () => {
params.id
}`}
>
<div className={`viewReport__switch-date__next switch-date`}>
<div className={`view-report__switch-date__next switch-date`}>
<img src={arrowSwitchDate} alt="arrow" />
</div>
</Link>
@ -195,13 +195,13 @@ export const ViewReport = () => {
</div>
{loader && <Loader width={75} height={75} />}
{Boolean(taskText.length) && (
<div className="viewReport__content">
<div className="view-report__content">
<div className="table__container">
<table className="viewReport__done">
<table className="view-report__done">
<thead>
<tr>
<th>
<p>Какие задачи выполнены?</p>
<p>Выполненные задачи</p>
</th>
<th>
<p>Время</p>
@ -219,7 +219,7 @@ export const ViewReport = () => {
</p>
</td>
<td>
<div className="viewReport__done__hours__item">
<div className="view-report__done__hours__item">
<span>{Math.floor(task.hours)}</span>
<p className="hours">
{hourOfNum(Math.floor(task.hours))}
@ -241,15 +241,15 @@ export const ViewReport = () => {
</table>
</div>
{Boolean(difficulties.length) && (
<div className="viewReport__item">
<h3>Какие сложности возникли?</h3>
<div className="view-report__item">
<h3>Возникшие сложности</h3>
{difficulties.map((item, index) => {
return <p key={index}>{item}</p>;
})}
</div>
)}
{Boolean(tomorrowTask.length) && (
<div className="viewReport__item">
<div className="view-report__item">
<h3>Что планируется сделать завтра?</h3>
{tomorrowTask.map((item, index) => {
return <p key={index}>{item}</p>;
@ -259,7 +259,7 @@ export const ViewReport = () => {
</div>
)}
{!Boolean(taskText.length) && !loader && (
<div className="viewReport__noTask">
<div className="view-report__no-task">
{localStorage.getItem("role_status") === "4" ? (
<p>
В этот день вы <span>не заполняли</span> отчет

45
src/pages/ViewReport/viewReport.scss
View File

@ -1,8 +1,8 @@
.viewReport {
background: #F1F1F1;
.view-report {
background: #f1f1f1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
font-family: "LabGrotesque", sans-serif;
.container {
max-width: 1160px;
@ -25,7 +25,7 @@
line-height: 32px;
color: #000000;
span {
color: #52B709;
color: #52b709;
}
@media (max-width: 500px) {
@ -56,11 +56,11 @@
&__bar {
display: flex;
margin-top: 20px;
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
padding: 20px 33px;
align-items: center;
column-gap: 60px;
column-gap: 20px;
height: 72px;
justify-content: space-between;
@ -78,7 +78,7 @@
font-weight: 500;
line-height: 32px;
padding: 8px 24px;
background: #E1FCCF;
background: #e1fccf;
border-radius: 44px;
border: none;
@ -88,9 +88,14 @@
}
&__delete {
background: white;
border-radius: 12px;
border: 1px dashed #8BCC60;
color: #000000;
font-size: 15px;
font-weight: 500;
line-height: 32px;
padding: 8px 24px;
background: whitesmoke;
border-radius: 44px;
border: none;
}
.disable {
@ -133,7 +138,7 @@
.switch-date {
width: 48px;
height: 48px;
background: #8DC63F;
background: #8dc63f;
border-radius: 50px;
display: flex;
justify-content: center;
@ -178,7 +183,6 @@
border-collapse: separate;
border-spacing: 28px 0;
@media (max-width: 1205px) {
display: grid;
border-collapse: collapse;
@ -287,7 +291,7 @@
&__hours {
width: 25%;
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
padding: 32px 40px 18px;
display: flex;
@ -332,7 +336,7 @@
span {
max-width: 48px;
height: 48px;
background: #8DC63F;
background: #8dc63f;
border-radius: 50px;
display: flex;
align-items: center;
@ -344,9 +348,8 @@
width: 100%;
@media (max-width: 900px) {
max-width: 28px;
height: 28px;
font-size: 15px;
max-width: 40px;
height: 40px;
}
}
@ -369,7 +372,7 @@
display: flex;
flex-direction: column;
row-gap: 10px;
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
margin: 20px 0;
padding: 15px;
@ -399,9 +402,9 @@
margin-bottom: 0;
}
&__noTask {
&__no-task {
padding: 25px 10px;
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
text-align: center;
@ -416,7 +419,7 @@
}
span {
color: #8BCC60;
color: #8bcc60;
font-weight: 500;
}
}