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
commit f1a21a0821
98 changed files with 1071 additions and 931 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.jsx
View File

@ -9,14 +9,14 @@ const AllTaskTableItem = ({ task, projects }) => {
e.target?.classList.toggle("open-desc-item"); e.target?.classList.toggle("open-desc-item");
e.target e.target
.closest("td") .closest("td")
?.querySelector(".taskList__table__name-project") ?.querySelector(".task-list__table__name-project")
.classList.toggle("hide-desc"); .classList.toggle("hide-desc");
} }
return ( return (
<tr key={task.id}> <tr key={task.id}>
<td> <td>
<div className="taskList__table__title-task"> <div className="task-list__table__title-task">
<p>{task.title}</p> <p>{task.title}</p>
<img <img
@ -27,7 +27,7 @@ const AllTaskTableItem = ({ task, projects }) => {
}} }}
/> />
</div> </div>
<div className="taskList__table__name-project hide-desc"> <div className="task-list__table__name-project hide-desc">
<h4>Проект:</h4> <h4>Проект:</h4>
<p> <p>
{projects?.map((project) => { {projects?.map((project) => {

2
src/components/AllTaskTableTracker/AllTaskTableItem/allTaskTableItem.scss
View File

@ -3,7 +3,7 @@
transform: rotate(45deg) !important; transform: rotate(45deg) !important;
} }
.taskList { .task-list {
&__table { &__table {
margin-top: 20px; margin-top: 20px;
font-size: 14px; font-size: 14px;

2
src/components/AllTaskTableTracker/AllTaskTableTracker.jsx
View File

@ -34,7 +34,7 @@ const AllTaskTableTracker = ({ filteredAllTasks, projects, loader }) => {
return ( return (
<> <>
<table className="taskList__table"> <table className="task-list__table">
<thead> <thead>
<tr> <tr>
<th>Задача</th> <th>Задача</th>

2
src/components/ArchiveTableTracker/ArchiveTableTracker.jsx
View File

@ -26,7 +26,7 @@ const ArchiveTableTracker = ({ filterCompleteTasks, loader }) => {
) : ( ) : (
<tr> <tr>
<td> <td>
<div className="archive__noItem"> <div className="archive__no-item">
<p>В данном месяце у вас не было задач</p> <p>В данном месяце у вас не было задач</p>
</div> </div>
</td> </td>

8
src/components/ArchiveTableTracker/ArchiveTasksItem/ArchiveTasksItem.jsx
View File

@ -7,8 +7,8 @@ import "./archiveTasksItem.scss";
const ArchiveTasksItem = ({ task, index }) => { const ArchiveTasksItem = ({ task, index }) => {
return ( return (
<tr key={index}> <tr key={index}>
<td className="archive__completeTask__description"> <td className="archive__complete-task__description">
<p className="completeTask__title">{task.title}</p> <p className="complete-task__title">{task.title}</p>
{/*<p*/} {/*<p*/}
{/* className="date"*/} {/* className="date"*/}
{/* dangerouslySetInnerHTML={{*/} {/* dangerouslySetInnerHTML={{*/}
@ -16,7 +16,7 @@ const ArchiveTasksItem = ({ task, index }) => {
{/* }}*/} {/* }}*/}
{/*/>*/} {/*/>*/}
</td> </td>
<td className="archive__completeTask__time"> <td className="archive__complete-task__time">
<p> <p>
{new Date( {new Date(
task.timers.reduce((acc, cur) => acc + cur.deltaSeconds, 0) * 1000 task.timers.reduce((acc, cur) => acc + cur.deltaSeconds, 0) * 1000
@ -25,7 +25,7 @@ const ArchiveTasksItem = ({ task, index }) => {
.slice(11, 19)} .slice(11, 19)}
</p> </p>
</td> </td>
<td className="archive__completeTask__info"> <td className="archive__complete-task__info">
<div> <div>
<p>{getCorrectDate(task.updated_at)}</p> <p>{getCorrectDate(task.updated_at)}</p>
</div> </div>

4
src/components/ArchiveTableTracker/ArchiveTasksItem/archiveTasksItem.scss
View File

@ -1,10 +1,10 @@
.completeTask__title { .complete-task__title {
white-space: nowrap; white-space: nowrap;
max-width: 250px; max-width: 250px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.archive__completeTask__time { .archive__complete-task__time {
text-align: center; text-align: center;
} }

2
src/components/AuthBox/AuthBox.jsx
View File

@ -90,7 +90,7 @@ export const AuthBox = ({ title }) => {
<input id="loginEmail" type="text" name="email" placeholder="E-mail" /> <input id="loginEmail" type="text" name="email" placeholder="E-mail" />
<label htmlFor="password">Ваш пароль</label> <label htmlFor="password">Ваш пароль</label>
<div className="inputWrapper"> <div className="input-wrapper">
<input <input
id="loginPassword" id="loginPassword"
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}

2
src/components/AuthBox/authBox.scss
View File

@ -93,7 +93,7 @@
color: #000000; color: #000000;
} }
.inputWrapper { .input-wrapper {
width: 100%; width: 100%;
position: relative; position: relative;

8
src/components/Calendar/calendarComponent.scss
View File

@ -226,7 +226,7 @@
} }
} }
.selectDays { .select-days {
border-style: dashed !important; border-style: dashed !important;
&:hover { &:hover {
@ -234,7 +234,7 @@
} }
} }
.selectedDay { .selected-day {
background-color: #edf1ff !important; background-color: #edf1ff !important;
&:hover { &:hover {
@ -267,7 +267,7 @@
pointer-events: none; pointer-events: none;
} }
.selectDateRange { .select-date-range {
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: 16px; column-gap: 16px;
@ -293,7 +293,7 @@
} }
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
.selectDateRange { .select-date-range {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
column-gap: 8px; column-gap: 8px;

2
src/components/Candidate/candidate.scss
View File

@ -9,7 +9,7 @@
min-height: 100vh; min-height: 100vh;
} }
.profileBreadcrumbs { .profile-breadcrumbs {
position: relative; position: relative;
z-index: -1; z-index: -1;
} }

2
src/components/CardControl/CardControl.jsx
View File

@ -14,7 +14,7 @@ export const CardControl = ({ title, path, description, img }) => {
</div> </div>
<div className="control-card__info"> <div className="control-card__info">
<p dangerouslySetInnerHTML={{ __html: description }}></p> <p dangerouslySetInnerHTML={{ __html: description }}></p>
<div className="control-card__infoLink"> <div className="control-card__info-link">
<img src={rightArrow} alt="arrow" /> <img src={rightArrow} alt="arrow" />
</div> </div>
</div> </div>

2
src/components/CardControl/CardControl.scss
View File

@ -60,7 +60,7 @@
font-weight: 700; font-weight: 700;
} }
} }
&Link { &-link {
width: 48px; width: 48px;
height: 48px; height: 48px;
background: #ddeec6; background: #ddeec6;

22
src/components/CatalogPersonCard/CatalogPersonCard.jsx
View File

@ -12,30 +12,30 @@ export const CatalogPersonCard = ({
description description
}) => { }) => {
return ( return (
<div className="catalogPersonCard"> <div className="catalog-person-card">
<div className="catalogPersonCard__head"> <div className="catalog-person-card__head">
<div className="catalogPersonCard__avatar"> <div className="catalog-person-card__avatar">
<img src={img} alt="avatar" /> <img src={img} alt="avatar" />
<span className="catalogPersonCard__skill">{level}</span> <span className="catalog-person-card__skill">{level}</span>
</div> </div>
<div className="catalogPersonCard__info"> <div className="catalog-person-card__info">
<span className="catalogPersonCard__name">{name}</span> <span className="catalog-person-card__name">{name}</span>
<span className="catalogPersonCard__salary">{salary} / час</span> <span className="catalog-person-card__salary">{salary} / час</span>
<p className="catalogPersonCard__category"> <p className="catalog-person-card__category">
<span>Разработка:</span> {category} <span>Разработка:</span> {category}
</p> </p>
</div> </div>
</div> </div>
<div className="catalogPersonCard__items"> <div className="catalog-person-card__items">
{skills.map((item, index) => { {skills.map((item, index) => {
return ( return (
<div className="catalogPersonCard__skillItem" key={index}> <div className="catalog-person-card__skill-item" key={index}>
{item} {item}
</div> </div>
); );
})} })}
</div> </div>
<p className="catalogPersonCard__description">{description}</p> <p className="catalog-person-card__description">{description}</p>
</div> </div>
); );
}; };

20
src/components/CatalogPersonCard/catalogPersonCard.scss
View File

@ -1,5 +1,5 @@
.catalogPersonCard { .catalog-person-card {
background: #FFFFFF; background: #ffffff;
padding: 29px 32px; padding: 29px 32px;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
@ -25,7 +25,7 @@
bottom: -10px; bottom: -10px;
padding: 3.5px 19px; padding: 3.5px 19px;
border-radius: 44px; border-radius: 44px;
background: #1458DD; background: #1458dd;
color: white; color: white;
font-size: 14px; font-size: 14px;
} }
@ -45,7 +45,7 @@
} }
&__salary { &__salary {
color: #1458DD; color: #1458dd;
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
@ -53,7 +53,7 @@
&__category { &__category {
span { span {
color: #6F6F6F; color: #6f6f6f;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
font-weight: 400; font-weight: 400;
@ -72,25 +72,25 @@
row-gap: 16px; row-gap: 16px;
margin-top: 22px; margin-top: 22px;
padding-bottom: 17px; padding-bottom: 17px;
border-bottom: 0.5px solid #B3DF93; border-bottom: 0.5px solid #b3df93;
} }
&__skillItem { &__skill-item {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 12px; font-size: 12px;
color: #6F6F6F; color: #6f6f6f;
width: 62px; width: 62px;
height: 26px; height: 26px;
border: 0.5px solid #8DC63F; border: 0.5px solid #8dc63f;
border-radius: 44px; border-radius: 44px;
} }
&__description { &__description {
margin-top: 17px; margin-top: 17px;
max-width: 245px; max-width: 245px;
color: #6F6F6F; color: #6f6f6f;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
} }

8
src/components/CategoriesItem/CategoriesItem.jsx
View File

@ -10,14 +10,16 @@ export const CategoriesItem = ({ img, title, skills, available, link }) => {
<Link <Link
to={link} to={link}
className={ className={
available ? "categoriesItem" : "categoriesItem categoriesItem__disable" available
? "categories-item"
: "categories-item categories-item__disable"
} }
> >
<div className="categoriesItem__title"> <div className="categories-item__title">
<img src={img} alt="img" /> <img src={img} alt="img" />
<h5>{title}</h5> <h5>{title}</h5>
</div> </div>
<div className="categoriesItem__description"> <div className="categories-item__description">
<p>{skills}</p> <p>{skills}</p>
<div className="more"> <div className="more">
<img src={rightArrow} alt="arrow" /> <img src={rightArrow} alt="arrow" />

2
src/components/CategoriesItem/categoriesItem.scss
View File

@ -1,4 +1,4 @@
.categoriesItem { .categories-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 33px 32px 25px 28px; padding: 33px 32px 25px 28px;

8
src/components/Common/ModalLayout/modalLayout.scss
View File

@ -29,7 +29,7 @@
&__info { &__info {
font-size: 15px; font-size: 15px;
font-weight: 300; font-weight: 300;
margin: 12px 0 20px; margin-top: 8px;
} }
@media (max-width: 805px) { @media (max-width: 805px) {
@ -52,13 +52,14 @@
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
row-gap: 5px;
} }
.invite-person-block { .invite-person-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
row-gap: 10px; row-gap: 5px;
&__input { &__input {
margin: 0; margin: 0;
min-width: 240px; min-width: 240px;
@ -86,11 +87,10 @@
span { span {
text-align: center; text-align: center;
margin: 5px 0; margin-top: 15px;
} }
.invite-person-block { .invite-person-block {
row-gap: 5px;
&__btn { &__btn {
margin: 5px auto; margin: 5px auto;
} }

6
src/components/FileTracker/FileTracker.jsx
View File

@ -24,14 +24,14 @@ const FileTracker = ({ file, setDeletedTask, taskId }) => {
return ( return (
<div <div
className={openImg ? "taskFile ImgOpened" : "taskFile"} className={openImg ? "task-file img-opened" : "task-file"}
key={file.id} key={file.id}
onClick={() => { onClick={() => {
if (openImg) setOpenImg(!openImg); if (openImg) setOpenImg(!openImg);
}} }}
> >
<img <img
className="imgFile" className="img-file"
src={backendImg(file.file?.url)} src={backendImg(file.file?.url)}
alt="img" alt="img"
onClick={() => { onClick={() => {
@ -39,7 +39,7 @@ const FileTracker = ({ file, setDeletedTask, taskId }) => {
}} }}
/> />
{!openImg && ( {!openImg && (
<div className="deleteFile" onClick={() => deleteFile(file)}> <div className="delete-file" onClick={() => deleteFile(file)}>
<img src={close} alt="delete" /> <img src={close} alt="delete" />
</div> </div>
)} )}

10
src/components/Modal/AcceptModal/AcceptModal.jsx
View File

@ -6,10 +6,10 @@ import "./acceptModal.scss";
export const AcceptModal = ({ title, closeModal, agreeHandler }) => { export const AcceptModal = ({ title, closeModal, agreeHandler }) => {
return ( return (
<div className="backDrop"> <div className="back-drop">
<div className="acceptModal"> <div className="accept-modal">
<h3 className="acceptModal__title">{title}</h3> <h3 className="accept-modal__title">{title}</h3>
<div className="acceptModal__buttons"> <div className="accept-modal__buttons">
<button <button
className="agree" className="agree"
onClick={() => { onClick={() => {
@ -24,7 +24,7 @@ export const AcceptModal = ({ title, closeModal, agreeHandler }) => {
</button> </button>
</div> </div>
<img <img
className="acceptModal__close" className="accept-modal__close"
src={close} src={close}
alt="close" alt="close"
onClick={closeModal} onClick={closeModal}

4
src/components/Modal/AcceptModal/acceptModal.scss
View File

@ -1,4 +1,4 @@
.backDrop { .back-drop {
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
@ -10,7 +10,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.acceptModal { .accept-modal {
border-radius: 20px; border-radius: 20px;
background: linear-gradient(180deg, #fff 0%, #ebebeb 100%); background: linear-gradient(180deg, #fff 0%, #ebebeb 100%);
padding: 50px 34px 25px; padding: 50px 34px 25px;

8
src/components/Modal/ModalRegistration/ModalRegistration.jsx
View File

@ -73,7 +73,7 @@ export const ModalRegistration = ({ active, setActive }) => {
<div className="input-body"> <div className="input-body">
<div className="input-body__box"> <div className="input-body__box">
<div className="inputContainer"> <div className="input-container">
<h5>Ваше имя</h5> <h5>Ваше имя</h5>
<input <input
className={validationErrors.username ? "error" : ""} className={validationErrors.username ? "error" : ""}
@ -84,7 +84,7 @@ export const ModalRegistration = ({ active, setActive }) => {
/> />
<span>{validationErrors.username}</span> <span>{validationErrors.username}</span>
</div> </div>
<div className="inputContainer"> <div className="input-container">
<h5>E-mail</h5> <h5>E-mail</h5>
<input <input
type="email" type="email"
@ -99,7 +99,7 @@ export const ModalRegistration = ({ active, setActive }) => {
</div> </div>
<div className="input-body__box"> <div className="input-body__box">
<div className="inputContainer"> <div className="input-container">
<h5>Пароль</h5> <h5>Пароль</h5>
<input <input
className={validationErrors.password ? "error" : ""} className={validationErrors.password ? "error" : ""}
@ -111,7 +111,7 @@ export const ModalRegistration = ({ active, setActive }) => {
/> />
<span>{validationErrors.password}</span> <span>{validationErrors.password}</span>
</div> </div>
<div className="inputContainer"> <div className="input-container">
<h5>Повторите пароль</h5> <h5>Повторите пароль</h5>
<input <input
className={validationErrors.secondPassword ? "error" : ""} className={validationErrors.secondPassword ? "error" : ""}

2
src/components/Modal/ModalRegistration/modalRegistration.scss
View File

@ -112,7 +112,7 @@
padding-left: 20px; padding-left: 20px;
} }
.inputContainer { .input-container {
margin: 0 0 20px 0; margin: 0 0 20px 0;
width: 100%; width: 100%;
} }

10
src/components/Modal/ModalReset/ModalReset.js
View File

@ -6,17 +6,17 @@ import "./modalReset.scss";
export const ModalReset = ({ setModalReset }) => { export const ModalReset = ({ setModalReset }) => {
return ( return (
<div className="modalReset"> <div className="modal-reset">
<h3 className="modalReset__title">Восстановление доступа</h3> <h3 className="modal-reset__title">Восстановление доступа</h3>
<div className="modalReset__input"> <div className="modal-reset__input">
<span>Укажите e-mail, для которого хотите восстановить пароль.</span> <span>Укажите e-mail, для которого хотите восстановить пароль.</span>
<input placeholder="e-mail" /> <input placeholder="e-mail" />
</div> </div>
<button className="modalReset__submit">Восстановить</button> <button className="modal-reset__submit">Восстановить</button>
<img <img
onClick={() => setModalReset(false)} onClick={() => setModalReset(false)}
src={close} src={close}
className="modalReset__close" className="modal-reset__close"
alt="close" alt="close"
/> />
</div> </div>

10
src/components/Modal/ModalReset/modalReset.scss
View File

@ -1,8 +1,8 @@
.modalReset { .modal-reset {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 20px; border-radius: 20px;
background: linear-gradient(180deg, #FFF 0%, #EBEBEB 100%); background: linear-gradient(180deg, #fff 0%, #ebebeb 100%);
padding: 23px 110px 8px 36px; padding: 23px 110px 8px 36px;
row-gap: 29px; row-gap: 29px;
position: relative; position: relative;
@ -28,7 +28,7 @@
padding: 8px 12px; padding: 8px 12px;
font-size: 15px; font-size: 15px;
border-radius: 8px; border-radius: 8px;
background-color: #EFF2F7; background-color: #eff2f7;
outline: none; outline: none;
border: none; border: none;
max-width: 300px; max-width: 300px;
@ -37,9 +37,9 @@
&__submit { &__submit {
border-radius: 44px; border-radius: 44px;
background: #52B709; background: #52b709;
padding: 9px 46px; padding: 9px 46px;
color: #FFF; color: #fff;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
line-height: 32px; line-height: 32px;

20
src/components/Modal/ModalResetPassword/ModalResetPassword.jsx
View File

@ -117,16 +117,16 @@ export const ModalResetPassword = ({ active, setActive }) => {
}; };
return ( return (
<ModalLayout active={active} setActive={setActive}> <ModalLayout active={active} setActive={setActive}>
<div className="resetPassword"> <div className="reset-password">
<img <img
className="resetPassword__close" className="reset-password__close"
src={close} src={close}
alt="close" alt="close"
onClick={() => setActive(false)} onClick={() => setActive(false)}
/> />
<h3 className="resetPassword__title">Восстановление пароля</h3> <h3 className="reset-password__title">Восстановление пароля</h3>
{!step ? ( {!step ? (
<div className="resetPassword__email"> <div className="reset-password__email">
<h5>Введите ваш e-mail:</h5> <h5>Введите ваш e-mail:</h5>
<input <input
type="email" type="email"
@ -149,7 +149,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
<Loader style={"green"} /> <Loader style={"green"} />
) : ( ) : (
<button <button
className="resetPassword__btn" className="reset-password__btn"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
submitHandler(); submitHandler();
@ -160,11 +160,11 @@ export const ModalResetPassword = ({ active, setActive }) => {
)} )}
</div> </div>
) : ( ) : (
<div className="resetPassword__email"> <div className="reset-password__email">
<img <img
src={arrow} src={arrow}
onClick={() => setStep(false)} onClick={() => setStep(false)}
className="resetPassword__email__arrow" className="reset-password__email__arrow"
/> />
<h5>Введите код подтверждения:</h5> <h5>Введите код подтверждения:</h5>
<input <input
@ -185,7 +185,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
placeholder="token" placeholder="token"
/> />
{inputsError.token && ( {inputsError.token && (
<span className="warningText">Введите данные</span> <span className="warning-text">Введите данные</span>
)} )}
<h5>Введите новый пароль:</h5> <h5>Введите новый пароль:</h5>
<input <input
@ -206,13 +206,13 @@ export const ModalResetPassword = ({ active, setActive }) => {
className={inputsError.password ? "error" : ""} className={inputsError.password ? "error" : ""}
/> />
{inputsError.password && ( {inputsError.password && (
<span className="warningText">Минимум 6 символов</span> <span className="warning-text">Минимум 6 символов</span>
)} )}
{loader ? ( {loader ? (
<Loader style={"green"} /> <Loader style={"green"} />
) : ( ) : (
<button <button
className="resetPassword__btn" className="reset-password__btn"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
resetPassword(); resetPassword();

13
src/components/Modal/ModalResetPassword/modalResetPassword.scss
View File

@ -1,4 +1,4 @@
.resetPassword { .reset-password {
width: 280px; width: 280px;
position: relative; position: relative;
@ -62,7 +62,14 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #ffffff; background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), linear-gradient(36deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
color: #ffffff; color: #ffffff;
font-weight: 500; font-weight: 500;
font-size: 15px; font-size: 15px;
@ -75,7 +82,7 @@
border: 1px solid red; border: 1px solid red;
} }
.warningText { .warning-text {
color: red; color: red;
font-size: 12px; font-size: 12px;
margin-bottom: 10px; margin-bottom: 10px;

10
src/components/Modal/ModalTrackerRegistration/ModalTrackerRegistration.js
View File

@ -7,11 +7,11 @@ import "./modalTrackerRegistration.scss";
export const ModalTrackerRegistration = ({ setModalReset, email }) => { export const ModalTrackerRegistration = ({ setModalReset, email }) => {
return ( return (
<div className="modalConfirmTracker"> <div className="modal-confirm-tracker">
<h3 className="modalConfirmTracker__title"> <h3 className="modal-confirm-tracker__title">
Спасибо за регистрацию. Теперь можете войти в кабинет Спасибо за регистрацию. Теперь можете войти в кабинет
</h3> </h3>
<p className="modalConfirmTracker__info"> <p className="modal-confirm-tracker__info">
Мы отправили ссылку Мы отправили ссылку
<br /> <br />
для активации вашего аккаунта на почту для активации вашего аккаунта на почту
@ -20,14 +20,14 @@ export const ModalTrackerRegistration = ({ setModalReset, email }) => {
<Link <Link
to={"/registration-setting"} to={"/registration-setting"}
onClick={() => setModalReset(false)} onClick={() => setModalReset(false)}
className="modalConfirmTracker__btn" className="modal-confirm-tracker__btn"
> >
Понятно Понятно
</Link> </Link>
<img <img
onClick={() => setModalReset(false)} onClick={() => setModalReset(false)}
src={close} src={close}
className="modalReset__close" className="modal-reset__close"
alt="close" alt="close"
/> />
</div> </div>

6
src/components/Modal/ModalTrackerRegistration/modalTrackerRegistration.scss
View File

@ -1,4 +1,4 @@
.modalConfirmTracker { .modal-confirm-tracker {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -27,13 +27,13 @@
&__btn { &__btn {
border-radius: 44px; border-radius: 44px;
background: #52B709; background: #52b709;
outline: none; outline: none;
border: none; border: none;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
line-height: 32px; line-height: 32px;
color: #FFF; color: #fff;
padding: 9px 37px; padding: 9px 37px;
} }
} }

8
src/components/Modal/Tracker/ListEmployees/listEmployees.scss
View File

@ -13,7 +13,7 @@
width: 100%; width: 100%;
} }
.projectPersons { .project-persons {
display: flex; display: flex;
position: relative; position: relative;
left: 5px; left: 5px;
@ -37,7 +37,7 @@
} }
} }
.onePerson { .one-person {
display: flex; display: flex;
position: relative; position: relative;
left: -15px; left: -15px;
@ -63,7 +63,7 @@
display: flex; display: flex;
} }
.countPersons { .count-persons {
color: #252c32; color: #252c32;
border: 1px solid #dde2e4; border: 1px solid #dde2e4;
background: white; background: white;
@ -73,7 +73,7 @@
.add-person { .add-person {
background: #00c5a8; background: #00c5a8;
color: white; color: white;
font-size: 14px; font-size: 18px;
transition: all 0.15s ease; transition: all 0.15s ease;
left: -28px; left: -28px;
z-index: 2; z-index: 2;

45
src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
View File

@ -558,7 +558,7 @@ export const ModalTiсket = ({
(div) => (div) =>
div.classList && div.classList &&
(div.classList.contains("button-add-worker") || (div.classList.contains("button-add-worker") ||
div.classList.contains("dropdownList")) div.classList.contains("dropdown-list"))
) )
) { ) {
setDropListOpen(false); setDropListOpen(false);
@ -570,7 +570,7 @@ export const ModalTiсket = ({
!path.find( !path.find(
(div) => (div) =>
div.classList && div.classList &&
(div.classList.contains("deadLine") || (div.classList.contains("dead-line") ||
div.classList.contains("react-datepicker-popper")) div.classList.contains("react-datepicker-popper"))
) )
) { ) {
@ -622,7 +622,7 @@ export const ModalTiсket = ({
}} }}
/> />
) : ( ) : (
<h5 className="taskName">{inputsValue.title}</h5> <h5 className="task-name">{inputsValue.title}</h5>
)} )}
<div className="content__description"> <div className="content__description">
{editOpen ? ( {editOpen ? (
@ -674,13 +674,13 @@ export const ModalTiсket = ({
</div> </div>
)} )}
{/*{uploadedFile && (*/} {/*{uploadedFile && (*/}
{/* <div className="fileLoaded">*/} {/* <div className="file-loaded">*/}
{/* {uploadedFile.map((file) => {*/} {/* {uploadedFile.map((file) => {*/}
{/* return (*/} {/* return (*/}
{/* <div className="loadedFile" key={file.id}>*/} {/* <div className="loaded-file" key={file.id}>*/}
{/* <img src={backendImg(file.url)} alt="img" key={file.id} />*/} {/* <img src={backendImg(file.url)} alt="img" key={file.id} />*/}
{/* <div*/} {/* <div*/}
{/* className="deleteFile"*/} {/* className="delete-file"*/}
{/* onClick={() => deleteLoadedFile(file)}*/} {/* onClick={() => deleteLoadedFile(file)}*/}
{/* >*/} {/* >*/}
{/* <img src={close} alt="delete" />*/} {/* <img src={close} alt="delete" />*/}
@ -758,7 +758,8 @@ export const ModalTiсket = ({
<div className="workers"> <div className="workers">
<div className="workers_box task__info"> <div className="workers_box task__info">
<span className="exit" onClick={() => setActive(false)}></span> <span className="exit" onClick={() => setActive(false)}></span>
Создатель: <p className="workers__creator">{task.user?.fio}</p> <h5>Создатель: </h5>
<p className="workers__creator">{task.user?.fio}</p>
{executor ? ( {executor ? (
<> <>
<h5>Исполнитель: </h5> <h5>Исполнитель: </h5>
@ -780,7 +781,7 @@ export const ModalTiсket = ({
</div> </div>
</> </>
) : ( ) : (
<div className="add-worker moreItems "> <div className="add-worker more-items">
<button <button
className="button-add-worker" className="button-add-worker"
onClick={() => setDropListOpen(true)} onClick={() => setDropListOpen(true)}
@ -789,16 +790,16 @@ export const ModalTiсket = ({
</button> </button>
<span>Добавить исполнителя</span> <span>Добавить исполнителя</span>
{dropListOpen && ( {dropListOpen && (
<div className="dropdownList"> <div className="dropdown-list">
<img <img
src={close} src={close}
className="dropdownList__close" className="dropdown-list__close"
onClick={() => setDropListOpen(false)} onClick={() => setDropListOpen(false)}
/> />
{correctProjectUsers.map((person) => { {correctProjectUsers.map((person) => {
return ( return (
<div <div
className="dropdownList__person" className="dropdown-list__person"
key={person.user_id} key={person.user_id}
onClick={() => taskExecutor(person)} onClick={() => taskExecutor(person)}
> >
@ -845,7 +846,7 @@ export const ModalTiсket = ({
</div> </div>
</div> </div>
)} )}
<div className="add-worker moreItems"> <div className="add-worker more-items">
<button <button
className="button-add-worker" className="button-add-worker"
onClick={() => setDropListMembersOpen(true)} onClick={() => setDropListMembersOpen(true)}
@ -854,17 +855,17 @@ export const ModalTiсket = ({
</button> </button>
<span>Добавить участника</span> <span>Добавить участника</span>
{dropListMembersOpen && ( {dropListMembersOpen && (
<div className="dropdownList"> <div className="dropdown-list">
<img <img
src={close} src={close}
className="dropdownList__close" className="dropdown-list__close"
onClick={() => setDropListMembersOpen(false)} onClick={() => setDropListMembersOpen(false)}
/> />
{users.length ? ( {users.length ? (
users.map((person) => { users.map((person) => {
return ( return (
<div <div
className="dropdownList__person" className="dropdown-list__person"
key={person.user_id} key={person.user_id}
onClick={() => addMember(person)} onClick={() => addMember(person)}
> >
@ -881,7 +882,7 @@ export const ModalTiсket = ({
); );
}) })
) : ( ) : (
<p className="noUsers">Нет пользователей</p> <p className="no-users">Нет пользователей</p>
)} )}
</div> </div>
)} )}
@ -889,14 +890,14 @@ export const ModalTiсket = ({
</div> </div>
<div className="workers_box-middle"> <div className="workers_box-middle">
<div className="deadLine"> <div className="dead-line">
<div <div
className="deadLine__container" className="dead-line__container"
onClick={() => setDatePickerOpen(!datePickerOpen)} onClick={() => setDatePickerOpen(!datePickerOpen)}
> >
<img src={calendarIcon} alt="calendar" /> <img src={calendarIcon} alt="calendar" />
<span> <span>
{deadLine ? getCorrectDate(deadLine) : "Срок исполнения:"} {deadLine ? getCorrectDate(deadLine) : "Срок исполнения"}
</span> </span>
</div> </div>
<DatePicker <DatePicker
@ -913,7 +914,7 @@ export const ModalTiсket = ({
/> />
</div> </div>
<div className="time"> <div className="time">
<img src={watch}></img> <p>⏱</p>
<p> <p>
{correctTimerTime(currentTimerCount.hours)}: {correctTimerTime(currentTimerCount.hours)}:
{correctTimerTime(currentTimerCount.minute)}: {correctTimerTime(currentTimerCount.minute)}:
@ -990,7 +991,7 @@ export const ModalTiсket = ({
{correctProjectTags.map((tag) => { {correctProjectTags.map((tag) => {
return ( return (
<div <div
className="tagItem" className="tag-item"
key={tag.id} key={tag.id}
onClick={() => addTagToTask(tag.id)} onClick={() => addTagToTask(tag.id)}
> >
@ -1000,7 +1001,7 @@ export const ModalTiсket = ({
); );
})} })}
{!Boolean(correctProjectTags.length) && ( {!Boolean(correctProjectTags.length) && (
<p className="tags__dropDown__noItem">Нет тегов</p> <p className="tags__dropDown__no-item">Нет тегов</p>
)} )}
</div> </div>
)} )}

44
src/components/Modal/Tracker/ModalTicket/modalTicket.scss
View File

@ -66,6 +66,7 @@
margin-left: 15px; margin-left: 15px;
&__category { &__category {
height: 22px;
margin-right: 5px; margin-right: 5px;
} }
@ -144,17 +145,17 @@
margin-bottom: 0; margin-bottom: 0;
} }
.taskName { .task-name {
max-width: 550px; max-width: 550px;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
.fullName { .full-name {
max-width: 800px; max-width: 800px;
} }
.fullDescription { .full-description {
max-width: 800px; max-width: 800px;
} }
@ -193,7 +194,7 @@
margin: 10px 0; margin: 10px 0;
} }
&__subComment { &__sub-comment {
&:before { &:before {
content: ""; content: "";
background: #e4e4e6; background: #e4e4e6;
@ -366,22 +367,22 @@
margin-top: 33px; margin-top: 33px;
overflow-y: auto; overflow-y: auto;
.taskFile { .task-file {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
.imgFile { .img-file {
max-width: 170px; max-width: 170px;
max-height: 104px; max-height: 104px;
object-fit: contain; object-fit: contain;
} }
&:hover { &:hover {
.deleteFile { .delete-file {
background: rgb(226, 226, 226, 0.6); background: rgb(226, 226, 226, 0.6);
} }
} }
.deleteFile { .delete-file {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -402,7 +403,7 @@
} }
} }
.ImgOpened { .img-opened {
position: fixed; position: fixed;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@ -414,7 +415,7 @@
z-index: 100; z-index: 100;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
.imgFile { .img-file {
width: 90vw; width: 90vw;
height: 90vh; height: 90vh;
max-width: none; max-width: none;
@ -423,18 +424,18 @@
} }
} }
.fileLoaded { .file-loaded {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px 0 0; margin: 10px 0 0;
.loadedFile { .loaded-file {
position: relative; position: relative;
img { img {
max-width: 100px; max-width: 100px;
object-fit: contain; object-fit: contain;
} }
.deleteFile { .delete-file {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -454,7 +455,7 @@
} }
} }
&:hover { &:hover {
.deleteFile { .delete-file {
background: rgb(226, 226, 226, 0.6); background: rgb(226, 226, 226, 0.6);
} }
} }
@ -725,7 +726,7 @@
} }
} }
.deadLine { .dead-line {
position: relative; position: relative;
&__container { &__container {
padding: 5px 10px 5px; padding: 5px 10px 5px;
@ -846,7 +847,8 @@
.time { .time {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
column-gap: 5px;
font-size: 13px; font-size: 13px;
margin-top: 5px; margin-top: 5px;
width: 160px; width: 160px;
@ -860,7 +862,7 @@
&__creator { &__creator {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -924,7 +926,7 @@
} }
} }
.dropdownList { .dropdown-list {
position: absolute; position: absolute;
background: white; background: white;
padding: 10px; padding: 10px;
@ -937,7 +939,7 @@
flex-direction: column; flex-direction: column;
row-gap: 8px; row-gap: 8px;
.noUsers { .no-users {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
} }
@ -1064,7 +1066,7 @@
top: 5px; top: 5px;
} }
.tagItem { .tag-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -1091,7 +1093,7 @@
} }
} }
&__noItem { &__no-item {
line-height: 20px; line-height: 20px;
font-size: 15px; font-size: 15px;
margin: 0; margin: 0;

46
src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
View File

@ -565,7 +565,7 @@ export const TicketFullScreen = () => {
(div) => (div) =>
div.classList && div.classList &&
(div.classList.contains("button-add-worker") || (div.classList.contains("button-add-worker") ||
div.classList.contains("dropdownList")) div.classList.contains("dropdown-list"))
) )
) { ) {
setDropListOpen(false); setDropListOpen(false);
@ -577,7 +577,7 @@ export const TicketFullScreen = () => {
!path.find( !path.find(
(div) => (div) =>
div.classList && div.classList &&
(div.classList.contains("deadLine") || (div.classList.contains("dead-line") ||
div.classList.contains("react-datepicker-popper")) div.classList.contains("react-datepicker-popper"))
) )
) { ) {
@ -674,7 +674,7 @@ export const TicketFullScreen = () => {
}} }}
/> />
) : ( ) : (
<h5 className="fullName nameFullScreen"> <h5 className="full-name name-fullscreen">
{inputsValue.title} {inputsValue.title}
</h5> </h5>
)} )}
@ -708,7 +708,7 @@ export const TicketFullScreen = () => {
) : ( ) : (
<div className="ticket__description"> <div className="ticket__description">
<div <div
className="fullDescription fullScreenDescription" className="full-description fullscreen-description"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: inputsValue.description __html: inputsValue.description
}} }}
@ -717,7 +717,7 @@ export const TicketFullScreen = () => {
)} )}
</div> </div>
{Boolean(taskFiles.length) && ( {Boolean(taskFiles.length) && (
<div className="task__files filesFullScreen"> <div className="task__files files-fullscreen">
{taskFiles.map((file) => { {taskFiles.map((file) => {
return ( return (
<FileTracker <FileTracker
@ -731,17 +731,17 @@ export const TicketFullScreen = () => {
</div> </div>
)} )}
{uploadedFile && ( {uploadedFile && (
<div className="fileLoaded"> <div className="file-loaded">
{uploadedFile.map((file) => { {uploadedFile.map((file) => {
return ( return (
<div className="loadedFile" key={file.id}> <div className="loaded-file" key={file.id}>
<img <img
src={backendImg(file.url)} src={backendImg(file.url)}
alt="img" alt="img"
key={file.id} key={file.id}
/> />
<div <div
className="deleteFile" className="delete-file"
onClick={() => deleteLoadedFile(file)} onClick={() => deleteLoadedFile(file)}
> >
<img src={fileDelete} alt="delete" /> <img src={fileDelete} alt="delete" />
@ -775,7 +775,7 @@ export const TicketFullScreen = () => {
{caseOfNum(taskFiles.length, "files")} {caseOfNum(taskFiles.length, "files")}
</div> </div>
</div> </div>
<div className="content__input commentFullScreen"> <div className="content__input comment-fullscreen">
<input <input
placeholder="Оставить комментарий" placeholder="Оставить комментарий"
value={inputsValue.comment} value={inputsValue.comment}
@ -809,7 +809,7 @@ export const TicketFullScreen = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="workers fullScreenWorkers"> <div className="workers fullscreen-workers">
<div className="workers_box task__info"> <div className="workers_box task__info">
<div className="workers__creator"> <div className="workers__creator">
Создатель: <p>{taskInfo.user?.fio}</p> Создатель: <p>{taskInfo.user?.fio}</p>
@ -836,7 +836,7 @@ export const TicketFullScreen = () => {
</div> </div>
</> </>
) : ( ) : (
<div className="add-worker moreItems "> <div className="add-worker more-items ">
<button <button
className="button-add-worker" className="button-add-worker"
onClick={() => setDropListOpen(true)} onClick={() => setDropListOpen(true)}
@ -845,16 +845,16 @@ export const TicketFullScreen = () => {
</button> </button>
<span>Добавить исполнителя</span> <span>Добавить исполнителя</span>
{dropListOpen && ( {dropListOpen && (
<div className="dropdownList"> <div className="dropdown-list">
<img <img
src={close} src={close}
className="dropdownList__close" className="dropdown-list__close"
onClick={() => setDropListOpen(false)} onClick={() => setDropListOpen(false)}
/> />
{correctProjectUsers.map((person) => { {correctProjectUsers.map((person) => {
return ( return (
<div <div
className="dropdownList__person" className="dropdown-list__person"
key={person.user_id} key={person.user_id}
onClick={() => taskExecutor(person)} onClick={() => taskExecutor(person)}
> >
@ -901,7 +901,7 @@ export const TicketFullScreen = () => {
</div> </div>
</div> </div>
)} )}
<div className="add-worker moreItems"> <div className="add-worker more-items">
<button <button
className="button-add-worker" className="button-add-worker"
onClick={() => setDropListMembersOpen(true)} onClick={() => setDropListMembersOpen(true)}
@ -910,17 +910,17 @@ export const TicketFullScreen = () => {
</button> </button>
<span>Добавить участника</span> <span>Добавить участника</span>
{dropListMembersOpen && ( {dropListMembersOpen && (
<div className="dropdownList"> <div className="dropdown-list">
<img <img
src={close} src={close}
className="dropdownList__close" className="dropdown-list__close"
onClick={() => setDropListMembersOpen(false)} onClick={() => setDropListMembersOpen(false)}
/> />
{users.length ? ( {users.length ? (
users.map((person) => { users.map((person) => {
return ( return (
<div <div
className="dropdownList__person" className="dropdown-list__person"
key={person.user_id} key={person.user_id}
onClick={() => addMember(person)} onClick={() => addMember(person)}
> >
@ -937,7 +937,7 @@ export const TicketFullScreen = () => {
); );
}) })
) : ( ) : (
<p className="noUsers">Нет пользователей</p> <p className="no-users">Нет пользователей</p>
)} )}
</div> </div>
)} )}
@ -945,9 +945,9 @@ export const TicketFullScreen = () => {
</div> </div>
<div className="workers_box-middle"> <div className="workers_box-middle">
<div className="deadLine"> <div className="dead-line">
<div <div
className="deadLine__container" className="dead-line__container"
onClick={() => setDatePickerOpen(!datePickerOpen)} onClick={() => setDatePickerOpen(!datePickerOpen)}
> >
<img src={calendarIcon} alt="calendar" /> <img src={calendarIcon} alt="calendar" />
@ -1049,7 +1049,7 @@ export const TicketFullScreen = () => {
{correctProjectTags.map((tag) => { {correctProjectTags.map((tag) => {
return ( return (
<div <div
className="tagItem" className="tag-item"
key={tag.id} key={tag.id}
onClick={() => addTagToTask(tag.id)} onClick={() => addTagToTask(tag.id)}
> >
@ -1059,7 +1059,7 @@ export const TicketFullScreen = () => {
); );
})} })}
{!Boolean(correctProjectTags.length) && ( {!Boolean(correctProjectTags.length) && (
<p className="tags__dropDown__noItem">Нет тегов</p> <p className="tags__dropDown__no-item">Нет тегов</p>
)} )}
</div> </div>
)} )}

20
src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss
View File

@ -2,11 +2,11 @@
background: #f5f5f5; background: #f5f5f5;
} }
.fullName { .full-name {
display: flex; display: flex;
align-items: center; align-items: center;
span { span {
color: #6F6F6F; color: #6f6f6f;
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
line-height: 17px; line-height: 17px;
@ -39,7 +39,7 @@
span { span {
display: flex; display: flex;
width: 120px; width: 120px;
color: #6F6F6F; color: #6f6f6f;
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
line-height: 17px; line-height: 17px;
@ -47,9 +47,9 @@
} }
} }
.fullScreenWorkers { .fullscreen-workers {
@media (max-width: 880px) { @media (max-width: 880px) {
background: #DFF1FF; background: #dff1ff;
.workers_box { .workers_box {
@media (max-width: 880px) { @media (max-width: 880px) {
@ -84,7 +84,7 @@
gap: 20px; gap: 20px;
border-bottom: none !important; border-bottom: none !important;
.deadLine { .dead-line {
width: 100%; width: 100%;
} }
@ -122,13 +122,13 @@
} }
} }
.commentFullScreen { .comment-fullscreen {
@media (max-width: 520px) { @media (max-width: 520px) {
width: auto !important; width: auto !important;
} }
} }
.filesFullScreen { .files-fullscreen {
@media (max-width: 520px) { @media (max-width: 520px) {
justify-content: space-evenly; justify-content: space-evenly;
max-height: 400px !important; max-height: 400px !important;
@ -141,13 +141,13 @@
} }
} }
.nameFullScreen { .name-fullscreen {
@media (max-width: 520px) { @media (max-width: 520px) {
white-space: inherit !important; white-space: inherit !important;
} }
} }
.fullScreenDescription { .fullscreen-description {
@media (max-width: 1190px) { @media (max-width: 1190px) {
white-space: inherit !important; white-space: inherit !important;
} }

27
src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
View File

@ -413,11 +413,11 @@ export const TrackerModal = ({
<div className="select__person"> <div className="select__person">
<div className="title-project select-person"> <div className="title-project select-person">
<h4>Добавьте участника</h4> <h4>Добавьте участника</h4>
<p className="select-person__info">
Выберите пользователя в списке или добавьте по e-mail
</p>
<div className="invite__blocks"> <div className="invite__blocks">
<div className="add-person-block"> <div className="add-person-block">
<p className="select-person__info">
Выберите пользователя в списке
</p>
<div <div
className={ className={
selectWorkersOpen selectWorkersOpen
@ -468,8 +468,8 @@ export const TrackerModal = ({
Добавить Добавить
</BaseButton> </BaseButton>
</div> </div>
<span>или</span>
<div className="invite-person-block"> <div className="invite-person-block">
<span>или добавьте по e-mail</span>
<div className="input-container invite-person-block__input"> <div className="input-container invite-person-block__input">
<input <input
className="name-project" className="name-project"
@ -494,13 +494,14 @@ export const TrackerModal = ({
{modalType === "create-ticket-project" && ( {modalType === "create-ticket-project" && (
<> <>
<div className="title-project"> <div className="title-project">
<div className="createTaskHead"> <div className="create-task-head">
<div className="createTaskBody__right__owner"> <div className="create-task-body__right__owner">
<p>Создание задачи</p> <p>Создание задачи</p>
</div> </div>
</div> </div>
<div className="createTaskBody"> <div className="create-task-body">
<div className="createTaskBody__left"> <div className="create-task-body__left">
<h4>Введите название и описание задачи</h4>
<div className="input-container"> <div className="input-container">
<input <input
maxLength="100" maxLength="100"
@ -532,14 +533,14 @@ export const TrackerModal = ({
}} }}
/> />
</div> </div>
<div className="createTaskBody__right"> <div className="create-task-body__right">
<div className="createTaskBody__right__tags"> <div className="create-task-body__right__tags">
<div className="tags__selected"> <div className="tags__selected">
<div className="tags__selected__items"> <div className="tags__selected__items">
{taskTags.map((tag) => { {taskTags.map((tag) => {
return ( return (
<div <div
className="selectedTag" className="selected-tag"
key={tag.id} key={tag.id}
style={{ background: tag.color }} style={{ background: tag.color }}
> >
@ -596,7 +597,7 @@ export const TrackerModal = ({
); );
})} })}
{Boolean(!correctProjectTags.length) && ( {Boolean(!correctProjectTags.length) && (
<p className="noTags">Нет тегов</p> <p className="no-tags">Нет тегов</p>
)} )}
</div> </div>
)} )}
@ -688,7 +689,7 @@ export const TrackerModal = ({
</div> </div>
)} )}
</div> </div>
<div className="createTaskBody__right__deadLine"> <div className="create-task-body__right__dead-line">
<img src={calendarImg} alt="calendar" /> <img src={calendarImg} alt="calendar" />
<p onClick={() => setDatePickerOpen(!datePickerOpen)}> <p onClick={() => setDatePickerOpen(!datePickerOpen)}>
{deadLineDate {deadLineDate

12
src/components/Modal/Tracker/TrackerModal/trackerModal.scss
View File

@ -305,7 +305,7 @@
} }
} }
.createTaskHead { .create-task-head {
width: 100%; width: 100%;
padding: 5px 10px; padding: 5px 10px;
display: flex; display: flex;
@ -319,7 +319,7 @@
color: #000000; color: #000000;
} }
&__selectColumn { &__select-column {
display: flex; display: flex;
column-gap: 8px; column-gap: 8px;
cursor: pointer; cursor: pointer;
@ -335,7 +335,7 @@
} }
} }
.createTaskBody { .create-task-body {
padding: 15px 20px; padding: 15px 20px;
display: flex; display: flex;
column-gap: 20px; column-gap: 20px;
@ -448,7 +448,7 @@
gap: 8px; gap: 8px;
max-width: 393px; max-width: 393px;
.selectedTag { .selected-tag {
display: flex; display: flex;
padding: 7px 7px 7px 8px; padding: 7px 7px 7px 8px;
border-radius: 35px; border-radius: 35px;
@ -525,7 +525,7 @@
} }
} }
.noTags { .no-tags {
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
} }
@ -603,7 +603,7 @@
font-size: 16px; font-size: 16px;
} }
&__deadLine { &__dead-line {
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: 5px; column-gap: 5px;

8
src/components/Navigation/Navigation.jsx
View File

@ -61,7 +61,7 @@ export const Navigation = () => {
}, },
{ {
path: "/treaties", path: "/treaties",
name: "Договора" name: "Договоры"
}, },
{ {
path: "/settings", path: "/settings",
@ -88,8 +88,8 @@ export const Navigation = () => {
})} })}
</nav> </nav>
<div className="profile-header__personalInfo"> <div className="profile-header__personal-info">
<h3 className="profile-header__personalInfoName"> <h3 className="profile-header__personal-info-name">
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username} {profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
</h3> </h3>
<NavLink end to={"/profile"}> <NavLink end to={"/profile"}>
@ -97,7 +97,7 @@ export const Navigation = () => {
src={ src={
profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
} }
className="profile-header__personalInfoAvatar" className="profile-header__personal-info-avatar"
alt="avatar" alt="avatar"
/> />
</NavLink> </NavLink>

12
src/components/PartnerPersonCard/PartnerPersonCard.jsx
View File

@ -9,18 +9,18 @@ import "./partnerPersonCard.scss";
export const PartnerPersonCard = ({ name, img, userId }) => { export const PartnerPersonCard = ({ name, img, userId }) => {
return ( return (
<div className="partnerPersonCard"> <div className="partner-person-card">
<div className="partnerPersonCard__img"> <div className="partner-person-card__img">
<img src={urlForLocal(img)} alt="avatar" /> <img src={urlForLocal(img)} alt="avatar" />
</div> </div>
<div className="partnerPersonCard__info"> <div className="partner-person-card__info">
<h2 className="partnerPersonCard__name">{name}</h2> <h2 className="partner-person-card__name">{name}</h2>
<Link <Link
className="partnerPersonCard__report" className="partner-person-card__report"
to={`/profile/employees/report/${userId}`} to={`/profile/employees/report/${userId}`}
> >
Подробный отчет Подробный отчет
<div className="partnerPersonCard__more"> <div className="partner-person-card__more">
<img src={rightArrow} alt="arrow" /> <img src={rightArrow} alt="arrow" />
</div> </div>
</Link> </Link>

25
src/components/PartnerPersonCard/partnerPersonCard.scss
View File

@ -1,25 +1,28 @@
.partnerPersonCard { .partner-person-card {
display: flex; display: flex;
position: relative; position: relative;
width: 300px;
&__img { &__img {
background: white; background: white;
border-radius: 12px; border-radius: 12px 0 0 12px;
padding: 25px; padding: 5px;
z-index: 2; z-index: 2;
display: flex;
justify-content: center;
align-items: center;
img { img {
width: 77px; width: 70px;
height: 77px; height: 70px;
} }
} }
&__info { &__info {
position: relative; position: relative;
background: #E1FCCF; background: #e1fccf;
z-index: 1; z-index: 1;
padding: 15px 15px 15px 30px; padding: 10px;
left: -15px; border-radius: 0 12px 12px 0;
border-radius: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -34,8 +37,8 @@
} }
&__more { &__more {
width: 41px; width: 30px;
height: 41px; height: 30px;
background: white; background: white;
border-radius: 50px; border-radius: 50px;
display: flex; display: flex;

2
src/components/ProfileBreadcrumbs/ProfileBreadcrumbs.jsx
View File

@ -5,7 +5,7 @@ import "./profileBreadcrumbs.scss";
export const ProfileBreadcrumbs = ({ links }) => { export const ProfileBreadcrumbs = ({ links }) => {
return ( return (
<div className="profileBreadcrumbs"> <div className="profile-breadcrumbs">
{links.map((link, index) => { {links.map((link, index) => {
return ( return (
<Link key={index} to={link.link}> <Link key={index} to={link.link}>

2
src/components/ProfileBreadcrumbs/profileBreadcrumbs.scss
View File

@ -1,4 +1,4 @@
.profileBreadcrumbs { .profile-breadcrumbs {
display: flex; display: flex;
margin-bottom: 12px; margin-bottom: 12px;

16
src/components/ProfileCalendar/ProfileCalendarComponent.jsx
View File

@ -246,13 +246,13 @@ export const ProfileCalendarComponent = React.memo(
key={day} key={day}
className={ className={
startRangeDays startRangeDays
? `selectDays ${ ? `select-days ${
String(startDate?._d) === String(day._d) || String(startDate?._d) === String(day._d) ||
endDate === day endDate === day
? "selectedDay" ? "selected-day"
: "" : ""
} ${endDate ? "disable" : ""} ${ } ${endDate ? "disable" : ""} ${
selectedRangeDays[day] ? "selectedDay" : "" selectedRangeDays[day] ? "selected-day" : ""
}` }`
: dayStyles(day) : dayStyles(day)
} }
@ -272,7 +272,7 @@ export const ProfileCalendarComponent = React.memo(
)} )}
</div> </div>
</div> </div>
<div className="selectDateRange"> <div className="select-date-range">
<span <span
className="select" className="select"
onClick={() => { onClick={() => {
@ -286,15 +286,15 @@ export const ProfileCalendarComponent = React.memo(
? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
: `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}` : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}`
: activePeriod : activePeriod
? "Выберите диапазон на календаре" ? "Выберите диапазон на календаре"
: "Выбрать диапазон"} : "Выбрать диапазон"}
</span> </span>
<span> <span>
{totalRangeHours {totalRangeHours
? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
: endDate : endDate
? "0 часов" ? "0 часов"
: ""} : ""}
</span> </span>
{endDate && ( {endDate && (
<BaseButton <BaseButton

6
src/components/ProfileHeader/profileHeader.scss
View File

@ -84,12 +84,12 @@
} }
} }
&__personalInfo { &__personal-info {
display: flex; display: flex;
column-gap: 20px; column-gap: 20px;
align-items: center; align-items: center;
&Name { &-name {
margin-bottom: 0; margin-bottom: 0;
font-size: 12px; font-size: 12px;
line-height: 32px; line-height: 32px;
@ -103,7 +103,7 @@
} }
} }
&Avatar { &-avatar {
width: 37px; width: 37px;
height: 37px; height: 37px;
border-radius: 100px; border-radius: 100px;

45
src/components/ProjectTicket/ProjectTicket.jsx
View File

@ -1,10 +1,10 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { Link } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice"; import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice";
import { copyProjectLink } from "@utils/helper"; import { copyProjectLink, urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request"; import { apiRequest } from "@api/request";
@ -18,7 +18,6 @@ import archiveSet from "assets/icons/archive.svg";
import del from "assets/icons/delete.svg"; import del from "assets/icons/delete.svg";
import edit from "assets/icons/edit.svg"; import edit from "assets/icons/edit.svg";
import link from "assets/icons/link.svg"; import link from "assets/icons/link.svg";
import avatarProject from "assets/images/avatarMok.png";
import "./projectTicket.scss"; import "./projectTicket.scss";
@ -27,8 +26,8 @@ export const ProjectTicket = ({ project, index }) => {
const [modalAdd, setModalAdd] = useState(false); const [modalAdd, setModalAdd] = useState(false);
const [modalDelete, setModalDelete] = useState(false); const [modalDelete, setModalDelete] = useState(false);
const [acceptModalOpen, setAcceptModalOpen] = useState(false); const [acceptModalOpen, setAcceptModalOpen] = useState(false);
const [path, setPath] = useState("");
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate = useNavigate();
const { showNotification } = useNotification(); const { showNotification } = useNotification();
useEffect(() => { useEffect(() => {
@ -84,18 +83,30 @@ export const ProjectTicket = ({ project, index }) => {
<div className="project__link">{project.name}</div> <div className="project__link">{project.name}</div>
<div className="project__info"> <div className="project__info">
<p>Открытые задачи</p> {/* <p>Открытые задачи</p>
<span className="count"> <span className="count">
{project.columns.reduce( {project.columns.reduce(
(accumulator, currentValue) => (accumulator, currentValue) =>
accumulator + currentValue.tasks.length, accumulator + currentValue.tasks.length,
0 0
)} )}
</span> </span> */}
<img src={avatarProject} alt="#" className="project__avatar" /> <img
src={urlForLocal(project.owner_info.avatar)}
alt="avatar"
className="project__avatar"
/>
<span>{project.owner_info.fio}</span>
</div> </div>
</Link> </Link>
{/* <Link
to={`/profile/statistics/${project.id}`}
className="project__statistics"
>
Посмотреть статистику
</Link> */}
<span <span
className="menu-settings" className="menu-settings"
onClick={() => { onClick={() => {
@ -105,13 +116,6 @@ export const ProjectTicket = ({ project, index }) => {
... ...
</span> </span>
<Link
to={`/profile/statistics/${project.id}`}
className="project__statistics"
>
Посмотреть статистику
</Link>
<TrackerModal <TrackerModal
active={modalAdd} active={modalAdd}
setActive={setModalAdd} setActive={setModalAdd}
@ -131,9 +135,9 @@ export const ProjectTicket = ({ project, index }) => {
<img src={edit}></img> <img src={edit}></img>
<p>редактировать</p> <p>редактировать</p>
</div> </div>
<div> <div onClick={copyProjectLink(project.id)}>
<img src={link}></img> <img src={link}></img>
<p onClick={copyProjectLink(project.id)}>скопировать ссылку</p> <p>скопировать ссылку</p>
</div> </div>
<div <div
onClick={() => { onClick={() => {
@ -144,7 +148,14 @@ export const ProjectTicket = ({ project, index }) => {
<img src={archiveSet}></img> <img src={archiveSet}></img>
<p>в архив</p> <p>в архив</p>
</div> </div>
<div
onClick={() => {
navigate(`/profile/statistics/${project.id}`);
}}
>
<img src={archiveSet}></img>
<p>статистика</p>
</div>
<div <div
onClick={() => { onClick={() => {
setModalDelete(true); setModalDelete(true);

12
src/components/ProjectTicket/projectTicket.scss
View File

@ -40,7 +40,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
margin-bottom: 30px;
p { p {
color: #6f6f6f; color: #6f6f6f;
@ -50,6 +49,11 @@
line-height: 17px; line-height: 17px;
} }
span {
color: blue;
font-size: 15px;
}
.count { .count {
margin-left: 8px; margin-left: 8px;
width: 26px; width: 26px;
@ -78,16 +82,16 @@
.menu-settings { .menu-settings {
position: absolute; position: absolute;
font-size: 21px; font-size: 30px;
color: #6f6f6f; color: #6f6f6f;
right: 15px; right: 15px;
top: 0px; top: -10px;
} }
&__avatar { &__avatar {
width: 25px; width: 25px;
height: 25px; height: 25px;
margin-left: 56px; margin-right: 10px;
} }
&__open-tracker { &__open-tracker {

8
src/components/ReportForm/ReportForm.jsx
View File

@ -249,7 +249,7 @@ const ReportForm = () => {
value={inputs[index].task} value={inputs[index].task}
className={ className={
!input.task && reportSuccess === "Заполните задачи" !input.task && reportSuccess === "Заполните задачи"
? "checkTask" ? "check-task"
: "" : ""
} }
name="text" name="text"
@ -273,7 +273,7 @@ const ReportForm = () => {
className={ className={
!input.hours_spent && !input.hours_spent &&
reportSuccess === "Заполните задачи" reportSuccess === "Заполните задачи"
? "checkTask" ? "check-task"
: "" : ""
} }
name="number" name="number"
@ -308,7 +308,7 @@ const ReportForm = () => {
})} })}
<div className="report-form__form-add"> <div className="report-form__form-add">
<p className="addMore" onClick={addInput}> <p className="add-more" onClick={addInput}>
+ +
</p> </p>
<span>Добавить задачу</span> <span>Добавить задачу</span>
@ -368,7 +368,7 @@ const ReportForm = () => {
{reportSuccess && ( {reportSuccess && (
<p <p
className={`report-form__footer-done ${ className={`report-form__footer-done ${
reportSuccess === "Заполните задачи" ? "errorText" : "" reportSuccess === "Заполните задачи" ? "error-text" : ""
}`} }`}
> >
{reportSuccess} {reportSuccess}

8
src/components/ReportForm/reportForm.scss
View File

@ -194,7 +194,7 @@
flex-direction: column; flex-direction: column;
&--description { &--description {
.checkTask { .check-task {
border-color: #fc0000; border-color: #fc0000;
} }
@ -229,7 +229,7 @@
margin-left: 0px; margin-left: 0px;
} }
.checkTask { .check-task {
border-color: #fc0000; border-color: #fc0000;
} }
@ -267,7 +267,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.addMore { .add-more {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -383,7 +383,7 @@
margin-left: 20px; margin-left: 20px;
} }
.errorText { .error-text {
color: #bf3c3c; color: #bf3c3c;
font-weight: 600; font-weight: 600;
} }

24
src/components/ShortReport/ShortReport.jsx
View File

@ -75,9 +75,9 @@ export const ShortReport = () => {
return ( return (
<div> <div>
<div className="viewReport__info short-report"> <div className="view-report__info short-report">
<div className="viewReport__title-box"> <div className="view-report__title-box">
<h2 className="viewReport__title"> <h2 className="view-report__title">
Ваши отчеты - <span>просмотр отчета за день</span> Ваши отчеты - <span>просмотр отчета за день</span>
</h2> </h2>
<Link to={`/profile/calendar/view/${dateCreate}`}> <Link to={`/profile/calendar/view/${dateCreate}`}>
@ -85,11 +85,11 @@ export const ShortReport = () => {
</Link> </Link>
</div> </div>
<div className="viewReport__bar"> <div className="view-report__bar">
<h3 className="viewReport__bar__date"> <h3 className="view-report__bar__date">
{getCorrectDate(reportDate)} {getCorrectDate(reportDate)}
</h3> </h3>
<p className="viewReport__bar__hours"> <p className="view-report__bar__hours">
Вами потрачено на работу:{" "} Вами потрачено на работу:{" "}
<span> <span>
{totalHours} {hourOfNum(totalHours)} {totalHours} {hourOfNum(totalHours)}
@ -99,9 +99,9 @@ export const ShortReport = () => {
</div> </div>
{loader && <Loader style="green" />} {loader && <Loader style="green" />}
{Boolean(taskText.length) && ( {Boolean(taskText.length) && (
<div className="viewReport__content"> <div className="view-report__content">
<div className="table__container"> <div className="table__container">
<table className="viewReport__done"> <table className="view-report__done">
<thead> <thead>
<tr> <tr>
<th> <th>
@ -123,7 +123,7 @@ export const ShortReport = () => {
</p> </p>
</td> </td>
<td> <td>
<div className="viewReport__done__hours__item"> <div className="view-report__done__hours__item">
<span>{task.hours}</span> <span>{task.hours}</span>
<p className="hours"> <p className="hours">
{hourOfNum(task.hours)} на задачу {hourOfNum(task.hours)} на задачу
@ -145,7 +145,7 @@ export const ShortReport = () => {
</table> </table>
</div> </div>
{Boolean(difficulties.length) && ( {Boolean(difficulties.length) && (
<div className="viewReport__item"> <div className="view-report__item">
<h3>Какие сложности возникли?</h3> <h3>Какие сложности возникли?</h3>
{difficulties.map((item, index) => { {difficulties.map((item, index) => {
return <p key={index}>{item}</p>; return <p key={index}>{item}</p>;
@ -153,7 +153,7 @@ export const ShortReport = () => {
</div> </div>
)} )}
{Boolean(tomorrowTask.length) && ( {Boolean(tomorrowTask.length) && (
<div className="viewReport__item"> <div className="view-report__item">
<h3>Что планируется сделать завтра?</h3> <h3>Что планируется сделать завтра?</h3>
{tomorrowTask.map((item, index) => { {tomorrowTask.map((item, index) => {
return <p key={index}>{item}</p>; return <p key={index}>{item}</p>;
@ -163,7 +163,7 @@ export const ShortReport = () => {
</div> </div>
)} )}
{!Boolean(taskText.length) && !loader && ( {!Boolean(taskText.length) && !loader && (
<div className="viewReport__noTask"> <div className="view-report__no-task">
<p> <p>
В этот день вы <span>не заполняли</span> отчет В этот день вы <span>не заполняли</span> отчет
</p> </p>

2
src/components/ShortReport/shortReport.scss
View File

@ -2,7 +2,7 @@
margin-bottom: 30px; margin-bottom: 30px;
} }
.viewReport { .view-report {
&__title-box { &__title-box {
display: flex; display: flex;
align-items: center; align-items: center;

4
src/components/StarRating/StarRating.scss
View File

@ -3,6 +3,7 @@
align-items: center; align-items: center;
font-size: var(--size); font-size: var(--size);
line-height: 0.75; line-height: 0.75;
&__body { &__body {
position: relative; position: relative;
&::before { &::before {
@ -11,6 +12,7 @@
color: var(--color); color: var(--color);
} }
} }
&__active { &__active {
position: absolute; position: absolute;
height: 100%; height: 100%;
@ -28,6 +30,7 @@
color: var(--color); color: var(--color);
} }
} }
&__items { &__items {
display: flex; display: flex;
position: absolute; position: absolute;
@ -36,6 +39,7 @@
left: 0; left: 0;
top: 0; top: 0;
} }
&__item { &__item {
flex: 0 0 20%; flex: 0 0 20%;
height: 100%; height: 100%;

1
src/components/TaskItem/taskItem.scss
View File

@ -30,6 +30,7 @@
&__hours { &__hours {
margin-left: 3.3rem; margin-left: 3.3rem;
display: flex; display: flex;
&-value { &-value {
width: 34px; width: 34px;
height: 34px; height: 34px;

4
src/components/TrackerSelectColumn/TrackerSelectColumn.jsx
View File

@ -12,13 +12,13 @@ export const TrackerSelectColumn = ({ columns, task, currentColumn }) => {
const [openSelect, setOpenSelect] = useState(false); const [openSelect, setOpenSelect] = useState(false);
return ( return (
<div <div
className="trackerSelectColumn" className="tracker-select-column"
onClick={() => setOpenSelect(!openSelect)} onClick={() => setOpenSelect(!openSelect)}
> >
<p>{currentColumn.title}</p> <p>{currentColumn.title}</p>
<img className={openSelect ? "open" : ""} src={arrowDown} alt="arrow" /> <img className={openSelect ? "open" : ""} src={arrowDown} alt="arrow" />
{openSelect && ( {openSelect && (
<div className="trackerSelectColumn__dropDown"> <div className="tracker-select-column__dropDown">
{columns.map((column) => { {columns.map((column) => {
return ( return (
<p <p

4
src/components/TrackerSelectColumn/trackerSelectColumn.scss
View File

@ -1,4 +1,4 @@
.trackerSelectColumn { .tracker-select-column {
display: none; display: none;
@media (max-width: 900px) { @media (max-width: 900px) {
@ -9,7 +9,7 @@
align-items: center; align-items: center;
padding: 2px 6px; padding: 2px 6px;
cursor: pointer; cursor: pointer;
border: 1px solid #e3e2e2;; border: 1px solid #e3e2e2;
border-radius: 8px; border-radius: 8px;
position: relative; position: relative;

2
src/components/TrackerTaskComment/TrackerTaskComment.jsx
View File

@ -80,7 +80,7 @@ export const TrackerTaskComment = ({
: "", : "",
"comments__list__item", "comments__list__item",
commentsEditOpen ? "comment__edit--open" : "", commentsEditOpen ? "comment__edit--open" : "",
comment.parent_id ? "comments__list__item__subComment" : "" comment.parent_id ? "comments__list__item__sub-comment" : ""
].join(" ")} ].join(" ")}
> >
<div className="comments__list__item__info"> <div className="comments__list__item__info">

2
src/components/features/quiz/CardAviableTest.jsx
View File

@ -29,7 +29,7 @@ export const CardAvailableTest = ({ title, description, path, status }) => {
</div> </div>
<div className="card-available-test__info"> <div className="card-available-test__info">
<p dangerouslySetInnerHTML={{ __html: description }}></p> <p dangerouslySetInnerHTML={{ __html: description }}></p>
<div className="card-available-test__infoLink"> <div className="card-available-test__info-link">
<img src={rightArrow} alt="arrow" /> <img src={rightArrow} alt="arrow" />
</div> </div>
</div> </div>

2
src/components/features/quiz/quiz.scss
View File

@ -469,7 +469,7 @@ $maxWidthContainer: 1123;
font-weight: 700; font-weight: 700;
} }
} }
&Link { &-link {
width: 48px; width: 48px;
height: 48px; height: 48px;
background: #ddeec6; background: #ddeec6;

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

@ -326,14 +326,14 @@
} }
} }
&__partnersForPart { &__partners-for-part {
background: #406128; background: #406128;
color: white; color: white;
margin-left: -35px; margin-left: -35px;
} }
&__partnersForPart, &__partners-for-part,
&__developersForPart { &__developers-for-part {
width: 220px; width: 220px;
height: 50px; height: 50px;
border-radius: 44px; border-radius: 44px;
@ -341,7 +341,7 @@
border: none; border: none;
} }
&__developersForPart { &__developers-for-part {
background-color: #52b7098c; background-color: #52b7098c;
color: #2d6505; color: #2d6505;
} }
@ -353,7 +353,7 @@
flex-direction: column; flex-direction: column;
} }
&__partnersForPart { &__partners-for-part {
margin: 15px 0 0 0; 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 className="auth-candidate__start__description">
Для нас не имеет значение Ваша локация. Для нас не имеет значение Ваша локация.
</p> </p>
<div className="auth-candidate__start__categoriesWrapper"> <div className="auth-candidate__start__categories-wrapper">
<StepsForCandidate step="шаг 1 - выберите специализацию" /> <StepsForCandidate step="шаг 1 - выберите специализацию" />
{personalInfoItems.map((item, index) => { {personalInfoItems.map((item, index) => {
return ( return (

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

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

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

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

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

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

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

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

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

@ -1,7 +1,7 @@
.companyInfo { .company-info {
&__content { &__content {
font-family: "LabGrotesque", sans-serif; font-family: "LabGrotesque", sans-serif;
background-color: #F1F1F1; background-color: #f1f1f1;
padding-top: 60px; padding-top: 60px;
@media (max-width: 1375px) { @media (max-width: 1375px) {
@ -18,7 +18,7 @@
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
span { span {
color: #52B709; color: #52b709;
font-weight: 700; font-weight: 700;
} }
@ -39,10 +39,10 @@
} }
} }
.arrowElement { .arrow-element {
width: 48px; width: 48px;
height: 48px; height: 48px;
background-color: #D3E4BC; background-color: #d3e4bc;
border-radius: 50px; border-radius: 50px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -53,7 +53,7 @@
} }
} }
.arrowDown { .arrow-down {
margin: 35px auto 45px; margin: 35px auto 45px;
img { img {
transform: rotate(90deg); transform: rotate(90deg);
@ -118,7 +118,7 @@
} }
span { span {
color: #52B709; color: #52b709;
font-weight: 700; font-weight: 700;
} }
@ -145,7 +145,7 @@
} }
} }
&__countingBlock { &__counting-block {
padding: 27px 185px 26px 45px; padding: 27px 185px 26px 45px;
border-radius: 12px; border-radius: 12px;
background: white; background: white;
@ -190,13 +190,13 @@
flex-direction: column; flex-direction: column;
row-gap: 12px; row-gap: 12px;
.titleBottom { .title-bottom {
font-size: 21px; font-size: 21px;
font-weight: 700; font-weight: 700;
line-height: 48px; line-height: 48px;
} }
.subTitleBottom { .subtitle-bottom {
color: #000000; color: #000000;
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
@ -204,7 +204,7 @@
} }
span { span {
color: #52B709; color: #52b709;
} }
@media (max-width: 780px) { @media (max-width: 780px) {
@ -213,7 +213,7 @@
} }
} }
.countingBlock__info { .counting-block__info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 12px; row-gap: 12px;
@ -223,7 +223,7 @@
} }
} }
.countingBlock { .counting-block {
&__title { &__title {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
@ -232,13 +232,13 @@
} }
&__subTitle { &__subTitle {
color: #6F6F6F; color: #6f6f6f;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
} }
} }
.countingBlockImg { .counting-block-img {
position: absolute; position: absolute;
right: -140px; right: -140px;
top: -55px; 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 { .frequently-asked-question {
background: #f5f5f5; background: #f5f5f5;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
font-family: "LabGrotesque", sans-serif; font-family: "LabGrotesque", sans-serif;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media (max-width: 1375px) {
margin-top: 80px; @media (max-width: 1375px) {
margin-top: 80px;
} }
&__container {
flex: 1 1 auto; &__container {
margin-top: 30px; flex: 1 1 auto;
} margin-top: 30px;
&__title { }
font-weight: 500;
@include adaptiv-value("font-size", 38, 24, 1); &__title {
line-height: 84%; font-weight: 500;
margin: 42px 0 30px 0; @include adaptiv-value("font-size", 38, 24, 1);
color: #000000; line-height: 84%;
} margin: 42px 0 30px 0;
&__back { color: #000000;
margin: 0 0 30px 0; }
display: flex;
align-items: center; &__back {
cursor: pointer; margin: 0 0 30px 0;
gap: 19px; display: flex;
p { align-items: center;
font-size: 12px; cursor: pointer;
line-height: 167%; gap: 19px;
color: #6f6f6f; p {
} font-size: 12px;
} line-height: 167%;
&__arrow { color: #6f6f6f;
background: rgba(141, 198, 63, 0.5098039216); }
width: 48px; }
height: 48px;
border-radius: 44px; &__arrow {
display: flex; background: rgba(141, 198, 63, 0.5098039216);
align-items: center; width: 48px;
justify-content: center; height: 48px;
transform: rotate(180deg); border-radius: 44px;
} display: flex;
&__answer { align-items: center;
font-weight: 400; justify-content: center;
font-size: 20px; transform: rotate(180deg);
line-height: 120%; }
background: #ffffff;
border-radius: 12px; &__answer {
word-break: break-word; font-weight: 400;
color: #000000; font-size: 20px;
@include adaptiv-value("padding-top", 33, 15, 1); line-height: 120%;
@include adaptiv-value("padding-bottom", 33, 15, 1); background: #ffffff;
@include adaptiv-value("padding-left", 41, 22, 1); border-radius: 12px;
@include adaptiv-value("padding-right", 41, 22, 1); 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; font-family: "LabGrotesque", sans-serif;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media (max-width: 1375px) { @media (max-width: 1375px) {
margin-top: 80px; margin-top: 80px;
} }
&__container { &__container {
flex: 1 1 auto; flex: 1 1 auto;
margin: 30px 0; margin: 30px 0;
} }
&__about { &__about {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 30px 0; margin: 30px 0;
@media (max-width: 600px) { @media (max-width: 600px) {
flex-wrap: wrap; flex-wrap: wrap;
row-gap: 25px; row-gap: 25px;
} }
} }
&__title { &__title {
font-weight: 500; font-weight: 500;
font-size: 48px; font-size: 48px;
line-height: 67%; line-height: 67%;
color: #000000; color: #000000;
margin: 0 13px 0 0; margin: 0 13px 0 0;
@media (max-width: 600px) { @media (max-width: 600px) {
order: 1; order: 1;
} }
} }
&__arrow { &__arrow {
background: rgba(128, 119, 119, 0.3); background: rgba(128, 119, 119, 0.3);
flex: 0 0 27px; flex: 0 0 27px;
@ -40,10 +47,12 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0 24px 0 0; margin: 0 24px 0 0;
@media (max-width: 600px) { @media (max-width: 600px) {
order: 2; order: 2;
} }
} }
&__description { &__description {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
@ -52,15 +61,16 @@
color: #000000; color: #000000;
white-space: pre-line; white-space: pre-line;
} }
&__items { &__items {
display: grid; display: grid;
grid-row-gap: 49px; grid-row-gap: 49px;
grid-column-gap: 29px; grid-column-gap: 29px;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@media (max-width: 750px) { @media (max-width: 750px) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-gap: 60px; grid-gap: 60px;
} }
} }
} }

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

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

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

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

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
.employeeReport { .employee-report {
background: #F1F1F1; background: #f1f1f1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
font-family: "LabGrotesque", sans-serif; font-family: "LabGrotesque", sans-serif;
@ -42,7 +42,7 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: #263238; color: #263238;
background: #8DC63F; background: #8dc63f;
border-radius: 12px; border-radius: 12px;
padding: 5px; padding: 5px;
max-width: 130px; 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 <Navigate to="/profile/categories" replace />;
} }
return ( return (
<div className="partnerEmployees"> <div className="partner-employees">
<ProfileHeader /> <ProfileHeader />
<Navigation /> <Navigation />
<div className="container"> <div className="container">
@ -37,17 +37,17 @@ export const PartnerEmployees = () => {
} }
]} ]}
/> />
<h2 className="partnerEmployees__title">Backend разработчики</h2> <h2 className="partner-employees__title">Backend разработчики</h2>
<div className="partnerEmployees__items"> <div className="partner-employees__items">
{partnerEmployees.map((person) => { {partnerEmployees.map((person) => {
return ( return (
<div className="partnerEmployees__item" key={person.id}> <div className="partner-employees__item" key={person.id}>
<div className="partnerEmployees__item__name"> <div className="partner-employees__item__name">
<img src={person.personAvatar} alt="avatar" /> <img src={person.personAvatar} alt="avatar" />
<h4>{person.name}</h4> <h4>{person.name}</h4>
</div> </div>
<div className="partnerEmployees__item__info"> <div className="partner-employees__item__info">
<div className="partnerEmployees__item__info__qualification"> <div className="partner-employees__item__info__qualification">
<h5>{person.qualification}</h5> <h5>{person.qualification}</h5>
<span>{person.level}</span> <span>{person.level}</span>
<div className="info_summary"> <div className="info_summary">
@ -58,10 +58,10 @@ export const PartnerEmployees = () => {
</Link> </Link>
</div> </div>
</div> </div>
<div className="partnerEmployees__item__info__project"> <div className="partner-employees__item__info__project">
<span className="name">Проект:</span> <span className="name">Проект:</span>
<h5>{person.project}</h5> <h5>{person.project}</h5>
<div className="partnerEmployees__item__info__project__details"> <div className="partner-employees__item__info__project__details">
<div className="details__item"> <div className="details__item">
<p>Открытые задачи</p> <p>Открытые задачи</p>
<span className="count"> <span className="count">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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