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

tracker tasks

Browse Source
This commit is contained in:
Mikola
2023-09-11 18:28:56 +03:00
parent 617ca5af6e
commit 3b773e0008
18 changed files with 168 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/AuthBox/AuthBox.jsx
View File

@ -12,7 +12,8 @@ import { Loader } from "@components/Common/Loader/Loader";
import ModalErrorLogin from "@components/Modal/ModalErrorLogin/ModalErrorLogin";
import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";
import ellipse from "assets/icons/ellipse.png";
import authHead from "assets/icons/authHead.svg"
import eyePassword from "assets/icons/passwordIcon.svg"
import "./authBox.scss";
@ -27,6 +28,7 @@ export const AuthBox = ({ title }) => {
const [error, setError] = useState(null);
const [modalError, setModalError] = useState(false);
const [modalReg, setModalReg] = useState(false);
const [showPassword, setShowPassword] = useState(false)
useEffect(() => {
if (!localStorage.getItem("auth_token")) {
@ -73,23 +75,25 @@ export const AuthBox = ({ title }) => {
return (
<div className="auth-box">
<h2 className="auth-box__header">
Войти в <span>систему</span>
Вход <img src={authHead} alt='authImg' />
</h2>
<div className="auth-box__title">
<img src={ellipse} alt="." />
<span>{title}</span>
</div>
<form ref={ref} className="auth-box__form">
<label htmlFor="login">Ваш логин:</label>
<label htmlFor="login">Ваш email *</label>
<input id="login" type="text" name="username" placeholder="Логин" />
<label htmlFor="password">Пароль:</label>
<input
id="password"
type="password"
name="password"
placeholder="Пароль"
/>
<label htmlFor="password">Ваш пароль*</label>
<div className='inputWrapper'>
<input
id="password"
type={showPassword ? "text" : "password"}
name="password"
placeholder="Пароль"
/>
<img onClick={() => setShowPassword(!showPassword)} className='eye' src={eyePassword} alt='eye' />
</div>
{error && (
<div className="auth-box__form-error">
@ -111,18 +115,23 @@ export const AuthBox = ({ title }) => {
>
{isLoading ? <Loader /> : "Войти"}
</button>
<span className="auth-box__reset">
Вспомнить пароль
</span>
<ModalRegistration active={modalReg} setActive={setModalReg} />
<button
className="auth-box__form-btn--role auth-box__auth-link"
onClick={(e) => {
e.preventDefault();
setModalReg(true);
}}
>
Регистрация
</button>
</div>
<p className="auth-box__registration">
У вас еще нет аккаунта? &nbsp;
<span
onClick={(e) => {
e.preventDefault();
setModalReg(true);
}}
>
Зарегистрироваться
</span>
</p>
</form>
</div>
);

103
src/components/AuthBox/authBox.scss
View File

@ -9,8 +9,7 @@
}
&__header {
font-family: "GT Eesti Pro Display";
font-size: 5.3em;
font-size: 50px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
@ -35,7 +34,6 @@
}
&__sign-in {
font-family: "GT Eesti Pro Display";
font-size: 5.3em;
font-weight: 700;
font-style: normal;
@ -45,7 +43,6 @@
margin-top: 164px;
span {
font-family: "GT Eesti Pro Display";
color: #52b709;
font-style: normal;
letter-spacing: 0.56px;
@ -55,21 +52,14 @@
&__title {
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
margin-bottom: 65px;
margin-bottom: 54px;
span {
color: #18586e;
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 500;
color: #8DC63F;
font-size: 50px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-left: 10px;
}
img {
@ -92,34 +82,46 @@
flex-direction: column;
label {
color: #48802d;
font-family: "GT Eesti Pro Display";
font-size: 2.4em;
font-weight: 500;
font-size: 16px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
line-height: 19.2px;
text-align: left;
margin-bottom: 20px;
margin-left: 45px;
margin-bottom: 25px;
color: #000000;
}
.inputWrapper {
width: 366px;
position: relative;
.eye {
cursor: pointer;
position: absolute;
right: 20px;
top: 15px;
}
}
input {
max-width: 366px;
height: 75px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 37px;
border: 1px solid #c4c4c4;
width: 100%;
height: 52.5px;
//box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 8px;
//border: 1px solid #c4c4c4;
border: none;
background-color: #ffffff;
margin-bottom: 60px;
font-family: "GT Eesti Pro Display";
font-size: 2.2em;
font-weight: 300;
margin-bottom: 35px;
font-size: 15px;
font-weight: 400;
line-height: 18px;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
padding-left: 45px;
padding: 16px 15px 16px 22px;
outline: none;
}
@ -130,10 +132,10 @@
}
&-btn {
width: 268px;
height: 75px;
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 38px;
width: 138px;
height: 50px;
//box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 44px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
@ -145,12 +147,10 @@
);
border: none;
color: #ffffff;
font-family: "Muller";
font-weight: 500;
font-size: 2.2em;
font-weight: bold;
letter-spacing: normal;
line-height: 71.88px;
line-height: 32px;
text-align: center;
border: 2px solid #6aaf5c;
margin-right: 1.5rem;
@ -164,7 +164,8 @@
//color: #6aaf5c !important;
.loader * {
fill: #6aaf5c;
fill: #fff !important;
max-width: 40px;
}
}
@ -174,7 +175,6 @@
border-radius: 38px;
background-color: #f5f5f5;
border: 2px solid #6aaf5c;
font-family: "Muller";
font-size: 2em;
font-weight: 400;
letter-spacing: normal;
@ -186,9 +186,32 @@
.loader * {
fill: #fff !important;
max-width: 40px;
}
}
}
&__reset {
color: #000000;
font-size: 13px;
line-height: 16px;
cursor: pointer;
text-decoration: underline;
}
&__registration {
color: #000000;
font-size: 17px;
font-weight: 400;
margin-top: 45px;
line-height: 32px;
span {
cursor: pointer;
color: #52B709;
font-weight: 700;
}
}
}
@media (max-width: 575.98px) {