Actual new UI 2025

rpi-eventhub/frontend/src/components/Carousel/Carousel.jsx

@@ -1,41 +1,41 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
-import styles from "./Carousel.module.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import axios from "axios";
 import { Skeleton } from "@mui/material";
 import config from "../../config";
 import { DateTime } from "luxon";
+import { useColorScheme } from '../../hooks/useColorScheme';
+
 
 const placeholderImage =
   "https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/1665px-No-Image-Placeholder.svg.png";
 
-const timeZone = 'America/New_York';
+const timeZone = "America/New_York";
 
 const formatDateAsEST = (utcDateString) => {
   if (!utcDateString) return "Date not specified";
-
-  const dateTime = DateTime.fromISO(utcDateString, { zone: 'utc' }).setZone(timeZone);
-  return dateTime.toFormat('MMMM dd, yyyy');
+  const dateTime = DateTime.fromISO(utcDateString, { zone: "utc" }).setZone(timeZone);
+  return dateTime.toFormat("MMMM dd, yyyy");
 };
 
 const formatTimeAsEST = (utcDateString) => {
-  if (!utcDateString) return 'Time not specified';
-
-  const dateTime = DateTime.fromISO(utcDateString, { zone: 'utc' }).setZone(timeZone);
-  return dateTime.toFormat('h:mm a');
+  if (!utcDateString) return "Time not specified";
+  const dateTime = DateTime.fromISO(utcDateString, { zone: "utc" }).setZone(timeZone);
+  return dateTime.toFormat("h:mm a");
 };
 
 const ImageCarousel = () => {
   const [events, setEvents] = useState([]);
   const [activeIndex, setActiveIndex] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
   const intervalRef = useRef(null);
+  const { isDark } = useColorScheme();
+
 
   useEffect(() => {
     const fetchEvents = async () => {
       try {
         const response = await axios.get(`${config.apiUrl}/events`);
-
         const sortedEvents = response.data
           .map((event) => ({
             src: event.image || placeholderImage,
@@ -48,32 +48,25 @@ const ImageCarousel = () => {
             originalDate: event.startDateTime || event.date,
             likes: event.likes || 0,
           }))
-
-          .filter( a => new Date(a.originalDate) - new Date > 0)
+          .filter((a) => new Date(a.originalDate) - new Date() > 0)
           .sort((a, b) => b.likes - a.likes)
-
           .slice(0, 5);
-  
+
         setEvents(sortedEvents);
         setIsLoading(false);
       } catch (error) {
         console.error("Failed to fetch events:", error);
       }
     };
-
     fetchEvents();
   }, []);
-  
+
   const goToNext = useCallback(() => {
-    setActiveIndex((current) =>
-      current === events.length - 1 ? 0 : current + 1
-    );
+    setActiveIndex((current) => (current === events.length - 1 ? 0 : current + 1));
   }, [events.length]);
 
   const goToPrev = useCallback(() => {
-    setActiveIndex((current) =>
-      current === 0 ? events.length - 1 : current - 1
-    );
+    setActiveIndex((current) => (current === 0 ? events.length - 1 : current - 1));
   }, [events.length]);
 
   const resetTimer = useCallback(() => {
@@ -95,55 +88,67 @@ const ImageCarousel = () => {
   return (
     <div
       className="carousel"
-      onMouseEnter={pauseAutoplay} // pause carousel when on hover
+      onMouseEnter={pauseAutoplay}
       onMouseLeave={resetTimer}
+      style={{
+        backgroundColor: "#AB2328",
+        width: "100%",
+        maxWidth: "100%",
+        maxHeight: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+      }}
     >
-      <div className={styles.carousel}>
-        <div className={styles.mainImage}>
+        <div className="relative flex flex-col justify-center items-center w-4/5 mx-auto">
           {isLoading ? (
             <div>
               <Skeleton variant="rectangular" width={420} height={580} />
               <Skeleton variant="text" width={300} />
               <Skeleton variant="text" width={200} />
             </div>
-          ) : (
+          ) : ( 
             events.length > 0 && (
-              <div className={styles.carouselCard}>
-                <div className={styles.captionAbove}>
+              <div className="flex flex-col justify-center items-center w-full h-full">
+                <div className={`w-full max-w-[750px] ${isDark ? 'text-[#272727]' : 'text-[#FFFFFF]'} text-[275%] font-bold text-center p-2 px-5 mb-2 rounded-lg whitespace-nowrap overflow-hidden text-ellipsis`}   title={events[activeIndex].caption}>
                   {events[activeIndex].caption}
                 </div>
                 <button
                   onClick={() => {
                     goToPrev();
                     resetTimer();
                   }}
-                  className={styles.prevButton}
+                  className={`absolute top-1/2 -left-14 transform -translate-y-1/2 cursor-pointer z-10 p-4 text-[56px] font-bold ${isDark ? 'text-[#272727]' : 'text-[#FFFFFF]'}  bg-transparent border-none hover:scale-110 transition-transform duration-200`}
                 >
                   <i className="bi bi-chevron-left"></i>
                 </button>
-                <div className={styles.imgContainer}>
+                <div className="w-[80%] h-full flex justify-center items-center overflow-hidden">
                   <img
                     src={events[activeIndex].src}
                     alt={`Slide ${activeIndex}`}
+                    className="max-w-full max-h-full object-cover"
                   />
                 </div>
                 <button
                   onClick={() => {
                     goToNext();
                     resetTimer();
                   }}
-                  className={styles.nextButton}
+                  className={`absolute top-1/2 -right-14 transform -translate-y-1/2 cursor-pointer z-10 p-4 text-[56px] font-bold ${isDark ? 'text-[#272727]' : 'text-[#FFFFFF]'}  bg-transparent border-none hover:scale-110 transition-transform duration-200`}
                 >
                   <i className="bi bi-chevron-right"></i>
                 </button>
-                <div className={styles.captionBelow}>
+                <div
+                  className={`w-full max-w-[750px] ${isDark ? 'text-[#272727]' : 'text-[#FFFFFF]'}  text-[1.1em] font-bold text-center p-2 px-5 mt-2 rounded-lg font-[Afacad] whitespace-nowrap overflow-hidden text-ellipsis`}
+                  title={`${events[activeIndex].location} - ${events[activeIndex].date} @ ${events[activeIndex].time}`}
+                >
                   {`${events[activeIndex].location} - ${events[activeIndex].date} @ ${events[activeIndex].time}`}
                 </div>
               </div>
             )
           )}
         </div>
-      </div>
     </div>
   );
 };

rpi-eventhub/frontend/src/components/EventCard/EventCard.jsx

@@ -17,6 +17,12 @@ const VERIFIED = 2;
 const OFFICER = 3;
 const ADMIN = 4;
 
+const decodeHtml = (str = "") => {
+  const txt = document.createElement("textarea");
+  txt.innerHTML = str;
+  return txt.value;
+};
+
 
 const EventCard = ({ event, isLiked, onSelect, selected, showEditButton, onEdit, onTagClick, selectedTags = [] }) => {
   const {isLoggedIn} = useAuth();
@@ -143,11 +149,11 @@ const EventCard = ({ event, isLiked, onSelect, selected, showEditButton, onEdit,
         </button>
       )}
       <div className={styles.eventDetails}>
-        <h2>{event.title}</h2>
-        <p>{event.description}</p>
+        <h2>{decodeHtml(event.title || "")}</h2>
+        <p>{decodeHtml(event.description || "")}</p>
         <p><strong>Date & Time:</strong> {`${eventTime} on ${eventDate}`}</p>
-        <p><strong>Location:</strong> {event.location || "Location not specified"}</p>
-        <div className={styles.tags}>
+        <p><strong>Location:</strong> {event.location ? decodeHtml(event.location) : "Location not specified"}</p>
+        <div className={styles['tag-container']}>
           {event.tags && event.tags.length > 0 ? (
             event.tags.map(tag => (
               <span 
@@ -156,7 +162,7 @@ const EventCard = ({ event, isLiked, onSelect, selected, showEditButton, onEdit,
                 onClick={() => handleTagClick(tag)}
                 style={{ cursor: 'pointer' }}
               >
-                {tag}
+                {decodeHtml(tag || "")}
               </span>
             ))
           ) : (