From d73c4e96222b6096733a6ef7122dab70c806e9d5 Mon Sep 17 00:00:00 2001
From: lizaklimova <132839549+lizaklimova@users.noreply.github.com>
Date: Thu, 25 Jan 2024 11:39:10 +0200
Subject: [PATCH] fixed auth form styles

---
 .../Registration/AuthPage/AuthPage.styled.tsx | 41 ++++++++-----------
 .../Registration/AuthPage/AuthPage.tsx        |  9 +---
 2 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/src/components/Registration/AuthPage/AuthPage.styled.tsx b/src/components/Registration/AuthPage/AuthPage.styled.tsx
index 4af05ac..20d7c36 100644
--- a/src/components/Registration/AuthPage/AuthPage.styled.tsx
+++ b/src/components/Registration/AuthPage/AuthPage.styled.tsx
@@ -6,8 +6,17 @@ export const AuthPgContainer = styled.div`
   position: absolute;
   z-index: -1;
   width: 100vw;
-  height: 100vh;
-  background-color: var(--light);
+  min-height: 100vh;
+  padding: 15px 0;
+  background: var(--light) url(${bgElemMob}) no-repeat center 300px / cover;
+
+  @media screen and (min-width: 768px) {
+    background-image: url(${bgElemTab});
+  }
+
+  @media screen and (min-width: 1440px) {
+    background-image: url(${bgElemDesk});
+  }
 `;
 
 export const AuthPicFormWrap = styled.div`
@@ -21,7 +30,14 @@ export const AuthPicFormWrap = styled.div`
   justify-content: center;
   width: 100%;
 
+  @media screen and (min-width: 768px) {
+    position: static;
+    transform: unset;
+  }
+
   @media screen and (min-width: 1440px) {
+    position: absolute;
+    transform: translate(-50%, -50%);
     flex-direction: row;
     align-items: start;
     gap: 115px;
@@ -51,27 +67,6 @@ export const AuthPicWrap = styled.picture`
   }
 `;
 
-export const AuthPgDecorElem = styled.div`
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 100vw;
-  height: 63%;
-  background-image: url(${bgElemMob});
-  background-repeat: no-repeat;
-  background-size: cover;
-
-  @media screen and (min-width: 768px) {
-    background-image: url(${bgElemTab});
-    height: 606px;
-  }
-
-  @media screen and (min-width: 1440px) {
-    background-image: url(${bgElemDesk});
-    height: 325px;
-  }
-`;
-
 export const AuthFormLinkWrap = styled.div`
   width: 100%;
   display: flex;
diff --git a/src/components/Registration/AuthPage/AuthPage.tsx b/src/components/Registration/AuthPage/AuthPage.tsx
index 6ea92df..77e24ae 100644
--- a/src/components/Registration/AuthPage/AuthPage.tsx
+++ b/src/components/Registration/AuthPage/AuthPage.tsx
@@ -11,18 +11,13 @@ import {
   AuthPgContainer,
   AuthPicFormWrap,
   AuthPicWrap,
-  AuthPgDecorElem,
   AuthFormLinkWrap,
 } from './AuthPage.styled';
 import { AuthPageProps } from './authPageType';
 
 const AuthPage: FC<AuthPageProps> = ({ children }) => {
   return (
-    <>
-      <AuthPgContainer>
-        <AuthPgDecorElem />
-      </AuthPgContainer>
-
+    <AuthPgContainer>
       <AuthPicFormWrap>
         <AuthPicWrap>
           <source
@@ -42,7 +37,7 @@ const AuthPage: FC<AuthPageProps> = ({ children }) => {
 
         <AuthFormLinkWrap>{children}</AuthFormLinkWrap>
       </AuthPicFormWrap>
-    </>
+    </AuthPgContainer>
   );
 };