mobile version fix

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 (
     <>
       <h1>IT Аутстаффинг в России</h1>
@@ -65,17 +59,6 @@ const App = (props) => {
           <ProtectedRoute component={() => <div>Page not found</div>} />
         </Switch>
       </Router>
-
-      {/* <YMInitializer 
-      accounts={[84188125]} 
-      options={{
-        clickmap:true,
-        trackLinks:true,
-        accurateTrackBounce:true,
-        webvisor:true
-        }} 
-      version="2" 
-    /> */}
     </>
   )
 }

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 = () => {
           <div className='row'>
             <div className='col-12 col-xl-6'>
               <div className='auth-developers__box'>
-                <AuthBox title='Для разработчиков' roleChangeLink='/auth' />
+                <AuthBox
+                  title='Для разработчиков'
+                  altTitle='Для партнёров'
+                  roleChangeLink='/auth'
+                />
               </div>
             </div>
             <div className='col-xl-2'>

src/components/Auth/AuthForPartners.js

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

src/components/Auth/authForDevelopers.scss

@@ -185,7 +185,8 @@
 
 @media (max-width: 575.98px) {
   .auth-developers__img-text {
-    right: -10px;
+    right: 0px;
+    bottom: -40px;
   }
 }
 

src/components/Auth/authForPartners.scss

@@ -180,7 +180,8 @@
 
 @media (max-width: 575.98px) {
   .auth-partners__img-text {
-    right: -10px;
+    right: 0px;
+    bottom: -40px;
   }
 }
 

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 (
     <div className='auth-box'>
       <h2 className='auth-box__header'>
@@ -94,7 +96,7 @@ export const AuthBox = ({ title, roleChangeLink }) => {
           </button>
 
           <button className='auth-box__form-btn--role auth-box__auth-link'>
-            <Link to={roleChangeLink}>Для разработчиков</Link>
+            <Link to={roleChangeLink}>{altTitle}</Link>
           </button>
         </div>
       </form>

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;
@@ -190,6 +229,7 @@
 
       & > * {
         margin-bottom: 1.5rem;
+        margin-right: 0;
       }
     }
   }

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 = () => {
             </div>
           </div>
         </div>
-        <div className='footer__copyright'>2021 © Outstaffing</div>
+        <div className='footer__copyright'>
+          {new Date().getFullYear()} © Outstaffing
+        </div>
       </footer>
     </div>
   )