Merge pull request #94 from ChangePlusPlusVandy/feature/change-defaul…

…t-event-icon feature/change-default-event-icon
ChangePlusPlusVandy · Apr 27, 2024 · ae45ae0 · ae45ae0
2 parents 3591a32 + b7de2dc
commit ae45ae0
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 7 deletions.
diff --git 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
@@ -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
diff --git a/styles/components/eventCard.styles.tsx b/styles/components/eventCard.styles.tsx
@@ -75,3 +75,16 @@ 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};
+`;