Пофиксил верстку сайдбара кандидатов
This commit is contained in:
parent
1651968337
commit
eafba566d8
22029
package-lock.json
generated
22029
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
|||||||
import React, { useEffect } from 'react'
|
import React, {useEffect} from 'react'
|
||||||
import { useHistory, useParams, Link } from 'react-router-dom'
|
import {useHistory, useParams, Link} from 'react-router-dom'
|
||||||
import { useSelector, useDispatch } from 'react-redux'
|
import {useSelector, useDispatch} from 'react-redux'
|
||||||
import {
|
import {
|
||||||
currentCandidate,
|
currentCandidate,
|
||||||
selectCurrentCandidate,
|
selectCurrentCandidate,
|
||||||
@ -13,24 +13,23 @@ import SkillSection from '../SkillSection/SkillSection'
|
|||||||
import front from '../../images/front_end.png'
|
import front from '../../images/front_end.png'
|
||||||
import back from '../../images/back_end.png'
|
import back from '../../images/back_end.png'
|
||||||
import design from '../../images/design.png'
|
import design from '../../images/design.png'
|
||||||
import { fetchGet } from '../../server/server'
|
import {fetchGet} from '../../server/server'
|
||||||
import { Footer } from '../Footer/Footer'
|
import {Footer} from '../Footer/Footer'
|
||||||
|
|
||||||
import './candidate.scss'
|
import './candidate.scss'
|
||||||
import { getRole } from '../../redux/roleSlice'
|
import {getRole} from '../../redux/roleSlice'
|
||||||
import { CodeSnippetlighter } from '../../pages/CodeSnippetPage'
|
import {useState} from 'react'
|
||||||
import { useState } from 'react'
|
|
||||||
|
|
||||||
const Candidate = () => {
|
const Candidate = () => {
|
||||||
const history = useHistory()
|
const history = useHistory();
|
||||||
const { id: candidateId } = useParams()
|
const {id: candidateId} = useParams();
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch();
|
||||||
const role = useSelector(getRole)
|
const role = useSelector(getRole);
|
||||||
const [activeSnippet, setActiveSnippet] = useState(true)
|
const [activeSnippet, setActiveSnippet] = useState(true);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
window.scrollTo(0, 0)
|
window.scrollTo(0, 0)
|
||||||
}, [])
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchGet({
|
fetchGet({
|
||||||
@ -40,37 +39,37 @@ const Candidate = () => {
|
|||||||
role,
|
role,
|
||||||
logout: () => dispatch(auth(false))
|
logout: () => dispatch(auth(false))
|
||||||
}).then((el) => dispatch(currentCandidate(el)))
|
}).then((el) => dispatch(currentCandidate(el)))
|
||||||
}, [dispatch, candidateId])
|
}, [dispatch, candidateId]);
|
||||||
|
|
||||||
const currentCandidateObj = useSelector(selectCurrentCandidate)
|
const currentCandidateObj = useSelector(selectCurrentCandidate);
|
||||||
|
|
||||||
const { position_id, skillValues, vc_text: text } = currentCandidateObj
|
const {position_id, skillValues, vc_text: text} = currentCandidateObj;
|
||||||
|
|
||||||
const setStyles = () => {
|
const setStyles = () => {
|
||||||
const styles = {
|
const styles = {
|
||||||
classes: '',
|
classes: '',
|
||||||
header: '',
|
header: '',
|
||||||
img: ''
|
img: ''
|
||||||
}
|
};
|
||||||
|
|
||||||
switch (Number(position_id)) {
|
switch (Number(position_id)) {
|
||||||
case 1: {
|
case 1: {
|
||||||
styles.classes = 'back'
|
styles.classes = 'back';
|
||||||
styles.header = 'Backend'
|
styles.header = 'Backend';
|
||||||
styles.img = back
|
styles.img = back;
|
||||||
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 2: {
|
case 2: {
|
||||||
styles.classes = 'des'
|
styles.classes = 'des';
|
||||||
styles.header = 'Frontend'
|
styles.header = 'Frontend';
|
||||||
styles.img = front
|
styles.img = front;
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 3: {
|
case 3: {
|
||||||
styles.classes = 'front'
|
styles.classes = 'front';
|
||||||
styles.header = 'Design'
|
styles.header = 'Design';
|
||||||
styles.img = design
|
styles.img = design;
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
default:
|
default:
|
||||||
@ -78,32 +77,32 @@ const Candidate = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return styles
|
return styles
|
||||||
}
|
};
|
||||||
|
|
||||||
function createMarkup(text) {
|
function createMarkup(text) {
|
||||||
return { __html: text.split('</p>').join('</p>') }
|
return {__html: text.split('</p>').join('</p>')}
|
||||||
}
|
}
|
||||||
|
|
||||||
const { header, img, classes } = setStyles()
|
const {header, img, classes} = setStyles();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='candidate'>
|
<div className='candidate'>
|
||||||
<div className='row'>
|
<div className='row'>
|
||||||
<div className='col-12'>
|
<div className='col-12'>
|
||||||
<div className='candidate__title'>
|
<div className='candidate__title'>
|
||||||
<h2>
|
<h2>
|
||||||
<span>Аутстаффинг</span> it-персонала
|
<span>Аутстаффинг</span> it-персонала
|
||||||
</h2>
|
</h2>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='row'>
|
<div className='row'>
|
||||||
<div className='col-12'>
|
<div className='col-12 candidate__header'>
|
||||||
<div className='candidate__header'>
|
|
||||||
<div className='candidate__arrow' onClick={() => history.push('/')}>
|
<div className='candidate__arrow' onClick={() => history.push('/')}>
|
||||||
<div className='candidate__arrow-img'>
|
<div className='candidate__arrow-img'>
|
||||||
<img src={arrow} alt='' />
|
<img src={arrow} alt=''/>
|
||||||
</div>
|
</div>
|
||||||
<div className='candidate__arrow-sp'>
|
<div className='candidate__arrow-sp'>
|
||||||
<span>Вернуться к списку</span>
|
<span>Вернуться к списку</span>
|
||||||
@ -112,84 +111,91 @@ const Candidate = () => {
|
|||||||
|
|
||||||
<div className='candidate__icon'>
|
<div className='candidate__icon'>
|
||||||
<h3>{header}</h3>
|
<h3>{header}</h3>
|
||||||
<img className={classes} src={img} alt='' />
|
<img className={classes} src={img} alt=''/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className='candidate__main'>
|
||||||
<div className='candidate__main'>
|
<div className='row'>
|
||||||
<div className='row'>
|
<div className='col-12 col-xl-4'>
|
||||||
<div className='col-12 col-xl-4'>
|
<Sidebar candidate={currentCandidateObj} position activeSnippet={activeSnippet}
|
||||||
<Sidebar candidate={currentCandidateObj} position activeSnippet={activeSnippet} setActiveSnippet={setActiveSnippet}/>
|
setActiveSnippet={setActiveSnippet}/>
|
||||||
</div>
|
</div>
|
||||||
{
|
{
|
||||||
activeSnippet ?
|
activeSnippet ?
|
||||||
(
|
(
|
||||||
<div className='col-12 col-xl-8'>
|
<div className='col-12 col-xl-8'>
|
||||||
<div className='candidate__main-description'>
|
<div className='candidate__main-description'>
|
||||||
<img src={rectangle} alt='' />
|
<img src={rectangle} alt=''/>
|
||||||
<p className='candidate__hashtag'># Описание опыта</p>
|
<p className='candidate__hashtag'># Описание опыта</p>
|
||||||
{text ? (
|
{text ? (
|
||||||
<div
|
<div
|
||||||
className='candidate__text'
|
className='candidate__text'
|
||||||
dangerouslySetInnerHTML={createMarkup(text)}
|
dangerouslySetInnerHTML={createMarkup(text)}
|
||||||
></div>
|
></div>
|
||||||
) : (
|
) : (
|
||||||
<p className='candidate__text-secondary'>
|
<p className='candidate__text-secondary'>
|
||||||
{currentCandidateObj.vc_text
|
{currentCandidateObj.vc_text
|
||||||
? currentCandidateObj.vc_text
|
? currentCandidateObj.vc_text
|
||||||
: 'Описание отсутствует...'}
|
: 'Описание отсутствует...'}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{/* <Link to={`/candidate/${currentCandidateObj.id}/form`}>
|
{/* <Link to={`/candidate/${currentCandidateObj.id}/form`}>
|
||||||
<button type="submit" className='candidate__btn'>
|
<button type="submit" className='candidate__btn'>
|
||||||
Выбрать к собеседованию
|
Выбрать к собеседованию
|
||||||
</button>
|
</button>
|
||||||
</Link> */}
|
</Link> */}
|
||||||
<SkillSection skillsArr={skillValues} />
|
<SkillSection skillsArr={skillValues}/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) :
|
) :
|
||||||
(
|
(
|
||||||
// <div className="col-12 col-xl-8">
|
// <div className="col-12 col-xl-8">
|
||||||
// <CodeSnippetlighter />
|
// <CodeSnippetlighter />
|
||||||
// </div>
|
// </div>
|
||||||
<div className="col-12 col-xl-8">
|
<div className="col-12 col-xl-8">
|
||||||
<div className="candidate__works works">
|
<div className="candidate__works works">
|
||||||
<div className="works__body">
|
<div className="works__body">
|
||||||
<div className="works__item item-works">
|
<div className="works__item item-works">
|
||||||
<div className="item-works__body">
|
<div className="item-works__body">
|
||||||
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
|
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
|
||||||
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div>
|
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
|
||||||
<div className="item-works__mark">Angular</div>
|
documentation
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="item-works__mark">Angular</div>
|
||||||
<div className="works__item item-works">
|
</div>
|
||||||
<div className="item-works__body">
|
</div>
|
||||||
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
|
<div className="works__item item-works">
|
||||||
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div>
|
<div className="item-works__body">
|
||||||
<div className="item-works__mark">Angular</div>
|
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
|
||||||
</div>
|
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
|
||||||
</div>
|
documentation
|
||||||
<div className="works__item item-works">
|
</div>
|
||||||
<div className="item-works__body">
|
<div className="item-works__mark">Angular</div>
|
||||||
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
|
</div>
|
||||||
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div>
|
</div>
|
||||||
<div className="item-works__mark item-works__mark_yellow">Laravel</div>
|
<div className="works__item item-works">
|
||||||
</div>
|
<div className="item-works__body">
|
||||||
</div>
|
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
|
||||||
</div>
|
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
|
||||||
</div>
|
documentation
|
||||||
|
</div>
|
||||||
|
<div className="item-works__mark item-works__mark_yellow">Laravel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<Footer/>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Candidate
|
export default Candidate
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
h2 {
|
h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #52b709;
|
color: #52b709;
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display', sans-serif;
|
||||||
font-size: 5em;
|
font-size: 5em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -25,8 +25,8 @@
|
|||||||
&__header {
|
&__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
margin-top: 120px;
|
margin-top: 120px;
|
||||||
margin-left: 60px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
@ -36,7 +36,7 @@
|
|||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display', sans-serif;
|
||||||
font-size: 2.8em;
|
font-size: 2.8em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -46,21 +46,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display', sans-serif;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin: 20px 0px;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
p {
|
p {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display', sans-serif;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -69,12 +69,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-secondary {
|
&-secondary {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display', sans-serif;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
line-height: 24px;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
}
|
}
|
||||||
@ -95,7 +94,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
right: 20%;
|
right: 20%;
|
||||||
top: 40%;
|
top: 40%;
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display', sans-serif;
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -109,6 +108,13 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
&-img {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
&-sp {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
@ -138,7 +144,7 @@
|
|||||||
span {
|
span {
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
margin-right: 120px;
|
margin-right: 120px;
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display', sans-serif;
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -216,10 +222,9 @@
|
|||||||
rgba(255, 255, 255, 0) 100%
|
rgba(255, 255, 255, 0) 100%
|
||||||
);
|
);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-family: 'Muller';
|
font-family: 'Muller', sans-serif;
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
text-align: left;
|
|
||||||
border: none;
|
border: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 28px auto;
|
margin: 28px auto;
|
||||||
@ -230,7 +235,7 @@
|
|||||||
|
|
||||||
&-sp {
|
&-sp {
|
||||||
span {
|
span {
|
||||||
margin-right: 0px;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -335,7 +340,7 @@
|
|||||||
|
|
||||||
&__link{
|
&__link{
|
||||||
color: #0350dc;
|
color: #0350dc;
|
||||||
font-family: "GT Eesti Pro Display";
|
font-family: "GT Eesti Pro Display", sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
@ -347,7 +352,7 @@
|
|||||||
&__text{
|
&__text{
|
||||||
margin-bottom: 37px;
|
margin-bottom: 37px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
font-family: "GT Eesti Pro Display - Thin";
|
font-family: "GT Eesti Pro Display - Thin", sans-serif;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: math.div(18,12);
|
line-height: math.div(18,12);
|
||||||
|
@ -1,21 +1,13 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useSelector } from 'react-redux'
|
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import { Achievement } from '../Achievement/Achievement'
|
import { Achievement } from '../Achievement/Achievement'
|
||||||
|
|
||||||
import { LEVELS, SKILLS } from '../constants/constants'
|
import { LEVELS, SKILLS } from '../constants/constants'
|
||||||
|
|
||||||
import maleBig from '../../images/medium_male_big.png'
|
|
||||||
import './candidateSidebar.scss'
|
import './candidateSidebar.scss'
|
||||||
import { Highlighter } from '../../App'
|
|
||||||
import { useState } from 'react'
|
|
||||||
import { useEffect } from 'react'
|
|
||||||
|
|
||||||
import { selectUserInfo } from '../../redux/outstaffingSlice'
|
|
||||||
import { isRejected } from '@reduxjs/toolkit'
|
|
||||||
|
|
||||||
const getYearsString = (years) => {
|
const getYearsString = (years) => {
|
||||||
let yearsString
|
let yearsString;
|
||||||
if (years % 10 === 1) {
|
if (years % 10 === 1) {
|
||||||
yearsString = 'год'
|
yearsString = 'год'
|
||||||
} else if (years === 11 || years === 12 || years === 13 || years === 14) {
|
} else if (years === 11 || years === 12 || years === 13 || years === 14) {
|
||||||
@ -26,13 +18,13 @@ const getYearsString = (years) => {
|
|||||||
yearsString = 'лет'
|
yearsString = 'лет'
|
||||||
}
|
}
|
||||||
return `${years} ${yearsString}`
|
return `${years} ${yearsString}`
|
||||||
}
|
};
|
||||||
|
|
||||||
const CandidateSidebar = ({ candidate, position, setActiveSnippet, activeSnippet }) => {
|
const CandidateSidebar = ({ candidate, setActiveSnippet, activeSnippet }) => {
|
||||||
const userId = localStorage.getItem('id')
|
const userId = localStorage.getItem('id') ;
|
||||||
const showSnippet = () => {
|
const showSnippet = () => {
|
||||||
setActiveSnippet((prev)=>!prev)
|
setActiveSnippet((prev)=>!prev)
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='candidate-sidebar'>
|
<div className='candidate-sidebar'>
|
||||||
@ -65,7 +57,7 @@ const CandidateSidebar = ({ candidate, position, setActiveSnippet, activeSnippet
|
|||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
{/* <Link to={`/candidate/${candidate.id}/code`}> */}
|
{/* <Link to={`/candidate/${candidate.id}/code`}> */}
|
||||||
<button
|
<button
|
||||||
className='candidate-sidebar__select'
|
className='candidate-sidebar__select'
|
||||||
onClick={showSnippet}
|
onClick={showSnippet}
|
||||||
>
|
>
|
||||||
@ -83,6 +75,6 @@ const CandidateSidebar = ({ candidate, position, setActiveSnippet, activeSnippet
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
};
|
||||||
|
|
||||||
export default CandidateSidebar
|
export default CandidateSidebar
|
||||||
|
@ -9,10 +9,10 @@
|
|||||||
|
|
||||||
&__position {
|
&__position {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 3rem !important;
|
font-size: 3rem;
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display', sans-serif;
|
||||||
font-size: 2.6em;
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
@ -34,7 +34,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -53,7 +53,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.candidate-sidebar__experience-title {
|
.candidate-sidebar__experience-title {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display', sans-serif;
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -63,7 +63,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.candidate-sidebar__experience {
|
.candidate-sidebar__experience {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display', sans-serif;
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -78,7 +78,7 @@
|
|||||||
border: none;
|
border: none;
|
||||||
background-color: #73c141;
|
background-color: #73c141;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-family: 'Muller';
|
font-family: 'Muller', sans-serif;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
@ -95,7 +95,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.candidate-sidebar__info__l {
|
.candidate-sidebar__info__l {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display', sans-serif;
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -134,7 +134,7 @@
|
|||||||
|
|
||||||
.candidate-sidebar__arrows-sp {
|
.candidate-sidebar__arrows-sp {
|
||||||
color: #705fa3;
|
color: #705fa3;
|
||||||
font-family: 'Circe';
|
font-family: 'Circe', sans-serif;
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
@ -1,31 +1,31 @@
|
|||||||
import React, { useState } from 'react'
|
import React, {useState} from 'react'
|
||||||
import { useHistory } from 'react-router-dom'
|
import {useHistory} from 'react-router-dom'
|
||||||
import { useDispatch, useSelector } from 'react-redux'
|
import {useDispatch, useSelector} from 'react-redux'
|
||||||
import { Loader } from '../Loader/Loader'
|
import {Loader} from '../Loader/Loader'
|
||||||
import { auth } from '../../redux/outstaffingSlice'
|
import {auth} from '../../redux/outstaffingSlice'
|
||||||
import { getRole } from '../../redux/roleSlice'
|
import {getRole} from '../../redux/roleSlice'
|
||||||
|
|
||||||
import './logoutButton.scss'
|
import './logoutButton.scss'
|
||||||
|
|
||||||
export const LogoutButton = () => {
|
export const LogoutButton = () => {
|
||||||
const [isLoggingOut, setIsLoggingOut] = useState(false)
|
const [isLoggingOut, setIsLoggingOut] = useState(false);
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch();
|
||||||
const userRole = useSelector(getRole)
|
const userRole = useSelector(getRole);
|
||||||
const history = useHistory()
|
const history = useHistory();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='logout-button'>
|
<div className='logout-button'>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIsLoggingOut(true)
|
setIsLoggingOut(true);
|
||||||
localStorage.clear()
|
localStorage.clear();
|
||||||
dispatch(auth(false))
|
dispatch(auth(false));
|
||||||
setIsLoggingOut(false)
|
setIsLoggingOut(false);
|
||||||
history.push(userRole === 'ROLE_DEV' ? '/authdev' : '/auth')
|
history.push(userRole === 'ROLE_DEV' ? '/authdev' : '/auth')
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{isLoggingOut ? <Loader /> : 'Выйти'}{' '}
|
{isLoggingOut ? <Loader/> : 'Выйти'}{' '}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
};
|
||||||
|
@ -8,4 +8,4 @@ export const WithLogout = (props) => {
|
|||||||
<LogoutButton />
|
<LogoutButton />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
};
|
Loading…
Reference in New Issue
Block a user