Refactor login style

NataliGru · Oct 19, 2023 · c0e53a9 · c0e53a9
1 parent 00b124e
commit c0e53a9
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 10 deletions.
diff --git 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
@@ -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%;
+  }
 }