New subscribe form

#34

components/SocialLinks.js

@@ -1,4 +1,5 @@
 import React from "react";
+import SubscribeForm from "./SubscribeForm";
 
 const SocialLinks = ({ type }) => {
   const start = type ? `If you enjoyed this ${type}, consider` : "Consider";
@@ -14,54 +15,7 @@ const SocialLinks = ({ type }) => {
         beards (no pun intended).
       </blockquote>
 
-      <form
-        action={
-          "//jster.us7.list-manage.com/subscribe/post" +
-          "?u=ed40c0084a0c5ba31b3365d65&amp;id=b853b8e786"
-        }
-        method="post"
-        id="mc-embedded-subscribe-form"
-        name="mc-embedded-subscribe-form"
-        className="validate social-form"
-        target="_blank"
-        noValidate
-      >
-        <div id="mc_embed_signup_scroll" className="social-form__wrapper">
-          <div className="mc-field-group social-form__input-container">
-            <input
-              type="email"
-              placeholder="Email"
-              value=""
-              name="EMAIL"
-              className="required email social-form__input"
-              id="mce-EMAIL"
-            />
-          </div>
-          <div
-            style={{
-              display: "none",
-              position: "absolute",
-              left: "-5000px",
-            }}
-          >
-            <input
-              type="text"
-              name="b_ed40c0084a0c5ba31b3365d65_b853b8e786"
-              tabIndex="-1"
-              value=""
-            />
-          </div>
-          <div className="social-form__subscribe-container">
-            <input
-              type="submit"
-              className="btn button social-form__subscribe"
-              value="Subscribe"
-              name="subscribe"
-              id="mc-embedded-subscribe"
-            />
-          </div>
-        </div>
-      </form>
+      <SubscribeForm />
     </div>
   );
 };

components/SubscribeForm.js

@@ -0,0 +1,90 @@
+import React from "react";
+import styled from "react-emotion";
+import theme from "../styles/theme";
+
+const ACTION_URL =
+  "//jster.us7.list-manage.com/subscribe/post?u=ed40c0084a0c5ba31b3365d65&id=b853b8e786";
+
+const Pocket = ({ children }) => (
+  <div
+    style={{
+      display: "none",
+      position: "absolute",
+      left: "-5000px",
+    }}
+  >
+    {children}
+  </div>
+);
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const Input = styled.input`
+  flex-grow: 1;
+  height: ${theme.form.size};
+  padding: 0.6em 1em;
+  background-color: ${theme.color.background};
+  border: ${theme.border.width} solid ${theme.color.action};
+  border-right: 0;
+  border-radius: ${theme.form.size} 0 0 ${theme.form.size};
+  color: ${theme.color.base};
+  text-transform: uppercase;
+  font-size: ${theme.fontSize.delta};
+  outline: none;
+
+  &:focus,
+  &:focus ~ input {
+    border-color: ${theme.color.actionDark};
+  }
+`;
+
+const Button = styled.input`
+  height: ${theme.form.size};
+  padding: 0.6em 1em;
+  background-color: ${theme.color.background};
+  border: ${theme.border.width} solid ${theme.color.action};
+  border-radius: 0 ${theme.form.size} ${theme.form.size} 0;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: ${theme.color.actionDark};
+  font-size: ${theme.fontSize.delta};
+  font-weight: ${theme.fontWeight.fat};
+  outline: none;
+  transition: background-color ${theme.transition.easing}
+      ${theme.transition.speed},
+    color ${theme.transition.easing} ${theme.transition.speed};
+
+  &:hover {
+    color: ${theme.color.actionLight};
+    background-color: ${theme.color.actionAlpha};
+  }
+`;
+
+const SubscribeForm = () => {
+  return (
+    <Form action={ACTION_URL} method="post" target="_blank">
+      <Input
+        type="email"
+        placeholder="Email"
+        name="EMAIL"
+        id="mce-EMAIL"
+        required
+      />
+      <Pocket>
+        <input
+          type="text"
+          name="b_ed40c0084a0c5ba31b3365d65_b853b8e786"
+          tabIndex="-1"
+          value=""
+        />
+      </Pocket>
+      <Button type="submit" value="Subscribe" name="subscribe" />
+    </Form>
+  );
+};
+
+export default SubscribeForm;

styles/components/_social.scss

@@ -9,28 +9,3 @@
 .social-links__tip {
   margin-top: 0.5em;
 }
-
-.social-form__wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.social-form__input-container {
-  flex-grow: 1;
-  margin-right: 0.5em;
-}
-
-.social-form__input {
-  display: block;
-  width: 100%;
-}
-
-.social-form__subscribe {
-  line-height: 2em;
-  background-color: #fefefe;
-}
-
-.social-form__subscribe:hover {
-  background-color: #eee;
-}

styles/theme.js

@@ -1,4 +1,7 @@
 const space = 8;
+const scaleBase = 12;
+const scaleRatio = 1.25;
+
 module.exports = {
   font: {
     heading: '"Avenir Next", "Helvetica Neue", sans-serif',
@@ -7,6 +10,19 @@ module.exports = {
     code:
       '"Input Sans Narrow", "Source Code Pro", "Input Sans", "Inconsolata", monospace',
   },
+  fontWeight: {
+    normal: 400,
+    bold: 600,
+    fat: 700,
+  },
+  fontSize: {
+    alpha: `${scaleBase * Math.pow(scaleRatio, 5)}px`,
+    beta: `${scaleBase * Math.pow(scaleRatio, 4)}px`,
+    gamma: `${scaleBase * Math.pow(scaleRatio, 3)}px`,
+    delta: `${scaleBase * Math.pow(scaleRatio, 2)}px`,
+    epsilon: `${scaleBase * Math.pow(scaleRatio, 1)}px`,
+    zeta: `${scaleBase * Math.pow(scaleRatio, 0)}px`,
+  },
   space: {
     xxs: `${space / 4}px`,
     xs: `${space / 2}px`,
@@ -23,5 +39,19 @@ module.exports = {
     background: "#fff",
     backgroundAlt: "#eee",
     backgroundLight: "#fafafa",
+    action: "#6eedf8",
+    actionAlpha: "rgba(110, 237, 248, 0.2)",
+    actionLight: "#0de1f3",
+    actionDark: "#09b5c4",
+  },
+  border: {
+    width: "2px",
+  },
+  form: {
+    size: "52px",
+  },
+  transition: {
+    speed: "0.3s",
+    easing: "cubic-bezier(.23, 1, .32, 1)",
   },
 };