fixed auth form styles

lizaklimova · Jan 25, 2024 · d73c4e9 · d73c4e9
1 parent 650a51a
commit d73c4e9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 30 deletions.
diff --git 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
@@ -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>
   );
 };