Merge branch 'main' into fixthing

UoaWDCC · Oct 7, 2024 · 115a06f · 115a06f
2 parents e4077a8 + a086f99
commit 115a06f
Show file tree

Hide file tree

Showing 22 changed files with 154 additions and 156 deletions.
diff --git a/web/src/components/Dashboard/DashboardCommunity/CommunityGallery.tsx b/web/src/components/Dashboard/DashboardCommunity/CommunityGallery.tsx
@@ -53,16 +53,16 @@ const CommunityGallery = () => {
     setFilteredData(filterUsers(data));
   }, [context.searchTerm, data]);
 
-  return (
-    <div className="bg-white rounded-3xl py-10 px-[4%] w-full text-subheading text-black shadow-lg'">
-      <p>People you may know: </p>
-        <div className="w-full grid grid-cols-3 max-[1280px]:grid-cols-2 min-[2100px]:grid-cols-4 min-[2560px]:grid-cols-5 gap-[2%]">
-        {filteredData.map((user: userData, index: number) => (
-          <CommunityGalleryCard key={index} user={user} />
-        ))}
+  return (  
+      <div className='bg-white rounded-3xl py-10 px-[4%] w-full text-subheading text-black shadow-lg'>
+          <p>People you may know: </p>
+          <div className='w-full grid grid-cols-3 max-[1280px]:grid-cols-2 min-[2100px]:grid-cols-4 min-[2560px]:grid-cols-5 gap-[2%]'>
+            {filteredData.map((user: userData, index: number) => (
+              <CommunityGalleryCard key={index} user={user} />
+            ))}
+          </div>
       </div>
-    </div>
   );
-};
-
+}
+ 
 export default CommunityGallery;
diff --git a/web/src/components/Dashboard/DashboardCommunity/DashboardCommunity.tsx b/web/src/components/Dashboard/DashboardCommunity/DashboardCommunity.tsx
@@ -3,12 +3,12 @@ import Leaderboard from "../Leaderboard";
 
 function DashboardCommunity() {
   return (
-    <div className="flex flex-row w-[100%] h-[85vh] px-5 gap-5 overflow-scroll scrollbar-none">
-      <div className="flex flex-col w-[80%]">
+    <div className="flex flex-row w-full h-full gap-5">
+      <div className="flex flex-col w-[75%] h-full overflow-y-auto scrollbar-none shadow-lg rounded-lg">
         <CommunityGalleryWhole />
       </div>
 
-      <div className="sticky top-1 flex justify-end w-[20%] h-[84vh]">
+      <div className="w-[20%]">
         <Leaderboard />
       </div>
     </div>

diff --git a/web/src/components/Dashboard/DashboardDiscover/DashboardDiscover.tsx b/web/src/components/Dashboard/DashboardDiscover/DashboardDiscover.tsx
@@ -92,7 +92,7 @@ function DashboardDiscover() {
   console.log(flagshipEvent);
 
   return (
-    <div className="flex flex-col w-[100%] h-[85vh] px-5">
+    <div className="flex flex-col w-[96%] relative">
       <div className="flex flex-row bg-white rounded-lg shadow-md h-[45%] cursor-pointer mb-5 items-center p-7">
         <div className="h-full w-[60%]">
           <img
@@ -130,18 +130,18 @@ function DashboardDiscover() {
         </div>
       </div>
 
-      <div className="mb-5 h-[55%]">
+      <div className="flex-1 rounded-xl overflow-y-auto">
         {/* adjust sizes and stuff as needed */}
         <EventsScrollContainer
           events={events}
           setEventDetails={setEventDetails}
         />
       </div>
 
-      {eventDetails && (
+        {eventDetails && (
         <EventDetails event={eventDetails} setEventDetails={setEventDetails} />
       )}
-    </div>
+      </div>
   );
 }
 

diff --git a/web/src/components/Dashboard/DashboardDiscover/EventDetails.tsx b/web/src/components/Dashboard/DashboardDiscover/EventDetails.tsx
@@ -30,12 +30,12 @@ export default function EventDetails({event, setEventDetails}: EventProps) {
 
     const options: Intl.DateTimeFormatOptions = { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric'};
     return (
-        <div className="flex flex-col items-center fixed left-[15%] top-[12%] w-[85%] h-[90%] px-5 py-5 bg-[#F7F7FB] overflow-scroll scrollbar-none"> {/* event-container */}
+        <div className="flex flex-col absolute top-0 left-0 items-center w-full h-full bg-[#F7F7FB] overflow-scroll scrollbar-none"> {/* event-container */}
             <div className="self-start ml-6 cursor-pointer" onClick={() => setEventDetails(null)}><IoArrowBackCircle  size="40px" color="#3B87DD" /></div>
 
-            <img src={event.image} className=" w-[95%] h-[45vh] rounded-3xl mt-2" />
+            <img src={event.image} className=" w-[95%] h-[24rem] rounded-3xl mt-2 object-cover" />
 
-            <div className="flex flex-col w-full px-10 py-4">
+            <div className="flex flex-col w-[95%] py-4">
                 <div className="flex flex-row justify-between items-center w-full">
                     <h1 className="text-subheading font-bold">{event.event_title}</h1>
                     <button className="h-10 text-body-heading rounded-full">Register for Event</button>
@@ -48,31 +48,31 @@ export default function EventDetails({event, setEventDetails}: EventProps) {
                 </div>
             </div>
 
-            <div className="flex flex-row w-full justify-between">
-                <div className="w-[65%]">
-                    <div className="flex flex-col w-full px-10 mt-3">
+            <div className="flex flex-row w-[95%] justify-between">
+                <div className="w-[60%]">
+                    <div className="flex flex-col w-full mt-3">
                         <h3 className="text-heading3 font-semibold">Description</h3>
                         <p className="text-body-heading mt-[-20px]">{event.description}</p>
                     </div>
 
-                    <div className="flex flex-col w-full px-10 mt-3">
+                    <div className="flex flex-col w-full mt-3">
                         <h3 className="text-heading3 font-semibold">Key Tasks and Responsibilities</h3>
                         <p className="text-body-heading mt-[-20px]">{event.tasks}</p>
                     </div>
 
-                    <div className="flex flex-col w-full px-10 mt-3">
+                    <div className="flex flex-col w-full mt-3">
                         <h3 className="text-heading3 font-semibold">Important Notes</h3>
                         <p className="text-body-heading mt-[-20px]">{event.notes}</p>
                     </div>
 
-                    <div className="flex flex-col w-full px-10 mt-3">
+                    <div className="flex flex-col w-full mt-3">
                         <h3 className="text-heading3 font-semibold">Contact Details</h3>
                         <p className="text-body-heading mt-[-20px]">{"Hosted By: " + event.host}</p>
                         <p className="text-body-heading mt-[-20px]">{event.contact}</p>
                     </div>
                 </div>
 
-                <div className="flex flex-col w-[35%] pr-10">
+                <div className="flex flex-col w-[35%]">
                     <div className="w-full h-[35vh] object-cover">
                         <iframe title="map" className="w-full h-full border-lightGrey border-solid border-2 rounded-lg"
                                 src={mapEmbed}

diff --git a/web/src/components/Dashboard/DashboardDiscover/EventsScrollContainer.tsx b/web/src/components/Dashboard/DashboardDiscover/EventsScrollContainer.tsx
@@ -26,7 +26,7 @@ export default function EventsScrollContainer({
   setEventDetails,
 }: EventsProps) {
   return (
-    <div className="dashboard bg-white-background h-[43vh] overflow-y-scroll">
+    <div className="bg-white-background h-full overflow-y-scroll scrollbar-none">
       {events.map((e, index) => (
         <Event key={index} event={e} setEventDetails={setEventDetails} />
       ))}

diff --git a/web/src/components/Dashboard/DashboardHeader.tsx b/web/src/components/Dashboard/DashboardHeader.tsx
@@ -17,7 +17,7 @@ const DashboardHeader = () => {
   };
 
   return (
-    <div className="h-[15%]">
+    <div className="">
       <div className="flex justify-between items-center w-fit gap-8">
         <div className="flex">
           <span className="p-1 rounded-full bg-primary cursor-pointer shadow-lg transform active:scale-[80%] transition-transform" onClick={toggleNotificationTab}>
@@ -28,12 +28,12 @@ const DashboardHeader = () => {
         <div className="h-12 border border-lightGrey"></div>
 
         <div className="flex items-center justify-center gap-4">
-          <span className="font-medium text-lg">John Doe</span>
+          <span className="font-medium text-lg sm:max-2xl:hidden">John Doe</span>
           <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="Profile Picture" className="rounded-full w-12 h-auto" />
         </div>
       </div>
 
-      <div className={`relative transform transition-transform z-50 ${isNotificationTabOpen ? 'translate-x-0 duration-[400ms]' : 'translate-x-[200%] duration-[800ms]'}`}>
+      <div className={`relative transform transition-transform z-50 ${isNotificationTabOpen ? 'translate-x-0 duration-[400ms]' : 'translate-x-[32rem] duration-[800ms]'}`}>
         {isNotificationTabVisible && <NotificationTab toggleNotificationTab={toggleNotificationTab} />}
       </div>
     </div>

diff --git a/web/src/components/Dashboard/DashboardMain/DashboardDashboard.tsx b/web/src/components/Dashboard/DashboardMain/DashboardDashboard.tsx
@@ -1,21 +1,22 @@
 import Leaderboard from "../Leaderboard";
 import WelcomeStats from "./WelcomeStats";
 import UpcomingEvents from "./UpcomingEvents";
+import UpcomingEvent from "./UpcomingEvent";
 
 function DashboardDashboard() {
   return (
-    <div className="dashboard overflow-y-hidden flex flex-row w-[100%] h-screen px-5 gap-5 mb-10">
+    <div className="flex flex-row w-full h-full gap-5">
       {/* width of the gallery */}
-      <div className="w-[70%] flex flex-col gap-2">
-        <div className=" w-h-[20%]">
+      <div className="w-[75%] h-full flex flex-col gap-8">
+        <div className="flex-none">
           <WelcomeStats />
         </div>
-        <div className="h-[60%]">
+        <div className="flex-1 shadow-lg rounded-lg overflow-y-auto">
           <UpcomingEvents />
         </div>
       </div>
 
-      <div className="w-[30%] h-[40vw]">
+      <div className="w-[20%]">
         {/* adjust sizes and stuff as needed */}
         <Leaderboard />
       </div>

diff --git a/web/src/components/Dashboard/DashboardMain/UpcomingEvent.tsx b/web/src/components/Dashboard/DashboardMain/UpcomingEvent.tsx
@@ -5,17 +5,17 @@ const UpcomingEvent = ({ event }: any) => {
   //const endDate = endTimestamp.toDate();
 
   return (
-    <div className="flex flex-col bg-white text-black rounded-xl pl-10 pt-5 border-solid border-2 border-slate-100 mr-[1em]">
+    <div className="flex flex-col bg-white text-black rounded-xl border-solid border-2 border-slate-100 border p-5">
       <img
-        className="h-200 w-[90%] rounded-[10px] object-cover mt-[5%]"
+        className="w-[30rem] rounded-xl object-cover"
         src={event.image || "./public/assets/dashboard/emptyEventImage.png"}
         alt="event image"
       />
-      <p className="text-sm mt-[1em]">
+      <p className="text-sm m-0 mt-2">
         Date: {startDate.toLocaleDateString("en-US")}
       </p>
-      <h2 className="text-xl font-semibold">{event.event_title}</h2>
-      <p className="text-sm">{event.location}</p>
+      <h2 className="text-xl font-semibold m-0">{event.event_title}</h2>
+      <p className="text-sm m-0">{event.location}</p>
     </div>
   );
 };

diff --git a/web/src/components/Dashboard/DashboardMain/UpcomingEvents.tsx b/web/src/components/Dashboard/DashboardMain/UpcomingEvents.tsx
@@ -29,7 +29,7 @@ const UpcomingEvents = () => {
     .slice(0, 4);
 
   return (
-    <div className="flex flex-col bg-white mt-5 rounded-[30px] font-light h-full">
+    <div className="flex flex-col h-full bg-white font-light">
       <div>
         <p className="text-black text-[38px] leading-[1.15] pl-8 pt-2 m-0 font-semibold">
           Upcoming Events
@@ -38,8 +38,8 @@ const UpcomingEvents = () => {
           See what's going on!
         </p>
       </div>
-      <div className="flex-grow overflow-auto ml-5">
-        <div className="grid grid-cols-2 gap-5">
+      <div className="overflow-auto mx-5 scrollbar-none">
+        <div className="grid grid-cols-3 max-[1280px]:grid-cols-2 min-[2100px]:grid-cols-4 min-[2560px]:grid-cols-5 gap-5 justify-center">
           {/*}
           <UpcomingEvent event={event_test_one} />
           <UpcomingEvent event={event_test_six} />

diff --git a/web/src/components/Dashboard/Leaderboard.tsx b/web/src/components/Dashboard/Leaderboard.tsx
@@ -123,7 +123,7 @@ function Leaderboard() {
   //   let rank = 1; // never used?
 
   return (
-    <div className="h-full w-full pt-7 pb-2 flex flex-col items-center bg-white rounded-2xl">
+    <div className="w-full h-full pt-7 pb-2 flex flex-col items-center bg-white rounded-xl shadow-lg ">
       <h2 className="text-primary text-section-header font-semibold">
         Leaderboard
       </h2>

diff --git a/web/src/components/Dashboard/NotificationTab.tsx b/web/src/components/Dashboard/NotificationTab.tsx
@@ -28,7 +28,7 @@ function NotificationTab({ toggleNotificationTab }: NotificationTabProps) {
   }, []);
 
   return (
-    <div className="absolute flex flex-row bg-white h-[96vh] w-[400px] shadow-lg top-2 right-4">
+    <div className="absolute flex flex-row bg-white h-[87.5vh] w-[400px] rounded-lg shadow-lg top-6 right-0">
       <div>
         <button className="text-black bg-gray-100 rounded-full text-sm py-1 px-2.5 mt-4 ml-4 mr-4 hover:text-white hover:bg-primary" onClick={toggleNotificationTab}>&gt;</button>
       </div>

diff --git a/web/src/components/Dashboard/SideBar.tsx b/web/src/components/Dashboard/SideBar.tsx
@@ -19,9 +19,9 @@ const SideBar: React.FC<SideBarProps> = ({ switchDashboard, switchDiscover, swit
     const { signOut } = authContext as unknown as { signOut: () => void };
 
     return ( 
-        <div className="flex flex-col from-[#D6EDFD] to-[#58B6F1] h-[100vh] w-full rounded-[30px]">
+        <div className="flex flex-col bg-primary w-full h-full">
             <Link className="self-center" to={"/"}>
-                <img className="h-[68px] w-[68px] mt-[8vh] self-center" src='/public/assets/club-logo.svg' alt='club-logo' />
+                <img className="h-[68px] w-[68px] mt-[8vh] sm:max-2xl:h-[48px] sm:max-2xl:w-[48px] object-cover" src='/public/assets/club-logo.svg' alt='club-logo' />
             </Link>
 
             <div className="flex flex-col mt-[5vh] items-end"> 
@@ -32,9 +32,9 @@ const SideBar: React.FC<SideBarProps> = ({ switchDashboard, switchDiscover, swit
                 <SideBarTab unselected='/assets/sidebar/community_icon.svg' selected='/assets/sidebar/community_icon_blue.svg' tabName='community' selectedTab={selectedTab} setSelectedTab={setSelectedTab} switchPage={switchCommunity}/> 
             </div>  
 
-            <button className="flex w-[130px] h-[35px] items-center bg-primary self-center mt-auto mb-4 rounded-3xl transition-all duration-[400] hover:bg-[#0370BEB3] gap-1.5">
+            <button className="flex h-[35px] justify-center items-center bg-primary self-center mb-4 rounded-3xl transition-all duration-[400] hover:bg-[#0370BEB3] gap-1.5 mt-auto mb-[40px] ml-4 rounded">
                 <img className="h-[18px] w-[18px]  ml-2" src='/public/assets/sidebar/logout_icon.svg' alt='logout-icon' />
-                <h3 className="text-[13px] font-sans m-0 mt-[2px]" onClick={signOut} >Logout</h3>
+                <h3 className="text-[13px] font-sans m-0 mt-[2px] sm:max-2xl:hidden" onClick={signOut} >Logout</h3>
             </button>
         </div>
      );

diff --git a/web/src/components/Dashboard/SideBarTab.tsx b/web/src/components/Dashboard/SideBarTab.tsx
@@ -1,27 +1,31 @@
 
 type SideBarTabProps = {
-    unselected: string;
-    selected: string;
-    tabName: string;
-    selectedTab: string;
-    setSelectedTab: (tab: string) => void;
-    switchPage: () => void
+  unselected: string;
+  selected: string;
+  tabName: string;
+  selectedTab: string;
+  setSelectedTab: (tab: string) => void;
+  switchPage: () => void
 };
 
 const SideBarTab: React.FC<SideBarTabProps> = ({ unselected, selected, tabName, selectedTab, setSelectedTab, switchPage }) => {
-    const baseTabStyle = "flex flex-row gap-2 items-center hover:no-underline w-[190px] h-[84px] transition-all duration-[400] mask-tab my-[-3px]"
+  const tRCorner = " before:content-[''] before:absolute before:h-[40px] before:w-[20px] before:bg-transparent before:top-[-40px] before:right-0 before:rounded-br-full before:shadow-invTR before:duration-[500ms] before:ease-in"
+  const bRCorner = " after:content-[''] after:absolute after:h-[40px] after:w-[20px] after:bg-transparent after:bottom-[-40px] after:right-0 after:rounded-tr-full after:shadow-invBR after:z-50 after:duration-[500ms] after:ease-in"
+  const baseTabStyle = "dashboard hover:no-underline w-[210px] h-[70px] transition-colors duration-[400ms] rounded-l-full relative sm:max-2xl:w-[90px]" + tRCorner + bRCorner
 
-    return (
-        <button className={selectedTab === tabName ? baseTabStyle + " bg-[#F7F7FB] text-primary" : baseTabStyle + " bg-primary hover:bg-[#ffffff40] text-white"} onClick={() => {
-            setSelectedTab(tabName)
-            switchPage()}}> 
-            <div className="w-auto h-auto">
-                <img className="w-[25px] h-[25px]" src={selectedTab === tabName ? selected : unselected} alt={tabName + " icon"} />
-            </div>
-            <h3 className="font-sans text-[14px] m-0 capitalize text-nowrap mt-[6px]">{tabName}</h3>
-        </button>
-    );
+  return (
+    <button className={selectedTab === tabName ? baseTabStyle + " bg-[#F7F7FB] text-primary": baseTabStyle + " bg-primary hover:bg-[#ffffff40] text-white rounded-r-lg after:opacity-0 before:opacity-0 before:transition-none after:transition-none"} onClick={() => {
+      setSelectedTab(tabName)
+      switchPage()
+    }}>
+      <div className="flex flex-row gap-2 items-center ml-4">
+        <img className="w-[25px] h-[25px]" src={selectedTab === tabName ? selected : unselected} alt={tabName + " icon"} />
+        <h3 className="font-sans text-[14px] m-0 capitalize text-nowrap mt-[6px] sm:max-2xl:hidden">{tabName}</h3>
+      </div>
+
+    </button>
+  );
 };
- 
+
 export default SideBarTab;
 
diff --git a/web/src/components/Dashboard/dashboardCalendar/DashboardCalendar.tsx b/web/src/components/Dashboard/dashboardCalendar/DashboardCalendar.tsx
@@ -1,6 +1,6 @@
 export default function DashboardCalendar() {
     return (
-    <div className="w-full h-screen ml-12 mr-12">
+    <div className="w-[96%] h-screen rounded">
         <iframe src="https://embed.styledcalendar.com/#5CPwvc6oq2KE7K7VCg5m" title="Styled Calendar" className="styled-calendar-container w-full h-full"  data-cy="calendar-embed-iframe"></iframe>
         <script async type="module" src="https://embed.styledcalendar.com/assets/parent-window.js"></script>
     </div>

diff --git a/web/src/components/Dashboard/dashboardProfile/DashboardProfile.tsx b/web/src/components/Dashboard/dashboardProfile/DashboardProfile.tsx
@@ -49,16 +49,15 @@ function DashboardProfile() {
         }
     }, []);
   return (
-    <div className="overflow-hidden flex flex-col w-[100%] h-screen px-5">
-
+    <div className="flex flex-col gap-6 w-[96%] h-full overflow-auto scrollbar-none">
                 {/* width of the gallery */}
-                <div className='flex flex-col bg-red-100 mb-5 h-[40%]'>
+                <div className='flex min-h-[16rem]'>
               <ProfileMyProfileHeading name={ firstName }></ProfileMyProfileHeading>
                 </div>
 
-                <div className='bg-green-100 flex flex-row justify-between gap-5 mb-5 h-[60%]'>
+                <div className='flex flex-row flex-1 gap-5'>
                     {/* adjust sizes and stuff as needed */}
-                    <div className="bg-orange-100 w-[65%] h-[700px]">
+                    <div className="flex-[4]">
                         <ProfileMyProfileOverview
                             firstName={firstName}
                             lastName={lastName}
@@ -75,7 +74,7 @@ function DashboardProfile() {
                         ></ProfileMyProfileOverview>
                     </div>
 
-                    <div className="bg-purple-100 w-[35%] h-[500px]">
+                    <div className="flex-1">
                         <ProfileMyProfileProgressBar totalHours={20} completedHours={14}></ProfileMyProfileProgressBar>
                     </div>
                 </div>

diff --git a/web/src/components/Dashboard/dashboardProfile/ProfileMyProfileHeading.tsx b/web/src/components/Dashboard/dashboardProfile/ProfileMyProfileHeading.tsx
@@ -1,7 +1,7 @@
 
 const ProfileMyProfileHeading = ({ name }: { name: string }) => {
   return (
-    <div className="dashboard shadow-lg rounded-2xl overflow-hidden w-full h-full flex flex-col relative">
+    <div className="dashboard shadow-lg rounded-xl overflow-hidden w-full h-full flex flex-col relative">
       {/* Blue header section */}
       <div className="dashboard bg-primary h-[62.5%] w-full"></div>
 
@@ -12,8 +12,8 @@ const ProfileMyProfileHeading = ({ name }: { name: string }) => {
       </div>
 
       {/* Profile image placeholder */}
-      <div className="absolute top-[145px] left-10">
-        <div className="bg-black w-[129px] h-[129px] rounded-full"></div>
+      <div className="absolute bottom-[15%] left-10">
+        <div className="bg-black w-[8rem] h-[8rem] rounded-full"></div>
       </div>
     </div>
   );