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 GetUsersInProject from "./GetUsersInProject";
function UserInfoModal(props: {
function ProjectInfoModal(props: {
isVisible: boolean;
projectname: string;
onClose: () => void;
onClick: (username: string) => void;
}): JSX.Element {
const [users, setUsers] = useState<UserProjectMember[]>([]);
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
flex justify-center items-center"
>
<div className="border-4 border-black bg-white p-2 rounded-lg text-center">
<p className="font-bold text-[30px]">{props.projectname}</p>
<div>
<h2 className="font-bold text-[22px] mb-[20px]">
Members of this project:
</h2>
<div className="border-2 border-black bg-white p-2 rounded-lg text-center pl-6 pr-6">
<ul>
<div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[41vh] w-[40vw] flex flex-col">
<div className="pl-20 pr-20">
<h1 className="font-bold text-[32px] mb-[20px]">Project members:</h1>
<div className="border-2 border-black p-2 rounded-lg text-center overflow-scroll h-[26vh]">
<ul className="text-left font-medium space-y-2">
<div></div>
{users.map((user) => (
<li key={user.Username}>
<span>{user.Username}</span>
<li
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>
))}
</ul>
</div>
</div>
<div className="items-center space-x-6 pr-6 pl-6">
<div className="space-x-16">
<Button
text={"Delete"}
onClick={function (): void {
@ -54,4 +63,4 @@ function UserInfoModal(props: {
);
}
export default UserInfoModal;
export default ProjectInfoModal;