- building the base modal trigger architecture

src/components/shared/Button.js

@@ -3,17 +3,27 @@ import classNames from "classnames";
 import Loader from "react-loader-spinner";
 import styles from "./Button.module.css";
 
-const Button = ({ text, isLoading, outline, className }) => {
-  const getClasses = classNames(styles.container, className, {
+const Button = ({ title, isLoading, onClick, outline, className }) => {
+  const classes = classNames(styles.container, className, {
     [styles.outline]: outline,
   });
 
+  const handleKeyDown = (e) => {
+    console.log(e.key);
+  };
+
   return (
-    <div className={getClasses}>
+    <div
+      tabIndex="0"
+      role="button"
+      onClick={onClick}
+      className={classes}
+      onKeyDown={handleKeyDown}
+    >
       {isLoading ? (
         <Loader type="ThreeDots" color="#FFF" height={18} width={28} />
       ) : (
-        text
+        title
       )}
     </div>
   );

src/components/shared/Button.module.css

@@ -1,12 +1,16 @@
 .container {
   padding: 6px 24px;
-  @apply flex items-center cursor-pointer inline-flex rounded font-semibold bg-primary text-inverse;
+  @apply cursor-pointer inline-flex rounded font-semibold bg-primary border border-primary text-inverse;
 }
 
 .container:hover {
   @apply bg-primary-dark;
 }
 
+.container:focus {
+  @apply outline-none;
+}
+
 .container.outline {
   @apply border border-primary bg-inverse text-primary;
 }

src/modals/AuthModal.js

@@ -0,0 +1,20 @@
+import React from "react";
+import BaseModal from "./BaseModal";
+import Button from "../components/shared/Button";
+
+const AuthModal = ({ state }) => {
+  return (
+    <BaseModal state={state} title="Who are you?" action={action}>
+      <p>
+        Reactive Resume needs to know who you are so it can securely
+        authenticate you into the app and show you only your information. Once
+        you are in, you can start building your resume, editing it to add new
+        skills or sharing it with the world!
+      </p>
+    </BaseModal>
+  );
+};
+
+const action = <Button title="Sign in with Google" />;
+
+export default AuthModal;

src/modals/BaseModal.js

@@ -0,0 +1,37 @@
+import React from "react";
+import Modal from "@material-ui/core/Modal";
+import { MdClose } from "react-icons/md";
+import styles from "./BaseModal.module.css";
+import Button from "../components/shared/Button";
+
+const BaseModal = ({ title, state, children, action }) => {
+  const [isOpen, setOpen] = state;
+
+  const handleClose = () => setOpen(false);
+
+  return (
+    <Modal open={isOpen} onClose={handleClose} className={styles.root}>
+      <div className={styles.modal}>
+        <div className={styles.title}>
+          <h2>{title}</h2>
+          <MdClose size="18" onClick={handleClose} />
+        </div>
+
+        <div className={styles.body}>{children}</div>
+
+        <div className={styles.actions}>
+          <Button
+            outline
+            title="Cancel"
+            className="mr-8"
+            onClick={handleClose}
+          />
+
+          {action}
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default BaseModal;

src/modals/BaseModal.module.css

@@ -0,0 +1,28 @@
+.root {
+  @apply flex items-center justify-center;
+}
+
+.modal {
+  width: min(600px, calc(100vw - 100px));
+  @apply p-8 rounded bg-white outline-none;
+}
+
+.modal .title {
+  @apply flex items-center justify-between;
+}
+
+.modal .title h2 {
+  @apply text-3xl;
+}
+
+.modal .title svg {
+  @apply cursor-pointer;
+}
+
+.modal .body {
+  @apply my-8;
+}
+
+.modal .actions {
+  @apply flex justify-end;
+}

src/pages/index.js

@@ -1,9 +1,14 @@
-import React from "react";
+import React, { useState } from "react";
 import { graphql } from "gatsby";
 import GatsbyImage from "gatsby-image";
 import Button from "../components/shared/Button";
+import AuthModal from "../modals/AuthModal";
 
 const Home = ({ data }) => {
+  const [isAuthModalOpen, setAuthModalOpen] = useState(false);
+
+  const handleLogin = () => setAuthModalOpen(true);
+
   return (
     <div className="container mt-24">
       <div className="flex items-center">
@@ -19,8 +24,9 @@ const Home = ({ data }) => {
           </h2>
 
           <div className="mt-12 flex">
-            <Button text="Go to App" />
-            <Button className="ml-8" outline text="Source Code" />
+            <Button title="Login" onClick={handleLogin} />
+            <AuthModal state={[isAuthModalOpen, setAuthModalOpen]} />
+            <Button className="ml-8" outline title="Source Code" />
           </div>
         </div>
       </div>
@@ -67,7 +73,7 @@ const Feature = ({ title, children }) => {
   return (
     <div className="mt-16">
       <h3 className="text-3xl">{title}</h3>
-      <p className="mt-8 text-xl leading-loose">{children}</p>
+      <p className="mt-6 text-lg">{children}</p>
     </div>
   );
 };

src/styles/global.css

@@ -18,6 +18,10 @@ body {
   font-family: "Montserrat", sans-serif;
 }
 
+p {
+  @apply text-justify leading-loose;
+}
+
 a {
   @apply text-blue-600 font-medium;
 }