Merge branch 'main' of https://git.itguild.info/apuc/guild_front into fixed/components

This commit is contained in:
MaxOvs19 2024-04-05 21:35:19 +03:00
commit 36bdaf15e5
15 changed files with 290 additions and 118 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 229 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 238 B

View File

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -1,4 +1,3 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg"> <path d="M14.569 2.26115H12.9023V1.42782C12.9023 1.2068 12.8145 0.99484 12.6583 0.83856C12.502 0.68228 12.29 0.594482 12.069 0.594482C11.848 0.594482 11.636 0.68228 11.4798 0.83856C11.3235 0.99484 11.2357 1.2068 11.2357 1.42782V2.26115H6.23568V1.42782C6.23568 1.2068 6.14788 0.99484 5.9916 0.83856C5.83532 0.68228 5.62336 0.594482 5.40234 0.594482C5.18133 0.594482 4.96937 0.68228 4.81309 0.83856C4.65681 0.99484 4.56901 1.2068 4.56901 1.42782V2.26115H2.90234C2.2393 2.26115 1.60342 2.52454 1.13458 2.99338C0.665736 3.46222 0.402344 4.09811 0.402344 4.76115V14.7611C0.402344 15.4242 0.665736 16.0601 1.13458 16.5289C1.60342 16.9978 2.2393 17.2612 2.90234 17.2612H14.569C15.2321 17.2612 15.8679 16.9978 16.3368 16.5289C16.8056 16.0601 17.069 15.4242 17.069 14.7611V4.76115C17.069 4.09811 16.8056 3.46222 16.3368 2.99338C15.8679 2.52454 15.2321 2.26115 14.569 2.26115ZM15.4023 14.7611C15.4023 14.9822 15.3145 15.1941 15.1583 15.3504C15.002 15.5067 14.79 15.5945 14.569 15.5945H2.90234C2.68133 15.5945 2.46937 15.5067 2.31309 15.3504C2.15681 15.1941 2.06901 14.9822 2.06901 14.7611V8.92782H15.4023V14.7611ZM15.4023 7.26115H2.06901V4.76115C2.06901 4.54014 2.15681 4.32817 2.31309 4.17189C2.46937 4.01561 2.68133 3.92782 2.90234 3.92782H4.56901V4.76115C4.56901 4.98216 4.65681 5.19412 4.81309 5.3504C4.96937 5.50669 5.18133 5.59448 5.40234 5.59448C5.62336 5.59448 5.83532 5.50669 5.9916 5.3504C6.14788 5.19412 6.23568 4.98216 6.23568 4.76115V3.92782H11.2357V4.76115C11.2357 4.98216 11.3235 5.19412 11.4798 5.3504C11.636 5.50669 11.848 5.59448 12.069 5.59448C12.29 5.59448 12.502 5.50669 12.6583 5.3504C12.8145 5.19412 12.9023 4.98216 12.9023 4.76115V3.92782H14.569C14.79 3.92782 15.002 4.01561 15.1583 4.17189C15.3145 4.32817 15.4023 4.54014 15.4023 4.76115V7.26115Z" fill="#406128"/>
<path d="M1411.824 0c31.17 0 56.47 25.3 56.47 56.471v56.47h169.412c93.403 0 169.412 76.01 169.412 169.412V1920H113V282.353c0-93.402 76.009-169.412 169.412-169.412h169.41v-56.47c0-31.172 25.3-56.47 56.472-56.47s56.47 25.298 56.47 56.47v56.47h790.589v-56.47c0-31.172 25.299-56.47 56.47-56.47Zm282.352 564.705H225.942v1242.353h1468.234V564.705Zm-1016.47 677.648v338.824H338.882v-338.824h338.824Zm451.765 0v338.824H790.647v-338.824h338.824Zm451.764 0v338.824h-338.823v-338.824h338.823Zm-1016.47 112.941H451.824v112.941h112.941v-112.941Zm451.764 0H903.588v112.941h112.941v-112.941Zm451.765 0h-112.941v112.941h112.941v-112.941ZM677.706 790.588v338.824H338.882V790.588h338.824Zm451.765 0v338.824H790.647V790.588h338.824Zm451.764 0v338.824h-338.823V790.588h338.823ZM564.765 903.53H451.824v112.941h112.941V903.53Zm451.764 0H903.588v112.941h112.941V903.53Zm451.765 0h-112.941v112.941h112.941V903.53ZM451.823 225.882H282.412c-31.06 0-56.47 25.3-56.47 56.471v169.412h1468.234V282.353c0-31.172-25.411-56.47-56.47-56.47h-169.412v56.47c0 31.172-25.3 56.471-56.47 56.471-31.172 0-56.471-25.299-56.471-56.47v-56.472H564.765v56.471c0 31.172-25.3 56.471-56.471 56.471-31.171 0-56.471-25.299-56.471-56.47v-56.472Z" fill-rule="evenodd"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -23,10 +23,14 @@
.calendar__hours { .calendar__hours {
margin: 0 5px; margin: 0 5px;
line-height: 0; font-size: 22px;
font-weight: 500; font-weight: 500;
display: flex; display: flex;
align-items: center; align-items: center;
span {
font-size: 22px;
font-weight: 500;
}
} }
} }
@ -54,21 +58,33 @@
} }
&-box { &-box {
background-color: #e5f1fb;
height: 47px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 20px; margin: 0 15px;
cursor: pointer; padding: 0 20px;
border-radius: 5px;
font-weight: 400;
font-size: 16px;
color: #406128;
img { img {
margin: 0px 10px; width: 17px;
width: 12px; height: 17px;
height: 12px; margin: 0 10px 0 0;
&:first-child {
transform: rotate(180deg);
margin: 0;
}
} }
}
&-arrow {
display: flex;
align-items: center;
cursor: pointer;
height: 47px;
padding: 0 8px;
background-color: #e5f1fb;
border-radius: 5px;
span { span {
color: #18586e; color: #18586e;
@ -107,12 +123,9 @@
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
p { p {
color: #398208; color: #9babc5;
font-size: 25px; font-size: 14px;
font-weight: 400; font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
text-align: center; text-align: center;
} }
} }
@ -127,24 +140,48 @@
button { button {
margin: 0 auto; margin: 0 auto;
width: 125px; width: 135px;
height: 42px; height: 82px;
padding: 0px; padding: 0px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px; border-radius: 10px;
border: 1px solid #c4c4c4; border: 1px solid #c4c4c4;
background-color: #ffffff; background-color: #ffffff;
margin-top: 20px; margin-top: 20px;
font-size: 1.2em; font-size: 1.2em;
text-align: center; text-align: center;
.form-date {
width: 100%;
padding: 5px 0 0 15px;
height: 100%;
}
.form-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: #eff5fa 2px solid;
.form-hours {
display: none;
}
}
a { a {
color: black; color: black;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 500; font-weight: 400;
font-size: 12px; font-size: 16px;
height: 100%;
@media (max-width: 500px) { @media (max-width: 500px) {
font-size: 10px; font-size: 10px;
@ -152,20 +189,6 @@
} }
} }
img {
width: 16px;
height: 16px;
margin: 0 5px 0 0;
@media (max-width: 968px) {
margin-right: 2px;
@media (max-width: 610px) {
display: none;
}
}
}
@media (max-width: 1200px) { @media (max-width: 1200px) {
width: 110px; width: 110px;
} }
@ -214,17 +237,6 @@
} }
} }
.calendar__icon {
margin-right: 10px;
margin-top: -4px;
}
@media (max-width: 575.98px) {
.calendar__icon {
display: none;
}
}
.select-days { .select-days {
border-style: dashed !important; border-style: dashed !important;
@ -246,7 +258,44 @@
} }
.before { .before {
background-color: #e5f9b6 !important; background-color: #ffffff !important;
.form-date {
height: 35% !important;
}
.form-box {
background-color: #fafbfe;
.form-hours {
color: #6dd077;
background-color: #6dd0772f;
border-spacing: 10px;
border-radius: 5px;
display: flex !important;
flex-direction: row;
width: 95%;
font-weight: 400;
font-size: 14px;
padding: 0 7px;
position: relative;
span {
color: #1458dd;
font-weight: 700;
font-size: 14px;
margin: auto;
}
}
.form-hours::before {
content: "";
position: absolute;
top: 10%;
left: 0;
height: 75%;
border-left: 2px solid #6dd077;
border-radius: 5px;
}
}
} }
.pass { .pass {
@ -271,18 +320,25 @@
align-items: center; align-items: center;
column-gap: 16px; column-gap: 16px;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 400;
position: relative; position: relative;
.select { .select {
background-color: #e5f1fb;
color: #406128;
border-radius: 5px; border-radius: 5px;
border: 2px solid #c4c4c4; padding: 15px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
padding: 5px 8px;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
} }
.hint {
color: #6f6f6f;
font-size: 14px;
font-weight: 300;
margin: 0 0 0 20px;
}
.close { .close {
cursor: pointer; cursor: pointer;
margin-left: 8px; margin-left: 8px;

View File

@ -7,7 +7,7 @@ import { useNotification } from "@hooks/useNotification";
import { Loader } from "@components/Common/Loader/Loader"; import { Loader } from "@components/Common/Loader/Loader";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrow from "assets/icons/arrows/arrowRight.png";
import close from "assets/icons/close.png"; import close from "assets/icons/close.png";
import "./modalResetPassword.scss"; import "./modalResetPassword.scss";

View File

@ -32,7 +32,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment"; import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrow from "assets/icons/arrows/arrowRight.png";
import arrowStart from "assets/icons/arrows/arrowStart.png"; import arrowStart from "assets/icons/arrows/arrowStart.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";

View File

@ -26,7 +26,8 @@ import { apiRequest } from "@api/request";
import "@components/Calendar/calendarComponent.scss"; import "@components/Calendar/calendarComponent.scss";
import BaseButton from "@components/Common/BaseButton/BaseButton"; import BaseButton from "@components/Common/BaseButton/BaseButton";
import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrowLeft from "assets/icons/arrows/arrowCalendar_left.png";
import arrowRight from "assets/icons/arrows/arrowCalendar_right.png";
import calendarIcon from "assets/icons/calendar.svg"; import calendarIcon from "assets/icons/calendar.svg";
// import close from "assets/icons/closeProjectPersons.svg"; // import close from "assets/icons/closeProjectPersons.svg";
import rectangle from "assets/images/rectangle__calendar.png"; import rectangle from "assets/images/rectangle__calendar.png";
@ -173,11 +174,13 @@ export const ProfileCalendarComponent = React.memo(
}); });
} }
// function errorr(TotalRangeHours) {
// console.error(TotalRangeHours);
// }
return ( return (
<div className="calendar-component"> <div className="calendar-component">
<div className="calendar-component__header"> <div className="calendar-component__header">
<div className="calendar-component__header-info"> <div className="calendar-component__header-info">
{!userId && <h3>Мои отчеты за </h3>}
<p className="calendar__hours"> <p className="calendar__hours">
{month}&nbsp; {month}&nbsp;
<span> <span>
@ -187,27 +190,26 @@ export const ProfileCalendarComponent = React.memo(
</div> </div>
<div className="calendar-component__header-switcher"> <div className="calendar-component__header-switcher">
<div <div
className="calendar-component__header-box" className="calendar-component__header-arrow"
onClick={() => { onClick={() => {
setValueHandler(prevMonth()); setValueHandler(prevMonth());
dispatch(setRequestDate(getReports(prevMonth()))); dispatch(setRequestDate(getReports(prevMonth())));
}} }}
> >
<img src={arrow} alt="" /> <img src={arrowLeft} alt="" />
<span>{prevMonth().format("MMMM")}</span>
</div> </div>
<div className="calendar-component__header-box"> <div className="calendar-component__header-box">
<span>{value.format("YYYY")}</span> <img className={"calendar__icon"} src={calendarIcon} alt="" />
<span>{value.format("MMMM, YYYY")}</span>
</div> </div>
<div <div
className="calendar-component__header-box" className="calendar-component__header-arrow"
onClick={() => { onClick={() => {
setValueHandler(nextMonth()); setValueHandler(nextMonth());
dispatch(setRequestDate(getReports(nextMonth()))); dispatch(setRequestDate(getReports(nextMonth())));
}} }}
> >
<span>{nextMonth().format("MMMM")}</span> <img src={arrowRight} alt="" />
<img src={arrow} alt="" />
</div> </div>
</div> </div>
</div> </div>
@ -218,13 +220,13 @@ export const ProfileCalendarComponent = React.memo(
<div className="calendar-component__body"> <div className="calendar-component__body">
<div> <div>
<p>Пн</p> <p>Понедельник</p>
<p>Вт</p> <p>Вторник</p>
<p>Ср</p> <p>Среда</p>
<p>Чт</p> <p>Четверг</p>
<p>Пт</p> <p>Пятница</p>
<p>Сб</p> <p>Суббота</p>
<p>Вс</p> <p>Воскресенье</p>
</div> </div>
<div className="calendar-component__form"> <div className="calendar-component__form">
@ -260,12 +262,13 @@ export const ProfileCalendarComponent = React.memo(
id="btn" id="btn"
> >
<Link to={startRangeDays ? "#" : correctRoute(day)}> <Link to={startRangeDays ? "#" : correctRoute(day)}>
<img <div className="form-date">{day.format("D")}</div>
className={"calendar__icon"} <div className="form-box">
src={calendarIcon} <div className="form-hours">
alt="" <span>7/Час</span>
/> </div>
{currentMonthAndDay(day)} </div>
{/* {currentMonthAndDay(day)} */}
</Link> </Link>
</button> </button>
)) ))
@ -289,6 +292,7 @@ export const ProfileCalendarComponent = React.memo(
? "Выберите диапазон на календаре" ? "Выберите диапазон на календаре"
: "Выбрать диапазон"} : "Выбрать диапазон"}
</span> </span>
<span> <span>
{totalRangeHours {totalRangeHours
? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
@ -308,6 +312,7 @@ export const ProfileCalendarComponent = React.memo(
Сбросить Сбросить
</BaseButton> </BaseButton>
)} )}
<span className="hint">Для общего просчета - выберите диапазон</span>
</div> </div>
</div> </div>
); );

View File

@ -36,7 +36,6 @@
} }
.calendar__wrapper { .calendar__wrapper {
@media (max-width: 1000px) { @media (max-width: 1000px) {
min-height: auto; min-height: auto;
} }

View File

@ -49,7 +49,7 @@ export const PartnerCategories = () => {
const COLUMNS = [ const COLUMNS = [
{ {
label: "Аватар", label: "",
renderCell: (item) => ( renderCell: (item) => (
<img <img
className="table__avatar" className="table__avatar"
@ -60,7 +60,7 @@ export const PartnerCategories = () => {
}, },
{ {
label: "ФИО", label: "ФИО",
renderCell: (item) => item?.employee.fio, renderCell: (item) => <p>{item?.employee.fio}</p>,
sort: { sortKey: "NAME" } sort: { sortKey: "NAME" }
}, },
{ {
@ -68,18 +68,21 @@ export const PartnerCategories = () => {
renderCell: (item) => ( renderCell: (item) => (
<Link className="table__link" to={`/candidate/${item.user_id}`}> <Link className="table__link" to={`/candidate/${item.user_id}`}>
Резюме Резюме
<div className="img__wrapper">
<img src={rightArrow} alt="arrow" />
</div>
</Link> </Link>
) )
}, },
{ {
label: "Отчет", label: "Отчетность",
renderCell: (item) => ( renderCell: (item) => (
<Link <Link
className="table__link" className="table__link"
to={`/profile/employees/report/${item.user_id}`} to={`/profile/employees/report/${item.user_id}`}
> >
Подробный отчет Подробный отчет
<div> <div className="img__wrapper">
<img src={rightArrow} alt="arrow" /> <img src={rightArrow} alt="arrow" />
</div> </div>
</Link> </Link>
@ -105,7 +108,7 @@ export const PartnerCategories = () => {
const pagination = usePagination(data, { const pagination = usePagination(data, {
state: { state: {
page: 0, page: 0,
size: 5 size: 10
} }
}); });
@ -259,6 +262,7 @@ export const PartnerCategories = () => {
id="search" id="search"
type="text" type="text"
value={search} value={search}
placeholder="Поиск по сотрудникам"
onChange={handleSearch} onChange={handleSearch}
/> />
</label> </label>
@ -270,26 +274,52 @@ export const PartnerCategories = () => {
pagination={pagination} pagination={pagination}
/> />
<div className="table__pagination"> <div className="table__pagination">
<span> <button
Total Pages: {pagination.state.getTotalPages(data.nodes)} className={
</span> pagination.state.page === 0 ? "switch disable" : "switch"
}
type="button"
disabled={pagination.state.page === 0}
onClick={() =>
pagination.fns.onSetPage(pagination.state.page - 1)
}
>
{"<"}
</button>
<span className="table__pages"> <span className="table__pages">
Page:{" "}
{pagination.state.getPages(data.nodes).map((_, index) => ( {pagination.state.getPages(data.nodes).map((_, index) => (
<button <button
key={index} key={index}
type="button" type="button"
style={{ className={
fontWeight: pagination.state.page === index
pagination.state.page === index ? "bold" : "normal" ? "page page--active "
}} : "page"
}
onClick={() => pagination.fns.onSetPage(index)} onClick={() => pagination.fns.onSetPage(index)}
> >
{index + 1} {index + 1}
</button> </button>
))} ))}
</span> </span>
<button
className={
pagination.state.page + 1 ===
pagination.state.getPages(data.nodes).length
? "switch disable"
: "switch"
}
type="button"
disabled={
pagination.state.page + 1 ===
pagination.state.getPages(data.nodes).length
}
onClick={() =>
pagination.fns.onSetPage(pagination.state.page + 1)
}
>
{">"}
</button>
</div> </div>
</> </>
) : ( ) : (

View File

@ -13,10 +13,13 @@
&__items { &__items {
display: flex; display: flex;
gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
background: white;
padding: 20px 0 30px;
border-radius: 7px;
} }
&__empty { &__empty {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
@ -161,8 +164,18 @@
display: flex; display: flex;
width: 100%; width: 100%;
gap: 10px; gap: 10px;
font-size: 18px;
align-items: center; align-items: center;
padding: 0 18px 35px;
margin-bottom: 0;
font-size: 16px;
input {
background: #F0F2F5;
outline: none;
border-radius: 6px;
padding: 6px;
border: none;
}
} }
&__avatar { &__avatar {
@ -175,20 +188,85 @@
color: black; color: black;
font-size: 16px; font-size: 16px;
align-items: center; align-items: center;
.img__wrapper {
width: 22px;
height: 22px;
border-radius: 50px;
background: #D9D7D7;
display: flex;
align-items: center;
justify-content: center;
img {
width: 14px;
}
}
} }
&__pagination { &__pagination {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; font-size: 14px;
font-size: 16px;
align-items: center; align-items: center;
padding: 39px 34px 0;
column-gap: 12px;
button {
font-size: 14px;
width: 32px;
border-radius: 5px;
height: 32px;
color: #2E3A59;
}
.switch {
border: none;
background: #F0F2F5;
font-weight: 600;
}
.disable {
opacity: 0.7;
}
} }
&__pages { &__pages {
display: flex; display: flex;
column-gap: 5px; column-gap: 4px;
align-items: center; color: black;
background: white;
.page {
border: 1px solid #E8ECF8;
background: none;
&--active {
border: none;
background: #9DA65D;
color: white;
}
}
}
}
table {
th {
border-top: 0;
border-bottom: 1px solid #EDEDED;
color: #1458DD;
font-size: 14px;
font-weight: 700;
}
td {
border-top: 0;
border-bottom: 1px solid #EDEDED;
color: #2E3A59;
p {
font-weight: 500;
}
} }
} }
} }

View File

@ -41,7 +41,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn"; import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn";
import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrow from "assets/icons/arrows/arrowRight.png";
import arrowDown from "assets/icons/arrows/selectArrow.png"; import arrowDown from "assets/icons/arrows/selectArrow.png";
import category from "assets/icons/category.svg"; import category from "assets/icons/category.svg";
import close from "assets/icons/close.png"; import close from "assets/icons/close.png";

View File

@ -15,7 +15,7 @@ import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrow from "assets/icons/arrows/arrowRight.png";
import emailImg from "assets/icons/emailStatistics.svg"; import emailImg from "assets/icons/emailStatistics.svg";
import link from "assets/icons/link.svg"; import link from "assets/icons/link.svg";
import project from "assets/icons/trackerProject.svg"; import project from "assets/icons/trackerProject.svg";

View File

@ -119,6 +119,9 @@ export const Summary = () => {
{profileInfo?.fio || profileInfo?.username},{" "} {profileInfo?.fio || profileInfo?.username},{" "}
{profileInfo.specification} разработчик {profileInfo.specification} разработчик
</p> </p>
<hr />
<div className="summary__direction">Front End</div>
<div className="summary__level">Middle+</div>
</div> </div>
{!openGit && ( {!openGit && (
<button className="summary__git" onClick={() => setOpenGit(true)}> <button className="summary__git" onClick={() => setOpenGit(true)}>

View File

@ -1,5 +1,5 @@
.summary { .summary {
background: #f1f1f1; background: #f4f7ff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
@ -62,7 +62,7 @@
&__person { &__person {
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: 45px; column-gap: 20px;
@media (max-width: 825px) { @media (max-width: 825px) {
column-gap: 20px; column-gap: 20px;
@ -74,8 +74,8 @@
} }
&__avatar { &__avatar {
width: 88px; width: 50px;
height: 88px; height: 50px;
border-radius: 100px; border-radius: 100px;
@media (max-width: 690px) { @media (max-width: 690px) {
@ -97,9 +97,9 @@
} }
&__name { &__name {
color: #1458dd;
font-size: 15px;
font-weight: 500; font-weight: 500;
font-size: 16px;
line-height: 32px;
position: relative; position: relative;
@media (max-width: 690px) { @media (max-width: 690px) {
@ -118,17 +118,19 @@
@media (max-width: 450px) { @media (max-width: 450px) {
max-width: 160px; max-width: 160px;
} }
}
&:after { &__direction {
content: ""; color: #6f6f6f;
position: absolute; font-size: 14px;
background: #52b709; }
border-radius: 12px;
width: 70%; &__level {
height: 8px; background-color: #1458dd;
bottom: -14px; color: #ffffff;
left: 0; border-radius: 44px;
} font-size: 14px;
font-weight: 400;
} }
&__git { &__git {