Change loader and login page

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 (
       <Flex minH="100vh" align="center" justify="center" bg="black">
-        <InfinitySpin color="#3182CE" size={80} />
+        <div class="loader"></div>
       </Flex>
     );
   }

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 (
       <Flex minH="100vh" align="center" justify="center" bg="black">
-        <InfinitySpin color="#3182CE" size={80} />
+        <div class="loader"></div>
       </Flex>
     );
   }
@@ -189,73 +191,53 @@ const LoginPage = () => {
 
   return (
     <Flex minH="100vh" align="center" justify="center" bg="black">
-      <Container
-        maxW="md"
-        bg="gray.800"
-        boxShadow="md"
-        p={6}
-        rounded="md"
-        color="white"
-      >
-        <Stack spacing={4}>
-          <Heading as="h1" size="lg" textAlign="center" color="white">
-            Login
-          </Heading>
-          <FormControl id="email">
-            <FormLabel>Email address</FormLabel>
-            <Input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              bg="gray.700"
-              color="white"
-            />
-          </FormControl>
-          <FormControl id="password">
-            <FormLabel>Password</FormLabel>
-            <Input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              bg="gray.700"
-              color="white"
-            />
-          </FormControl>
-          <Button
-            colorScheme="teal"
-            isLoading={loading}
-            onClick={handleLogin}
-            _hover={{ bg: "teal.500" }}
-          >
-            Login
-          </Button>
-          <Link className="text-center" to='/forgetPassword'>Forgot Password?</Link>
-          <Button
-            leftIcon={<FcGoogle />}
-            colorScheme="gray"
-            onClick={handleGoogleLogin}
-            bg="white"
-            color="black"
-            _hover={{ bg: "gray.200" }}
-          >
-            Login with Google
-          </Button>
-          <Button
-            leftIcon={<FaGithub />}
-            colorScheme="gray"
-            onClick={handleGithubLogin}
-            bg="white"
-            color="black"
-            _hover={{ bg: "gray.200" }}
-          >
-            Login with Github
-          </Button>
-        </Stack>
-      </Container>
+      {loading ? (
+        <Flex align="center" justify="center">
+          <div class="loader"></div>
+        </Flex>
+      ) : (
+        <form className="form">
+          <p>
+            Welcome,<span>sign in to continue</span>
+          </p>
+          <button type="button" className="oauthButton" onClick={handleGoogleLogin}>
+            <FcGoogle className="icon" />
+            Continue with Google
+          </button>
+          <button type="button" className="oauthButton" onClick={handleGithubLogin}>
+            <FaGithub className="icon" />
+            Continue with Github
+          </button>
+          <div className="separator">
+            <div></div>
+            <span>OR</span>
+            <div></div>
+          </div>
+          <input
+            type="email"
+            placeholder="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="input"
+          />
+          <input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="input"
+          />
+          <button type="button" className="oauthButton" onClick={handleLogin}>
+            Continue
+          </button>
+          <Link to="/forgetPassword" className="forgot-password">
+            Forgot Password?
+          </Link>
+        </form>
+      )}
     </Flex>
   );
 };
 
+
 export default LoginPage;

frontend/src/components/Posts.jsx

@@ -149,7 +149,7 @@ const Posts = () => {
   if (loading || loadingUser) {
     return (
       <Flex minH="100vh" align="center" justify="center" bg="black">
-        <InfinitySpin color="#3182CE" size={80} />
+        <div class="loader"></div>
       </Flex>
     );
   }

frontend/src/components/SinglePost.jsx

@@ -79,7 +79,7 @@ const SinglePost = () => {
   if (loadingUser) {
     return (
       <Center h="100vh">
-        <InfinitySpin />
+        <div class="loader"></div>
       </Center>
     );
   }

frontend/src/components/chatroomui/joinRoom1.jsx

@@ -50,7 +50,7 @@ const JoinRoom1 = () => {
   if (loadingUser) {
     return (
       <Flex minH="100vh" align="center" justify="center" bg="black">
-        <InfinitySpin color="#3182CE" size={80} />
+       <div class="loader"></div>
       </Flex>
     );
   }

frontend/src/components/chatroomui/main.jsx

@@ -135,7 +135,7 @@ function Mainbuttons() {
   if (loadingUser) {
     return (
       <Flex justify="center" align="center" h="100vh">
-        <InfinitySpin />
+        <div class="loader"></div>
       </Flex>
     );
   }

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)
+    }
+}

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;
+}