Moves actions to their own folder and fixes speaker modal styling.

Life-Itself-Conference · Aug 23, 2023 · 337e679 · 337e679
1 parent 8aac17b
commit 337e679
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 46 deletions.
diff --git a/...s/molecules/RegistrationModal/register.ts → src/actions/register.ts b/...s/molecules/RegistrationModal/register.ts → src/actions/register.ts
@@ -1,4 +1,5 @@
 "use server";
+
 import Stripe from "stripe";
 
 export const register = async (data: FormData) => {

diff --git a/...ts/molecules/NewsletterModal/subscribe.ts → src/actions/subscribe.ts b/...ts/molecules/NewsletterModal/subscribe.ts → src/actions/subscribe.ts
diff --git a/src/components/molecules/NewsletterModal/index.tsx b/src/components/molecules/NewsletterModal/index.tsx
@@ -1,9 +1,9 @@
 import { FormEvent, ReactNode, useRef, useState } from "react";
+import { subscribe } from "../../../actions/subscribe";
 import { Button } from "../../atoms/Button";
 import { Modal } from "../../atoms/Modal";
 import { TextField } from "../../atoms/TextField";
 import * as styles from "./NewsletterModal.css";
-import { subscribe } from "./subscribe";
 
 export interface NewsletterModalProps {
   trigger?: ReactNode;

diff --git a/src/components/molecules/RegistrationModal/index.tsx b/src/components/molecules/RegistrationModal/index.tsx
@@ -1,9 +1,9 @@
 import { ReactNode } from "react";
+import { register } from "../../../actions/register";
 import { Button } from "../../atoms/Button";
 import { Modal } from "../../atoms/Modal";
 import { TextField } from "../../atoms/TextField";
 import * as styles from "./RegistrationModal.css";
-import { register } from "./register";
 
 export interface RegistrationModalProps {
   trigger?: ReactNode;

diff --git a/src/components/molecules/SpeakerModal/SpeakerModal.css.ts b/src/components/molecules/SpeakerModal/SpeakerModal.css.ts
@@ -1,29 +1,25 @@
 import { globalStyle, style } from "@vanilla-extract/css";
 import { breakpoints, theme } from "@/src/styles/theme.css";
 
-export const modal = style({
-  height: 500,
-  padding: 0,
-});
-
-export const grid = style({
+export const container = style({
   display: "grid",
   gridTemplateAreas: `
-    'header image'
-    'content content'
+  'header image'
+  'content content'
   `,
   gridTemplateColumns: "4fr 1fr",
   gridTemplateRows: "auto 1fr",
-  height: "100%",
+  padding: 0,
   textAlign: "left",
 
   "@media": {
     [breakpoints.medium]: {
       gridTemplateAreas: `
-        'header image'
-        'content image'
+      'header image'
+      'content image'
       `,
       gridTemplateColumns: "2fr 1fr",
+      height: 500,
     },
   },
 });

diff --git a/src/components/molecules/SpeakerModal/index.tsx b/src/components/molecules/SpeakerModal/index.tsx
@@ -16,42 +16,44 @@ export const SpeakerModal = (props: SpeakerModalProps) => {
   );
 
   return (
-    <Modal ariaLabel="Speaker" className={styles.modal} trigger={props.trigger}>
-      <div className={styles.grid}>
-        <header className={styles.header}>
-          <h2 className={styles.name}>
-            {props.speaker.fields.alternateName || props.speaker.fields.name}
-          </h2>
-          {props.speaker.fields.titles &&
-            props.speaker.fields.titles.length > 0 && (
-              <ul className={styles.details}>
-                {props.speaker?.fields.titles?.map((title, index) => {
-                  const [role, organization] = title.split("|");
+    <Modal
+      ariaLabel="Speaker"
+      contentClassName={styles.container}
+      trigger={props.trigger}
+    >
+      <header className={styles.header}>
+        <h2 className={styles.name}>
+          {props.speaker.fields.alternateName || props.speaker.fields.name}
+        </h2>
+        {props.speaker.fields.titles &&
+          props.speaker.fields.titles.length > 0 && (
+            <ul className={styles.details}>
+              {props.speaker?.fields.titles?.map((title, index) => {
+                const [role, organization] = title.split("|");
 
-                  return (
-                    <li className={styles.detail} key={index}>
-                      {organization && <strong>{organization.trim()}</strong>}
-                      <span>{role.trim()}</span>
-                    </li>
-                  );
-                })}
-              </ul>
-            )}
-        </header>
-        <div className={styles.content}>
-          {props.speaker.fields.topic && (
-            <p className={styles.topic}>{props.speaker.fields.topic}</p>
+                return (
+                  <li className={styles.detail} key={index}>
+                    {organization && <strong>{organization.trim()}</strong>}
+                    <span>{role.trim()}</span>
+                  </li>
+                );
+              })}
+            </ul>
           )}
-          <RichText field={props.speaker.fields.description} />
-        </div>
-        <Image
-          alt=""
-          className={styles.image}
-          height={headshot?.fields.file?.details?.image?.height}
-          src={headshot?.fields.file?.url as string}
-          width={headshot?.fields.file?.details?.image?.width}
-        />
+      </header>
+      <div className={styles.content}>
+        {props.speaker.fields.topic && (
+          <p className={styles.topic}>{props.speaker.fields.topic}</p>
+        )}
+        <RichText field={props.speaker.fields.description} />
       </div>
+      <Image
+        alt=""
+        className={styles.image}
+        height={headshot?.fields.file?.details?.image?.height}
+        src={headshot?.fields.file?.url as string}
+        width={headshot?.fields.file?.details?.image?.width}
+      />
     </Modal>
   );
 };