wwwhatley

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
  grid-area: nav;
  height: 100%;
  width: 100%;
  background-color: #2e3131;
  display: flex;
  flex-direction: column;

wwwhatley

import React, { Component } from "react";
import styled from "styled-components";
import { Formik } from "formik";
import { Form, Input, Title, Text, Button, Label } from "./theme.js";

class App extends Component {
  render() {
    return (
      <div>
        <Title>Form</Title>

wwwhatley

      validate={values => {
        let errors = {};
        // REGEX
        let regex = !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
        // VALIDATION
        if (!values.email) {
          errors.email = "Email is required";
        } else if (regex.test(values.email)) {
          errors.email = "Invalid email address";
        }

wwwhatley

import React, { Component } from "react";
import styled from "styled-components";
import { Formik } from "formik";
import { Form, Input, Title, Text, Button, Label } from "./theme.js";

class App extends Component {
  render() {
    return (
      <div>
        <Title>Form</Title>

wwwhatley

import React, { Component } from "react";
import styled from "styled-components";
import { Formik } from "formik";
import { Form, Input, Title, Text, Button, Label } from "./theme.js";

class App extends Component {
  render() {
    return (
      <div>
        <Title>Form</Title>

wwwhatley

import React, { Component } from "react";
import styled from "styled-components";
import { Form, Input, Title, Text, Button } from "./theme.js";

const Label = styled.label`
  display: flex;
  flex-direction: column;
  color: #777;
  font-family: "Raleway", sans-serif;

wwwhatley

import React, {Component} from 'react';
import styled from 'styled-components';
import {Form, Input, Title, Button} from './theme.js';

class App extends Component {
  render() {
    return (
      <div>
        <Title>Form</Title>
        <Form>

wwwhatley

import styled from 'styled-components';

export const Input = styled.input`
  width: 300px;
  height: 35px;
  border: ${props => props.border || '1px solid #ccc'};
  background-color: #fff;
`;

wwwhatley

import React, {Component} from 'react';
import styled from 'styled-components';
import {Form, Input, Title, Button} from './theme.js';

class App extends Component {
  render() {
    return (
      <div>
        <Title>Form</Title>
        <Form>

wwwhatley

import styled from 'styled-components';

// Forms, inputs, buttons

export const Form = styled.form`
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
`;