apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added ui btn and fixed Modals

Browse Source
This commit is contained in:
MaxOvs19 2023-05-26 19:59:42 +03:00
parent 81129538ed
commit 85accc3111
16 changed files with 261 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/CandidateSidebar/CandidateSidebar.jsx
View File

@ -1,7 +1,7 @@
import React, { useState } from "react";
import { Achievement } from "../Achievement/Achievement";
import ModalAspt from "../UI/ModalAspt/ModalAspt";
import ModalAspirant from "../UI/ModalAspirant/ModalAspirant";
import { urlForLocal } from "../../helper";
import { LEVELS, SKILLS } from "../../constants/constants";
@ -39,11 +39,11 @@ const CandidateSidebar = ({ candidate, setActiveSnippet, activeSnippet }) => {
return (
<div className="candidate-sidebar">
<ModalAspt
<ModalAspirant
active={addAspt}
setActive={setAddAspt}
level={levelAspt}
></ModalAspt>
></ModalAspirant>
<div className="candidate-sidebar__info">
<div className="candidate-sidebar__position">

16
src/components/Common/Button/Button.jsx Normal file
View File

@ -0,0 +1,16 @@
import React from "react";
import classes from "./button.module.scss";
export const Button = ({ children, styles, ...props }) => {
return (
<button
className={styles ? `${styles} ${classes.button}` : classes.button}
{...props}
>
{children}
</button>
);
};
export default Button;

18
src/components/Common/Button/button.module.scss Normal file
View File

@ -0,0 +1,18 @@
.button {
display: flex;
align-items: center;
justify-content: center;
background-color: #52b709;
border-radius: 44px;
color: white;
font-style: normal;
font-family: "LabGrotesque", sans-serif;
border: none;
transition: 0.5s;
&:hover {
transition: 0.5s;
background-color: #52b709a8;
text-decoration: none;
}
}

8
src/components/SliderWorkers/SliderWorkers.jsx
View File

@ -2,6 +2,8 @@ import React, { useState } from "react";
import Slider from "react-slick";
import { Link } from "react-router-dom";
import Button from "../Common/Button/Button";
import mockWorker from "../../assets/images/mock/mokPerson.png";
import "./sliderWorkers.scss";
@ -65,9 +67,9 @@ export const SliderWorkers = ({ title, titleInfo, subTitle }) => {
<img src={worker.avatar}></img>
<div className="worker-description">
<p>{worker.skils}</p>
<Link to={`/worker/${index}`} className="worker__resume">
Подробное резюме
</Link>
<Button styles="worker__resume">
<Link to={`/worker/${index}`}>Подробное резюме</Link>
</Button>
</div>
</div>
);

14
src/components/SliderWorkers/sliderWorkers.scss
View File

@ -59,24 +59,16 @@
}
&__resume {
display: flex;
align-items: center;
justify-content: center;
margin-top: 5px;
width: 177px;
height: 40px;
background: #52b709;
border-radius: 44px;
font-size: 14px;
line-height: 32px;
color: white;
border: none;
transition: 0.5s;
&:hover {
transition: 0.5s;
background-color: #52b709a8;
text-decoration: none;
a {
color: white;
width: 100%;
}
}
}

17
src/components/UI/FreeDevelopers/FreeDevelopers.jsx
View File

@ -1,12 +1,12 @@
import React from "react";
import { Link } from "react-router-dom";
import AuthHeader from "../../AuthHeader/AuthHeader";
import SideBar from "../../SideBar/SideBar";
import { Footer } from "../../Footer/Footer";
import { Link } from "react-router-dom";
import { scrollToForm } from "../../../helper";
import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
import Button from "../../Common/Button/Button";
import mockWorker from "../../../assets/images/mock/mokPerson.png";
import arrow from "../../../assets/icons/arrows/arrow_left.png";
@ -42,9 +42,9 @@ export const FreeDevelopers = ({}) => {
<div></div>
</div>
</div>
<button className="button-green" onClick={scrollToForm}>
<Button onClick={scrollToForm} styles={"dev-code"}>
Код разработчика
</button>
</Button>
</div>
<div className="free-dev__body">
@ -84,14 +84,13 @@ export const FreeDevelopers = ({}) => {
</div>
</div>
<div className="logIn">
<div className="login">
<h3>Для просмотра полного резюме разработчика авторизуйтесь</h3>
<Link to={"/auth"} className="button-green">
Войти
</Link>
<Button styles={"dev-code"}>
<Link to={"/auth"}>Войти</Link>
</Button>
</div>
</div>
<Footer />
</div>
</section>

18
src/components/UI/FreeDevelopers/freeDevelopers.scss
View File

@ -118,7 +118,7 @@
}
}
.logIn {
.login {
position: absolute;
bottom: 75px;
border: 3px solid #52b709;
@ -140,10 +140,8 @@
}
a {
width: 140px;
height: 50px;
color: white;
text-decoration: none;
width: 100%;
}
@media (max-width: 920px) {
@ -156,7 +154,7 @@
text-align: center;
}
a {
button {
margin-top: 15px;
height: 25px;
height: 40px;
@ -229,17 +227,9 @@
}
}
.button-green {
align-items: center;
justify-content: center;
display: flex;
background: #52b709;
border-radius: 44px;
.dev-code {
width: 202px;
height: 50px;
font-weight: 500;
font-size: 16px;
line-height: 32px;
color: #ffffff;
border: none;
}

102
src/components/UI/ModalAspirant/ModalAspirant.jsx Normal file
View File

@ -0,0 +1,102 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import ModalLayout from "../ModalLayout/ModalLayout";
import avatar from "../../../assets/images/mock/mokPerson.png";
import logoTg from "../../../assets/icons/tgLogo.svg";
import arrow from "../../../assets/icons/arrows/left-arrow.png";
import interview from "../../../assets/images/logo/interviewLogo.svg";
import "./modalAspirant.scss";
export const ModalAspirant = ({ active, setActive, level }) => {
const [date, setDate] = useState("");
const [time, setTime] = useState("");
const [modalSend, setModalSend] = useState(false);
const send = () => {
if (date != "" && time != "") {
setModalSend(true);
setTimeout(() => {
setModalSend(false);
setActive(false);
}, 3200);
}
};
// TODO: Исправить стили тут, и заменить в модалках
return (
<ModalLayout
active={active}
setActive={setActive}
styles={"modal-aspt__content"}
>
<div className="aspt-decs">
<h1>Выбранный кандидат</h1>
<div className="aspt-decs__avatar">
<div className="aspt-decs__avatar_title">
<img src={avatar}></img>
<p>
{level.spec} {level.skils}, {level.level}{" "}
</p>
</div>
<div className="aspt-decs__avatar_back">
<Link to={"/profile/catalog"}>
<div>
<img src={arrow}></img>
</div>
<p>Вернуться к списку</p>
</Link>
</div>
</div>
<div className="aspt-decs__telega">
<h4>Есть вопросы?</h4>
<div className="aspt-decs__telega-logo">
<img src={logoTg}></img>
<p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
</div>
</div>
</div>
<div className="form-interview">
<p>Дата собеседования</p>
<div className="input">
<input
type="date"
value={date}
onChange={(e) => setDate(e.target.value)}
></input>
</div>
<p>Время собеседования</p>
<div className="input">
<input
type="time"
value={time}
onChange={(e) => setTime(e.target.value)}
></input>
</div>
<button onClick={send}>Отправить</button>
</div>
<span className="exit" onClick={() => setActive(false)}></span>
<ModalLayout active={modalSend} setActive={setModalSend} styles={"send"}>
<div className="send">
<img src={interview}></img>
<h2>Спасибо, собеседование назначено</h2>
<p>
Дата: <span>{date}</span>
</p>
<p>
Время собеседования: <span>{time}</span>
</p>
</div>
</ModalLayout>
</ModalLayout>
);
};
export default ModalAspirant;

12
src/components/UI/ModalAspt/modalAspt.scss → src/components/UI/ModalAspirant/modalAspirant.scss
View File

@ -164,8 +164,13 @@
}
}
}
}
.send {
.modal-aspt.active {
transform: scale(1);
}
.send {
display: flex;
flex-direction: column;
align-items: center;
@ -187,9 +192,4 @@
color: #406128;
}
}
}
}
.modal-aspt.active {
transform: scale(1);
}

102
src/components/UI/ModalAspt/ModalAspt.jsx
View File

@ -1,102 +0,0 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import ModalLayout from "../ModalLayout/ModalLayout";
import avatar from "../../../assets/images/mock/mokPerson.png";
import logoTg from "../../../assets/icons/tgLogo.svg";
import arrow from "../../../assets/icons/arrows/left-arrow.png";
import interview from "../../../assets/images/logo/interviewLogo.svg";
import "./modalAspt.scss";
export const ModalAspt = ({ active, setActive, level }) => {
const [date, setDate] = useState("");
const [time, setTime] = useState("");
const [modalSend, setModalSend] = useState(false);
const send = () => {
if (date != "" && time != "") {
setModalSend(true);
setTimeout(() => {
setModalSend(false);
setActive(false);
}, 3200);
}
};
return (
<div
className={active ? "modal-aspt active" : "modal-aspt"}
onClick={() => setActive(false)}
>
<div className="modal-aspt__content" onClick={(e) => e.stopPropagation()}>
<div className="aspt-decs">
<h1>Выбранный кандидат</h1>
<div className="aspt-decs__avatar">
<div className="aspt-decs__avatar_title">
<img src={avatar}></img>
<p>
{level.spec} {level.skils}, {level.level}{" "}
</p>
</div>
<div className="aspt-decs__avatar_back">
<Link to={"/profile/catalog"}>
<div>
<img src={arrow}></img>
</div>
<p>Вернуться к списку</p>
</Link>
</div>
</div>
<div className="aspt-decs__telega">
<h4>Есть вопросы?</h4>
<div className="aspt-decs__telega-logo">
<img src={logoTg}></img>
<p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
</div>
</div>
</div>
<div className="form-interview">
<p>Дата собеседования</p>
<div className="input">
<input
type="date"
value={date}
onChange={(e) => setDate(e.target.value)}
></input>
</div>
<p>Время собеседования</p>
<div className="input">
<input
type="time"
value={time}
onChange={(e) => setTime(e.target.value)}
></input>
</div>
<button onClick={send}>Отправить</button>
</div>
<span className="exit" onClick={() => setActive(false)}></span>
</div>
<ModalLayout active={modalSend} setActive={setModalSend}>
<div className="send">
<img src={interview}></img>
<h2>Спасибо, собеседование назначено</h2>
<p>
Дата: <span>{date}</span>
</p>
<p>
Время собеседования: <span>{time}</span>
</p>
</div>
</ModalLayout>
</div>
);
};
export default ModalAspt;

13
src/components/UI/ModalLayout/ModalLayout.jsx
View File

@ -1,12 +1,19 @@
import React from "react";
export const ModalLayout = ({ active, setActive, children }) => {
import "./modalLayout.scss";
export const ModalLayout = ({ active, setActive, children, styles }) => {
return (
<div
className={active ? "modal-add active" : "modal-add"}
className={active ? `modal-layout active` : "modal-layout"}
onClick={() => setActive(false)}
>
<div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
<div
className={
styles ? `modal-layout__content ${styles}` : "modal-layout__content"
}
onClick={(e) => e.stopPropagation()}
>
{children}
</div>
</div>

29
src/components/UI/ModalLayout/modalLayout.scss Normal file
View File

@ -0,0 +1,29 @@
.modal-layout {
z-index: 9;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.11);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0);
&__content {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 24px;
padding: 60px 60px 30px 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
.modal-layout.active {
transform: scale(1);
}

8
src/pages/PartnerRequests/PartnerRequests.js → src/pages/PartnerRequests/PartnerRequests.jsx
View File

@ -5,6 +5,7 @@ import {
setPartnerRequestId,
setPartnerRequests,
} from "../../redux/outstaffingSlice";
import { apiRequest } from "../../api/request";
import { Navigation } from "../../components/Navigation/Navigation";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
@ -12,8 +13,7 @@ import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileB
import { SliderWorkers } from "../../components/SliderWorkers/SliderWorkers";
import { Loader } from "../../components/Loader/Loader";
import { Footer } from "../../components/Footer/Footer";
import { apiRequest } from "../../api/request";
import Button from "../../components/Common/Button/Button";
import cursorImg from "../../assets/icons/cursorImg.svg";
@ -82,10 +82,12 @@ export const PartnerRequests = () => {
Оператор компании заводит заявку и указывает необходимые
параметры — количество сотрудников, стек, уровень специалиста
</p>
<Button>
<Link to={"/profile/add-request"}>
<span>+</span>
Создать запрос
</Link>
</Button>
</div>
</div>
)}
@ -95,10 +97,12 @@ export const PartnerRequests = () => {
<div className="partnerRequests__noItems__create__link">
<img src={cursorImg} alt="cursor" />
<p>У вас еще нет запросов на сотрудников</p>
<Button>
<Link to={"/profile/add-request"}>
<span>+</span>
Создать запрос
</Link>
</Button>
</div>
<div className="partnerRequests__noItems__create__instruction">
<h3>Инструкция: подачи заявки</h3>

29
src/pages/PartnerRequests/partnerRequests.scss
View File

@ -161,20 +161,18 @@
}
}
a {
background: #52b709;
button {
max-width: 188px;
border-radius: 44px;
height: 52px;
border: none;
font-weight: 400;
font-size: 15px;
line-height: 32px;
transition: 0.3s all ease;
a {
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s all ease;
}
span {
color: white;
@ -186,8 +184,6 @@
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
text-decoration: none;
color: #ffffff;
}
}
}
@ -260,21 +256,22 @@
}
}
a {
background: #52b709;
button {
max-width: 174px;
border-radius: 44px;
width: 100%;
height: 46px;
border: none;
font-weight: 400;
font-size: 15px;
line-height: 32px;
color: #ffffff;
transition: 0.3s all ease;
a {
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s all ease;
color: white;
width: 100%;
}
span {
color: white;
@ -286,8 +283,6 @@
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
text-decoration: none;
color: #ffffff;
}
}
}

9
src/pages/PartnerSettings/PartnerSettings.jsx
View File

@ -4,6 +4,7 @@ import { Footer } from "../../components/Footer/Footer";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import { Navigation } from "../../components/Navigation/Navigation";
import Button from "../../components/Common/Button/Button";
import kontur from "../../assets/images/logo/konturLogo.png";
import astral from "../../assets/images/logo/astralLogo.png";
@ -39,8 +40,8 @@ export const PartnerSettings = () => {
</div>
<div className="settings__buttons">
<button className="settings__buttons-cancel">Отмена</button>
<button className="settings__buttons-save">Сохранить</button>
<Button styles={"settings__buttons-cancel"}>Отмена</Button>
<Button styles={"settings__buttons-save"}>Сохранить</Button>
</div>
<span className="settings__agreement">
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
@ -76,8 +77,8 @@ export const PartnerSettings = () => {
</div>
<div className="settings__buttons">
<button className="settings__buttons-cancel">Отмена</button>
<button className="settings__buttons-save">Сохранить</button>
<Button styles={"settings__buttons-cancel"}>Отмена</Button>
<Button styles={"settings__buttons-save"}>Сохранить</Button>
</div>
<span className="settings__agreement">
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и

9
src/pages/PartnerSettings/partnerSettings.scss
View File

@ -72,7 +72,6 @@
&-cancel,
&-save {
border-radius: 44px;
width: 151px;
height: 40px;
font-size: 14px;
@ -83,12 +82,10 @@
color: #6f6f6f;
background: white;
border: 0.5px solid #8dc63f;
}
&-save {
color: #ffffff;
background: #52b709;
border: none;
&:hover {
background-color: white;
}
}
}