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

Fixed styles

Browse Source
This commit is contained in:
MaxOvs19 2023-03-14 18:49:45 +03:00
parent 021c07f0c6
commit cc2b0f144a
6 changed files with 472 additions and 491 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/AuthBox/AuthBox.js
View File

@ -21,7 +21,7 @@ import withReactContent from "sweetalert2-react-content";
const SweetAlert = withReactContent(Swal);
export const AuthBox = ({ title, altTitle, roleChangeLink }) => {
export const AuthBox = ({ title }) => {
const dispatch = useDispatch();
const ref = useRef();
const navigate = useNavigate();
@ -127,11 +127,13 @@ export const AuthBox = ({ title, altTitle, roleChangeLink }) => {
{isLoading ? <Loader /> : "Войти"}
</button>
<Link to={roleChangeLink}>
<button className="auth-box__form-btn--role auth-box__auth-link">
{altTitle}
</button>
</Link>
{/* TODO: при клике отправлять на форму/модалку/страницу регистрации */}
<button
className="auth-box__form-btn--role auth-box__auth-link"
onClick={(e) => e.preventDefault()}
>
Регистрация
</button>
</div>
</form>
</div>

6
src/pages/AuthForDevelopers/AuthForDevelopers.js
View File

@ -63,11 +63,7 @@ const AuthForDevelopers = () => {
<div className="row">
<div className="col-12 col-xl-6">
<div className="auth-developers__box">
<AuthBox
title="Для разработчиков"
altTitle="Для партнёров"
roleChangeLink="/auth"
/>
<AuthBox title="Для разработчиков" />
</div>
</div>
<div className="col-xl-2">

383
src/pages/AuthForDevelopers/authForDevelopers.scss
View File

@ -1,26 +1,199 @@
.auth-developers {
overflow: hidden;
position: relative;
}
.auth-developers__background {
background-color: #f1f1f1;
position: relative;
}
&__background {
background-color: #f1f1f1;
position: relative;
}
.auth-developers__vector,
.auth-developers__vector-black {
position: absolute;
}
&__vector,
&__vector-black {
position: absolute;
}
.auth-developers__vector {
top: -37px;
left: -285px;
}
&__vector {
top: -37px;
left: -285px;
}
.auth-developers__vector-black {
top: 460px;
right: -224px;
&__vector-black {
top: 460px;
right: -224px;
}
&__arrow {
margin-top: 360px;
}
@media (max-width: 575.98px) {
&__vector,
&__vector-black,
&__arrow {
display: none;
}
}
&__info {
background-color: #e1fccf;
margin-top: 70px;
max-width: 310px;
padding-top: 30px;
position: relative;
padding-bottom: 310px;
}
@media (max-width: 575.98px) {
&__info {
max-width: 380px;
}
}
@media (max-width: 375.98px) {
&__info {
max-width: 340px;
}
}
&__info-box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
&__info-box {
flex-direction: column;
justify-content: center;
}
}
&__info-box > img {
width: 150px;
height: 150px;
margin-left: -84px;
margin-right: 30px;
}
@media (max-width: 575.98px) {
&__info-box > img {
margin-left: 0px;
margin-right: 0px;
}
}
&__info-box > h3 {
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
@media (max-width: 575.98px) {
&__info-box > h3 {
margin-top: 20px;
}
}
&__info-container {
display: flex;
position: relative;
}
&__info-img {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 28px;
margin-left: -40px;
}
&__info-img > div > img {
margin-bottom: 100px;
}
&__specialists {
font-family: "GT Eesti Pro Display";
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 26.12px;
text-align: left;
transform: rotate(-90deg);
text-transform: uppercase;
}
&__info-list {
list-style: none;
margin-top: 110px;
position: absolute;
left: 34px;
}
@media (max-width: 575.98px) {
&__info-list {
left: 34px;
}
}
&__info-item {
color: #1f1f1f;
font-family: "GT Eesti Pro Display";
font-size: 2.6em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 56.95px;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
margin-bottom: 34px;
}
@media (max-width: 575.98px) {
&__info-item {
font-size: 2.6em;
margin-bottom: 14px;
}
}
&__img-text {
position: absolute;
right: -68px;
bottom: -84px;
}
@media (max-width: 575.98px) {
&__img-text {
right: 0px;
bottom: -40px;
}
}
&__auth-link {
display: block;
}
&__auth-link a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
@media (max-width: 766px) {
&__form-buttons {
flex-direction: column;
}
&__form-btn {
margin: 0;
margin-bottom: 1.5rem;
}
}
}
.change-mode {
@ -51,181 +224,3 @@
}
}
}
@media (max-width: 575.98px) {
.auth-developers__vector,
.auth-developers__vector-black {
display: none;
}
}
.auth-developers__arrow {
margin-top: 360px;
}
@media (max-width: 575.98px) {
.auth-developers__arrow {
display: none;
}
}
.auth-developers__info {
background-color: #e1fccf;
margin-top: 70px;
max-width: 310px;
padding-top: 30px;
position: relative;
padding-bottom: 310px;
}
@media (max-width: 575.98px) {
.auth-developers__info {
max-width: 380px;
}
}
@media (max-width: 375.98px) {
.auth-developers__info {
max-width: 340px;
}
}
.auth-developers__info-box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
.auth-developers__info-box {
flex-direction: column;
justify-content: center;
}
}
.auth-developers__info-box > img {
width: 150px;
height: 150px;
margin-left: -84px;
margin-right: 30px;
}
@media (max-width: 575.98px) {
.auth-developers__info-box > img {
margin-left: 0px;
margin-right: 0px;
}
}
.auth-developers__info-box > h3 {
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
@media (max-width: 575.98px) {
.auth-developers__info-box > h3 {
margin-top: 20px;
}
}
.auth-developers__info-container {
display: flex;
position: relative;
}
.auth-developers__info-img {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 28px;
margin-left: -40px;
}
.auth-developers__info-img > div > img {
margin-bottom: 100px;
}
.auth-developers__specialists {
font-family: "GT Eesti Pro Display";
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 26.12px;
text-align: left;
transform: rotate(-90deg);
text-transform: uppercase;
}
.auth-developers__info-list {
list-style: none;
margin-top: 110px;
position: absolute;
left: 34px;
}
@media (max-width: 575.98px) {
.auth-developers__info-list {
left: 34px;
}
}
.auth-developers__info-item {
color: #1f1f1f;
font-family: "GT Eesti Pro Display";
font-size: 2.6em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 56.95px;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
margin-bottom: 34px;
}
@media (max-width: 575.98px) {
.auth-developers__info-item {
font-size: 2.6em;
margin-bottom: 14px;
}
}
.auth-developers__img-text {
position: absolute;
right: -68px;
bottom: -84px;
}
@media (max-width: 575.98px) {
.auth-developers__img-text {
right: 0px;
bottom: -40px;
}
}
.auth-developers__auth-link {
display: block;
}
.auth-developers__auth-link a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
@media (max-width: 766px) {
.auth-developers__form-buttons {
flex-direction: column;
}
.auth-developers__form-btn {
margin: 0;
margin-bottom: 1.5rem;
}
}

6
src/pages/AuthForPartners/AuthForPartners.js
View File

@ -59,11 +59,7 @@ const AuthForPartners = () => {
<div className="row">
<div className="col-12 col-xl-6">
<div className="auth-partners__box">
<AuthBox
title="Для партнёров"
altTitle="Для разработчиков"
roleChangeLink="/authdev"
/>
<AuthBox title="Для партнёров" />
</div>
</div>
<div className="col-xl-2">

550
src/pages/AuthForPartners/authForPartners.scss
View File

@ -1,52 +1,281 @@
.auth-partners {
overflow: hidden;
position: relative;
}
.auth-partners__background {
background-color: #f1f1f1;
position: relative;
}
.auth-partners__vector,
.auth-partners__vector-black {
position: absolute;
}
.auth-partners__vector {
top: -37px;
left: -285px;
}
.auth-partners__vector-black {
top: 460px;
right: -224px;
}
@media (max-width: 575.98px) {
.auth-partners__vector,
.auth-partners__vector-black {
display: none;
&__background {
background-color: #f1f1f1;
position: relative;
}
}
.auth-partners__arrow {
margin-top: 360px;
}
@media (max-width: 575.98px) {
.auth-partners__arrow {
display: none;
&__vector,
&__vector-black {
position: absolute;
}
}
.auth-partners__info {
background-color: #e1fccf;
margin-top: 70px;
max-width: 310px;
padding-top: 30px;
position: relative;
padding-bottom: 310px;
&__vector {
top: -37px;
left: -285px;
}
&__vector-black {
top: 460px;
right: -224px;
}
&__arrow {
margin-top: 360px;
}
@media (max-width: 575.98px) {
&__vector,
&__vector-black,
&__arrow {
display: none;
}
}
&__info {
background-color: #e1fccf;
margin-top: 70px;
max-width: 310px;
padding-top: 30px;
position: relative;
padding-bottom: 310px;
}
&__info-box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
&__info {
max-width: 380px;
}
&__info-box {
flex-direction: column;
justify-content: center;
}
}
@media (max-width: 375.98px) {
&__info {
max-width: 340px;
}
}
&__info-box > img {
width: 165px;
height: 165px;
margin-left: -84px;
margin-right: 30px;
}
@media (max-width: 575.98px) {
&__info-box > img {
margin-left: 0px;
margin-right: 0px;
}
}
&__info-box > h3 {
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
@media (max-width: 575.98px) {
&__info-box > h3 {
margin-top: 20px;
}
}
&__info-container {
display: flex;
position: relative;
}
&__info-img {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 28px;
margin-left: -40px;
}
&__info-img > div > img {
margin-bottom: 100px;
}
&__specialists {
font-family: "GT Eesti Pro Display";
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 26.12px;
text-align: left;
transform: rotate(-90deg);
text-transform: uppercase;
}
&__info-list {
list-style: none;
margin-top: 110px;
position: absolute;
right: -70px;
}
@media (max-width: 575.98px) {
&__info-list {
left: 34px;
}
}
&__info-item {
color: #1f1f1f;
font-family: "GT Eesti Pro Display";
font-size: 4em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 56.95px;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
}
@media (max-width: 575.98px) {
&__info-item {
font-size: 2.6em;
}
}
&__img-text {
position: absolute;
right: -68px;
bottom: -84px;
}
@media (max-width: 575.98px) {
&__img-text {
right: 0px;
bottom: -40px;
}
}
&__footer--left {
display: flex;
align-items: center;
margin-bottom: 60px;
}
@media (max-width: 575.98px) {
&__footer--left {
margin-top: 120px;
}
}
&__footer__sp {
padding: 0 100px 0 34px;
}
@media (max-width: 575.98px) {
&__footer__sp {
padding: 0;
margin-left: 10px;
}
}
&__footer--left > div > span {
color: #18586e;
font-family: "GT Eesti Pro Display";
font-size: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
}
@media (max-width: 575.98px) {
&__footer--left > div > span {
font-size: 1.2em;
}
}
&__footer-icon {
text-align: end;
}
&__footer-icon > img {
margin-left: 20px;
}
@media (max-width: 575.98px) {
&__footer-icon > img {
margin-left: 10px;
}
}
&__footer--right {
display: flex;
flex-direction: column;
align-items: left;
}
@media (max-width: 575.98px) {
&__footer--right {
margin-bottom: 20px;
}
}
&__phone {
color: #003b65;
font-family: "CeraPro";
font-size: 2.1em;
letter-spacing: normal;
line-height: 25px;
text-align: left;
}
&__working-hours {
color: #003b65;
font-family: "CeraPro";
font-size: 1.2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: normal;
margin-left: 24px;
}
&__auth-link {
display: block;
}
&__auth-link a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
@media (max-width: 766px) {
&__form-buttons {
flex-direction: column;
}
&__form-btn {
margin: 0;
margin-bottom: 1.5rem;
}
}
}
.change-mode {
@ -102,242 +331,3 @@
}
}
}
@media (max-width: 575.98px) {
.auth-partners__info {
max-width: 380px;
}
}
@media (max-width: 375.98px) {
.auth-partners__info {
max-width: 340px;
}
}
.auth-partners__info-box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
.auth-partners__info-box {
flex-direction: column;
justify-content: center;
}
}
.auth-partners__info-box > img {
width: 165px;
height: 165px;
margin-left: -84px;
margin-right: 30px;
}
@media (max-width: 575.98px) {
.auth-partners__info-box > img {
margin-left: 0px;
margin-right: 0px;
}
}
.auth-partners__info-box > h3 {
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
@media (max-width: 575.98px) {
.auth-partners__info-box > h3 {
margin-top: 20px;
}
}
.auth-partners__info-container {
display: flex;
position: relative;
}
.auth-partners__info-img {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 28px;
margin-left: -40px;
}
.auth-partners__info-img > div > img {
margin-bottom: 100px;
}
.auth-partners__specialists {
font-family: "GT Eesti Pro Display";
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 26.12px;
text-align: left;
transform: rotate(-90deg);
text-transform: uppercase;
}
/* .specialists {
margin-left: 26px;
} */
.auth-partners__info-list {
list-style: none;
margin-top: 110px;
position: absolute;
right: -70px;
}
@media (max-width: 575.98px) {
.auth-partners__info-list {
left: 34px;
}
}
.auth-partners__info-item {
color: #1f1f1f;
font-family: "GT Eesti Pro Display";
font-size: 4em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 56.95px;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
}
@media (max-width: 575.98px) {
.auth-partners__info-item {
font-size: 2.6em;
}
}
.auth-partners__img-text {
position: absolute;
right: -68px;
bottom: -84px;
}
@media (max-width: 575.98px) {
.auth-partners__img-text {
right: 0px;
bottom: -40px;
}
}
.auth-partners__footer--left {
display: flex;
align-items: center;
margin-bottom: 60px;
}
@media (max-width: 575.98px) {
.auth-partners__footer--left {
margin-top: 120px;
}
}
.auth-partners__footer__sp {
padding: 0 100px 0 34px;
}
@media (max-width: 575.98px) {
.auth-partners__footer__sp {
padding: 0;
margin-left: 10px;
}
}
.auth-partners__footer--left > div > span {
color: #18586e;
font-family: "GT Eesti Pro Display";
font-size: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
}
@media (max-width: 575.98px) {
.auth-partners__footer--left > div > span {
font-size: 1.2em;
}
}
.auth-partners__footer-icon {
text-align: end;
}
.auth-partners__footer-icon > img {
margin-left: 20px;
}
@media (max-width: 575.98px) {
.auth-partners__footer-icon > img {
margin-left: 10px;
}
}
.auth-partners__footer--right {
display: flex;
flex-direction: column;
align-items: left;
}
@media (max-width: 575.98px) {
.auth-partners__footer--right {
margin-bottom: 20px;
}
}
.auth-partners__phone {
color: #003b65;
font-family: "CeraPro";
font-size: 2.1em;
letter-spacing: normal;
line-height: 25px;
text-align: left;
}
.auth-partners__working-hours {
color: #003b65;
font-family: "CeraPro";
font-size: 1.2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: normal;
margin-left: 24px;
}
.auth-partners__auth-link {
display: block;
}
.auth-partners__auth-link a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
@media (max-width: 766px) {
.auth-partners__form-buttons {
flex-direction: column;
}
.auth-partners__form-btn {
margin: 0;
margin-bottom: 1.5rem;
}
}

4
src/pages/SingleReportPage/singleReportPage.scss
View File

@ -1,11 +1,13 @@
.single-report-page {
padding: 4.6rem 20px 0;
font-family: 'GT Eesti Pro Display', sans-serif;
font-family: "GT Eesti Pro Display", sans-serif;
&__back {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
&-text {
margin-left: 3.1rem;
color: #000000;