Small fixes to design

frontend/src/Components/UserInfoModal.tsx

@@ -16,12 +16,19 @@ function UserInfoModal(props: {
       flex justify-center items-center"
     >
       <div className="border-4 border-black bg-white p-2 rounded-lg text-center">
-        <h1 className="font-bold text-[30px] mb-[20px]">{props.username}</h1>
+        <p className="font-bold text-[30px]">{props.username}</p>
+        <Link to="/AdminChangeUserName">
+          <p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
+            (Change Username)
+          </p>
+        </Link>
         <div>
           <h2 className="font-bold text-[22px] mb-[20px]">
             Member of these projects:
           </h2>
-          <UserProjectListAdmin username={props.username} />
+          <div className="pr-6 pl-6">
+            <UserProjectListAdmin />
+          </div>
         </div>
         <div className="items-center space-x-6 pr-6 pl-6">
           <Button
@@ -31,15 +38,6 @@ function UserInfoModal(props: {
             }}
             type="button"
           />
-          <Link to="/AdminChangeUserName">
-            <Button
-              text="Change Username"
-              onClick={(): void => {
-                return;
-              }}
-              type="button"
-            />
-          </Link>
           <Button
             text={"Close"}
             onClick={function (): void {

frontend/src/Components/UserProjectListAdmin.tsx

@@ -2,16 +2,16 @@ import { useEffect, useState } from "react";
 import { api } from "../API/API";
 import { Project } from "../Types/goTypes";
 
-function UserProjectListAdmin(props: { username: string }): JSX.Element {
+function UserProjectListAdmin(): JSX.Element {
   const [projects, setProjects] = useState<Project[]>([]);
 
   useEffect(() => {
     const fetchProjects = async (): Promise<void> => {
       try {
         const token = localStorage.getItem("accessToken") ?? "";
-        const username = props.username;
+        // const username = props.username;
 
-        const response = await api.getUserProjects(username, token);
+        const response = await api.getUserProjects(token);
         if (response.success) {
           setProjects(response.data ?? []);
         } else {
@@ -23,11 +23,10 @@ function UserProjectListAdmin(props: { username: string }): JSX.Element {
     };
 
     void fetchProjects();
-  });
+  }, []);
 
   return (
-    <div>
-      <h2>User Projects</h2>
+    <div className="border-2 border-black bg-white p-2 rounded-lg text-center">
       <ul>
         {projects.map((project) => (
           <li key={project.id}>