Add speaker headshot to dialog button (#128)

* Add speaker headshot to dialog button on schedule

* Add margin to sponsor logo on mobile

* Use SpeakerButton component on talk page

* Make headshot a part of speaker button

* Update css

Author: deweydell

src/components/event/event.module.css

@@ -31,17 +31,22 @@
 .grid {
   margin-top: 1em;
 }
-@media screen and (min-width: 30em) {
+
+.sponsorLogo {
+  max-width: 125px;
+  margin-top: 1em;
+}
+
+@media screen and (min-width: 50em) {
   .grid {
     display: grid;
     grid-template-columns: 2fr 1fr;
     grid-column-gap: 1em;
     margin-top: 0;
   }
-}
-
-.sponsorLogo {
-  max-width: 125px;
+  .sponsorLogo {
+    margin-top: 0;
+  }
 }
 
 .food {

src/components/speaker/index.js

@@ -1,3 +1,4 @@
+// @TODO Create separate component files for all the components in this file
 import React, { useState } from 'react'
 import { Link } from 'gatsby'
 import { Dialog } from '@reach/dialog'
@@ -119,11 +120,17 @@ const randomPlaceholder = () => {
 export const SpeakerButton = ({ speaker }) => {
   const [dialogIsOpen, setDialogIsOpen] = useState(false)
   return (
-    <span className={styles.speakerBtn}>
+    <>
       <button
         onClick={() => setDialogIsOpen(true)}
         className={styles.dialogButton}
       >
+        {speaker.headshot && (
+          <img
+            src={speaker.headshot}
+            alt={`${speaker.name} headshot thumbnail`}
+          />
+        )}
         {speaker.name}
       </button>
       <SpeakerDialog
@@ -132,7 +139,7 @@ export const SpeakerButton = ({ speaker }) => {
         speaker={speaker}
         showLinkToTalk={false}
       />
-    </span>
+    </>
   )
 }
 

src/components/speaker/speaker.module.css

@@ -1,11 +1,13 @@
 /* Speaker Regular Button Styles */
 .dialogButton {
-  display: block;
+  display: flex;
+  align-items: center;
+  margin: 1em 0;
+  padding: 0;
+  padding-right: 0.5em;
   color: var(--navy);
   background: transparent;
   font-weight: var(--semi-bold);
-  padding-bottom: 0.25em;
-  margin-top: 1em;
   border-color: inherit;
   border-style: solid;
   font-size: 0.9em;
@@ -14,12 +16,9 @@
     cursor: pointer;
     color: var(--tan);
   }
-}
-
-@media screen and (min-width: 30em) {
-  .speakerBtn {
-    display: inline-flex;
-    padding-right: 1em;
+  img {
+    max-width: 30px;
+    margin-right: 0.5em;
   }
 }
 

src/components/talk/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   faLaptopCode,
@@ -7,7 +7,7 @@ import {
   faStar,
   faBookOpen,
 } from '@fortawesome/free-solid-svg-icons'
-import { SpeakerDialog } from '../speaker'
+import { SpeakerButton } from '../speaker'
 import { parameterize } from '../../utils/helpers'
 
 import styles from './talk.module.css'
@@ -30,28 +30,18 @@ export const TalkType = ({ type, secondary }) => {
 }
 
 const Talk = ({ speaker }) => {
-  const [dialogIsOpen, setDialogIsOpen] = useState(false)
   const talk = speaker.talks[0]
   if (talk.year && talk.title && talk.desc && talk.desc && talk.type) {
     return (
       <section className={styles.section} id={parameterize(talk.title)}>
         <div>
           <h2 className="title">{talk.title}</h2>
-          <TalkType type={talk.type} />
-          <button
-            onClick={() => setDialogIsOpen(true)}
-            className={styles.dialogButton}
-          >
-            {speaker.name}
-          </button>
+          <div>
+            <TalkType type={talk.type} />
+          </div>
+          <SpeakerButton speaker={speaker} />
         </div>
         <p>{talk.desc}</p>
-        <SpeakerDialog
-          dialogIsOpen={dialogIsOpen}
-          setDialogIsOpen={setDialogIsOpen}
-          speaker={speaker}
-          showLinkToTalk={false}
-        />
       </section>
     )
   }

src/components/talk/talk.module.css

@@ -17,10 +17,6 @@
   margin-right: 0.5em;
 }
 
-.type {
-  font-weight: var(--light);
-}
-
 .secondary {
   font-size: 0.8em;
   margin: 0 0.5em;