From dd76e68b32d1b684b793dadb52c48524efafa432 Mon Sep 17 00:00:00 2001 From: tanish35 Date: Sun, 27 Oct 2024 12:51:04 +0530 Subject: [PATCH] Change loader and login page --- frontend/src/components/EditDetails.jsx | 3 +- frontend/src/components/Login.jsx | 114 ++++++++---------- frontend/src/components/Posts.jsx | 2 +- frontend/src/components/SinglePost.jsx | 2 +- .../src/components/chatroomui/joinRoom1.jsx | 2 +- frontend/src/components/chatroomui/main.jsx | 2 +- frontend/src/styles/loader.css | 93 ++++++++++++++ frontend/src/styles/login.css | 102 ++++++++++++++++ 8 files changed, 249 insertions(+), 71 deletions(-) create mode 100644 frontend/src/styles/loader.css create mode 100644 frontend/src/styles/login.css diff --git a/frontend/src/components/EditDetails.jsx b/frontend/src/components/EditDetails.jsx index 1d90130..46b7762 100644 --- a/frontend/src/components/EditDetails.jsx +++ b/frontend/src/components/EditDetails.jsx @@ -16,6 +16,7 @@ import axios from "axios"; import { useNavigate } from "react-router-dom"; import { useUser } from "../hook/useUser"; import { InfinitySpin } from "react-loader-spinner"; +import "../styles/loader.css"; const EditDetailsSchema = z.object({ username: z @@ -135,7 +136,7 @@ const EditDetails = () => { if (loadingUser) { return ( - +
); } diff --git a/frontend/src/components/Login.jsx b/frontend/src/components/Login.jsx index 3cd8d30..30c0168 100644 --- a/frontend/src/components/Login.jsx +++ b/frontend/src/components/Login.jsx @@ -19,6 +19,8 @@ import { auth, googleProvider, githubProvider } from "../firebase.js"; import { signInWithPopup } from "firebase/auth"; import { InfinitySpin } from "react-loader-spinner"; import { set } from "zod"; +import "../styles/login.css"; +import "../styles/loader.css" const LoginPage = () => { const [email, setEmail] = useState(""); @@ -143,7 +145,7 @@ const LoginPage = () => { if (loading) { return ( - +
); } @@ -189,73 +191,53 @@ const LoginPage = () => { return ( - - - - Login - - - Email address - setEmail(e.target.value)} - required - bg="gray.700" - color="white" - /> - - - Password - setPassword(e.target.value)} - required - bg="gray.700" - color="white" - /> - - - Forgot Password? - - - - + {loading ? ( + +
+ + ) : ( +
+

+ Welcome,sign in to continue +

+ + +
+
+ OR +
+
+ setEmail(e.target.value)} + className="input" + /> + setPassword(e.target.value)} + className="input" + /> + + + Forgot Password? + +
+ )} ); }; + export default LoginPage; diff --git a/frontend/src/components/Posts.jsx b/frontend/src/components/Posts.jsx index ab30090..0d503cf 100644 --- a/frontend/src/components/Posts.jsx +++ b/frontend/src/components/Posts.jsx @@ -149,7 +149,7 @@ const Posts = () => { if (loading || loadingUser) { return ( - +
); } diff --git a/frontend/src/components/SinglePost.jsx b/frontend/src/components/SinglePost.jsx index 888e295..efa9b7a 100644 --- a/frontend/src/components/SinglePost.jsx +++ b/frontend/src/components/SinglePost.jsx @@ -79,7 +79,7 @@ const SinglePost = () => { if (loadingUser) { return (
- +
); } diff --git a/frontend/src/components/chatroomui/joinRoom1.jsx b/frontend/src/components/chatroomui/joinRoom1.jsx index 1d71d17..52930d4 100644 --- a/frontend/src/components/chatroomui/joinRoom1.jsx +++ b/frontend/src/components/chatroomui/joinRoom1.jsx @@ -50,7 +50,7 @@ const JoinRoom1 = () => { if (loadingUser) { return ( - +
); } diff --git a/frontend/src/components/chatroomui/main.jsx b/frontend/src/components/chatroomui/main.jsx index d582bd3..69ece83 100644 --- a/frontend/src/components/chatroomui/main.jsx +++ b/frontend/src/components/chatroomui/main.jsx @@ -135,7 +135,7 @@ function Mainbuttons() { if (loadingUser) { return ( - +
); } diff --git a/frontend/src/styles/loader.css b/frontend/src/styles/loader.css new file mode 100644 index 0000000..f373622 --- /dev/null +++ b/frontend/src/styles/loader.css @@ -0,0 +1,93 @@ +/* From Uiverse.io by Shoh2008 */ +.loader { + width: 120px; + height: 150px; + background-color: #fff; + background-repeat: no-repeat; + background-image: linear-gradient(#ddd 50%, #bbb 51%), + linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd), + radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%), + radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%), + radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%); + background-position: 0 20px, 45px 0, 8px 6px, 55px 3px, 75px 3px, 95px 3px; + background-size: 100% 4px, 1px 23px, 30px 8px, 15px 15px, 15px 15px, 15px 15px; + position: relative; + border-radius: 6%; + animation: shake 3s ease-in-out infinite; + transform-origin: 60px 180px; +} + +.loader:before { + content: ""; + position: absolute; + left: 5px; + top: 100%; + width: 7px; + height: 5px; + background: #aaa; + border-radius: 0 0 4px 4px; + box-shadow: 102px 0 #aaa; +} + +.loader:after { + content: ""; + position: absolute; + width: 95px; + height: 95px; + left: 0; + right: 0; + margin: auto; + bottom: 20px; + background-color: #bbdefb; + background-image: linear-gradient(to right, #0004 0%, #0004 49%, #0000 50%, #0000 100%), + linear-gradient(135deg, #64b5f6 50%, #607d8b 51%); + background-size: 30px 100%, 90px 80px; + border-radius: 50%; + background-repeat: repeat, no-repeat; + background-position: 0 0; + box-sizing: border-box; + border: 10px solid #DDD; + box-shadow: 0 0 0 4px #999 inset, 0 0 6px 6px #0004 inset; + animation: spin 3s ease-in-out infinite; +} + +@keyframes spin { + 0% { + transform: rotate(0deg) + } + + 50% { + transform: rotate(360deg) + } + + 75% { + transform: rotate(750deg) + } + + 100% { + transform: rotate(1800deg) + } +} + +@keyframes shake { + + 65%, + 80%, + 88%, + 96% { + transform: rotate(0.5deg) + } + + 50%, + 75%, + 84%, + 92% { + transform: rotate(-0.5deg) + } + + 0%, + 50%, + 100% { + transform: rotate(0) + } +} \ No newline at end of file diff --git a/frontend/src/styles/login.css b/frontend/src/styles/login.css new file mode 100644 index 0000000..a78b585 --- /dev/null +++ b/frontend/src/styles/login.css @@ -0,0 +1,102 @@ +.form { + --background: #d3d3d3; + --input-focus: #2d8cf0; + --font-color: #323232; + --font-color-sub: #666; + --bg-color: #fff; + --main-color: #323232; + padding: 60px; + background: var(--background); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 20px; + border-radius: 5px; + border: 2px solid var(--main-color); + box-shadow: 4px 4px var(--main-color); + max-width: 800px; +} + +.form>p { + font-family: Arial, sans-serif; + color: var(--font-color); + font-weight: 700; + font-size: 24px; + /* Increased font size */ +} + +.form>p>span { + font-family: Arial, sans-serif; + color: var(--font-color-sub); + font-weight: 600; + font-size: 20px; + /* Increased font size */ +} + +.separator { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + gap: 5px; +} + +.separator>div { + width: 100px; + height: 3px; + border-radius: 5px; + background-color: var(--font-color-sub); +} + +.separator>span { + color: var(--font-color); + font-weight: 600; +} + +.oauthButton { + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + width: 300px; + /* Increased width */ + height: 50px; + /* Increased height */ + border-radius: 5px; + border: 2px solid var(--main-color); + background-color: var(--bg-color); + box-shadow: 4px 4px var(--main-color); + font-size: 18px; + /* Adjusted font size */ + font-weight: 600; + color: var(--font-color); + cursor: pointer; + transition: all 250ms; + position: relative; + overflow: hidden; + z-index: 1; +} + +.oauthButton:hover { + color: #e8e8e8; + background-color: #212121; +} + +.input { + width: 300px; + /* Increased width */ + height: 50px; + /* Increased height */ + border-radius: 5px; + border: 2px solid var(--main-color); + background-color: var(--bg-color); + box-shadow: 4px 4px var(--main-color); + font-size: 16px; + /* Adjusted font size */ + font-weight: 600; + color: var(--font-color); + padding: 10px; + /* Increased padding */ + outline: none; +} \ No newline at end of file