Checks if user already is selected role + minor design change

frontend/src/Components/ChangeRoleView.tsx

@@ -5,6 +5,7 @@ import ChangeRole, { ProjectRoleChange } from "./ChangeRole";
 export default function ChangeRoleView(props: {
   projectName: string;
   username: string;
+  currentRole: string;
 }): JSX.Element {
   const [selectedRole, setSelectedRole] = useState<
     "project_manager" | "member" | ""
@@ -21,7 +22,12 @@ export default function ChangeRoleView(props: {
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+    console.log("Cur: " + props.currentRole + " " + "new: " + selectedRole);
     event.preventDefault();
+    if (selectedRole === props.currentRole) {
+      alert(`Already ${props.currentRole}, nothing changed`);
+      return;
+    }
     const roleChangeInfo: ProjectRoleChange = {
       username: props.username,
       projectname: props.projectName,
@@ -31,34 +37,31 @@ export default function ChangeRoleView(props: {
   };
 
   return (
-    <div className="overflow-auto rounded-lg">
+    <div className="overflow-auto">
       <h1 className="font-bold text-[20px]">Select role:</h1>
       <form onSubmit={handleSubmit}>
-        <div className="h-[7vh] self-start text-left font-medium overflow-auto border-2 border-black rounded-lg p-2">
-          <div className="hover:font-bold">
-            <label>
-              <input
-                type="radio"
-                value="project_manager"
-                checked={selectedRole === "project_manager"}
-                onChange={handleRoleChange}
-                className="ml-2 mr-2 mb-3"
-              />
-              Project manager
-            </label>
-          </div>
-          <div className="hover:font-bold">
-            <label>
-              <input
-                type="radio"
-                value="member"
-                checked={selectedRole === "member"}
-                onChange={handleRoleChange}
-                className="ml-2 mr-2"
-              />
-              Member
-            </label>
-          </div>
+        <div className="py-1 px-1 w-full self-start text-left font-medium overflow-auto border-2 border-black rounded-2xl">
+          <label className="hover:cursor-pointer hover:font-bold">
+            <input
+              type="radio"
+              value="project_manager"
+              checked={selectedRole === "project_manager"}
+              onChange={handleRoleChange}
+              className="m-2"
+            />
+            Project manager
+          </label>
+          <br />
+          <label className="hover:cursor-pointer hover:font-bold">
+            <input
+              type="radio"
+              value="member"
+              checked={selectedRole === "member"}
+              onChange={handleRoleChange}
+              className="m-2 hover:cursor-pointer"
+            />
+            Member
+          </label>
         </div>
         <Button
           text="Change"

frontend/src/Components/MemberInfoModal.tsx

@@ -1,12 +1,13 @@
 import Button from "./Button";
 import UserProjectListAdmin from "./UserProjectListAdmin";
 import { useState } from "react";
-import ChangeRoleView from "./ChangeRoleView";
 import RemoveUserFromProj from "./RemoveUserFromProj";
+import ChangeRoleInput from "./ChangeRoleView";
 
 function MemberInfoModal(props: {
   projectName: string;
   username: string;
+  role: string;
   onClose: () => void;
 }): JSX.Element {
   const [showRoles, setShowRoles] = useState(false);
@@ -20,22 +21,24 @@ function MemberInfoModal(props: {
   };
   return (
     <div
-      className="fixed inset-10 bg-opacity-30 backdrop-blur-sm 
+      className="fixed inset-0 bg-opacity-30 backdrop-blur-sm 
       flex justify-center items-center"
     >
       <div className="border-4 border-black bg-white rounded-2xl text-center flex flex-col">
         <div className="mx-10">
           <p className="font-bold text-[30px]">{props.username}</p>
+          <p className="font-bold text-[20px]">{props.role}</p>
           <p
-            className="hover:font-bold hover:cursor-pointer underline"
+            className="hover:font-bold hover:cursor-pointer underline mb-2 mt-1"
             onClick={handleChangeRole}
           >
             (Change Role)
           </p>
           {showRoles && (
-            <ChangeRoleView
+            <ChangeRoleInput
               projectName={props.projectName}
               username={props.username}
+              currentRole={props.role}
             />
           )}
           <h2 className="font-bold text-[20px]">Member of these projects:</h2>