changed from px to rem in styling elements

calblueprint · Oct 29, 2024 · b5275a6 · b5275a6
1 parent bb5fee7
commit b5275a6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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;
-`;