+
- {title}
- {description}
+
+ {title}
+
-
+
See all events >
-
- {events.map(event => (
- a.event.uuid === event.uuid)}
- />
- ))}
-
+ {events.length > 0 ? (
+
+ {events.map(event => (
+ a.event.uuid === event.uuid)}
+ />
+ ))}
+
+ ) : (
+
+
+ {placeholder}
+
+ )}
);
};
diff --git a/src/components/events/EventCarousel/style.module.scss b/src/components/events/EventCarousel/style.module.scss
index 36eec5d4..4025e29a 100644
--- a/src/components/events/EventCarousel/style.module.scss
+++ b/src/components/events/EventCarousel/style.module.scss
@@ -1,8 +1,14 @@
@use 'src/styles/vars.scss' as vars;
.wrapper {
+ background-color: var(--theme-elevated-background);
+ border: 1px solid var(--theme-elevated-stroke);
+ border-radius: 0.75rem;
display: flex;
+ flex: 1;
flex-direction: column;
+ overflow: hidden;
+ padding: 2rem;
.header {
align-items: center;
@@ -32,6 +38,25 @@
.card {
flex: none;
- width: 20rem;
+ height: auto;
+ // (2 rem (content) + 1.5rem (carousel)) * 2 (on both sides) + 2 rem (gap) = 9 rem
+ // We then add 1 more rem so we can see the start of the next card.
+ width: min(100vw - 10rem, 20rem);
+ }
+
+ .noEvents {
+ align-items: center;
+ background-color: var(--theme-background);
+ border: 1px solid var(--theme-elevated-stroke);
+ border-radius: 0.75rem;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ gap: 1rem;
+ justify-content: center;
+ margin-top: 1rem;
+ overflow: hidden;
+ padding: 2rem 1rem;
+ text-align: center;
}
}
diff --git a/src/components/events/EventCarousel/style.module.scss.d.ts b/src/components/events/EventCarousel/style.module.scss.d.ts
index 66c2f015..72938a3f 100644
--- a/src/components/events/EventCarousel/style.module.scss.d.ts
+++ b/src/components/events/EventCarousel/style.module.scss.d.ts
@@ -2,6 +2,7 @@ export type Styles = {
card: string;
header: string;
headerText: string;
+ noEvents: string;
viewToggle: string;
wrapper: string;
};
diff --git a/src/components/events/EventDetail/index.tsx b/src/components/events/EventDetail/index.tsx
new file mode 100644
index 00000000..d13ca026
--- /dev/null
+++ b/src/components/events/EventDetail/index.tsx
@@ -0,0 +1,88 @@
+import { Typography } from '@/components/common';
+import CalendarButtons from '@/components/events/CalendarButtons';
+import EventBadges from '@/components/events/EventBadges';
+import { config } from '@/lib';
+import { PublicEvent, PublicOrderPickupEvent } from '@/lib/types/apiResponses';
+import { formatEventDate, getDefaultEventCover, isOrderPickupEvent } from '@/lib/utils';
+import CloseIcon from '@/public/assets/icons/close-icon.svg';
+import Image from 'next/image';
+import Link from 'next/link';
+import { VscFeedback } from 'react-icons/vsc';
+import styles from './style.module.scss';
+
+interface EventDetailProps {
+ event: PublicEvent | PublicOrderPickupEvent;
+ attended: boolean;
+ inModal?: boolean;
+}
+
+const EventDetail = ({ event, attended, inModal = false }: EventDetailProps) => {
+ const { cover, title, start, end, location, description } = isOrderPickupEvent(event)
+ ? {
+ ...(event.linkedEvent ?? {}),
+ ...event,
+ }
+ : event;
+
+ const displayCover = getDefaultEventCover(cover);
+ const isUpcomingEvent = new Date(start) > new Date();
+
+ let buttons = null;
+ if (!isOrderPickupEvent(event)) {
+ if (isUpcomingEvent) {
+ buttons =
;
+ } else if (inModal) {
+ buttons = (
+
+
+ Add Feedback
+
+ );
+ }
+ }
+
+ return (
+
+ {inModal ? (
+
+ ) : null}
+
+
+
+
+
+
+
+ {title}
+
+
+ {formatEventDate(start, end, true)}
+
+
+ {location}
+
+
+
+
+
+ {buttons}
+
+
+
+ {description}
+
+
+ );
+};
+
+export default EventDetail;
diff --git a/src/components/events/EventDetail/style.module.scss b/src/components/events/EventDetail/style.module.scss
new file mode 100644
index 00000000..9d8ae791
--- /dev/null
+++ b/src/components/events/EventDetail/style.module.scss
@@ -0,0 +1,178 @@
+@use 'src/styles/vars.scss' as vars;
+
+.container {
+ display: grid;
+ gap: 2.5rem;
+ grid-template-areas:
+ 'image header'
+ 'description description';
+ grid-template-columns: 1fr minmax(30rem, 1fr);
+ padding: 2.5rem;
+ position: relative;
+ width: 80vw;
+
+ &.standalone {
+ padding: 0;
+ width: auto;
+ }
+
+ .image {
+ aspect-ratio: 1920 / 1080;
+ border-radius: 10px;
+ flex-shrink: 0;
+ grid-area: image;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+ }
+
+ @media screen and (width <= vars.$breakpoint-lg) {
+ grid-row-gap: 2.5rem;
+ grid-template-areas:
+ 'image'
+ 'header'
+ 'description';
+ grid-template-columns: 1fr;
+ max-width: unset;
+ padding: 0;
+ padding-bottom: 2.5rem;
+
+ .header,
+ .description {
+ padding: 0 2.5rem;
+ width: 100%;
+
+ &.standalone {
+ padding: 0;
+ }
+ }
+
+ .image {
+ border-radius: 10px 10px 0 0;
+
+ &.standalone {
+ border-radius: 10px;
+ }
+ }
+ }
+
+ @media screen and (width <= vars.$breakpoint-md) {
+ grid-row-gap: 1.5rem;
+ padding-bottom: 1.5rem;
+ width: 100vw;
+
+ .header,
+ .description {
+ padding: 0 1.5rem;
+ width: 100%;
+ }
+ }
+
+ .close {
+ align-items: center;
+ backdrop-filter: blur(1px);
+ background-color: vars.$dark-accent-line-2-transparent;
+ border-radius: 50%;
+ display: flex;
+ padding: 0.25rem;
+ position: absolute;
+ right: 1.5rem;
+ top: 1.5rem;
+ transition: background-color 0.2s;
+ z-index: 100;
+
+ @media screen and (width <= vars.$breakpoint-md) {
+ right: 0.75rem;
+ top: 0.75rem;
+ }
+
+ .closeIcon {
+ fill: vars.$light-background;
+ }
+
+ &:hover {
+ background-color: var(--theme-accent-line-1-transparent);
+ }
+ }
+
+ .header,
+ .description {
+ gap: 2.5rem;
+ }
+
+ .header {
+ align-self: center;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ gap: 1rem;
+ grid-area: header;
+
+ @media screen and (width <= vars.$breakpoint-md) {
+ flex-wrap: wrap;
+ gap: 1.5rem;
+ }
+
+ .eventTitle,
+ .eventDetails {
+ white-space: pre-wrap;
+ word-break: break-word;
+ }
+
+ @media screen and (width <= vars.$breakpoint-md) {
+ .eventTitle {
+ font-size: 1.5rem !important;
+ line-height: 2rem !important;
+ }
+
+ .eventInfo {
+ font-size: 1rem !important;
+ line-height: 1.5rem !important;
+ }
+ }
+
+ .eventDetails {
+ align-items: flex-start;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 1rem;
+
+ .badges {
+ gap: 0.5rem;
+ margin-top: 0.5rem;
+
+ > div {
+ font-size: 1rem !important;
+ padding: 0.25rem 0.5rem;
+
+ @media screen and (width <= vars.$breakpoint-md) {
+ font-size: 0.75rem !important;
+ }
+ }
+ }
+ }
+
+ .feedbackBtn {
+ align-items: center;
+ align-self: flex-start;
+ background-color: var(--theme-elevated-background);
+ border: 1px solid var(--theme-elevated-stroke);
+ border-radius: 10px;
+ display: flex;
+ gap: 0.5rem;
+ justify-content: flex-start;
+ padding: 0.75rem;
+ transition: all 0.2s;
+
+ &:hover {
+ background: var(--theme-surface-2);
+ }
+ }
+ }
+
+ .description {
+ grid-area: description;
+ white-space: pre-wrap;
+ }
+}
diff --git a/src/components/events/EventDetail/style.module.scss.d.ts b/src/components/events/EventDetail/style.module.scss.d.ts
new file mode 100644
index 00000000..a7953af3
--- /dev/null
+++ b/src/components/events/EventDetail/style.module.scss.d.ts
@@ -0,0 +1,20 @@
+export type Styles = {
+ badges: string;
+ close: string;
+ closeIcon: string;
+ container: string;
+ description: string;
+ eventDetails: string;
+ eventInfo: string;
+ eventTitle: string;
+ feedbackBtn: string;
+ header: string;
+ image: string;
+ standalone: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;
diff --git a/src/components/events/EventDisplay/style.module.scss b/src/components/events/EventDisplay/style.module.scss
index 641eb607..50cadbe5 100644
--- a/src/components/events/EventDisplay/style.module.scss
+++ b/src/components/events/EventDisplay/style.module.scss
@@ -1,5 +1,7 @@
.container {
- display: flex;
- flex-wrap: wrap;
- gap: 1rem;
+ column-gap: 1rem;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ place-items: center;
+ row-gap: 2rem;
}
diff --git a/src/components/events/EventModal/index.tsx b/src/components/events/EventModal/index.tsx
index 6632b957..bc8c570c 100644
--- a/src/components/events/EventModal/index.tsx
+++ b/src/components/events/EventModal/index.tsx
@@ -1,12 +1,6 @@
-import { CommunityLogo, Modal, Typography } from '@/components/common';
-import CalendarButtons from '@/components/events/CalendarButtons';
-import PointsDisplay from '@/components/events/PointsDisplay';
+import { Modal } from '@/components/common';
+import EventDetail from '@/components/events/EventDetail';
import { PublicEvent } from '@/lib/types/apiResponses';
-import { formatEventDate } from '@/lib/utils';
-import LinkIcon from '@/public/assets/icons/link.svg';
-import Image from 'next/image';
-import Link from 'next/link';
-import styles from './style.module.scss';
interface EventModalProps {
open: boolean;
@@ -16,61 +10,9 @@ interface EventModalProps {
}
const EventModal = ({ open, attended, event, onClose }: EventModalProps) => {
- const { cover, title, start, end, location, description, eventLink } = event;
-
- const displayCover = cover || '/assets/graphics/store/hero-photo.jpg';
- const formattedEventLink = eventLink?.includes('https://') ? eventLink : `https://${eventLink}`;
- const displayEventLink = eventLink
- ? formattedEventLink
- : `https://acmucsd.com/events/${event.uuid}`;
-
return (
-
-
-
-
-
-
-
-
- {title}
-
-
- {formatEventDate(start, end, true)}
-
-
- {location}
-
-
-
-
-
-
-
-
{description}
-
-
-
-
-
- {displayEventLink}
-
-
-
+
+ Received
+
+ );
+ } else if (status === FeedbackStatus.ACKNOWLEDGED) {
+ badge = (
+
+
+ Acknowledged
+
+ );
+ } else {
+ badge = (
+
+
+ Ignored
+
+ );
+ }
+
+ return (
+
+ {showUser || showEvent ? (
+
+ {showUser ? (
+
+
+
+ {feedback.user.firstName} {feedback.user.lastName}
+
+
+ ) : null}
+ {showUser && showEvent ? for : null}
+ {showEvent ? (
+
+
+ {feedback.event.title}
+
+ ) : null}
+
+ ) : null}
+
+
+
+ {feedback.description}
+
+ {feedback.source ? (
+
+ Where did you hear about this event? {feedback.source}
+
+ ) : null}
+
+
+ · {feedbackTypeNames[feedback.type]}
+
+
+ {responseToken !== null && status === FeedbackStatus.SUBMITTED ? (
+
+
+
+
+ ) : (
+ badge
+ )}
+
+