Move inputs and buttons to central components

frontend/components/Input/Input.js

@@ -0,0 +1,51 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import { Flex } from 'reflexbox';
+import { size } from 'styles/constants';
+
+const RealTextarea = styled.textarea`
+  border: 0;
+  flex: 1;
+  padding: 8px 12px;
+  outline: none;
+`;
+
+const RealInput = styled.input`
+  border: 0;
+  flex: 1;
+  padding: 8px 12px;
+  outline: none;
+`;
+
+const Wrapper = styled(Flex)`
+  display: flex;
+  flex: 1;
+  margin: 0 0 ${size.large};
+  color: inherit;
+  border-width: 2px;
+  border-style: solid;
+  border-color: ${props => (props.hasError ? 'red' : 'rgba(0, 0, 0, .15)')};
+  border-radius: ${size.small};
+
+  &:focus,
+  &:active {
+    border-color: rgba(0, 0, 0, .25);
+  }
+`;
+
+export type Props = {
+  type: string,
+  value: string,
+  className?: string,
+};
+
+export default function Input({ type, ...rest }: Props) {
+  const Component = type === 'textarea' ? RealTextarea : RealInput;
+
+  return (
+    <Wrapper>
+      <Component {...rest} />
+    </Wrapper>
+  );
+}