From 46822831565aaf3bd58581ebf6a79b8895c0cf04 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:33:46 -0500
Subject: [PATCH] style: match upcoming events to other styles

---
 components/calendar/CalendarEvent.tsx  | 18 +++++++-----------
 components/calendar/CalendarMonth.tsx  |  9 +++++++--
 components/calendar/CalendarWeekly.tsx |  2 +-
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/components/calendar/CalendarEvent.tsx b/components/calendar/CalendarEvent.tsx
index 4715302..13877e1 100644
--- a/components/calendar/CalendarEvent.tsx
+++ b/components/calendar/CalendarEvent.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { DataProps } from "@/components/EventSection"
-import { ClockIcon } from "@heroicons/react/20/solid"
+import { ArrowTopRightOnSquareIcon, ClockIcon } from "@heroicons/react/20/solid"
 
 const CalendarEvent: React.FC<DataProps> = ({
   date_time,
@@ -17,23 +17,19 @@ const CalendarEvent: React.FC<DataProps> = ({
     ", " +
     date
   return (
-    <div className="bg-gray-50 p-4">
-      <div className="text-neutral-900 text-sm">{normalDate}</div>
+    <div className="bg-gray-50 p-4 space-y-2">
+      <div className="text-neutral-900 font-semibold text-sm">{normalDate}</div>
       <div>
         <a
-          className="text-xl font-bold text-secondary-blue-500 no-underline leading-4"
+          className="text-2xl font-bold text-secondary-blue-500 no-underline hover:underline leading-6"
           href={url}
           target="_blank"
         >
-          {" "}
-          {title}{" "}
+          <p>{title}</p>
         </a>
       </div>
-      <div className="flex items-center text-primary-500 text-xs">
-        <ClockIcon
-          className="mr-2 h-4 w-4 text-primary-500"
-          aria-hidden="true"
-        />
+      <div className="flex items-center text-primary-500 text-sm">
+        <ClockIcon className="mr-2 h-4 w-4" aria-hidden="true" />
         {date_time}
       </div>
       <div className="py-2">{description_long && <p>{descriptionLong}</p>}</div>
diff --git a/components/calendar/CalendarMonth.tsx b/components/calendar/CalendarMonth.tsx
index 5a8bea0..c3df18a 100644
--- a/components/calendar/CalendarMonth.tsx
+++ b/components/calendar/CalendarMonth.tsx
@@ -104,7 +104,7 @@ const CalendarMonth: React.FC<CalendarProps> = ({
     const formattedCalEvents = validDayEvents.map((event: DataProps) => {
       return (
         <li key={self.crypto.randomUUID()}>
-          <TooltipProvider className="group flex">
+          <TooltipProvider>
             <Tooltip>
               <TooltipTrigger className="rounded-md max-w-[100%] px-2 hover:bg-neutral-50">
                 <p className="flex-auto min-w-0 truncate font-medium text-secondary-blue-700">
@@ -115,6 +115,7 @@ const CalendarMonth: React.FC<CalendarProps> = ({
                 <p className="font-semibold pb-2">{event.date}</p>
                 <a
                   href={event.url}
+                  target="_blank"
                   className="flex gap-1 text-secondary-blue-500"
                 >
                   <p className="font-semibold hover:underline">{event.title}</p>
@@ -148,7 +149,11 @@ const CalendarMonth: React.FC<CalendarProps> = ({
           className="group flex p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50"
         >
           <div className="flex-auto">
-            <a href={event.url} className="flex gap-1 text-secondary-blue-500">
+            <a
+              href={event.url}
+              target="_blank"
+              className="flex gap-1 text-secondary-blue-500"
+            >
               <p className="font-semibold hover:underline">{event.title}</p>
               <ArrowTopRightOnSquareIcon
                 className="mr-2 h-4 w-4"
diff --git a/components/calendar/CalendarWeekly.tsx b/components/calendar/CalendarWeekly.tsx
index 9702c29..269293f 100644
--- a/components/calendar/CalendarWeekly.tsx
+++ b/components/calendar/CalendarWeekly.tsx
@@ -188,7 +188,7 @@ const CalendarWeekly: React.FC<CalendarProps> = ({
             className="sticky top-0 z-30 flex-none bg-gray border-white shadow ring-1 ring-black ring-opacity-5 sm:pr-8"
           >
             <div className="-mr-px hidden grid-cols-7 divide-x divide-gray-100 border-r border-white text-sm leading-6 text-gray-500 sm:grid">
-              <div className="col-end-1 w-14" />
+              <div className="col-end-1 w-14 bg-white" />
               {generateDatesForCurrentWeek(
                 activeDate,
                 selectedDate,