mobile version fix

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'>
@@ -93,8 +95,8 @@ export const AuthBox = ({ title, roleChangeLink }) => {
             {isLoading ? <Loader /> : 'Войти'}
           </button>
 
-          <button className='auth-box__form-btn--role auth-box__auth-link' >
-            <Link to={roleChangeLink}>Для разработчиков</Link>
+          <button className='auth-box__form-btn--role auth-box__auth-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;
@@ -188,8 +227,9 @@
       margin: 0 auto;
       flex-direction: column;
 
-      &>* {
+      & > * {
         margin-bottom: 1.5rem;
+        margin-right: 0;
       }
     }
   }