From b5275a6f4b2c85193882415f6c2fcfb28a766fc5 Mon Sep 17 00:00:00 2001
From: aidenm1 <aidengmathew@gmail.com>
Date: Tue, 29 Oct 2024 01:44:30 -0700
Subject: [PATCH] changed from px to rem in styling elements

---
 app/events/page.style.ts               | 10 +++++-----
 components/MyEventCard/MyEventCard.tsx |  6 +++---
 components/MyEventCard/style.ts        | 11 ++---------
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/app/events/page.style.ts b/app/events/page.style.ts
index 64312fd..0e34f89 100644
--- a/app/events/page.style.ts
+++ b/app/events/page.style.ts
@@ -20,22 +20,22 @@ export const Page = styled.main`
 `;
 
 export const AllEventsHolder = styled.main`
-  padding: 24px;
+  padding: 1.5rem;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 1.5rem;
 `;
 
 export const Title = styled(H3)`
   font-style: normal;
   line-height: normal;
-  height: 50px;
+  height: 3.125rem;
 `;
 
 export const MonthYear = styled(H6)`
   font-style: normal;
   line-height: normal;
-  gap: 24px;
+  gap: 1.5rem;
   display: flex;
-  margin-top: 24px;
+  margin-top: 1.5rem;
 `;
diff --git a/components/MyEventCard/MyEventCard.tsx b/components/MyEventCard/MyEventCard.tsx
index cbda095..010f078 100644
--- a/components/MyEventCard/MyEventCard.tsx
+++ b/components/MyEventCard/MyEventCard.tsx
@@ -8,12 +8,12 @@ export default function MyEventCard(eventData: Event) {
   const eventStart = new Date(eventData.start_date_time);
   const eventEnd = new Date(eventData.end_date_time);
 
+  // function to remove 00 from time if time is on the hour, ex: 4:00 PM -> 4 PM
   const formatTime = (date: Date) => {
-    const hour = date.toLocaleTimeString([], { hour: 'numeric', hour12: true });
     const minutes = date.getMinutes();
 
     return minutes === 0
-      ? hour
+      ? date.toLocaleTimeString([], { hour: 'numeric', hour12: true })
       : date.toLocaleTimeString([], {
           hour: 'numeric',
           minute: '2-digit',
@@ -56,7 +56,7 @@ export default function MyEventCard(eventData: Event) {
             placeholder
           </styles.EventDescriptionText>
           <styles.LocationText
-            $fontWeight="500"
+            $fontWeight="400"
             $color={COLORS.gray10}
             $align="left"
           >
diff --git a/components/MyEventCard/style.ts b/components/MyEventCard/style.ts
index c563584..777ba6b 100644
--- a/components/MyEventCard/style.ts
+++ b/components/MyEventCard/style.ts
@@ -14,11 +14,11 @@ export const BPImage = styled(NextImage)`
 export const EventContainer = styled.main`
   margin: auto;
   width: 100%;
-  padding-top: 24px;
+  padding-top: 1.5rem;
 `;
 export const EventCardContainer = styled.main`
   width: 100%;
-  padding: 16px;
+  padding: 1rem;
   background: ${COLORS.bread1};
   border-radius: 8px;
   display: flex;
@@ -43,10 +43,3 @@ export const LocationText = styled(SMALLER)`
   font-style: normal;
   line-height: normal;
 `;
-
-export const EventModalBox = styled.main`
-  display: flex;
-  width: 80%;
-  padding: 24px;
-  gap: 24px;
-`;