Merge pull request #16 from lizaklimova/main-page

bugfix
lizaklimova · Jan 26, 2024 · 6a09872 · 6a09872
2 parents 2df566d + f2082f1
commit 6a09872
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/src/components/Registration/InputField/InputField.styled.tsx b/src/components/Registration/InputField/InputField.styled.tsx
@@ -87,7 +87,7 @@ export const AuthInputField = styled.input`
 
 export const AuthInputIcon = styled.svg`
   position: absolute;
-  top: 23px;
+  top: 45%;
   left: 14px;
   transform: translateY(-55%);
   transition: opacity var(--easedTransition);
@@ -96,7 +96,7 @@ export const AuthInputIcon = styled.svg`
   opacity: 0.8;
 
   @media screen and (min-width: 768px) {
-    top: 29px;
+    top: 45%;
     width: 24px;
     height: 24px;
   }

diff --git a/src/components/Registration/RegisterForm/RegisterForm.styled.tsx b/src/components/Registration/RegisterForm/RegisterForm.styled.tsx
@@ -69,19 +69,20 @@ export const AuthFormBtn = styled.button`
   font-size: 16px;
   line-height: 1.13;
   width: 100%;
+  border: 1px solid var(--lightDark);
   border-radius: 6px;
   padding: 14px;
   margin-top: 16px;
   background-color: var(--accentGreen);
   color: var(--light);
   transition: color var(--easedTransition),
-    background-color var(--easedTransition), outline var(--easedTransition);
+    background-color var(--easedTransition), border var(--easedTransition);
 
   &:hover,
   &:focus {
     color: var(--accentGreen);
     background-color: transparent;
-    outline: 1px solid var(--accentGreen);
+    border: 1px solid var(--accentGreen);
   }
 
   @media screen and (min-width: 768px) {

diff --git a/src/components/Welcome/Welcome.styled.tsx b/src/components/Welcome/Welcome.styled.tsx
@@ -27,6 +27,7 @@ export const MainTextWrap = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  text-align: center;
 `;
 
 export const MainLogo = styled.svg`
@@ -78,9 +79,15 @@ export const MainText = styled.p`
 
 export const MainBtnWrap = styled.div`
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
+
+  @media screen and (min-width: 375px) {
+    flex-direction: row;
+    gap: 10px;
+  }
 
   @media screen and (min-width: 768px) {
     gap: 18px;
@@ -90,7 +97,7 @@ export const MainBtnWrap = styled.div`
 export const MainRegisterBtn = styled.button`
   border: 2px solid var(--accentGreen);
   border-radius: 25px 60px;
-  padding: 15px 24px;
+  padding: 15px;
   color: var(--light);
   background-color: var(--accentGreen);
   transition: border-color var(--easedTransition), color var(--easedTransition),
@@ -103,6 +110,14 @@ export const MainRegisterBtn = styled.button`
     background-color: transparent;
   }
 
+  @media screen and (min-width: 375px) {
+    padding: 10px;
+  }
+
+  @media screen and (min-width: 500px) {
+    padding: 15px 24px;
+  }
+
   @media screen and (min-width: 768px) {
     font-size: 16px;
     padding: 22px 44px;
@@ -112,7 +127,7 @@ export const MainRegisterBtn = styled.button`
 export const MainLoginBtn = styled.button`
   border: 2px solid var(--light);
   border-radius: 25px 60px;
-  padding: 15px 24px;
+  padding: 15px 35px;
   color: var(--light);
   background-color: transparent;
   transition: border-color var(--easedTransition), color var(--easedTransition);
@@ -123,6 +138,14 @@ export const MainLoginBtn = styled.button`
     color: var(--accentGreen);
   }
 
+  @media screen and (min-width: 375px) {
+    padding: 10px;
+  }
+
+  @media screen and (min-width: 500px) {
+    padding: 15px 24px;
+  }
+
   @media screen and (min-width: 768px) {
     font-size: 16px;
     padding: 22px 44px;