From 630ea7d32fd9e9a756d17d602fc600d871052143 Mon Sep 17 00:00:00 2001
From: TheMaddax <chris@sigd.net>
Date: Mon, 14 Oct 2024 20:27:39 -0500
Subject: [PATCH] Fixed home, calendar, and mobile elements

---
 client/src/components/Calendar.tsx  | 10 ++++------
 client/src/components/EventCard.tsx |  2 +-
 client/src/components/Home.tsx      |  9 ++++-----
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Calendar.tsx b/client/src/components/Calendar.tsx
index 5b19a04..e4b0f21 100644
--- a/client/src/components/Calendar.tsx
+++ b/client/src/components/Calendar.tsx
@@ -16,13 +16,11 @@ export const formatDateRange = (startDate: string, startTime: string, endDate: s
   const end = parseISO(`${endDate}T${endTime}`);
 
   if (isSameDay(start, end)) {
-    return `${format(start, 'MMMM d, yyyy')} ${formatTime(startDate, startTime)} - ${formatTime(endDate, endTime)}`;
+    return `${format(start, 'MMMM d, yyyy')}\n${formatTime(startDate, startTime)} - ${formatTime(endDate, endTime)}`;
   } else {
-    return `${format(start, 'MMMM d, yyyy h:mm a')} - ${format(end, 'MMMM d, yyyy h:mm a')}`;
+    return `${format(start, 'MMMM d, yyyy')}\n${formatTime(startDate, startTime)} - ${format(end, 'MMMM d, yyyy')}\n${formatTime(endDate, endTime)}`;
   }
-};
-
-const EventPopup: React.FC<{ event: Event; position: { top: number; left: number }; onClose: () => void }> = ({ event, position, onClose }) => (
+};const EventPopup: React.FC<{ event: Event; position: { top: number; left: number }; onClose: () => void }> = ({ event, position, onClose }) => (
   <motion.div
     initial={{ opacity: 0, y: -20 }}
     animate={{ opacity: 1, y: 0 }}
@@ -35,7 +33,7 @@ const EventPopup: React.FC<{ event: Event; position: { top: number; left: number
       onClick={(e) => e.stopPropagation()}
     >
       <h3 className="font-bold text-lg">{event.title}</h3>
-      <p className="text-sm">{formatDateRange(event.date, event.startTime, event.date, event.endTime)}</p>
+      <p className="text-sm whitespace-pre-line">{formatDateRange(event.date, event.startTime, event.date, event.endTime)}</p>
       <p className="text-sm mt-2">{event.description}</p>
       <p className="text-sm mt-2">Contact: <a href={`mailto:${event.email}`} className="text-blue-500 hover:underline">{event.pointOfContact}</a></p>
     </motion.div>
diff --git a/client/src/components/EventCard.tsx b/client/src/components/EventCard.tsx
index f84b657..e0d70e3 100644
--- a/client/src/components/EventCard.tsx
+++ b/client/src/components/EventCard.tsx
@@ -15,7 +15,7 @@ const EventCard: React.FC<EventCardProps> = ({ event }) => {
       className="bg-white rounded-lg shadow-md p-4 w-full max-w-xs"
     >
       <h3 className="font-bold text-lg text-[#8C1D40] mb-2">{event.title}</h3>
-      <p className="text-sm text-gray-600 mb-2">{event.formattedDateRange}</p>
+      <p className="text-sm text-gray-600 mb-2 whitespace-pre-line">{event.formattedDateRange}</p>
       <p className="text-sm mb-2">{event.description}</p>
       <p className="text-sm">Contact: <a href={`mailto:${event.email}`} className="text-blue-500 hover:underline">{event.pointOfContact}</a></p>
     </motion.div>
diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index f778aa9..d4237c8 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -34,9 +34,8 @@ const Home: React.FC = () => {
         <h1 className="text-3xl md:text-4xl font-bold text-[#8C1D40] mb-8 text-center">Welcome to MCDi</h1>
         
         <ImageCarousel />
-        
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          <div className="space-y-8">
+        <div className="flex flex-col lg:flex-row gap-8">
+          <div className="lg:w-1/2 flex flex-col gap-8">
             <InfoCard
               title="Empowering Deaf Culture and Community"
               content="We're proud to be the Missoula Council of the Deaf, Inc. (MCDi) in the heart of Missoula, Montana. Our organization is dedicated to promoting Deaf culture, community, and systematic change in our beautiful state."
@@ -46,7 +45,7 @@ const Home: React.FC = () => {
               content="Just as Montana's vast landscapes showcase breathtaking vistas, our Deaf community brings unique perspectives and experiences to the table. We're proud to celebrate Deaf culture, language, and traditions that enrich our human kaleidoscope."
             />
           </div>
-          <div>
+          <div className="lg:w-1/2">
             <h2 className="text-2xl font-semibold text-[#8C1D40] mb-4">Upcoming Events</h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               {upcomingEvents.map((event, index) => (
@@ -91,4 +90,4 @@ const InfoCard: React.FC<{ title: string; content: string }> = ({ title, content
   </motion.div>
 );
 
-export default Home;
+export default Home;
\ No newline at end of file