diff --git a/package-lock.json b/package-lock.json index d2b7b297..1f99b09f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,7 +49,7 @@ "semver": "7.3.2", "slick-carousel": "^1.8.1", "sweetalert2": "^11.4.8", - "ts-loader": "^9.4.2" + "ts-loader": "^9.5.1" }, "devDependencies": { "@babel/core": "^7.20.12", @@ -23194,7 +23194,6 @@ "version": "0.7.4", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==", - "dev": true, "engines": { "node": ">= 8" } @@ -24250,14 +24249,15 @@ "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==" }, "node_modules/ts-loader": { - "version": "9.4.2", - "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.2.tgz", - "integrity": "sha512-OmlC4WVmFv5I0PpaxYb+qGeGOdm5giHU7HwDDUjw59emP2UYMHy9fFSDcYgSNoH8sXcj4hGCSEhlDZ9ULeDraA==", + "version": "9.5.1", + "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.1.tgz", + "integrity": "sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==", "dependencies": { "chalk": "^4.1.0", "enhanced-resolve": "^5.0.0", "micromatch": "^4.0.0", - "semver": "^7.3.4" + "semver": "^7.3.4", + "source-map": "^0.7.4" }, "engines": { "node": ">=12.0.0" diff --git a/package.json b/package.json index 4ffb319b..d2d4f930 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "semver": "7.3.2", "slick-carousel": "^1.8.1", "sweetalert2": "^11.4.8", - "ts-loader": "^9.4.2" + "ts-loader": "^9.5.1" }, "devDependencies": { "@babel/core": "^7.20.12", diff --git a/src/App.js b/src/App.js index ebacc0f0..70acea94 100644 --- a/src/App.js +++ b/src/App.js @@ -138,8 +138,6 @@ const App = () => { element={} /> - - } /> diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index d634ff6b..e94b1b31 100644 --- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx +++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx @@ -25,7 +25,7 @@ import { useNotification } from "@hooks/useNotification"; import FileTracker from "@components/FileTracker/FileTracker"; import AcceptModal from "@components/Modal/AcceptModal/AcceptModal"; import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal"; -import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment"; +import TrackerTaskComment from "@components/TrackerComponents/TrackerTaskComment/TrackerTaskComment"; import archive from "assets/icons/archive.svg"; import arrow from "assets/icons/arrows/arrowStart.png"; diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 803aa2c0..dfaa3fbf 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -29,7 +29,7 @@ import AcceptModal from "@components/Modal/AcceptModal/AcceptModal"; import { Navigation } from "@components/Navigation/Navigation"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; -import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment"; +import TrackerTaskComment from "@components/TrackerComponents/TrackerTaskComment/TrackerTaskComment"; import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrowStart from "assets/icons/arrows/arrowStart.png"; diff --git a/src/components/TrackerComponents/Archive/Archive.jsx b/src/components/TrackerComponents/Archive/Archive.jsx new file mode 100644 index 00000000..313aa1b4 --- /dev/null +++ b/src/components/TrackerComponents/Archive/Archive.jsx @@ -0,0 +1,130 @@ +import React, { useEffect, useState } from "react"; +import { useSelector } from "react-redux"; + +import { getProjects } from "@redux/projectsTrackerSlice"; + +import { caseOfNum } from "@utils/helper"; + +import { Loader } from "@components/Common/Loader/Loader"; + +import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg"; +import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg"; +import search from "assets/icons/serchIcon.png"; +import mockAvatar from "assets/images/avatarMok.png"; + +import ArchiveTableTracker from "../ArchiveTableTracker/ArchiveTableTracker"; +import "./archive.scss"; + +const Archive = ({ + loader, + allCompletedTasks, + projects, + filterCompleteTasks, + setFilterCompleteTasks +}) => { + function filterArchiveTasks(e) { + setFilterCompleteTasks( + allCompletedTasks.filter((item) => { + if (!e.target.value) { + return item; + } + if ( + item?.title.toLowerCase().startsWith(e.target.value.toLowerCase()) || + item?.description + .toLowerCase() + .startsWith(e.target.value.toLowerCase()) + ) { + return item; + } + }) + ); + } + + return ( + <> +
+
+

Архив задач:

+

+ {`${filterCompleteTasks.length} + ${caseOfNum(filterCompleteTasks.length, "tasks")}`} +

+ +
+
+ + +
+
+

Сентябрь,

+

2023

+
+
+
+ search + filterArchiveTasks(event)} + /> +
+
+ + {loader && } + + +
+
+
+

Архив проектов:

+

+ {`${projects?.filter((project) => project.status === 10).length} + ${caseOfNum( + projects?.filter((project) => project.status === 10).length, + "projects" + )}`} +

+
+
+ {Boolean( + projects?.filter((project) => project.status === 10).length + ) ? ( + projects?.map((project, index) => { + return project.status === 10 ? ( +
+
+

{project.name}

+

{project.date}

+
+
+ # +
+

Создатель проекта:

+

{"Василий Тарасов"}

+
+
+
+ ) : ( + "" + ); + }) + ) : ( +
+ # +

В архиве проектов нет

+
+ )} +
+
+ + ); +}; + +export default Archive; diff --git a/src/components/TrackerComponents/Archive/archive.scss b/src/components/TrackerComponents/Archive/archive.scss new file mode 100644 index 00000000..b5e74c59 --- /dev/null +++ b/src/components/TrackerComponents/Archive/archive.scss @@ -0,0 +1,382 @@ +.archive { + &__title { + padding-bottom: 8px; + display: flex; + align-items: center; + color: #000; + min-height: 48px; + + h3 { + font-weight: 700; + font-size: 18px; + line-height: 32px; + margin-bottom: 0; + + @media (max-width: 590px) { + font-size: 15px; + } + } + + p { + margin: 0 0 0 10px; + font-weight: 300; + font-size: 18px; + + @media (max-width: 590px) { + font-size: 15px; + } + } + + @media (max-width: 450px) { + flex-wrap: wrap; + } + } + + &__tasksWrapper { + margin-top: 20px; + display: flex; + flex-direction: column; + row-gap: 15px; + overflow-y: auto; + margin-right: -16px; + padding-right: 10px; + + &::-webkit-scrollbar { + width: 4px; + background: 0 0; + box-shadow: 0 0 14px rgba(0, 0, 0, 0.04); + border-radius: 20px; + } + + &::-webkit-scrollbar { + width: 4px; + border-radius: 20px; + } + + &::-webkit-scrollbar-thumb { + background: #cbd9f9; + border-radius: 20px; + } + + &::-webkit-scrollbar-track { + background: #c5c0c6; + border-radius: 20px; + } + } + + &__completeTask { + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + background: #f1f1f1; + border-radius: 12px; + padding: 12px 15px 7px 16px; + + p { + max-width: 420px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-bottom: 0; + color: #111112; + } + + .completeTask__title { + font-weight: 700; + font-size: 18px; + line-height: 32px; + } + + &__time { + p { + color: #000; + font-size: 14px; + font-style: normal; + } + } + + &__info { + display: flex; + align-items: center; + + img { + width: 32px; + height: 32px; + } + + &__project { + margin-left: 17px; + span { + color: #807777; + font-weight: 500; + font-size: 10px; + } + p { + color: #1a1919; + font-weight: 500; + font-size: 14px; + line-height: 24px; + text-decoration: line-through; + } + } + } + + &-project { + background: #f1f1f1; + width: 328px; + max-width: 328px; + border-radius: 8px; + display: flex; + flex-direction: column; + padding: 23px 23px 23px 33px; + transition: 0.4s; + margin-bottom: 15px; + + .project-title-archive { + width: 274px; + max-width: 274px; + color: #111112; + font-size: 16px; + font-style: normal; + font-weight: 700; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + &:hover { + cursor: pointer; + transform: scale(0.99); + box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11); + transition: 0.4s; + } + } + + &__description { + width: 270px; + max-width: 270px; + font-size: 14px; + font-weight: 500; + + .date { + font-weight: 500; + font-size: 14px; + line-height: 24px; + color: #6f6f6f; + + p { + overflow: hidden; + max-width: 260px; + max-height: 120px; + text-overflow: ellipsis; + } + } + } + + &__creator { + display: flex; + align-items: center; + gap: 13px; + + img { + width: 31.366px; + height: 29px; + } + + h4 { + color: #5b6871; + font-size: 10px; + font-style: normal; + font-weight: 400; + } + + p { + color: #2d4a17; + font-size: 13px; + font-style: normal; + font-weight: 500; + } + } + + @media (max-width: 740px) { + flex-direction: column; + padding: 10px 20px; + } + + @media (max-width: 650px) { + background-color: white; + } + } + + &__tasks { + padding-right: 15px; + + @media (max-width: 1100px) { + width: 100%; + } + + &-period { + display: flex; + align-items: center; + margin-left: 73px; + + .buttons-month { + display: flex; + gap: 34px; + + button { + width: 30px; + height: 30px; + background-color: #8dc63f; + border-radius: 15px; + border: none; + + img { + width: 14px; + height: 14px; + } + + &:first-child { + transform: rotate(-180deg); + } + } + } + + .month-period { + display: flex; + flex-direction: row; + align-items: center; + margin-left: 62px; + + h2 { + color: #1458dd; + } + + h3 { + color: #252c32; + font-size: 18px; + font-weight: 700; + margin-left: 5px; + } + } + } + + &__search { + margin-left: auto; + padding: 6px 12px; + display: flex; + align-items: center; + background: #ffffff; + border: 1px solid #dde2e4; + box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); + border-radius: 6px; + max-width: 300px; + width: 100%; + + &:focus-within { + border: 1px solid #0000004d; + } + + @media (max-width: 590px) { + max-width: 230px; + } + + @media (max-width: 500px) { + max-width: 150px; + } + + @media (max-width: 450px) { + margin-left: 0; + max-width: none; + } + + input { + width: 100%; + padding-left: 10px; + outline: none; + border: none; + font-weight: 400; + font-size: 14px; + line-height: 24px; + } + + img { + width: 14px; + height: 14px; + } + } + } + + &__projects { + display: flex; + flex-direction: column; + + @media (max-width: 1100px) { + width: 100%; + min-height: auto; + } + + &-title { + background: #e1fccf; + display: flex; + align-items: center; + height: 66px; + border-radius: 12px; + margin: 25px 0 0 0; + padding-left: 15px; + color: #000; + font-style: normal; + + h3 { + font-size: 16px; + font-weight: 700; + margin: 0 5px 0 0; + } + + p { + font-size: 16px; + font-weight: 300; + } + } + } + + &__noItem { + padding: 23px 0 19px; + color: #6f6f6f; + + p { + font-size: 17px; + font-style: normal; + font-weight: 700; + padding-left: 15px; + } + + @media (max-width: 650px) { + background-color: white; + } + + &-project { + background: #f1f1f1; + width: 328px; + height: 108px; + border-radius: 8px; + display: flex; + gap: 21px; + padding: 23px; + align-items: center; + + p { + width: 105px; + color: #6f6f6f; + font-size: 16px; + font-style: normal; + font-weight: 700; + } + + img { + margin-left: 10px; + } + } + } +} diff --git a/src/components/ProjectTicket/ProjectTicket.jsx b/src/components/TrackerComponents/ProjectTicket/ProjectTicket.jsx similarity index 100% rename from src/components/ProjectTicket/ProjectTicket.jsx rename to src/components/TrackerComponents/ProjectTicket/ProjectTicket.jsx diff --git a/src/components/ProjectTicket/projectTicket.scss b/src/components/TrackerComponents/ProjectTicket/projectTicket.scss similarity index 100% rename from src/components/ProjectTicket/projectTicket.scss rename to src/components/TrackerComponents/ProjectTicket/projectTicket.scss diff --git a/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx b/src/components/TrackerComponents/TrackerSelectColumn/TrackerSelectColumn.jsx similarity index 100% rename from src/components/TrackerSelectColumn/TrackerSelectColumn.jsx rename to src/components/TrackerComponents/TrackerSelectColumn/TrackerSelectColumn.jsx diff --git a/src/components/TrackerSelectColumn/trackerSelectColumn.scss b/src/components/TrackerComponents/TrackerSelectColumn/trackerSelectColumn.scss similarity index 100% rename from src/components/TrackerSelectColumn/trackerSelectColumn.scss rename to src/components/TrackerComponents/TrackerSelectColumn/trackerSelectColumn.scss diff --git a/src/components/TrackerTaskComment/TrackerTaskComment.jsx b/src/components/TrackerComponents/TrackerTaskComment/TrackerTaskComment.jsx similarity index 98% rename from src/components/TrackerTaskComment/TrackerTaskComment.jsx rename to src/components/TrackerComponents/TrackerTaskComment/TrackerTaskComment.jsx index e6b2add7..db84d824 100644 --- a/src/components/TrackerTaskComment/TrackerTaskComment.jsx +++ b/src/components/TrackerComponents/TrackerTaskComment/TrackerTaskComment.jsx @@ -7,7 +7,7 @@ import { urlForLocal } from "@utils/helper"; import { apiRequest } from "@api/request"; import { getCorrectDate } from "@components/Calendar/calendarHelper"; -import TrackerTaskSubComment from "@components/TrackerTaskComment/TrackerTaskComment"; +import TrackerTaskSubComment from "@components/TrackerComponents/TrackerTaskComment/TrackerTaskComment"; import del from "assets/icons/delete.svg"; import edit from "assets/icons/edit.svg"; diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 2fab3efd..8a862a50 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -23,7 +23,6 @@ import { } from "@redux/projectsTrackerSlice"; import { urlForLocal } from "@utils/helper"; -import { caseOfNum } from "@utils/helper"; import { apiRequest } from "@api/request"; @@ -39,7 +38,7 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal"; import { Navigation } from "@components/Navigation/Navigation"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; -import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn"; +import TrackerSelectColumn from "@components/TrackerComponents/TrackerSelectColumn/TrackerSelectColumn"; import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrowDown from "assets/icons/arrows/selectArrow.png"; diff --git a/src/pages/Tracker/Tracker.jsx b/src/pages/Tracker/Tracker.jsx index f7e23c6b..33c1c076 100644 --- a/src/pages/Tracker/Tracker.jsx +++ b/src/pages/Tracker/Tracker.jsx @@ -9,8 +9,6 @@ import { setToggleTab } from "@redux/projectsTrackerSlice"; -import { caseOfNum } from "@utils/helper"; - import { apiRequest } from "@api/request"; import BaseButton from "@components/Common/BaseButton/BaseButton"; @@ -20,19 +18,17 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal"; import { Navigation } from "@components/Navigation/Navigation"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; -import ProjectTicket from "@components/ProjectTicket/ProjectTicket"; import AllTaskTableTracker from "@components/TrackerComponents/AllTaskTableTracker/AllTaskTableTracker"; -import ArchiveTableTracker from "@components/TrackerComponents/ArchiveTableTracker/ArchiveTableTracker"; +import Archive from "@components/TrackerComponents/Archive/Archive"; +import ProjectTicket from "@components/TrackerComponents/ProjectTicket/ProjectTicket"; import addProjectImg from "assets/icons/addProjectImg.svg"; -import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg"; import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg"; import filterIcon from "assets/icons/filterIcon.svg"; import search from "assets/icons/serchIcon.png"; import project from "assets/icons/trackerProject.svg"; import tasks from "assets/icons/trackerTasks.svg"; import archive from "assets/images/archiveIcon.png"; -import mockAvatar from "assets/images/avatarMok.png"; import downloadExcel from "assets/images/downloadExcel.svg"; import noProjects from "assets/images/noProjects.png"; import statusTimeTask from "assets/images/statusTimeTask.svg"; @@ -106,24 +102,6 @@ export const Tracker = () => { ); } - function filterArchiveTasks(e) { - setFilterCompleteTasks( - allCompletedTasks.filter((item) => { - if (!e.target.value) { - return item; - } - if ( - item.title.toLowerCase().startsWith(e.target.value.toLowerCase()) || - item.description - .toLowerCase() - .startsWith(e.target.value.toLowerCase()) - ) { - return item; - } - }) - ); - } - return (
@@ -328,95 +306,13 @@ export const Tracker = () => { : "tracker__tabs__content__projects" } > -
-
-

Архив задач:

-

- {`${filterCompleteTasks.length} - ${caseOfNum(filterCompleteTasks.length, "tasks")}`} -

- -
-
- - -
-
-

Сентябрь,

-

2023

-
-
-
- search - filterArchiveTasks(event)} - /> -
-
- - {loader && } - - -
-
-
-

Архив проектов:

-

- {`${ - projects?.filter((project) => project.status === 10).length - } - ${caseOfNum( - projects?.filter((project) => project.status === 10) - .length, - "projects" - )}`} -

-
-
- {Boolean( - projects?.filter((project) => project.status === 10).length - ) ? ( - projects?.map((project, index) => { - return project.status === 10 ? ( -
-
-

- {project.name} -

-

{project.date}

-
-
- # -
-

Создатель проекта:

-

{"Василий Тарасов"}

-
-
-
- ) : ( - "" - ); - }) - ) : ( -
- # -

В архиве проектов нет

-
- )} -
-
+
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index cafefd44..1ada913c 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -1513,389 +1513,6 @@ margin: 0 auto; display: flex; flex-direction: column; - - .archive { - &__title { - padding-bottom: 8px; - display: flex; - align-items: center; - color: #000; - min-height: 48px; - - h3 { - font-weight: 700; - font-size: 18px; - line-height: 32px; - margin-bottom: 0; - - @media (max-width: 590px) { - font-size: 15px; - } - } - - p { - margin: 0 0 0 10px; - font-weight: 300; - font-size: 18px; - - @media (max-width: 590px) { - font-size: 15px; - } - } - - @media (max-width: 450px) { - flex-wrap: wrap; - } - } - - &__tasksWrapper { - margin-top: 20px; - display: flex; - flex-direction: column; - row-gap: 15px; - overflow-y: auto; - margin-right: -16px; - padding-right: 10px; - - &::-webkit-scrollbar { - width: 4px; - background: 0 0; - box-shadow: 0 0 14px rgba(0, 0, 0, 0.04); - border-radius: 20px; - } - - &::-webkit-scrollbar { - width: 4px; - border-radius: 20px; - } - - &::-webkit-scrollbar-thumb { - background: #cbd9f9; - border-radius: 20px; - } - - &::-webkit-scrollbar-track { - background: #c5c0c6; - border-radius: 20px; - } - } - - &__completeTask { - display: flex; - justify-content: space-between; - align-items: center; - cursor: pointer; - background: #f1f1f1; - border-radius: 12px; - padding: 12px 15px 7px 16px; - - p { - max-width: 420px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - margin-bottom: 0; - color: #111112; - } - - .completeTask__title { - font-weight: 700; - font-size: 18px; - line-height: 32px; - } - - &__time { - p { - color: #000; - font-size: 14px; - font-style: normal; - } - } - - &__info { - display: flex; - align-items: center; - - img { - width: 32px; - height: 32px; - } - - &__project { - margin-left: 17px; - span { - color: #807777; - font-weight: 500; - font-size: 10px; - } - p { - color: #1a1919; - font-weight: 500; - font-size: 14px; - line-height: 24px; - text-decoration: line-through; - } - } - } - - &-project { - background: #f1f1f1; - width: 328px; - max-width: 328px; - border-radius: 8px; - display: flex; - flex-direction: column; - padding: 23px 23px 23px 33px; - transition: 0.4s; - margin-bottom: 15px; - - .project-title-archive { - width: 274px; - max-width: 274px; - color: #111112; - font-size: 16px; - font-style: normal; - font-weight: 700; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - &:hover { - cursor: pointer; - transform: scale(0.99); - box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11); - transition: 0.4s; - } - } - - &__description { - width: 270px; - max-width: 270px; - font-size: 14px; - font-weight: 500; - - .date { - font-weight: 500; - font-size: 14px; - line-height: 24px; - color: #6f6f6f; - - p { - overflow: hidden; - max-width: 260px; - max-height: 120px; - text-overflow: ellipsis; - } - } - } - - &__creator { - display: flex; - align-items: center; - gap: 13px; - - img { - width: 31.366px; - height: 29px; - } - - h4 { - color: #5b6871; - font-size: 10px; - font-style: normal; - font-weight: 400; - } - - p { - color: #2d4a17; - font-size: 13px; - font-style: normal; - font-weight: 500; - } - } - - @media (max-width: 740px) { - flex-direction: column; - padding: 10px 20px; - } - - @media (max-width: 650px) { - background-color: white; - } - } - - &__tasks { - padding-right: 15px; - - @media (max-width: 1100px) { - width: 100%; - } - - &-period { - display: flex; - align-items: center; - margin-left: 73px; - - .buttons-month { - display: flex; - gap: 34px; - - button { - width: 30px; - height: 30px; - background-color: #8dc63f; - border-radius: 15px; - border: none; - - img { - width: 14px; - height: 14px; - } - - &:first-child { - transform: rotate(-180deg); - } - } - } - - .month-period { - display: flex; - flex-direction: row; - align-items: center; - margin-left: 62px; - - h2 { - color: #1458dd; - } - - h3 { - color: #252c32; - font-size: 18px; - font-weight: 700; - margin-left: 5px; - } - } - } - - &__search { - margin-left: auto; - padding: 6px 12px; - display: flex; - align-items: center; - background: #ffffff; - border: 1px solid #dde2e4; - box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); - border-radius: 6px; - max-width: 300px; - width: 100%; - - &:focus-within { - border: 1px solid #0000004d; - } - - @media (max-width: 590px) { - max-width: 230px; - } - - @media (max-width: 500px) { - max-width: 150px; - } - - @media (max-width: 450px) { - margin-left: 0; - max-width: none; - } - - input { - width: 100%; - padding-left: 10px; - outline: none; - border: none; - font-weight: 400; - font-size: 14px; - line-height: 24px; - } - - img { - width: 14px; - height: 14px; - } - } - } - - &__projects { - display: flex; - flex-direction: column; - - @media (max-width: 1100px) { - width: 100%; - min-height: auto; - } - - &-title { - background: #e1fccf; - display: flex; - align-items: center; - height: 66px; - border-radius: 12px; - margin: 25px 0 0 0; - padding-left: 15px; - color: #000; - font-style: normal; - - h3 { - font-size: 16px; - font-weight: 700; - margin: 0 5px 0 0; - } - - p { - font-size: 16px; - font-weight: 300; - } - } - } - - &__noItem { - padding: 23px 0 19px; - color: #6f6f6f; - - p { - font-size: 17px; - font-style: normal; - font-weight: 700; - padding-left: 15px; - } - - @media (max-width: 650px) { - background-color: white; - } - - &-project { - background: #f1f1f1; - width: 328px; - height: 108px; - border-radius: 8px; - display: flex; - gap: 21px; - padding: 23px; - align-items: center; - - p { - width: 105px; - color: #6f6f6f; - font-size: 16px; - font-style: normal; - font-weight: 700; - } - - img { - margin-left: 10px; - } - } - } - } } }