From 0bfc539f93c60668f83709813acf80364100bdea Mon Sep 17 00:00:00 2001 From: Dipa-44 Date: Sat, 6 Jan 2024 23:32:19 +0530 Subject: [PATCH] updated and redesigned sign in section --- package.json | 4 +++ src/components/Login/Login.css | 64 +++++++++++++++++++++++++++++++++- src/components/Login/Login.js | 48 ++++++++++++++++++------- yarn.lock | 31 ++++++++++++++++ 4 files changed, 134 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 2c442bb..5304a05 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.1", + "@fortawesome/free-brands-svg-icons": "^6.5.1", + "@fortawesome/react-fontawesome": "^0.2.0", "@material-ui/core": "^4.12.3", "@testing-library/dom": "^7.21.4", "@testing-library/jest-dom": "^5.11.4", @@ -11,6 +14,7 @@ "firebase": "^9.23.0", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-icons": "^4.12.0", "react-router-dom": "^6.14.0", "react-scripts": "4.0.3", "typescript": "^5.1.3", diff --git a/src/components/Login/Login.css b/src/components/Login/Login.css index bd4707a..d7a84b0 100644 --- a/src/components/Login/Login.css +++ b/src/components/Login/Login.css @@ -1,9 +1,27 @@ + .login-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; + margin: auto; + + } +.login-container h2{ + font-size: 40px; +} + + .login-form h2{ + font-family:"Brush Script MT",cursive; + font-size: 48px; + margin-bottom: 50px; + + } + + .login-box{ + margin-top: 30px; + } .login-form { @@ -15,17 +33,27 @@ border: 1px solid #ccc; border-radius: 8px; background-color: #fff; + height: 52vh; + width: 28vw; + } + + .login-form label { font-weight: bold; + width: 100%; + } .login-form input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; + width: 19vw; + } + .login-form button { padding: 0.5rem 1rem; @@ -35,7 +63,29 @@ color: #fff; font-weight: bold; cursor: pointer; + width: 19vw; } +.line { + display: flex; + margin-top: 6px; +} +.arrow { + background-color: gray; + height: 1px; + width: 8.6vw; +} +.content { + color: gray; + margin-top: -7px; + margin-left: 4px; + margin-right: 4px; +} +.login-form .google__icon { + margin-top: 12px; + margin-bottom: 15px; + margin-right: 15px; +} + .login-form button:hover { background-color: #1c3aa9; @@ -46,4 +96,16 @@ font-size: 0.8rem; margin-top: 0.5rem; } - \ No newline at end of file + .sign-up { + margin-top: 30px; + border: 1px solid rgb(195, 195, 195); + padding: 20px; + width: 28vw; + text-align: center; + border-radius: 8px; +} + +.sign-up span { + color: rgb(0, 66, 128); + font-weight: 400; +} \ No newline at end of file diff --git a/src/components/Login/Login.js b/src/components/Login/Login.js index 2d43693..f2776ac 100644 --- a/src/components/Login/Login.js +++ b/src/components/Login/Login.js @@ -1,5 +1,9 @@ import React, { useState } from "react"; import { auth, firebase } from "../../firebase/FirebaseInit"; +// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +// import { faGoogle } from '@fortawesome/free-brands-svg-icons'; +import { FaGoogle } from "react-icons/fa"; + import './Login.css'; function Login() { @@ -61,34 +65,52 @@ function Login() { return (

Login Page

+
+
{/* Email login */} -
+ {/* Phone number login */} -
+ {/* setPhoneNumber(e.target.value)} /> -
+ */} +
+

Don't have a accout? Sign Up

); } diff --git a/yarn.lock b/yarn.lock index 653304d..bdf72e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1590,6 +1590,32 @@ resolved "https://registry.yarnpkg.com/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.10.1.tgz#60bb2aaf129f9e00621f8d698722ddba6ee1f8ac" integrity sha512-Dq5rYfEpdeel0bLVN+nfD1VWmzCkK+pJbSjIawGE+RY4+NIJqhbUDDQjvV0NUK84fMfwxvtFoCtEe70HfZjFcw== +"@fortawesome/fontawesome-common-types@6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz#fdb1ec4952b689f5f7aa0bffe46180bb35490032" + integrity sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A== + +"@fortawesome/fontawesome-svg-core@^6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz#9d56d46bddad78a7ebb2043a97957039fcebcf0a" + integrity sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ== + dependencies: + "@fortawesome/fontawesome-common-types" "6.5.1" + +"@fortawesome/free-brands-svg-icons@^6.5.1": + version "6.5.1" + resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.1.tgz#e948cc02404277cb8ad40fe3573ca75f2830e876" + integrity sha512-093l7DAkx0aEtBq66Sf19MgoZewv1zeY9/4C7vSKPO4qMwEsW/2VYTUTpBtLwfb9T2R73tXaRDPmE4UqLCYHfg== + dependencies: + "@fortawesome/fontawesome-common-types" "6.5.1" + +"@fortawesome/react-fontawesome@^0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4" + integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw== + dependencies: + prop-types "^15.8.1" + "@gar/promisify@^1.0.1": version "1.1.3" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" @@ -10249,6 +10275,11 @@ react-error-overlay@^6.0.9: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== +react-icons@^4.12.0: + version "4.12.0" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78" + integrity sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw== + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"