Modifying signup page.

frontend/src/components/authentication/SignUpPage.jsx

@@ -1,16 +1,11 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import axiosapi from "../../api/AuthenticationApi";
-import Avatar from "@mui/material/Avatar";
 import Button from "@mui/material/Button";
-import CssBaseline from "@mui/material/CssBaseline";
 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 Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 import Typography from "@mui/material/Typography";
 import { useCallback } from "react";
 import Particles from "react-tsparticles";
@@ -18,18 +13,20 @@ import { loadFull } from "tsparticles";
 
 function Copyright(props) {
   return (
-    <Typography variant="body2" color="text.secondary" align="center" {...props}>
+    <div className="text-center text-sm text-gray-500" {...props}>
       {"Copyright © "}
-      <Link color="inherit" href="https://github.com/TurTaskProject/TurTaskWeb">
+      <a
+        href="https://github.com/TurTaskProject/TurTaskWeb"
+        className="text-blue-500 hover:underline"
+      >
         TurTask
-      </Link>{" "}
+      </a>{" "}
       {new Date().getFullYear()}
       {"."}
-    </Typography>
+    </div>
   );
 }
 
-
 export default function SignUp() {
   const Navigate = useNavigate();
 
@@ -41,7 +38,7 @@ export default function SignUp() {
   const [error, setError] = useState(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const handleSubmit = async e => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     setIsSubmitting(true);
     setError(null);
@@ -57,7 +54,7 @@ export default function SignUp() {
     Navigate("/login");
   };
 
-  const handleChange = e => {
+  const handleChange = (e) => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
   };
@@ -73,9 +70,11 @@ export default function SignUp() {
     console.log(container);
   }, []);
 
-
   return (
-    <div data-theme="night" className="h-screen flex items-center justify-center">
+    <div
+      data-theme="night"
+      className="h-screen flex items-center justify-center"
+    >
       {/* Particles Container */}
       <div style={{ width: "0%", height: "100vh" }}>
         <Particles
@@ -149,12 +148,10 @@ export default function SignUp() {
           }}
         />
       </div>
-      <div className="w-1/4 flex items-center justify-center">
+      <div className="w-1/4 h-1 flex items-center justify-center">
         <div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4 z-10">
           {/* Register Form */}
-          <Typography component="h1" variant="h5">
-            Sign up
-          </Typography>
+          <h2 className="text-3xl font-bold text-center">Signup</h2>
           <form noValidate onSubmit={handleSubmit}>
             <TextField
               required
@@ -189,19 +186,24 @@ export default function SignUp() {
               control={<Checkbox value="allowExtraEmails" color="primary" />}
               label="I want to receive inspiration, marketing promotions and updates via email."
             />
-            <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+            >
               Sign Up
             </Button>
             {/* Already have an account? */}
-          <div className="justify-left">
-            <a href="#" className="text-blue-500 text-sm text-left">
+            <div className="text-blue-500 text-sm">
+              <a href="login" className="text-left">
                 Already have an account?
               </a>
             </div>
           </form>
+          <Copyright />
         </div>
       </div>
     </div>
   );
-  
 }