Updates modal styling.

Life-Itself-Conference · Jul 12, 2023 · 701021c · 701021c
1 parent a79bd9f
commit 701021c
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 20 deletions.
diff --git a/src/components/atoms/Modal/Modal.css.ts b/src/components/atoms/Modal/Modal.css.ts
@@ -12,11 +12,12 @@ export const wrapper = style({
 });
 
 export const dialog = style({
+  alignItems: 'center',
   backgroundColor: theme.colors.black,
   border: 0,
   color: theme.colors.white,
   display: 'grid',
-  gridTemplateRows: 'auto 1fr',
+  gridTemplateColumns: '1fr 1fr',
   height: '100%',
   margin: 0,
   maxHeight: '100%',
@@ -73,9 +74,12 @@ globalStyle(`${dialog}::backdrop`, {
 export const header = style({
   alignItems: 'center',
   display: 'flex',
-  justifyContent: 'space-between',
+  justifyContent: 'flex-end',
   paddingBlock: theme.spacing.small,
   paddingInline: theme.spacing.medium,
+  position: 'absolute',
+  top: 0,
+  width: '100%',
 
   '@media': {
     [queries.large]: {
@@ -105,21 +109,18 @@ export const close = style({
   justifyContent: 'center',
   width: theme.spacing.large,
   zIndex: 1,
+});
 
-  '@media': {
-    [queries.large]: {
-      position: 'absolute',
-      right: theme.spacing.small,
-      top: theme.spacing.small,
-    },
-  },
+export const image = style({
+  width: '100%',
 });
 
 export const content = style({
   display: 'flex',
   flexDirection: 'column',
   overflow: 'auto',
   padding: `${theme.spacing.large} ${theme.spacing.large}`,
+  textAlign: 'center',
 });
 
 globalStyle(`${variant.condensed} ${content}`, {

diff --git a/src/components/atoms/Modal/index.tsx b/src/components/atoms/Modal/index.tsx
@@ -1,5 +1,6 @@
 import type { Document } from '@contentful/rich-text-types';
 import type { Asset } from 'contentful';
+import { useEffect, useRef } from 'react';
 import { FaTimes } from 'react-icons/fa/index.js';
 import { RichText } from '../RichText';
 import * as styles from './Modal.css';
@@ -12,16 +13,37 @@ export interface ModalProps {
 }
 
 export const Modal = ({ description, image, onClose, title }: ModalProps) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClick = (e: any) => {
+      if (
+        e.target === modalRef ||
+        modalRef.current?.contains(e.target as Node)
+      ) {
+        return;
+      }
+
+      onClose?.();
+    };
+
+    document.addEventListener('pointerdown', handleClick);
+
+    return () => {
+      document.removeEventListener('pointerdown', handleClick);
+    };
+  }, [onClose]);
+
   return (
     <dialog className={styles.wrapper} open>
-      <div className={styles.dialog}>
+      <div className={styles.dialog} ref={modalRef}>
         <header className={styles.header}>
           <button className={styles.close} onClick={onClose} type="button">
             <FaTimes />
           </button>
         </header>
+        <img alt="" className={styles.image} src={image.fields.file.url} />
         <div className={styles.content}>
-          <img alt="" src={image.fields.file.url} />
           <h2>{title}</h2>
           <RichText field={description} />
         </div>

diff --git a/src/components/organisms/Header/index.tsx b/src/components/organisms/Header/index.tsx
@@ -23,7 +23,7 @@ export const Header = (props: HeaderProps) => {
 
   return (
     <header className={styles.header}>
-      <a className={styles.logo} onClick={handleLinkClick} href="#">
+      <a className={styles.logo} onClick={handleLinkClick} href="/">
         <span>Life Itself</span>
       </a>
       <button

diff --git a/src/components/organisms/HeroSection/HeroSection.css.ts b/src/components/organisms/HeroSection/HeroSection.css.ts
@@ -47,6 +47,9 @@ export const grid = style({
 });
 
 export const content = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing.small,
   order: 3,
   marginBottom: theme.spacing.medium,
 
@@ -59,6 +62,13 @@ export const content = style({
   },
 });
 
+export const announcement = style({
+  color: theme.colors.red,
+  cursor: 'pointer',
+  fontSize: theme.fontSizes.small,
+  fontWeight: 'bold',
+});
+
 export const image = style({
   marginInline: 'auto',
   maxWidth: 536,

diff --git a/src/components/organisms/HeroSection/index.tsx b/src/components/organisms/HeroSection/index.tsx
@@ -23,9 +23,12 @@ export const HeroSection = (props: HeroSectionProps) => {
           <div className={styles.content}>
             {props.event.fields.announcementModal && (
               <>
-                <p onClick={() => setIsAnnouncementModalOpen(true)}>
+                <strong
+                  className={styles.announcement}
+                  onClick={() => setIsAnnouncementModalOpen(true)}
+                >
                   {props.event.fields.announcementModal.fields.title}
-                </p>
+                </strong>
                 {isAnnouncementModalOpen && (
                   <Modal
                     onClose={() => setIsAnnouncementModalOpen(false)}

diff --git a/src/components/organisms/Layout/index.tsx b/src/components/organisms/Layout/index.tsx
@@ -35,9 +35,9 @@ export const Layout = (props: LayoutProps) => {
       <Header event={event} />
       <main>
         <HeroSection event={event} />
-        <SpeakersSection event={props.event} />
-        <LocationSection event={event} />
-        <PartnersSection event={event} />
+        <SpeakersSection event={props.event} isPastEvent={props.isPastEvent} />
+        <LocationSection event={event} isPastEvent={props.isPastEvent} />
+        <PartnersSection event={event} isPastEvent={props.isPastEvent} />
         <AboutUsSection event={event} />
       </main>
       <Footer event={event} />
@@ -50,4 +50,5 @@ export const Layout = (props: LayoutProps) => {
 
 export interface LayoutProps {
   event: Entry<Event>;
+  isPastEvent?: boolean;
 }
diff --git a/src/components/organisms/LocationSection/index.tsx b/src/components/organisms/LocationSection/index.tsx
@@ -15,7 +15,9 @@ export const LocationSection = (props: LocationSectionProps) => {
       className={styles.container}
       contentClassName={styles.content}
       id="location"
-      title="Location"
+      title={
+        props.isPastEvent ? `${props.event.fields.year} Location` : 'Location'
+      }
     >
       <header className={styles.header}>
         {props.event.fields.hotel.fields.video && (
@@ -106,4 +108,5 @@ export const LocationSection = (props: LocationSectionProps) => {
 
 export interface LocationSectionProps {
   event: Entry<Event>;
+  isPastEvent?: boolean;
 }
diff --git a/src/components/organisms/PartnersSection/index.tsx b/src/components/organisms/PartnersSection/index.tsx
@@ -9,7 +9,9 @@ export const PartnersSection = (props: PartnersSectionProps) => (
   <ContentSection
     contentClassName={styles.container}
     id="partners"
-    title="Partners"
+    title={
+      props.isPastEvent ? `${props.event.fields.year} Partners` : 'Partners'
+    }
     size="medium"
   >
     <ul className={styles.list}>
@@ -45,4 +47,5 @@ export const PartnersSection = (props: PartnersSectionProps) => (
 
 export interface PartnersSectionProps {
   event: Entry<Event>;
+  isPastEvent?: boolean;
 }
diff --git a/src/pages/[year].astro b/src/pages/[year].astro
@@ -13,5 +13,5 @@ const event = await getEvent({ isPreview: false, year: year as string });
 ---
 
 <Document>
-  <Layout client:load event={event} />
+  <Layout client:load event={event} isPastEvent />
 </Document>