From 70f9707273afa72d512412314cae7f857e0cd6ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Neves?= <me@andreneves.me>
Date: Tue, 4 Dec 2018 23:26:03 -0500
Subject: [PATCH 01/14] styles: basic styles for application

---
 app/components/Layout.js  |  2 +-
 app/components/Sidebar.js | 10 ++++++++--
 app/theme.js              | 18 +++++++++++++-----
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/app/components/Layout.js b/app/components/Layout.js
index 277bff1..ab8f39f 100644
--- a/app/components/Layout.js
+++ b/app/components/Layout.js
@@ -11,7 +11,7 @@ const Layout = styled.div`
   left: 200px;
   top: 0;
   height: 100vh;
-  background: #ccc;
+  background: ${props => props.theme.colors.secondary};
 `;
 
 type Props = {
diff --git a/app/components/Sidebar.js b/app/components/Sidebar.js
index 65aec62..9307af1 100644
--- a/app/components/Sidebar.js
+++ b/app/components/Sidebar.js
@@ -13,11 +13,17 @@ const Wrapper = styled.div`
   left: 0;
   top: 0;
   height: 100vh;
-  background-color: ${props => props.theme.colors.secondary};
+  font-family: ${props => props.theme.fontFamily}
+  background-color: ${props => props.theme.colors.sidebarBg};
+  padding: 20px;
 `;
 
 const StyledLink = styled(Link)`
-  color: ${props => props.theme.colors.primary};
+  color: ${props => props.theme.colors.sidebarItem};
+  font-size: 16px;
+  text-decoration: none;
+  font-weight: 700;
+  padding: 5px 0;
 `;
 
 type MenuItem = {
diff --git a/app/theme.js b/app/theme.js
index 245b114..ec678d8 100644
--- a/app/theme.js
+++ b/app/theme.js
@@ -7,18 +7,26 @@ import { normalize } from 'polished'; // eslint-disable-line
 
 import { DARK } from './constants/themes';
 
+const darkOne = '#212124';
+const lightOne = '#ffffff';
+const brandOne = '#624cda';
+const brandTwo = '#a6ede2';
+
 const appTheme = {
   mode: DARK,
-  fontFamily: 'Open Sans',
+  fontFamily: 'PT Sans',
   colors: {
     primary: theme('mode', {
-      light: '#000',
-      dark: '#fff',
+      light: darkOne,
+      dark: lightOne,
     }),
     secondary: theme('mode', {
-      light: '#fff',
-      dark: '#000',
+      light: lightOne,
+      dark: darkOne,
     }),
+    sidebarBg: brandOne,
+    sidebarItem: brandTwo,
+    sidebarItemActive: lightOne,
   },
   size: {
     title: 18,

From 641e299c3a05b6b4230ab9b0a49bad31970d64ff Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 5 Dec 2018 15:12:04 -0300
Subject: [PATCH 02/14] feature: add htmlContext in doczrc

---
 doczrc.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/doczrc.js b/doczrc.js
index 58253d9..6a61d60 100644
--- a/doczrc.js
+++ b/doczrc.js
@@ -5,4 +5,14 @@ export default {
   title: 'Zcash Foundation',
   description: 'Zcash Foundation User Interface Styleguide',
   plugins: [css()],
+  htmlContext: {
+    head: {
+      links: [
+        {
+          rel: 'stylesheet',
+          href: 'https://fonts.googleapis.com/css?family=PT+Sans:400,700',
+        },
+      ],
+    },
+  },
 };

From 34d4988ff48a88825e1f24fe45c82943db2855a0 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 5 Dec 2018 15:12:50 -0300
Subject: [PATCH 03/14] hotfix: change theme colors

---
 app/theme.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/app/theme.js b/app/theme.js
index ec678d8..376d9ac 100644
--- a/app/theme.js
+++ b/app/theme.js
@@ -7,7 +7,7 @@ import { normalize } from 'polished'; // eslint-disable-line
 
 import { DARK } from './constants/themes';
 
-const darkOne = '#212124';
+const darkOne = '#7B00DD';
 const lightOne = '#ffffff';
 const brandOne = '#624cda';
 const brandTwo = '#a6ede2';
@@ -17,13 +17,13 @@ const appTheme = {
   fontFamily: 'PT Sans',
   colors: {
     primary: theme('mode', {
-      light: darkOne,
-      dark: lightOne,
-    }),
-    secondary: theme('mode', {
       light: lightOne,
       dark: darkOne,
     }),
+    secondary: theme('mode', {
+      light: darkOne,
+      dark: lightOne,
+    }),
     sidebarBg: brandOne,
     sidebarItem: brandTwo,
     sidebarItemActive: lightOne,
@@ -36,11 +36,7 @@ const appTheme = {
 
 /* eslint-disable react/prop-types */
 // $FlowFixMe
-export const DoczWrapper = ({ children }) => (
-  <ThemeProvider theme={appTheme}>
-    {children()}
-  </ThemeProvider>
-);
+export const DoczWrapper = ({ children }) => <ThemeProvider theme={appTheme}>{children()}</ThemeProvider>;
 
 export const GlobalStyle = createGlobalStyle`${normalize()}`;
 

From 02eb9347de9089fcc483268577040cfa270abe81 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 5 Dec 2018 15:13:31 -0300
Subject: [PATCH 04/14] hotfix: change components files name

---
 app/components/{Layout.js => layout.js}   | 0
 app/components/{Sidebar.js => sidebar.js} | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename app/components/{Layout.js => layout.js} (100%)
 rename app/components/{Sidebar.js => sidebar.js} (100%)

diff --git a/app/components/Layout.js b/app/components/layout.js
similarity index 100%
rename from app/components/Layout.js
rename to app/components/layout.js
diff --git a/app/components/Sidebar.js b/app/components/sidebar.js
similarity index 100%
rename from app/components/Sidebar.js
rename to app/components/sidebar.js

From c76a6c54eb73423958ad86b633555abc87a8b91f Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 5 Dec 2018 15:13:54 -0300
Subject: [PATCH 05/14] feature: add font link in public index.html

---
 public/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/index.html b/public/index.html
index c79828f..676487b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,7 @@
     <meta name="theme-color" content="#000000" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <link rel="shortcut icon" href="favicon.ico" />
+    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet" />
 
     <title>Zcash Reference Wallet</title>
   </head>

From 56a8e376c321f12db6d14275d7835d6da8a00bc5 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 5 Dec 2018 15:14:30 -0300
Subject: [PATCH 06/14] feature: add button component

---
 app/components/Button.mdx | 54 ++++++++++++++++++++++
 app/components/button.js  | 96 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 150 insertions(+)
 create mode 100644 app/components/Button.mdx
 create mode 100644 app/components/button.js

diff --git a/app/components/Button.mdx b/app/components/Button.mdx
new file mode 100644
index 0000000..c26bb96
--- /dev/null
+++ b/app/components/Button.mdx
@@ -0,0 +1,54 @@
+---
+name: Button
+---
+
+import { Playground, PropsTable } from 'docz'
+
+import { Button } from './button.js'
+import { DoczWrapper } from '../theme.js'
+
+# Button
+
+<PropsTable of={Button} />
+
+## Primary
+
+<Playground>
+  <div style={{ backgroundColor: '#000', padding: '20px' }}>
+    <DoczWrapper>{() => <Button label="Click me!" />}</DoczWrapper>
+  </div>
+</Playground>
+
+## Secondary
+
+<Playground>
+  <div style={{ backgroundColor: '#000', padding: '20px' }}>
+    <DoczWrapper>{() => <Button label="Click me!" onClick={() => alert('Clicked')} variant="secondary" />}</DoczWrapper>
+  </div>
+</Playground>
+
+## Primary Disabled
+
+<Playground>
+  <div style={{ backgroundColor: '#000', padding: '20px' }}>
+    <DoczWrapper>{() => <Button label="Click me!" onClick={() => alert('Clicked')} disabled />}</DoczWrapper>
+  </div>
+</Playground>
+
+## Secondary Disabled
+
+<Playground>
+  <div style={{ backgroundColor: '#000', padding: '20px' }}>
+    <DoczWrapper>
+      {() => <Button label="Click me!" onClick={() => alert('Clicked')} disabled variant="secondary" />}
+    </DoczWrapper>
+  </div>
+</Playground>
+
+## Link Button
+
+<Playground>
+  <div style={{ backgroundColor: '#000', padding: '20px' }}>
+    <DoczWrapper>{() => <Button label="Click me!" isLink to="/my-route" />}</DoczWrapper>
+  </div>
+</Playground>
diff --git a/app/components/button.js b/app/components/button.js
new file mode 100644
index 0000000..6bedbee
--- /dev/null
+++ b/app/components/button.js
@@ -0,0 +1,96 @@
+// @flow
+
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+// $FlowFixMe
+import { darken } from 'polished';
+
+const defaultStyles = `
+  padding: 10px 30px;
+  font-family: ${
+  // $FlowFixMe
+  props => props.theme.fontFamily
+};
+  font-weight: bold;
+  font-size: 0.9em;
+  cursor: pointer;
+  outline: none;
+  min-width: 100px;
+  border-radius: 100px;
+  transition: background-color 0.1s ease-in-out;
+`;
+
+const Primary = styled.button`
+  ${defaultStyles};
+  background-color: ${props => props.theme.colors.primary};
+  color: ${props => props.theme.colors.secondary};
+  border: none;
+
+  &:hover {
+    background-color: ${props => darken(0.1, props.theme.colors.primary(props))};
+  }
+
+  &:disabled {
+    background-color: #3e3c42;
+    cursor: not-allowed;
+    opacity: 0.8;
+  }
+`;
+
+const Secondary = styled.button`
+  ${defaultStyles};
+  background-color: Transparent;
+  color: ${props => props.theme.colors.secondary};
+  border: 2px solid #3e3c42;
+
+  &:hover {
+    border-color: ${props => props.theme.colors.primary};
+  }
+
+  &:disabled {
+    background-color: Transparent;
+    cursor: not-allowed;
+    color: #3e3c42;
+
+    &:hover {
+      border-color: #3e3c42;
+    }
+  }
+`;
+
+type Props = {
+  label: string,
+  onClick?: () => void,
+  isLink?: boolean,
+  to?: string,
+  variant?: 'primary' | 'secondary',
+  disabled?: boolean,
+};
+
+export const Button = ({
+  onClick, label, isLink, to, variant, disabled,
+}: Props) => {
+  if (isLink && !to) throw new Error('Missing "to" prop in Button Link');
+  if (isLink && onClick) throw new Error("Can't bind a onClick to a Link Button");
+
+  const component = variant === 'primary' ? (
+    <Primary onClick={onClick} disabled={disabled}>
+      {label}
+    </Primary>
+  ) : (
+    <Secondary onClick={onClick} disabled={disabled}>
+      {label}
+    </Secondary>
+  );
+
+  return isLink ? <Link to={String(to)}>{component}</Link> : component;
+};
+
+Button.defaultProps = {
+  to: null,
+  isLink: false,
+  variant: 'primary',
+  onClick: null,
+  disabled: false,
+};

From 8fde4921d4ed166ccfec00d76e9fa9312a731045 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 5 Dec 2018 15:36:41 -0300
Subject: [PATCH 07/14] feature: add qrcode.react module

---
 package.json |  1 +
 yarn.lock    | 13 +++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/package.json b/package.json
index aaac900..5f580a2 100644
--- a/package.json
+++ b/package.json
@@ -87,6 +87,7 @@
     "autoprefixer": "^9.3.1",
     "connected-react-router": "^5.0.1",
     "history": "^4.7.2",
+    "qrcode.react": "^0.8.0",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "react-redux": "^5.0.7",
diff --git a/yarn.lock b/yarn.lock
index 697a075..3f9a839 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11121,6 +11121,19 @@ q@~0.9.6:
   resolved "https://registry.yarnpkg.com/q/-/q-0.9.7.tgz#4de2e6cb3b29088c9e4cbc03bf9d42fb96ce2f75"
   integrity sha1-TeLmyzspCIyeTLwDv51C+5bOL3U=
 
+qr.js@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
+
+qrcode.react@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-0.8.0.tgz#413b31cc3b62910e39513f7bead945e01c4c34fb"
+  integrity sha512-16wKpuFvLwciIq2YAsfmPUCnSR8GrYPsXRK5KVdcIuX0+W/MKZbBkFhl44ttRx4TWZHqRjfztoWOxdPF0Hb9JA==
+  dependencies:
+    prop-types "^15.6.0"
+    qr.js "0.0.0"
+
 qs@6.5.2, qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"

From 3e48daace4b6b61aa7b26466a6a89cca30c153e8 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 5 Dec 2018 15:37:19 -0300
Subject: [PATCH 08/14] hotfix: components file name

---
 app/components/{Layout.js => layout.js}   | 0
 app/components/{Sidebar.js => sidebar.js} | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename app/components/{Layout.js => layout.js} (100%)
 rename app/components/{Sidebar.js => sidebar.js} (100%)

diff --git a/app/components/Layout.js b/app/components/layout.js
similarity index 100%
rename from app/components/Layout.js
rename to app/components/layout.js
diff --git a/app/components/Sidebar.js b/app/components/sidebar.js
similarity index 100%
rename from app/components/Sidebar.js
rename to app/components/sidebar.js

From 8f2457e43ed7088ecc3ece72598c013fc95210ff Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 5 Dec 2018 15:37:42 -0300
Subject: [PATCH 09/14] feature: add QRCode component

---
 app/components/QRCode.mdx | 23 +++++++++++++++++++++++
 app/components/qrcode.js  | 15 +++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 app/components/QRCode.mdx
 create mode 100644 app/components/qrcode.js

diff --git a/app/components/QRCode.mdx b/app/components/QRCode.mdx
new file mode 100644
index 0000000..d424423
--- /dev/null
+++ b/app/components/QRCode.mdx
@@ -0,0 +1,23 @@
+---
+name: QRCode
+---
+
+import { Playground, PropsTable } from 'docz'
+
+import { QRCode } from './qrcode.js'
+
+# QRCode
+
+<PropsTable of={QRCode} />
+
+## Basic usage
+
+<Playground>
+  <QRCode value="https://astrocoders.com" />
+</Playground>
+
+## Custom size
+
+<Playground>
+  <QRCode value="https://astrocoders.com" size={500} />
+</Playground>
diff --git a/app/components/qrcode.js b/app/components/qrcode.js
new file mode 100644
index 0000000..64dc250
--- /dev/null
+++ b/app/components/qrcode.js
@@ -0,0 +1,15 @@
+// @flow
+
+import React from 'react';
+import QR from 'qrcode.react';
+
+type Props = {
+  value: string,
+  size?: number,
+};
+
+export const QRCode = ({ value, size }: Props) => <QR value={value} size={size} />;
+
+QRCode.defaultProps = {
+  size: 128,
+};

From 1a09b6de639e0499d7dc1dc8c90c6848b03a09b8 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 6 Dec 2018 12:42:06 -0300
Subject: [PATCH 10/14] hotfix: components filename case

---
 app/components/{Layout.js => layout.js}   | 0
 app/components/{Sidebar.js => sidebar.js} | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename app/components/{Layout.js => layout.js} (100%)
 rename app/components/{Sidebar.js => sidebar.js} (100%)

diff --git a/app/components/Layout.js b/app/components/layout.js
similarity index 100%
rename from app/components/Layout.js
rename to app/components/layout.js
diff --git a/app/components/Sidebar.js b/app/components/sidebar.js
similarity index 100%
rename from app/components/Sidebar.js
rename to app/components/sidebar.js

From 52b0addaa20277edc9932c6add6fef5e66156d2e Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 6 Dec 2018 12:42:30 -0300
Subject: [PATCH 11/14] WIP: feature: add input component

---
 app/components/Input.mdx | 24 +++++++++++++++++++
 app/components/input.js  | 50 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+)
 create mode 100644 app/components/Input.mdx
 create mode 100644 app/components/input.js

diff --git a/app/components/Input.mdx b/app/components/Input.mdx
new file mode 100644
index 0000000..81021aa
--- /dev/null
+++ b/app/components/Input.mdx
@@ -0,0 +1,24 @@
+---
+name: Input
+---
+
+import { Playground, PropsTable } from 'docz'
+
+import { InputComponent } from './input.js'
+import { DoczWrapper } from '../theme.js'
+
+# Input
+
+<PropsTable of={InputComponent} />
+
+## Text Input
+
+<Playground>
+  <DoczWrapper>{() => <InputComponent inputType="input" value="" onChange={console.log} />}</DoczWrapper>
+</Playground>
+
+## Textarea
+
+<Playground>
+  <DoczWrapper>{() => <InputComponent inputType="textarea" value="" onChange={console.log} rows={10} />}</DoczWrapper>
+</Playground>
diff --git a/app/components/input.js b/app/components/input.js
new file mode 100644
index 0000000..43cb225
--- /dev/null
+++ b/app/components/input.js
@@ -0,0 +1,50 @@
+// @flow
+import React from 'react';
+
+import styled from 'styled-components';
+
+// TODO: Missing styles
+
+const defaultStyles = `
+  padding: 10px;
+  width: 100%;
+`;
+
+const Input = styled.input.attrs({
+  type: 'text',
+})`
+  ${defaultStyles};
+`;
+
+const Textarea = styled.textarea`
+  ${defaultStyles};
+`;
+
+type Props = {
+  inputType?: 'input' | 'textarea' | 'dropdown',
+  value: string,
+  onChange: string => void,
+  rows?: number,
+  disabled?: boolean,
+  type?: string,
+};
+
+export const InputComponent = ({ inputType, onChange, ...props }: Props) => {
+  if (inputType === 'input') {
+    return <Input onChange={evt => onChange(evt.target.value)} {...props} />;
+  }
+
+  if (inputType === 'textarea') {
+    return <Textarea onChange={evt => onChange(evt.target.value)} {...props} />;
+  }
+
+  // TODO: Dropdown component
+  return null;
+};
+
+InputComponent.defaultProps = {
+  inputType: 'input',
+  rows: 4,
+  disabled: false,
+  type: 'text',
+};

From c8e359f0e476b2874d332ad4fca2397c6c70bf31 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 6 Dec 2018 17:37:39 -0300
Subject: [PATCH 12/14] hotfix: remove unnecessary button isLink

---
 app/components/button.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/components/button.js b/app/components/button.js
index 6bedbee..650bc7b 100644
--- a/app/components/button.js
+++ b/app/components/button.js
@@ -3,6 +3,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+/* eslint-disable import/no-extraneous-dependencies */
 // $FlowFixMe
 import { darken } from 'polished';
 
@@ -62,17 +63,15 @@ const Secondary = styled.button`
 type Props = {
   label: string,
   onClick?: () => void,
-  isLink?: boolean,
   to?: string,
   variant?: 'primary' | 'secondary',
   disabled?: boolean,
 };
 
 export const Button = ({
-  onClick, label, isLink, to, variant, disabled,
+  onClick, label, to, variant, disabled,
 }: Props) => {
-  if (isLink && !to) throw new Error('Missing "to" prop in Button Link');
-  if (isLink && onClick) throw new Error("Can't bind a onClick to a Link Button");
+  if (to && onClick) throw new Error('Should define either "to" or "onClick"');
 
   const component = variant === 'primary' ? (
     <Primary onClick={onClick} disabled={disabled}>
@@ -84,12 +83,11 @@ export const Button = ({
     </Secondary>
   );
 
-  return isLink ? <Link to={String(to)}>{component}</Link> : component;
+  return to ? <Link to={String(to)}>{component}</Link> : component;
 };
 
 Button.defaultProps = {
   to: null,
-  isLink: false,
   variant: 'primary',
   onClick: null,
   disabled: false,

From 253aa78f0c81b3854262fa98e6f61a5b28f1293b Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 6 Dec 2018 17:49:27 -0300
Subject: [PATCH 13/14] hotfix: add initial value in input docz

---
 app/components/Input.mdx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/components/Input.mdx b/app/components/Input.mdx
index 81021aa..5111f62 100644
--- a/app/components/Input.mdx
+++ b/app/components/Input.mdx
@@ -14,11 +14,13 @@ import { DoczWrapper } from '../theme.js'
 ## Text Input
 
 <Playground>
-  <DoczWrapper>{() => <InputComponent inputType="input" value="" onChange={console.log} />}</DoczWrapper>
+  <DoczWrapper>{() => <InputComponent inputType="input" value="Hello World!" onChange={console.log} />}</DoczWrapper>
 </Playground>
 
 ## Textarea
 
 <Playground>
-  <DoczWrapper>{() => <InputComponent inputType="textarea" value="" onChange={console.log} rows={10} />}</DoczWrapper>
+  <DoczWrapper>
+    {() => <InputComponent inputType="textarea" value="I'm ZCash Electron Wallet" onChange={console.log} rows={10} />}
+  </DoczWrapper>
 </Playground>

From 791ec4d2807e164f2d3d4ab3d43053ee0da8291d Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 6 Dec 2018 17:50:01 -0300
Subject: [PATCH 14/14] hotfix: add inputTypes obj and fix return

---
 app/components/input.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/components/input.js b/app/components/input.js
index 43cb225..459ae30 100644
--- a/app/components/input.js
+++ b/app/components/input.js
@@ -8,6 +8,8 @@ import styled from 'styled-components';
 const defaultStyles = `
   padding: 10px;
   width: 100%;
+  outline: none;
+  font-family: ${props => props.theme.fontFamily}
 `;
 
 const Input = styled.input.attrs({
@@ -30,16 +32,17 @@ type Props = {
 };
 
 export const InputComponent = ({ inputType, onChange, ...props }: Props) => {
-  if (inputType === 'input') {
-    return <Input onChange={evt => onChange(evt.target.value)} {...props} />;
+  const inputTypes = {
+    input: () => <Input onChange={evt => onChange(evt.target.value)} {...props} />,
+    textarea: () => <Textarea onChange={evt => onChange(evt.target.value)} {...props} />,
+    dropdown: () => null,
+  };
+
+  if (!Object.keys(inputTypes).find(key => key === inputType)) {
+    throw new Error(`Invalid input type: ${inputType}`);
   }
 
-  if (inputType === 'textarea') {
-    return <Textarea onChange={evt => onChange(evt.target.value)} {...props} />;
-  }
-
-  // TODO: Dropdown component
-  return null;
+  return inputTypes[inputType]();
 };
 
 InputComponent.defaultProps = {