From b8c50f1bd8e0e938929e1a2f61a859768b9a3afc Mon Sep 17 00:00:00 2001
From: David Huang <davidhuang1203@hotmail.com>
Date: Fri, 26 Apr 2024 01:12:45 -0500
Subject: [PATCH 1/2] feature/change-default-event-icon

added styling to make sure the image stays circular
---
 components/shared/EventCard.tsx        |  16 ++++++++++------
 components/shared/LongEventCard.tsx    |   2 +-
 public/eventCard/book-icon.jpeg        | Bin 0 -> 2532 bytes
 styles/components/eventCard.styles.tsx |  15 +++++++++++++++
 4 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 public/eventCard/book-icon.jpeg

diff --git a/components/shared/EventCard.tsx b/components/shared/EventCard.tsx
index 3953c49f..b9025935 100644
--- a/components/shared/EventCard.tsx
+++ b/components/shared/EventCard.tsx
@@ -7,6 +7,7 @@ import Link from 'next/link';
 import {
   AddressContainer,
   AddressIcon,
+  CircularImageContainer,
   ClockIcon,
   Container,
   EventImage,
@@ -86,12 +87,15 @@ const EventCard = ({
     <Container ratio={ratio}>
       <Link href={href || ''}>
         <EventImage ratio={ratio}>
-          <Image
-            src="/eventCard/event-image.png"
-            alt="Event image icon"
-            width={`${Math.round(ratio * 138)}`}
-            height={`${Math.round(ratio * 138)}`}
-          />
+          {/* make the image circular */}
+          <CircularImageContainer ratio={ratio} size={138}>
+            <Image
+              src="/eventCard/book-icon.jpeg"
+              alt="Event image icon"
+              width={`${Math.round(ratio * 138)}`}
+              height={`${Math.round(ratio * 138)}`}
+            />
+          </CircularImageContainer>
         </EventImage>
 
         <Name ratio={ratio}>{eventData.name}</Name>
diff --git a/components/shared/LongEventCard.tsx b/components/shared/LongEventCard.tsx
index e2cb528b..887fb274 100644
--- a/components/shared/LongEventCard.tsx
+++ b/components/shared/LongEventCard.tsx
@@ -30,7 +30,7 @@ const LongEventCard = ({
     <Container>
       <EventImage>
         <Image
-          src="/eventCard/event-image.png"
+          src="/eventCard/book-icon.jpeg"
           alt="Event image icon"
           width={`${Math.round((300 / 328) * 53)}`}
           height={`${Math.round((300 / 328) * 53)}`}
diff --git a/public/eventCard/book-icon.jpeg b/public/eventCard/book-icon.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..c2a6bad67c994cc6d10d6a3420330ac6d5bac6da
GIT binary patch
literal 2532
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

literal 0
HcmV?d00001

diff --git a/styles/components/eventCard.styles.tsx b/styles/components/eventCard.styles.tsx
index 6c87f4df..f05e4873 100644
--- a/styles/components/eventCard.styles.tsx
+++ b/styles/components/eventCard.styles.tsx
@@ -75,3 +75,18 @@ export const InfoFlexChild = styled.div<RatioProp>`
   line-height: ${props => props.ratio * 22}px;
   ${Overflow};
 `;
+
+
+
+// a container that makes the image within it circular
+export const CircularImageContainer = styled.div<{
+  ratio: number;
+  size: number;
+}>`
+  border-radius: 50%;
+  // width and height are calculated based on the ratio prop
+  width: ${props => props.ratio * props.size} px;
+  height: ${props => props.ratio * props.size} px;
+
+  ${Overflow};
+`;
\ No newline at end of file

From b7de2dc7227a414ac9e1b6a5b4da4e44d7b63ee6 Mon Sep 17 00:00:00 2001
From: Harry Huang <jiashu.huang@vanderbilt.edu>
Date: Sat, 27 Apr 2024 00:31:56 -0500
Subject: [PATCH 2/2] Prettier

---
 styles/components/eventCard.styles.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/styles/components/eventCard.styles.tsx b/styles/components/eventCard.styles.tsx
index f05e4873..0b8cda9b 100644
--- a/styles/components/eventCard.styles.tsx
+++ b/styles/components/eventCard.styles.tsx
@@ -76,8 +76,6 @@ export const InfoFlexChild = styled.div<RatioProp>`
   ${Overflow};
 `;
 
-
-
 // a container that makes the image within it circular
 export const CircularImageContainer = styled.div<{
   ratio: number;
@@ -89,4 +87,4 @@ export const CircularImageContainer = styled.div<{
   height: ${props => props.ratio * props.size} px;
 
   ${Overflow};
-`;
\ No newline at end of file
+`;