Merge pull request #322 from itsaartii/issue/269

style/improve login page for issue269
Avdhesh-Varshney · Oct 28, 2024 · cbcf1bc · cbcf1bc
2 parents 8fe925e + 0130519
commit cbcf1bc
Showing 1 changed file with 43 additions and 19 deletions.
diff --git a/src/css/Auth.css b/src/css/Auth.css
@@ -2,17 +2,22 @@
   width: auto;
   max-width: 500px;
   border-radius: 0.75rem;
-  background-color: rgba(17, 24, 39, 1);
+  background-color: #DFDFB0; /* Updated background */
   padding: 2rem;
   color: rgba(243, 244, 246, 1);
   margin: auto;
 }
 
+path {
+  color: #000;
+}
+
 .title {
   text-align: center;
   font-size: 1.5rem;
   line-height: 2rem;
   font-weight: 700;
+  color: black;
 }
 
 .form {
@@ -27,22 +32,26 @@
 
 .input-group label {
   display: block;
-  color: rgba(156, 163, 175, 1);
+  color: black;
   margin-bottom: 4px;
 }
 
 .input-group input {
   width: 100%;
-  border-radius: 0.375rem;
-  border: 1px solid rgba(55, 65, 81, 1);
+  border-radius: 0.475rem;
+  border: 1px solid #ccc; /* Updated border */
   outline: 0;
-  background-color: rgba(17, 24, 39, 1);
+  background-color: #EDE8CA;
   padding: 0.75rem 1rem;
-  color: rgba(243, 244, 246, 1);
+  color: rgba(17, 24, 39, 1);
+}
+
+#email {
+  border-radius: 0.475rem;
 }
 
 .input-group input:focus {
-  border-color: rgba(167, 139, 250);
+  border-color: #000000;
 }
 
 .forgot {
@@ -56,28 +65,32 @@
 
 .forgot a,
 .signup a {
-  color: rgba(243, 244, 246, 1);
+  color: black;
   text-decoration: none;
   font-size: 14px;
 }
 
 .forgot a:hover,
 .signup a:hover {
-  text-decoration: underline rgba(167, 139, 250, 1);
+  text-decoration: underline #007bff; /* Updated hover color */
 }
 
 .sign {
   display: block;
   width: 100%;
-  background-color: rgba(167, 139, 250, 1);
+  background-color: #007bff; /* Updated button background */
   padding: 0.75rem;
   text-align: center;
-  color: rgba(17, 24, 39, 1);
+  color: #fff;
   border: none;
-  border-radius: 0.375rem;
+  border-radius: 0.475rem;
   font-weight: 600;
 }
 
+.sign:hover {
+  background-color: #0056b3; /* Updated button hover */
+}
+
 .social-message {
   display: flex;
   align-items: center;
@@ -95,7 +108,7 @@
   padding-right: 0.75rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: rgba(156, 163, 175, 1);
+  color: black;
 }
 
 .social-icons {
@@ -114,23 +127,24 @@
 .social-icons .icon svg {
   height: 1.25rem;
   width: 1.25rem;
-  fill: #fff;
+  fill: #000;
 }
 
 .signup {
   text-align: center;
   font-size: 0.75rem;
   line-height: 1rem;
-  color: rgba(156, 163, 175, 1);
+  color: #000;
 }
+
 .password-container {
   position: relative;
   width: 100%;
 }
 
 .password-container input {
   width: 100%;
-  padding-right: 40px; 
+  padding-right: 40px;
 }
 
 .password-toggle {
@@ -141,12 +155,22 @@
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 1.2em; 
-  color: rgba(243, 244, 246, 1); 
+  font-weight: 300px;
+  font-size: 1.2em;
+  color: rgba(17, 24, 39, 1); /* Updated toggle color */
   display: flex;
   align-items: center;
 }
 
 .password-toggle:focus {
   outline: none;
-}
+}
+#password::placeholder {
+  font-weight: 200px;
+  color: rgba(17, 24, 39, 1); /* Optional: Adjust the color if needed */
+}
+#email::placeholder {
+  font-weight: 200px;
+  color: rgba(17, 24, 39, 1); /* Optional: Adjust the color */
+}
+