From cc2b0f144a569a083e3372c564f42d2b00ce1b26 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Tue, 14 Mar 2023 18:49:45 +0300 Subject: [PATCH] Fixed styles --- src/components/AuthBox/AuthBox.js | 14 +- .../AuthForDevelopers/AuthForDevelopers.js | 6 +- .../AuthForDevelopers/authForDevelopers.scss | 383 ++++++------ src/pages/AuthForPartners/AuthForPartners.js | 6 +- .../AuthForPartners/authForPartners.scss | 550 +++++++++--------- .../SingleReportPage/singleReportPage.scss | 4 +- 6 files changed, 472 insertions(+), 491 deletions(-) diff --git a/src/components/AuthBox/AuthBox.js b/src/components/AuthBox/AuthBox.js index 89501c22..b91ad6b4 100644 --- a/src/components/AuthBox/AuthBox.js +++ b/src/components/AuthBox/AuthBox.js @@ -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 ? : "Войти"} - - - + {/* TODO: при клике отправлять на форму/модалку/страницу регистрации */} + diff --git a/src/pages/AuthForDevelopers/AuthForDevelopers.js b/src/pages/AuthForDevelopers/AuthForDevelopers.js index 92cd06a7..09938d83 100644 --- a/src/pages/AuthForDevelopers/AuthForDevelopers.js +++ b/src/pages/AuthForDevelopers/AuthForDevelopers.js @@ -63,11 +63,7 @@ const AuthForDevelopers = () => {
- +
diff --git a/src/pages/AuthForDevelopers/authForDevelopers.scss b/src/pages/AuthForDevelopers/authForDevelopers.scss index 4d562953..5cf8aa60 100644 --- a/src/pages/AuthForDevelopers/authForDevelopers.scss +++ b/src/pages/AuthForDevelopers/authForDevelopers.scss @@ -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; - } -} diff --git a/src/pages/AuthForPartners/AuthForPartners.js b/src/pages/AuthForPartners/AuthForPartners.js index d8688650..aeabb704 100644 --- a/src/pages/AuthForPartners/AuthForPartners.js +++ b/src/pages/AuthForPartners/AuthForPartners.js @@ -59,11 +59,7 @@ const AuthForPartners = () => {
- +
diff --git a/src/pages/AuthForPartners/authForPartners.scss b/src/pages/AuthForPartners/authForPartners.scss index 1421964d..a34b5bf7 100644 --- a/src/pages/AuthForPartners/authForPartners.scss +++ b/src/pages/AuthForPartners/authForPartners.scss @@ -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; - } -} diff --git a/src/pages/SingleReportPage/singleReportPage.scss b/src/pages/SingleReportPage/singleReportPage.scss index 95569280..7cfe673b 100644 --- a/src/pages/SingleReportPage/singleReportPage.scss +++ b/src/pages/SingleReportPage/singleReportPage.scss @@ -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;