From 5b9ccfbb2e6918a494e3285d33868459a64a11b7 Mon Sep 17 00:00:00 2001 From: Victor Date: Wed, 1 Jun 2022 19:59:54 +0300 Subject: [PATCH] mobile version fix --- src/App.js | 21 +-------- src/components/Auth/AuthForDevelopers.js | 16 +++---- src/components/Auth/AuthForPartners.js | 6 ++- src/components/Auth/authForDevelopers.scss | 3 +- src/components/Auth/authForPartners.scss | 3 +- src/components/AuthBox/AuthBox.js | 10 +++-- src/components/AuthBox/authBox.scss | 50 +++++++++++++++++++--- src/components/Footer/Footer.js | 5 ++- 8 files changed, 74 insertions(+), 40 deletions(-) diff --git a/src/App.js b/src/App.js index c91f48fc..16fa012c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,9 @@ import React from 'react' import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' -// import { useSelector } from 'react-redux' -// import { selectAuth } from './redux/outstaffingSlice' import 'bootstrap/dist/css/bootstrap.min.css' import './fonts/stylesheet.css' -import { ProtectedRoute } from './components/ProtectedRoute/ProtectedRoute' -// import { YMInitializer } from 'react-yandex-metrika' +import { ProtectedRoute } from './components/ProtectedRoute/ProtectedRoute' import AuthPageForDevelopers from './pages/AuthPageForDevelopers' import AuthPageForPartners from './pages/AuthPageForPartners' @@ -16,16 +13,13 @@ import CalendarPage from './pages/CalendarPage' import ReportPage from './pages/ReportFormPage.js' import FormPage from './pages/FormPage.js' import SingleReportPage from './pages/SingleReportPage' -// import { Highlighter } from './pages/CodeSnippetPage' import { QuizPage } from './pages/quiz/QuizPage' import { InterjacentPage } from './pages/quiz/InterjacentPage' import { QuizTestPage } from './pages/quiz/QuizTestPage' -// import { Instruction } from './components/features/quiz/Instructions' import { InstructionPage } from './pages/quiz/InstructionPage' import { ResultPage } from './pages/quiz/ResultPage' -const App = (props) => { - // const isAuth = useSelector(selectAuth) +const App = () => { return ( <>

IT Аутстаффинг в России

@@ -65,17 +59,6 @@ const App = (props) => {
Page not found
} /> - - {/* */} ) } diff --git a/src/components/Auth/AuthForDevelopers.js b/src/components/Auth/AuthForDevelopers.js index 6211fd62..b6d50a69 100644 --- a/src/components/Auth/AuthForDevelopers.js +++ b/src/components/Auth/AuthForDevelopers.js @@ -1,20 +1,16 @@ -import React, { useState } from 'react' +import React from 'react' import { AuthBox } from '../AuthBox/AuthBox' -import { useDispatch, useSelector } from 'react-redux' -import { auth } from '../../redux/outstaffingSlice' -import { loading } from '../../redux/loaderSlice' -import ellipse from '../../images/ellipse.png' +import { useSelector } from 'react-redux' import arrow from '../../images/arrow__login_page.png' import authImg from '../../images/auth_img.png' import cross from '../../images/cross.png' import text from '../../images/Body_Text.png' import vector from '../../images/Vector_Smart_Object.png' -import vectorBlack from '../../images/Vector_Smart_Object_black.png' import { selectAuth } from '../../redux/outstaffingSlice' -import { Redirect, Link } from 'react-router-dom' +import { Redirect } from 'react-router-dom' import { Footer } from '../Footer/Footer' import './authForDevelopers.scss' @@ -39,7 +35,11 @@ const AuthForDevelopers = () => {
- +
diff --git a/src/components/Auth/AuthForPartners.js b/src/components/Auth/AuthForPartners.js index 0f9c36ff..499de827 100644 --- a/src/components/Auth/AuthForPartners.js +++ b/src/components/Auth/AuthForPartners.js @@ -30,7 +30,11 @@ const AuthForPartners = () => {
- +
diff --git a/src/components/Auth/authForDevelopers.scss b/src/components/Auth/authForDevelopers.scss index 96205209..73861167 100644 --- a/src/components/Auth/authForDevelopers.scss +++ b/src/components/Auth/authForDevelopers.scss @@ -185,7 +185,8 @@ @media (max-width: 575.98px) { .auth-developers__img-text { - right: -10px; + right: 0px; + bottom: -40px; } } diff --git a/src/components/Auth/authForPartners.scss b/src/components/Auth/authForPartners.scss index d8301a19..930adfcd 100644 --- a/src/components/Auth/authForPartners.scss +++ b/src/components/Auth/authForPartners.scss @@ -180,7 +180,8 @@ @media (max-width: 575.98px) { .auth-partners__img-text { - right: -10px; + right: 0px; + bottom: -40px; } } diff --git a/src/components/AuthBox/AuthBox.js b/src/components/AuthBox/AuthBox.js index c8ca7bf6..9248425d 100644 --- a/src/components/AuthBox/AuthBox.js +++ b/src/components/AuthBox/AuthBox.js @@ -6,7 +6,6 @@ import { auth, setUserInfo } from '../../redux/outstaffingSlice' import { loading } from '../../redux/loaderSlice' import ellipse from '../../images/ellipse.png' - import { Loader } from '../Loader/Loader' import { fetchAuth } from '../../server/server' @@ -19,12 +18,15 @@ import { withSwalInstance } from 'sweetalert2-react' import swal from 'sweetalert2' const SweetAlert = withSwalInstance(swal) -export const AuthBox = ({ title, roleChangeLink }) => { +export const AuthBox = ({ title, altTitle, roleChangeLink }) => { const dispatch = useDispatch() + const isLoading = useSelector(selectIsLoading) + const [username, setUsername] = useState('') const [password, setPassword] = useState('') const [error, setError] = useState(null) + return (

@@ -93,8 +95,8 @@ export const AuthBox = ({ title, roleChangeLink }) => { {isLoading ? : 'Войти'} -

diff --git a/src/components/AuthBox/authBox.scss b/src/components/AuthBox/authBox.scss index f15ef553..7d13b90a 100644 --- a/src/components/AuthBox/authBox.scss +++ b/src/components/AuthBox/authBox.scss @@ -5,8 +5,7 @@ margin-bottom: 194px; &__header { - - font-family: "GT Eesti Pro Display"; + font-family: 'GT Eesti Pro Display'; font-size: 5.3em; font-weight: 700; font-style: normal; @@ -17,7 +16,7 @@ span { color: #52b709; - letter-spacing: .56px; + letter-spacing: 0.56px; line-height: normal; } } @@ -177,7 +176,47 @@ @media (max-width: 575.98px) { .auth-box { - margin-bottom: 44px; + margin-bottom: 0px; + + &__header { + margin-top: 50px; + line-height: 20px; + } + + &__title { + margin-top: 5px; + margin-bottom: 35px; + } + + &__form { + label { + margin-left: 20px; + margin-bottom: 10px; + font-size: 1.6em; + } + + input { + margin-bottom: 20px; + height: 45px; + border-radius: 22.5px; + padding-left: 22px; + } + + &-btn { + width: 200px; + height: 45px; + border-radius: 22.5px; + line-height: 0px; + + &--role { + width: 200px; + height: 45px; + border-radius: 22.5px; + line-height: 0px; + font-size: 1.6em; + } + } + } &__sign-in { text-align: center; @@ -188,8 +227,9 @@ margin: 0 auto; flex-direction: column; - &>* { + & > * { margin-bottom: 1.5rem; + margin-right: 0; } } } diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index 22badb41..d9c76b6a 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -1,4 +1,5 @@ import React from 'react' + import align from '../../images/align-left.png' import phone from '../../images/phone.png' import telegram from '../../images/telegram.png' @@ -40,7 +41,9 @@ export const Footer = () => {
-
2021 © Outstaffing
+
+ {new Date().getFullYear()} © Outstaffing +
)