diff --git a/src/App.js b/src/App.js index c9921706..bcec15ba 100644 --- a/src/App.js +++ b/src/App.js @@ -44,16 +44,17 @@ const App = () => { }/> - }/> - }/> - }/> - }/> + }/> + }/> + }/> + }/> }/> }/> }/> + }/> diff --git a/src/components/Calendar/calendar.scss b/src/components/Calendar/calendar.scss index 8f72b7b6..0b32bbfd 100644 --- a/src/components/Calendar/calendar.scss +++ b/src/components/Calendar/calendar.scss @@ -64,7 +64,6 @@ &__btn { width: 280px; height: 62px; - box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21); border-radius: 31px; background-color: #ffffff; background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), @@ -81,6 +80,12 @@ font-size: 1.6em; letter-spacing: normal; text-align: center; + transition: all 0.3s ease; + + &:hover { + box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); + transform: scale(1.02); + } } &__hours { diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss index f6e12385..ddb7184c 100644 --- a/src/components/Calendar/calendarComponent.scss +++ b/src/components/Calendar/calendarComponent.scss @@ -1,6 +1,6 @@ .calendar-component { position: relative; - margin-top: 80px; + margin-top: 30px; margin-bottom: 60px; background-color: #f9f9f9; padding-left: 68px; @@ -92,6 +92,11 @@ letter-spacing: normal; line-height: normal; text-align: center; + + a { + text-decoration: none; + color: #000000; + } } } } @@ -263,3 +268,7 @@ .selected { background-color: #f9f9c3 !important; } + +.block { + pointer-events: none; +} diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js index cb53de6f..c726e4e6 100644 --- a/src/components/ProfileCalendar/ProfileCalendar.js +++ b/src/components/ProfileCalendar/ProfileCalendar.js @@ -8,6 +8,7 @@ import moment from "moment"; import rectangle from '../../images/rectangle_secondPage.png' import {currentMonth, getReports} from '../Calendar/calendarHelper' import {ProfileCalendarComponent} from "./ProfileCalendarComponent"; +import { ProfileHeader } from "../Profile/ProfileHeader"; import { Footer } from '../Footer/Footer' import './profileCalendar.scss' @@ -48,42 +49,29 @@ export const ProfileCalendar = () => { }, [month]); return ( -
-
- -
Вернуться назад
- -

- Добрый день, {profileInfo.fio} -

-
-
- img -

{}

-
-
-

{profileInfo.position_name}

- img -
-
- - - +
+ +
+

Ваши отчеты

+
+
+ avatar +

{profileInfo.fio} {profileInfo.specification}

+ + +
-
- -
-
- -

- {month} : {totalHours} часов -

+
+
+ +

+ {month} : {totalHours} часов +

+
-
+ ) }; diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.js b/src/components/ProfileCalendar/ProfileCalendarComponent.js index b34fb4de..d42e5260 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.js +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.js @@ -28,23 +28,33 @@ export const ProfileCalendarComponent = ({reportsDates}) => { return day.isSame(new Date(), 'day') } + function correctDay(day) { + if (day < 10) { + return `0${day}` + } return day + } + function dayStyles(day) { - if (value < day) return `` - if (day.day() === 6 || day.day() === 0) return `selected` - function correctDay(day) { - if (day < 10) { - return `0${day}` - } return day - } + if (value < day) return `block` for (const date of reportsDates) { - if (`${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${correctDay(new Date(day).getDate())}` === date.date) { + if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.date) { return `before` } } + if (day.day() === 6 || day.day() === 0) return `selected` if (isToday(day)) return `today` return 'pass' } + function correctRoute(day) { + for (const date of reportsDates) { + if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.date) { + return `/view/report` + } + } + return '/profile/report' + } + // function prevMonth() { // return value.clone().subtract(1, 'month') // } @@ -85,7 +95,6 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
{calendar.map((week) => week.map((day) => ( - - )) )}
diff --git a/src/components/ProfileCalendar/profileCalendar.scss b/src/components/ProfileCalendar/profileCalendar.scss index fc707fe6..45d98c4e 100644 --- a/src/components/ProfileCalendar/profileCalendar.scss +++ b/src/components/ProfileCalendar/profileCalendar.scss @@ -1,5 +1,21 @@ -.calendar { - font-family: 'LabGrotesque', sans-serif; +.profile__calendar { + background: #F1F1F1; + height: 100%; + min-height: 100vh; + font-family: "LabGrotesque", sans-serif; + + .container { + max-width: 1160px; + margin-top: 23px; + + @media (max-width: 570px) { + margin-top: 0; + } + } + + .summary__info { + padding-right: 25px; + } .profile__calendar { margin-top: 20px; } @@ -17,4 +33,11 @@ &__profile { margin-top: 42px; } + + &__btn { + transition: all 0.3s ease; + &:hover { + transform: scale(1.02); + } + } } diff --git a/src/components/ProfileHeader/profileHeader.scss b/src/components/ProfileHeader/profileHeader.scss index 224a570f..7aba6bd1 100644 --- a/src/components/ProfileHeader/profileHeader.scss +++ b/src/components/ProfileHeader/profileHeader.scss @@ -57,6 +57,11 @@ font-size: 18px; line-height: 32px; color: #807777 !important; + transition: all 0.3s ease; + + &:hover { + color: #261a1a !important; + } } @media (max-width: 800px) { diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.js index 6d509379..28bbf4d0 100644 --- a/src/components/ReportForm/ReportForm.js +++ b/src/components/ReportForm/ReportForm.js @@ -8,6 +8,9 @@ import ellipse from '../../images/ellipse.png' import remove from '../../images/remove.png' import addIcon from '../../images/addIcon.png' import {currentMonthAndDay} from '../Calendar/calendarHelper' +import {currentMonthAndDay, getReports} from '../Calendar/calendarHelper' +import {ProfileHeader} from "../Profile/ProfileHeader"; +import {Footer} from "../Footer/Footer"; import './reportForm.scss' import arrow from "../../images/right-arrow.png"; import {useRequest} from "../../hooks/useRequest"; @@ -72,14 +75,21 @@ const ReportForm = () => { return (
-
-
- -
Вернуться назад
- + +
+

Ваши отчеты - добавить отчет

+
+
+ +

Вернуться

+ +
+
+ +
-

Добавить отчет

+

Добавление отчета за день

Дата заполнения отчета:

@@ -96,60 +106,58 @@ const ReportForm = () => { Какие задачи были выполнены?
-
-
-
-
-
-

- Краткое описание задачи -

-

Количество часов

+
+
+
+

+ Краткое описание задачи +

+

Количество часов

+
+ + {inputs.map((input, index) => { + return ( +
+
+ {index + 1}. +
+
+ setInputs(inputs.map((input, inputIndex) => { + return index === inputIndex + ? { + ...input, + task: e.target.value + } + : input + }))}/> +
+
+ setInputs(inputs.map((input, inputIndex) => { + return index === inputIndex + ? { + ...input, + hours_spent: Number(e.target.value) + } + : input + }))}/> +
+
+ deleteInput(index)} src={remove} alt=''/> +
+
+ ) + })} + +
+ + Добавить еще +
+
+
- {inputs.map((input, index) => { - return ( -
-
- {index + 1}. -
-
- setInputs(inputs.map((input, inputIndex) => { - return index === inputIndex - ? { - ...input, - task: e.target.value - } - : input - }))}/> -
-
- setInputs(inputs.map((input, inputIndex) => { - return index === inputIndex - ? { - ...input, - hours_spent: Number(e.target.value) - } - : input - }))}/> -
-
- deleteInput(index)} src={remove} alt=''/> -
-
- ) - })} - -
- - Добавить еще -
-
-
-
-
@@ -180,7 +188,10 @@ const ReportForm = () => { }
+
+
+
) }; diff --git a/src/components/ReportForm/reportForm.scss b/src/components/ReportForm/reportForm.scss index eb3449d4..71d62d02 100644 --- a/src/components/ReportForm/reportForm.scss +++ b/src/components/ReportForm/reportForm.scss @@ -1,14 +1,51 @@ .report-form { + background: #F1F1F1; + height: 100%; + min-height: 100vh; + font-family: "LabGrotesque", sans-serif; + + .container { + max-width: 1160px; + margin-top: 23px; + + @media (max-width: 570px) { + margin-top: 0; + } + } + + &__content { + background: #FFFFFF; + border-radius: 12px; + margin: 25px 0 80px; + padding: 50px 40px; + } .report__head { margin-top: 20px; + + a { + display: flex; + align-items: center; + grid-column-gap: 30px; + column-gap: 30px; + margin-top: 20px; + cursor: pointer; + text-decoration: none; + + p { + margin-bottom: 0; + font-size: 14px; + line-height: 32px; + font-weight: 500; + color: black; + } + } } &__block-title { - margin-top: 15px; h2 { - color: #282828; + color: #52B709; font-family: 'GT Eesti Pro Display'; font-size: 3.3em; font-weight: 700; diff --git a/src/pages/Profile.js b/src/pages/Profile.js new file mode 100644 index 00000000..67e45c34 --- /dev/null +++ b/src/pages/Profile.js @@ -0,0 +1,96 @@ +import React from 'react'; +import {useSelector} from "react-redux"; +import {getProfileInfo} from "../redux/outstaffingSlice"; +import {ProfileHeader} from "../components/Profile/ProfileHeader"; +import {Link} from "react-router-dom"; +import {Footer} from "../components/Footer/Footer"; + +import reportsIcon from "../images/reports.png" +import summaryIcon from "../images/summaryIcon.png" +import timerIcon from "../images/timerIcon.png" +import paymentIcon from "../images/paymentIcon.png" +import settingIcon from "../images/settingIcon.png" +import rightArrow from "../images/arrowRight.png" + +import '../components/Profile/profile.scss' + +export const Profile = () => { + const profileInfo = useSelector(getProfileInfo); + return( +
+ +
+

Добрый день, {profileInfo.fio}

+
+
+ avatar +

{profileInfo.fio} {profileInfo.specification}

+
+
+
+ +
+ report +

Ваша отчетность

+
+
+

Отработанных в этом месяце часов

+
+ arrow +
+
+ + +
+ summary +

Данные и резюме

+
+
+

Ваше резюме
заполнено

+
+ arrow +
+
+ + +
+ timer +

Трекер времени

+
+
+

Сколько времени занимает
выполнение задач

+
+ arrow +
+
+ + +
+ payment +

Выплаты

+
+
+

У вас подтвержден
статус самозанятого

+
+ arrow +
+
+ + +
+ settings +

Настройки аккаунта

+
+
+

Перейдите чтобы начать
редактирование

+
+ arrow +
+
+ +
+
+
+
+ ) +}; diff --git a/src/pages/Profile/profile.scss b/src/pages/Profile/profile.scss index ac24bb2b..9531472c 100644 --- a/src/pages/Profile/profile.scss +++ b/src/pages/Profile/profile.scss @@ -49,6 +49,12 @@ border-radius: 12px; text-decoration: none; cursor: pointer; + transition: all 0.3s ease; + + &:hover { + box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); + transform: scale(1.02); + } @media (max-width: 1175px) { width: 48%; diff --git a/src/pages/ProfileCalendarPage.js b/src/pages/ProfileCalendarPage.js index b1095be0..c0c298b6 100644 --- a/src/pages/ProfileCalendarPage.js +++ b/src/pages/ProfileCalendarPage.js @@ -3,7 +3,7 @@ import { WithLogout } from '../hoc/withLogout'; import { ProfileCalendar } from '../../src/components/ProfileCalendar/ProfileCalendar'; const ProfileCalendarPage = () => { - return ; + return ; }; export default ProfileCalendarPage; diff --git a/src/pages/ReportFormPage.js b/src/pages/ReportFormPage.js index a4196e79..d8893f76 100644 --- a/src/pages/ReportFormPage.js +++ b/src/pages/ReportFormPage.js @@ -2,6 +2,6 @@ import React from 'react'; import { WithLogout } from '../hoc/withLogout'; import ReportForm from '../components/ReportForm/ReportForm'; -const ReportFormPage = () => ; +const ReportFormPage = () => ; export default ReportFormPage; diff --git a/src/pages/Summary/summary.scss b/src/pages/Summary/summary.scss index cfc62642..ff044020 100644 --- a/src/pages/Summary/summary.scss +++ b/src/pages/Summary/summary.scss @@ -121,6 +121,12 @@ line-height: 32px; color: white; border: none; + transition: all 0.3s ease; + + &:hover { + box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); + transform: scale(1.02); + } @media (max-width: 690px) { width: 120px; @@ -257,6 +263,12 @@ background: #FFFFFF; border-radius: 12px; padding: 35px 30px 30px 45px; + transition: all 0.3s ease; + + &:hover { + box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); + transform: scale(1.02); + } @media (max-width: 825px) { width: 100%;