🔧 Fixed some styling issues + added hover effects

UoaWDCC · Jul 11, 2024 · 49a1142 · 49a1142
1 parent ed3092c
commit 49a1142
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 24 deletions.
diff --git a/web/src/components/PastEventCard.tsx b/web/src/components/PastEventCard.tsx
@@ -9,11 +9,11 @@ interface PastEventCardProps {
 
 const PastEventCard: React.FC<PastEventCardProps> = ({ pastEvent }) => {
   return (
-    <div className="card flex h-full w-full flex-col rounded-3xl bg-white shadow-lg md:flex-row">
+    <div className="card flex h-full w-full flex-col rounded-3xl bg-white shadow-md md:flex-row hover:bg-black/5 duration-100">
       <img
         src={pastEvent.image}
         alt={pastEvent.title}
-        className="h-fit w-full rounded-t-3xl object-cover md:h-full md:w-64 md:rounded-l-3xl md:rounded-t-none"
+        className="h-fit w-full rounded-t-3xl object-cover md:h-full md:w-64 md:rounded-l-xl md:rounded-t-xl"
       />
       <div className="card-body flex flex-grow flex-col gap-4 p-4 text-gray-500">
         <h5 className="card-title text-lg font-bold text-black">

diff --git a/web/src/components/SimpleSlider.tsx b/web/src/components/SimpleSlider.tsx
@@ -55,38 +55,38 @@ const SimpleSlider: React.FC<SimpleSliderProps> = ({ children, cardType }) => {
     <div className="flex w-full items-center justify-center">
       <IoArrowBackCircleOutline
         onClick={previous}
-        className="mx-4 hidden h-16 w-16 sm:flex"
+        className="mx-4 hidden h-16 w-16 sm:flex text-gray-400 hover:cursor-pointer"
       />
       <div className="h-auto w-full sm:w-[calc(100%-8rem)]">
         <Slider ref={sliderRef} {...settings}>
           {cardType === "past"
             ? React.Children.toArray(children)
-                .reduce((acc: any, child: any, index: number) => {
-                  if (index % 3 === 0) acc.push([]);
-                  acc[acc.length - 1].push(child);
-                  return acc;
-                }, [])
-                .map((group: any, index: number) => (
-                  <div key={index} className="p-2">
-                    <div className="flex flex-col">
-                      {group.map((child: any, subIndex: number) => (
-                        <div key={subIndex} className="p-2">
-                          {child}
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                ))
-            : React.Children.map(children, (child, index) => (
+              .reduce((acc: any, child: any, index: number) => {
+                if (index % 3 === 0) acc.push([]);
+                acc[acc.length - 1].push(child);
+                return acc;
+              }, [])
+              .map((group: any, index: number) => (
                 <div key={index} className="p-2">
-                  {child}
+                  <div className="flex flex-col">
+                    {group.map((child: any, subIndex: number) => (
+                      <div key={subIndex} className="p-2">
+                        {child}
+                      </div>
+                    ))}
+                  </div>
                 </div>
-              ))}
+              ))
+            : React.Children.map(children, (child, index) => (
+              <div key={index} className="p-2">
+                {child}
+              </div>
+            ))}
         </Slider>
       </div>
       <IoArrowForwardCircleOutline
         onClick={next}
-        className="mx-4 hidden h-16 w-16 sm:flex"
+        className="mx-4 hidden h-16 w-16 sm:flex text-gray-400 hover:cursor-pointer"
       />
     </div>
   );

diff --git a/web/src/components/UpcomingEventCard.tsx b/web/src/components/UpcomingEventCard.tsx
@@ -27,7 +27,7 @@ const UpcomingEventCard: React.FC<UpcomingEventCardProps> = ({
     timeUntilEvent = `${differenceInMinutes} minute${differenceInMinutes > 1 ? "s" : ""}`;
   }
   return (
-    <div className="card relative h-full w-full rounded-lg bg-white shadow-md">
+    <div className="card relative h-full w-full rounded-lg bg-white shadow-md hover:bg-white/80 duration-100">
       <div className="absolute right-2 top-2 z-10 rounded-full bg-orange-500 px-3 py-1 text-base font-bold text-white shadow-sm">
         in {timeUntilEvent}
       </div>