From f2082f13b4a5638c36050d918e8b1a8b3916aa54 Mon Sep 17 00:00:00 2001
From: lizaklimova <132839549+lizaklimova@users.noreply.github.com>
Date: Fri, 26 Jan 2024 16:21:03 +0200
Subject: [PATCH] bugfix

---
 .../InputField/InputField.styled.tsx          |  4 +--
 .../RegisterForm/RegisterForm.styled.tsx      |  5 ++--
 src/components/Welcome/Welcome.styled.tsx     | 29 +++++++++++++++++--
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/components/Registration/InputField/InputField.styled.tsx b/src/components/Registration/InputField/InputField.styled.tsx
index 10b4f82..fc97cc5 100644
--- 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
index 213a382..03b7bba 100644
--- 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
index 94f9f0a..faac19c 100644
--- 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;