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 (
Don't have a accout? Sign Up