add user card, design fix

frontend/src/components/pages/Admin/Admin.module.less

@@ -5,6 +5,16 @@
     justify-content: center;
     align-items: center;
     gap: 50px;
-    margin-top: 40px;
     height: 70vh;
 }
+.full-content{
+    padding-top: 80px;
+
+}
+.card{
+    max-width: 800px;
+    padding: 20px;
+    margin-bottom: 10px;
+    margin-left: 5px;
+
+}

frontend/src/components/pages/Admin/Admin.tsx

@@ -10,6 +10,8 @@ import { useTranslation } from "react-i18next";
 import CreateTeam from "../../widgets/CreateTeams/CreateTeams";
 import { UserList } from "../AdminEventPage/AdminEventAPI";
 import { useEffect, useState } from "react";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "../../shared/ui/card"
+
 
 const AdminPage = () => {
   const { t } = useTranslation();
@@ -34,22 +36,30 @@ var result = window.location.pathname.substring(index);
         });
     }, []);
   return (
-    <ResizablePanelGroup direction="horizontal">
+    <ResizablePanelGroup className={less["full-content"]} direction="horizontal">
-      <ResizablePanel defaultSize={95} maxSize={95}>
+      <ResizablePanel defaultSize={60} maxSize={60}>
         <div className={less["main-admin"]}>
-          <Button>{t("EditTree")}</Button>
           <CreateTeam />
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
       <ResizablePanel>
+      <h4>Members: {players.length}</h4>
       {players.map((event) => (
-        <div>{event.first_name}</div>
+        <Card className={`${less["card"]} flex flex-row `}>
+        <div className="flex flex-col">
+          <CardHeader className="p-0">
+            <CardTitle className="p-0">{`${event.first_name} | ${event.email}`}</CardTitle>
+          </CardHeader >
+          <CardContent className="p-0 mt-2">
+            <p>{t("skills")}:</p>
+            <p>{event.bio}</p>
+        
+          </CardContent>
+          </div>
+        </Card>
       ))}
-        <PlayerCard />
+
-        <PlayerCard />
-        <PlayerCard />
-        <PlayerCard />
       </ResizablePanel>
     </ResizablePanelGroup>
   );

frontend/src/components/pages/SkillTree/SkillTree.module.less

@@ -1,11 +1,12 @@
 .general{
     display: flex;
     flex-direction: row;
-    padding-top: 100px;
+    padding-top: 80px;
 }
 .left{
 width: 50%;
 padding: 20px;
+padding-top: 0;
 }
 .right{
     width: 50%;
@@ -33,4 +34,9 @@ padding: 20px;
     justify-content: space-between;
     align-items: center;
     padding: 0;
+
+}
+.h2{
+    font-size: 24px;
+    font-weight: 600;
 }

frontend/src/components/pages/SkillTree/SkillTree.tsx

@@ -47,6 +47,7 @@ const SkillTree = () => {
     return (
         <div className={less["general"]}>
             <div className={less["left"]}>
+              <h2 className={less["h2"]}>Create event</h2>
                 <form className={less["input-form"]} onSubmit={(event) => addEvent(event)}>
                     <Input type="text" name="title" placeholder="Event name" />
                     <Input type="text" name="description" placeholder="Last name" />