Improved UI of login page (#674)

* Added dark mode in sidebar

* improved UI of login page

* code formatting

---------

Co-authored-by: Narayan soni <narayansoni854@gmail.com>

src/pages/Login/index.css

@@ -23,9 +23,11 @@
   padding-bottom: 0rem;
 }
 .greetings h3 {
+  color: var(--color);
   font-size: 2rem;
 }
 .greetings p {
+  color: var(--color);
   font-size: 1.2rem;
   padding-top: 0.1rem;
 }
@@ -44,6 +46,7 @@
 .input__group label {
   font-size: 1.2rem;
   font-weight: 600;
+  color: var(--color);
 }
 .input__group input {
   padding: 0.6rem 0.9rem;
@@ -69,6 +72,10 @@
 .other__login__method {
   width: 100%;
 }
+.other__login__method .or-text {
+  color: var(--color);
+  padding: 5px 9px;
+}
 .option__divider {
   margin: 0 auto;
   justify-content: center;
@@ -96,6 +103,7 @@
   outline: none;
   cursor: pointer;
   margin: auto;
+  margin-left: 7px;
 }
 .pass__input__container input {
   border: none;
@@ -112,22 +120,39 @@
 .other__login {
   background-color: white;
   white-space: nowrap;
-  border: 1px solid rgba(104, 85, 224, 1);
-  color: black;
+  border: none;
+  cursor: pointer;
+  color: #fff;
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
-  gap: 3px;
+  gap: 10px;
   justify-content: center;
   padding: 0.4rem 0.7rem;
   font-size: 1.1rem;
   border-radius: 0.5rem;
   letter-spacing: 1px;
+  transition: all 0.3s ease;
 }
-.other__login:hover {
-  background-color: rgba(104, 85, 224, 1);
-  border: 1px solid white;
-  color: white;
+.other__login img {
+  width: 1.5rem;
+}
+
+.google__fb--login .google {
+  background-color: #db4437;
+  border: 1px solid #db4437;
+}
+.google__fb--login .facebook {
+  background-color: #3b5998;
+  border: 1px solid #3b5998;
+}
+.google__fb--login .google:hover {
+  background-color: transparent;
+  color: #db4437;
+}
+.google__fb--login .facebook:hover {
+  background-color: transparent;
+  color: #3b5998;
 }
 .no__acct {
   width: 100%;
@@ -143,13 +168,16 @@
   text-align: center;
   width: 100%;
 }
-.login__right img {
+
+.login__right {
+  background-image: url("../../assets/login-right.webp");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
   width: 100%;
   height: 100%;
 }
-.other__login img {
-  width: 1.5rem;
-}
+
 /* forgot password */
 
 .forgot-pasword {

src/pages/Login/index.jsx

@@ -3,13 +3,13 @@ import "./index.css";
 import React, { useState } from "react";
 import { RiEyeCloseFill, RiEyeFill } from "react-icons/ri";
 import { auth, db, facebookProvider, googleProvider } from "../../lib/firebase";
+import { faFacebookF, faGoogle } from "@fortawesome/free-brands-svg-icons";
 import { playErrorSound, playSuccessSound } from "../../js/sounds";
 
 import Facebook from "../../assets/facebook.svg";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Google from "../../assets/goggle.svg";
 import { faRightToBracket } from "@fortawesome/free-solid-svg-icons";
-import loginRight from "../../assets/login-right.webp";
 import logo from "../../assets/logo.webp";
 import { useNavigate } from "react-router-dom";
 import { useSnackbar } from "notistack";
@@ -237,24 +237,28 @@ const LoginScreen = () => {
             <div className="other__login__method">
               <div className="or option__divider">
                 <div className="line" />
-                <div style={{ padding: "5px 9px" }}>or</div>
+                <div className="or-text">or</div>
                 <div className="line" />
               </div>
               <div className="google__fb--login">
                 <button
-                  className="other__login"
+                  className="other__login google"
                   type="submit"
                   onClick={signInWithGoogle}
                 >
-                  <img src={Google} alt="Google Signin" /> Sign in with Google
+                  <FontAwesomeIcon icon={faGoogle} className="google-icon" />{" "}
+                  Sign in with Google
                 </button>
                 <button
-                  className="other__login"
+                  className="other__login facebook"
                   type="submit"
                   onClick={signInWithFacebook}
                 >
-                  <img src={Facebook} alt="Facebook Signin" /> Sign in with
-                  Facebook
+                  <FontAwesomeIcon
+                    icon={faFacebookF}
+                    className="facebook-icon"
+                  />{" "}
+                  Sign in with Facebook
                 </button>
               </div>
             </div>
@@ -276,7 +280,7 @@ const LoginScreen = () => {
         </form>
       </div>
       <div className="login__right">
-        <img src={loginRight} alt="website image" />
+        {/* <img src={loginRight} alt="website image" /> */}
       </div>
     </section>
   );