refactoring allStyles styleStyle -> style-style

This commit is contained in:
2024-02-09 18:17:15 +03:00
parent 81d2ee4098
commit af07631abe
93 changed files with 751 additions and 703 deletions

View File

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

View File

@ -1,8 +1,8 @@
.viewReport {
background: #F1F1F1;
.view-report {
background: #f1f1f1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
font-family: "LabGrotesque", sans-serif;
.container {
max-width: 1160px;
@ -25,7 +25,7 @@
line-height: 32px;
color: #000000;
span {
color: #52B709;
color: #52b709;
}
@media (max-width: 500px) {
@ -56,7 +56,7 @@
&__bar {
display: flex;
margin-top: 20px;
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
padding: 20px 33px;
align-items: center;
@ -73,7 +73,7 @@
}
&__edit {
background: #E1FCCF;
background: #e1fccf;
border-radius: 44px;
border: none;
}
@ -81,7 +81,7 @@
&__delete {
background: white;
border-radius: 12px;
border: 1px dashed #8BCC60;
border: 1px dashed #8bcc60;
}
.disable {
@ -124,7 +124,7 @@
.switch-date {
width: 48px;
height: 48px;
background: #8DC63F;
background: #8dc63f;
border-radius: 50px;
display: flex;
justify-content: center;
@ -169,7 +169,6 @@
border-collapse: separate;
border-spacing: 28px 0;
@media (max-width: 1205px) {
display: grid;
border-collapse: collapse;
@ -278,7 +277,7 @@
&__hours {
width: 25%;
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
padding: 32px 40px 18px;
display: flex;
@ -323,7 +322,7 @@
span {
max-width: 48px;
height: 48px;
background: #8DC63F;
background: #8dc63f;
border-radius: 50px;
display: flex;
align-items: center;
@ -360,7 +359,7 @@
display: flex;
flex-direction: column;
row-gap: 10px;
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
margin: 20px 0;
padding: 15px;
@ -390,9 +389,9 @@
margin-bottom: 0;
}
&__noTask {
&__no-task {
padding: 25px 10px;
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
text-align: center;
@ -407,7 +406,7 @@
}
span {
color: #8BCC60;
color: #8bcc60;
font-weight: 500;
}
}