Completed Signup page improvement.

frontend/src/components/authentication/SignUpPage.jsx

@@ -1,12 +1,6 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import axiosapi from "../../api/AuthenticationApi";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Checkbox from "@mui/material/Checkbox";
-import Link from "@mui/material/Link";
-import Typography from "@mui/material/Typography";
 import { useCallback } from "react";
 import Particles from "react-tsparticles";
 import { loadFull } from "tsparticles";
@@ -108,13 +102,13 @@ export default function SignUp() {
             },
             particles: {
               color: {
-                value: "#008000",
+                value: "#023020",
               },
               links: {
-                color: "#00ff00",
+                color: "#228B22",
                 distance: 150,
                 enable: true,
-                opacity: 0.1,
+                opacity: 0.5,
                 width: 1,
               },
               move: {
@@ -141,7 +135,7 @@ export default function SignUp() {
                 type: "circle",
               },
               size: {
-                value: { min: 4, max: 5 },
+                value: { min: 6, max: 8 },
               },
             },
             detectRetina: true,
@@ -152,55 +146,75 @@ export default function SignUp() {
         <div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4 z-10">
           {/* Register Form */}
           <h2 className="text-3xl font-bold text-center">Signup</h2>
-          <form noValidate onSubmit={handleSubmit}>
+          {/* Email Input */}
-            <TextField
+          <div className="form-control ">
-              required
+            <label className="label" htmlFor="email">
-              fullWidth
+              <p className="text-bold">
+                Email<span className="text-red-500 text-bold">*</span>
+              </p>
+            </label>
+            <input
+              className="input"
+              type="email"
               id="email"
-              label="Email Address"
+              placeholder="Enter your email"
-              name="email"
-              autoComplete="email"
               onChange={handleChange}
             />
-            <TextField
+          </div>
-              autoComplete="username"
+          {/* Username Input */}
-              name="Username"
+          <div className="form-control">
-              required
+            <label className="label" htmlFor="Username">
-              fullWidth
+              <p className="text-bold">
+                Username<span className="text-red-500 text-bold">*</span>
+              </p>
+            </label>
+            <input
+              className="input"
+              type="text"
               id="Username"
-              label="Username"
+              placeholder="Enter your username"
-              autoFocus
               onChange={handleChange}
             />
-            <TextField
+          </div>
-              required
+          {/* Password Input */}
-              fullWidth
+          <div className="form-control">
-              name="password"
+            <label className="label" htmlFor="password">
-              label="Password"
+              <p className="text-bold">
+                Password<span className="text-red-500 text-bold">*</span>
+              </p>
+            </label>
+            <input
+              className="input"
               type="password"
               id="password"
-              autoComplete="new-password"
+              placeholder="Enter your password"
               onChange={handleChange}
             />
-            <FormControlLabel
+          </div>
-              control={<Checkbox value="allowExtraEmails" color="primary" />}
+          <br></br>
-              label="I want to receive inspiration, marketing promotions and updates via email."
+          <div className="flex items-center">
+            <input
+              type="checkbox"
+              id="allowExtraEmails"
+              name="allowExtraEmails"
+              className="h-4 w-4 text-green-500 focus:ring-green-400 border-gray-300 rounded"
             />
-            <Button
+            <label htmlFor="allowExtraEmails" className="ml-2 text-sm ">
-              type="submit"
+              I want to receive inspiration, marketing promotions, and updates
-              fullWidth
+              via email.
-              variant="contained"
+            </label>
-              sx={{ mt: 3, mb: 2 }}
+          </div>
-            >
+
-              Sign Up
+          {/* Login Button */}
-            </Button>
+          <button className="btn btn-success w-full " onClick={handleSubmit}>
-            {/* Already have an account? */}
+            Signup
-            <div className="text-blue-500 text-sm">
+          </button>
-              <a href="login" className="text-left">
+          {/* Already have an account? */}
-                Already have an account?
+          <div className="text-blue-500 text-sm">
-              </a>
+            <a href="login" className="text-left">
-            </div>
+              Already have an account?
-          </form>
+            </a>
+          </div>
           <Copyright />
         </div>
       </div>