Adding modals

package.json

@@ -10,6 +10,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.1",
+    "react-spring": "^8.0.27",
     "styled-components": "^5.0.1",
     "styled-components-modifiers": "^1.2.5"
   },

src/assets/icons/CloseIcon.js

@@ -0,0 +1,19 @@
+import React from "react";
+import styled from "styled-components";
+
+const CloseIconWrapper = styled.svg`
+  position: absolute;
+  top: 40px;
+  right: 40px;
+  width: 24px;
+  height: 24px;
+`;
+
+export const CloseIcon = () => (
+  <CloseIconWrapper>
+    <path
+      d="M14.0069 11.9675L23.6255 2.35078C23.872 2.08632 24.0062 1.73654 23.9998 1.37512C23.9934 1.0137 23.847 0.668862 23.5913 0.413259C23.3357 0.157657 22.9908 0.0112437 22.6293 0.00486683C22.2678 -0.00151001 21.9179 0.132647 21.6534 0.379074L12.0348 9.99581L2.4162 0.374423C2.15169 0.127997 1.80184 -0.00615949 1.44035 0.000217348C1.07886 0.00659419 0.733953 0.153006 0.478301 0.408609C0.222649 0.664211 0.0762072 1.00905 0.0698292 1.37047C0.0634511 1.73189 0.197634 2.08167 0.444109 2.34613L10.0627 11.9675L0.444109 21.5843C0.307017 21.712 0.197059 21.866 0.120795 22.0371C0.0445312 22.2083 0.0035228 22.393 0.000217153 22.5803C-0.00308849 22.7676 0.0313764 22.9537 0.101555 23.1274C0.171734 23.3011 0.276189 23.4589 0.408689 23.5914C0.541189 23.7239 0.699019 23.8283 0.872764 23.8985C1.04651 23.9686 1.23261 24.0031 1.41996 23.9998C1.60732 23.9965 1.79209 23.9555 1.96325 23.8792C2.13441 23.803 2.28846 23.693 2.4162 23.556L12.0348 13.9392L21.6534 23.556C21.9179 23.8024 22.2678 23.9366 22.6293 23.9302C22.9908 23.9238 23.3357 23.7774 23.5913 23.5218C23.847 23.2662 23.9934 22.9214 23.9998 22.5599C24.0062 22.1985 23.872 21.8487 23.6255 21.5843L14.0069 11.9675Z"
+      fill="#737581"
+    />
+  </CloseIconWrapper>
+);

src/assets/index.js

@@ -0,0 +1,3 @@
+export * from "./icons/Save";
+export * from "./icons/CloseIcon";
+export * from "./illustrations/SignUp";

src/components/Buttons.js

@@ -1,14 +1,14 @@
 import styled from "styled-components";
 import { applyStyleModifiers } from "styled-components-modifiers";
-import { typeScale } from "../utils";
+import { helperText, header5, paragraph } from "../utils";
 
 const BUTTON_MODIFIERS = {
   small: () => `
-    font-size: ${typeScale.helperText};
+    ${helperText}
     padding: 8px 8px;
   `,
   large: () => `
-    font-size: ${typeScale.header5};
+    ${header5}
     padding: 16px 24px;
   `,
   warning: () => `
@@ -49,23 +49,12 @@ const BUTTON_MODIFIERS = {
   `
 };
 
-const BUTTON_ICON_MODIFIERS = {
-  small: () => `
-    width: ${typeScale.helperText}
-  `,
-  large: () => `
-  width: ${typeScale.header5}
-
-  `
-};
-
 export const Button = styled.button`
   padding: 8px 12px;
-  font-size: typeScale.paragraph;
   border-radius: 2px;
   min-width: 100px;
   cursor: pointer;
-  font-family: ${props => props.theme.primaryFont};
+  ${paragraph}
   transition: background-color 0.2s linear, color 0.2s linear,
     border 0.2s linear;
 
@@ -84,7 +73,7 @@ export const Button = styled.button`
   }
 `;
 
-const PrimaryButton = styled(Button)`
+export const PrimaryButton = styled(Button)`
   background-color: ${props => props.theme.primaryColor};
   color: ${props => props.theme.textColorOnPrimary};
   border: 2px solid transparent;
@@ -122,34 +111,3 @@ export const TertiaryButton = styled(Button)`
   }
   ${applyStyleModifiers(BUTTON_MODIFIERS)};
 `;
-
-const ButtonIcon = styled.img`
-  display: inline-block;
-  margin-right: 8px;
-  width: ${typeScale.paragraph};
-`;
-
-export const PrimaryButtonIcon = styled(ButtonIcon)`
-  fill: ${props => props.theme.textColorOnPrimary};
-  ${applyStyleModifiers(BUTTON_ICON_MODIFIERS)};
-`;
-
-export const SecondaryButtonIcon = styled(ButtonIcon)`
-  path {
-    stroke: red;
-  }
-  ${applyStyleModifiers(BUTTON_ICON_MODIFIERS)};
-`;
-
-export const TertiaryButtonIcon = styled(ButtonIcon)`
-  path {
-    fill: ${props => props.theme.primaryColor};
-  }
-  ${applyStyleModifiers(BUTTON_ICON_MODIFIERS)};
-`;
-
-PrimaryButton.Icon = PrimaryButtonIcon;
-SecondaryButton.Icon = SecondaryButtonIcon;
-TertiaryButton.Icon = TertiaryButtonIcon;
-
-export default PrimaryButton;

src/components/Modals.js

@@ -0,0 +1,61 @@
+import React from "react";
+import styled from "styled-components";
+import { paragraph, header3 } from "../utils";
+import { PrimaryButton } from "./Buttons";
+import { SignUp, CloseIcon } from "../assets";
+import { useSpring, animated, config } from "react-spring";
+
+const CloseModalButton = styled.button`
+  cursor: pointer;
+  background: none;
+  border: none;
+`;
+
+const ModalWrapper = styled.div`
+  width: 800px;
+  height: 500px;
+  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
+  background-color: ${props => props.theme.formElementBackground};
+  color: ${props => props.theme.textColor};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  border-radius: 2px;
+`;
+
+const SignUpHeader = styled.h3`
+  ${header3}
+`;
+
+const SignUpText = styled.p`
+  ${paragraph}
+  max-width: 70%;
+  text-align: center;
+`;
+
+export const SignUpModal = ({ showModal, setShowModal }) => {
+  const animation = useSpring({
+    opacity: showModal ? 1 : 0,
+    transform: showModal ? `translateY(0)` : `translateY(-100%)`,
+    config: config.slow
+  });
+  return (
+    <animated.div style={animation}>
+      <ModalWrapper>
+        <SignUp />
+        <SignUpHeader>Sign Up</SignUpHeader>
+        <SignUpText>
+          Sign up today to get access to all of our content and features!
+        </SignUpText>
+        <PrimaryButton onClick={() => console.log("You signed up!")}>
+          Sign Up
+        </PrimaryButton>
+        <CloseModalButton onClick={() => setShowModal(false)}>
+          <CloseIcon />
+        </CloseModalButton>
+      </ModalWrapper>
+    </animated.div>
+  );
+};

src/components/index.js

@@ -0,0 +1,2 @@
+export * from "./Buttons";
+export * from "./Modals";

src/index.js

@@ -1,20 +1,18 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
-import PrimaryButton, {
-  SecondaryButton,
-  TertiaryButton
-} from "./components/Buttons";
 import { ThemeProvider } from "styled-components";
 import { defaultTheme, darkTheme } from "./utils";
 import GlobalStyle from "./utils/Global";
-import { Save } from "./icons";
+import { SignUpModal } from "./components";
 
 const App = () => {
   const [useDarkTheme, setUseDarkTheme] = useState(false);
+  const [showModal, setShowModal] = useState(false);
   return (
     <ThemeProvider theme={useDarkTheme ? darkTheme : defaultTheme}>
       <button onClick={() => setUseDarkTheme(true)}>Dark theme</button>
       <button onClick={() => setUseDarkTheme(false)}>Default theme</button>
+      <button onClick={() => setShowModal(!showModal)}>Show modal</button>
       <div
         style={{
           background: useDarkTheme
@@ -27,15 +25,7 @@ const App = () => {
           justifyContent: "space-around"
         }}
       >
-        <PrimaryButton>
-          <Save />
-          Hello World
-        </PrimaryButton>
-        <SecondaryButton modifiers={["large"]}>
-          <Save modifiers={["inverted"]} />
-          Goodbye World
-        </SecondaryButton>
-        <TertiaryButton>Hey</TertiaryButton>
+        <SignUpModal showModal={showModal} setShowModal={setShowModal} />
         <GlobalStyle />
       </div>
     </ThemeProvider>

src/utils/themes.js

@@ -5,6 +5,7 @@ export const defaultTheme = {
   primaryColor: blue[300],
   primaryHoverColor: blue[200],
   primaryActiveColor: blue[100],
+  formElementBackground: neutral[100],
   textColorOnPrimary: neutral[100],
   textColor: neutral[600],
   textColorInverted: neutral[100],
@@ -26,6 +27,7 @@ export const darkTheme = {
   primaryColor: neutral[100],
   primaryHoverColor: neutral[200],
   primaryActiveColor: neutral[300],
+  formElementBackground: neutral[100],
   textColorOnPrimary: blue[300],
   textColor: blue[300],
   textColorInverted: neutral[100],

src/utils/typography.js

@@ -1,12 +1,41 @@
 export const primaryFont = '"Roboto Mono", monospace';
 
-export const typeScale = {
-  header1: "1.8rem",
-  header2: "1.6rem",
-  header3: "1.4rem",
-  header4: "1.2rem",
-  header5: "1.1rem",
-  paragraph: "1rem",
-  helperText: ".8rem",
-  copyrightText: ".7rem"
+export const header1 = {
+  fontSize: "1.8rem",
+  fontFamily: primaryFont
+};
+
+export const header2 = {
+  fontSize: "1.6rem",
+  fontFamily: primaryFont
+};
+
+export const header3 = {
+  fontSize: "1.4rem",
+  fontFamily: primaryFont
+};
+
+export const header4 = {
+  fontSize: "1.2rem",
+  fontFamily: primaryFont
+};
+
+export const header5 = {
+  fontSize: "1.1rem",
+  fontFamily: primaryFont
+};
+
+export const paragraph = {
+  fontSize: "1rem",
+  fontFamily: primaryFont
+};
+
+export const helperText = {
+  fontSize: "0.8rem",
+  fontFamily: primaryFont
+};
+
+export const copyrightText = {
+  fontSize: "0.7rem",
+  fontFamily: primaryFont
 };

yarn.lock

@@ -1522,7 +1522,7 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.2"
 
-"@babel/[email protected]", "@babel/runtime@^7.5.1", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6":
+"@babel/[email protected]", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.1", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
   integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==
@@ -9148,7 +9148,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9434,6 +9434,14 @@ [email protected]:
   optionalDependencies:
     fsevents "2.1.2"
 
+react-spring@^8.0.27:
+  version "8.0.27"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
+  integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    prop-types "^15.5.8"
+
 react@^16.12.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"