Imbus/TTime
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fixes to design

Browse source
This commit is contained in:
Peter KW 2024-03-20 23:44:36 +01:00
parent b2333d8cbd
commit 6dfc31832c
1 changed files with 22 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/Components/ProjectInfoModal.tsx
View file

@ -3,10 +3,11 @@ import Button from "./Button";
import { UserProjectMember } from "../Types/goTypes"; import { UserProjectMember } from "../Types/goTypes";
import GetUsersInProject from "./GetUsersInProject"; import GetUsersInProject from "./GetUsersInProject";
function UserInfoModal(props: { function ProjectInfoModal(props: {
isVisible: boolean; isVisible: boolean;
projectname: string; projectname: string;
onClose: () => void; onClose: () => void;
onClick: (username: string) => void;
}): JSX.Element { }): JSX.Element {
const [users, setUsers] = useState<UserProjectMember[]>([]); const [users, setUsers] = useState<UserProjectMember[]>([]);
GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers }); GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
@ -17,23 +18,31 @@ function UserInfoModal(props: {
className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm
flex justify-center items-center" flex justify-center items-center"
> >
<div className="border-4 border-black bg-white p-2 rounded-lg text-center"> <div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[41vh] w-[40vw] flex flex-col">
<p className="font-bold text-[30px]">{props.projectname}</p> <div className="pl-20 pr-20">
<div> <h1 className="font-bold text-[32px] mb-[20px]">Project members:</h1>
<h2 className="font-bold text-[22px] mb-[20px]"> <div className="border-2 border-black p-2 rounded-lg text-center overflow-scroll h-[26vh]">
Members of this project: <ul className="text-left font-medium space-y-2">
</h2> <div></div>
<div className="border-2 border-black bg-white p-2 rounded-lg text-center pl-6 pr-6">
<ul>
{users.map((user) => ( {users.map((user) => (
<li key={user.Username}> <li
<span>{user.Username}</span> className="items-start p-1 border-2 border-black rounded-lg bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
key={user.Username}
onClick={() => {
props.onClick(user.Username);
}}
>
<span>
Name: {user.Username}
<div></div>
Role: {user.UserRole}
</span>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
</div> </div>
<div className="items-center space-x-6 pr-6 pl-6"> <div className="space-x-16">
<Button <Button
text={"Delete"} text={"Delete"}
onClick={function (): void { onClick={function (): void {
@ -54,4 +63,4 @@ function UserInfoModal(props: {
); );
} }
export default UserInfoModal; export default ProjectInfoModal;