diff --git a/src/components/CandidateSidebar/candidateSidebar.scss b/src/components/CandidateSidebar/candidateSidebar.scss index df692839..e13ffa72 100644 --- a/src/components/CandidateSidebar/candidateSidebar.scss +++ b/src/components/CandidateSidebar/candidateSidebar.scss @@ -12,7 +12,7 @@ margin-bottom: 1rem; h2 { - font-size: 3rem; + font-size: 2.5rem; font-family: 'GT Eesti Pro Display', sans-serif; font-weight: 700; font-style: normal; @@ -26,7 +26,6 @@ flex-wrap: wrap; justify-content: flex-start; padding: 0 1rem; - margin-bottom: 80px; } &__info { @@ -48,8 +47,8 @@ } .candidate-sidebar__info > img { - width: 180px; - height: 180px; + width: 150px; + height: 150px; border-radius: 100px; } @@ -65,7 +64,7 @@ .candidate-sidebar__experience { font-family: 'GT Eesti Pro Display', sans-serif; - font-size: 3em; + font-size: 2.5em; font-weight: 700; font-style: normal; letter-spacing: normal; diff --git a/src/images/close.png b/src/images/close.png new file mode 100644 index 00000000..e0d507ad Binary files /dev/null and b/src/images/close.png differ diff --git a/src/pages/PartnerAddRequest/PartnerAddRequest.js b/src/pages/PartnerAddRequest/PartnerAddRequest.js index 478df586..c4728bbb 100644 --- a/src/pages/PartnerAddRequest/PartnerAddRequest.js +++ b/src/pages/PartnerAddRequest/PartnerAddRequest.js @@ -1,15 +1,16 @@ -import React from 'react'; +import React, { useState } from 'react'; import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import {Footer} from "../../components/Footer/Footer"; +import {Navigate} from "react-router-dom"; import arrowDown from "../../images/selectArrow.png" import processImg from "../../images/partnerAddRequestFirstImg.png" import reportImg from "../../images/partnerAddRequestSecondImg.png" import documentsImg from "../../images/partnerAddRequestThirdInfo.png" +import deleteIcon from "../../images/close.png" -import {Navigate} from "react-router-dom"; import './partnerAddRequest.scss' @@ -17,6 +18,13 @@ export const PartnerAddRequest = () => { if(localStorage.getItem('role_status') !== '18') { return } + + const [skills, setSkills] = useState(['REST API', 'Async/await']) + const [selectedSkills, setSelectedSkills] = useState([]) + const [filteredSkills, setFilteredSkills] = useState(skills) + + const [openSkillsSelect, setOpenSkillsSelect] = useState(false) + return (
@@ -51,6 +59,50 @@ export const PartnerAddRequest = () => {
+
+

Навыки

+
{setOpenSkillsSelect(true)}}> + {Boolean(selectedSkills.length) && + selectedSkills.map((skill, index) => { + return
+ {skill} + delete { + setFilteredSkills(prevArray => [...prevArray, skill]) + setSelectedSkills(selectedSkills.filter((skill, indexSkill) => { + return indexSkill !== index + })) + }} /> +
+ }) + } + {!selectedSkills.length && + { + setFilteredSkills(skills.filter((skill) => { + return skill.toLowerCase().includes(e.target.value.toLowerCase()) + })) + }} /> + } +
+ {openSkillsSelect && Boolean(filteredSkills.length) && +
+ {filteredSkills.map((skill, index) => { + return { + setSelectedSkills(prevArray => [...prevArray, skill]) + setFilteredSkills(filteredSkills.filter((skill, skillIndex) => { + return skillIndex !== index + })) + setOpenSkillsSelect(false) + }} + > + {skill} + })} +
+ } +

Квалификация

diff --git a/src/pages/PartnerAddRequest/partnerAddRequest.scss b/src/pages/PartnerAddRequest/partnerAddRequest.scss index c27c168c..af465e86 100644 --- a/src/pages/PartnerAddRequest/partnerAddRequest.scss +++ b/src/pages/PartnerAddRequest/partnerAddRequest.scss @@ -47,6 +47,7 @@ padding: 25px 95px 30px 55px; min-width: 600px; width: 100%; + position: relative; @media (max-width: 750px) { padding: 15px 50px 15px 30px; @@ -62,7 +63,8 @@ } &__section { - margin-bottom: 35px; + margin-bottom: 22px; + position: relative; &:last-child { margin-bottom: 0; @@ -182,6 +184,73 @@ line-height: 32px; border: none; } + + &__skills { + display: flex; + gap: 5px; + flex-wrap: wrap; + background: #EFF2F7; + border-radius: 8px; + padding: 8px 12px 9px; + position: relative; + cursor: pointer; + + .skill { + background: #8DC63F; + border-radius: 12px; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #263238; + padding: 6px 6px 5px; + max-width: 100px; + width: 100%; + display: flex; + justify-content: space-evenly; + align-items: center; + + img { + width: 13px; + } + } + + input { + border: none; + outline: none; + width: 100%; + background: none; + font-weight: 400; + font-size: 15px; + line-height: 18px; + height: 25px; + color: #263238; + } + } + + &__dropDown { + position: absolute; + display: flex; + flex-direction: column; + background: #EFF2F7; + border-radius: 8px; + padding: 5px 20px; + row-gap: 10px; + z-index: 100; + + span { + cursor: pointer; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #263238; + background: #8DC63F; + border-radius: 12px; + padding: 5px; + max-width: 100px; + width: 100%; + text-align: center; + } + } } footer {