From c0e53a9e0246f3326d871ec965442a208b7b355a Mon Sep 17 00:00:00 2001
From: Nataliia Hrushanyk <nataligrushanyk@gmail.com>
Date: Thu, 19 Oct 2023 12:04:28 +0300
Subject: [PATCH] Refactor login style

---
 src/styles/blocks/header.css |  7 ++++++
 src/styles/blocks/login.css  | 46 ++++++++++++++++++++++++++++--------
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/styles/blocks/header.css b/src/styles/blocks/header.css
index 4616e0b..69db70d 100644
--- a/src/styles/blocks/header.css
+++ b/src/styles/blocks/header.css
@@ -1,6 +1,9 @@
 .header-content {
   display: flex;
+  flex-direction: column;
   justify-content: space-around;
+  align-items: center;
+  gap: 20px;
   margin-bottom: 30px;
 }
 
@@ -12,6 +15,7 @@
 
 @media (576px <= width <= 1024px) {
   .header-content {
+    flex-direction: row;
     margin-bottom: 50px;
   }
 
@@ -24,7 +28,10 @@
 
 @media (width > 1024px) {
   .header-content {
+    flex-direction: row;
     margin-bottom: 100px;
+  justify-content: center;
+
   }
 
   .logo-img,
diff --git a/src/styles/blocks/login.css b/src/styles/blocks/login.css
index 33e4a3a..b1c3460 100644
--- a/src/styles/blocks/login.css
+++ b/src/styles/blocks/login.css
@@ -1,5 +1,6 @@
 .header-login {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   gap: 5px;
 }
@@ -8,12 +9,11 @@
 .login-email-error,
 .login-password-link {
   font-family: Arial, Helvetica, sans-serif;
-  font-size: 11px;
+  font-size: 9px;
   font-weight: 700;
   box-sizing: border-box;
-  width: 200px;
-  margin-left: 5px;
-  padding: 10px;
+  width: 150px;
+  padding: 5px;
   border: 1px solid #ccc;
   border-radius: 5px;
   color: #6e747c;
@@ -35,20 +35,35 @@
 .login-button {
   background-color: #2ba0ea;
   color: #fff;
-  padding: 10px 20px;
-  margin-left: 5px;
+  padding: 5px;
   border: none;
   border-radius: 5px;
-  font-size: 11px;
+  font-size: 9px;
+  font-weight: 700;
   cursor: pointer;
 }
 
+.login-form,
 .login-helper {
   display: flex;
   flex-direction: column;
+  gap: 5px
 }
 
 @media (576px <= width <= 1024px) {
+  .login-form,
+  .login-helper {
+    flex-direction: row;
+  }
+
+  .login-form {
+    margin-top: 30px;
+  }
+
+  .login-helper {
+    width: 100%;
+  }
+
   .login-input,
   .login-email-error,
   .login-password-link {
@@ -59,10 +74,12 @@
   }
 
   .login-button {
-    padding: 10px 20px;
+    padding: 10px;
     margin-left: 5px;
     font-size: 10px;
   }
+
+
 }
 
 @media (width > 1024px) {
@@ -80,8 +97,17 @@
     margin-left: 5px;
     font-size: 11px;
   }
-
+  
+  .login-form,
   .login-helper {
     flex-direction: row;
   }
+
+  .login-form {
+    margin-top: 30px;
+  }
+
+  .login-helper {
+    width: 100%;
+  }
 }
\ No newline at end of file