Move inputs and buttons to central components

frontend/scenes/Dashboard/Dashboard.js

@@ -4,10 +4,10 @@ import { observer, inject } from 'mobx-react';
 import { Flex } from 'reflexbox';
 
 import CollectionsStore from 'stores/CollectionsStore';
-
+import PageTitle from 'components/PageTitle';
 import Collection from 'components/Collection';
-import PreviewLoading from 'components/PreviewLoading';
 import CenteredContent from 'components/CenteredContent';
+import PreviewLoading from 'components/PreviewLoading';
 
 type Props = {
   collections: CollectionsStore,
@@ -21,6 +21,8 @@ type Props = {
 
     return (
       <CenteredContent>
+        <PageTitle title="Home" />
+        <h1>Home</h1>
         <Flex column auto>
           {!collections.isLoaded
             ? <PreviewLoading />

frontend/scenes/Settings/Settings.js

@@ -1,13 +1,14 @@
 // @flow
 import React from 'react';
 import { observer } from 'mobx-react';
-import styled from 'styled-components';
 import { Flex } from 'reflexbox';
 
 import ApiKeyRow from './components/ApiKeyRow';
 import styles from './Settings.scss';
 import SettingsStore from './SettingsStore';
 
+import Button from 'components/Button';
+import Input from 'components/Input';
 import CenteredContent from 'components/CenteredContent';
 import SlackAuthLink from 'components/SlackAuthLink';
 import PageTitle from 'components/PageTitle';
@@ -133,7 +134,7 @@ class InlineForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <Flex auto>
-          <TextInput
+          <Input
             type="text"
             placeholder={validationError ? 'Please add a label' : placeholder}
             value={value || ''}
@@ -147,40 +148,4 @@ class InlineForm extends React.Component {
   }
 }
 
-const TextInput = styled.input`
-  display:flex;
-  flex: 1;
-  height:32px;
-  margin:0;
-  padding-left:8px;
-  padding-right:8px;
-  color:inherit;
-  background-color: rgba(255, 255, 255, .25);
-  border-width:1px;
-  border-style:solid;
-  border-color: ${props => (props.validationError ? 'red' : 'rgba(0, 0, 0, .25)')};
-  border-radius:2px 0 0 2px;
-`;
-
-const Button = styled.input`
-  box-shadow:inset 0 0 0 1px;
-  font-family:inherit;
-  font-size:14px;
-  line-height:16px;
-  min-height:32px;
-  text-decoration:none;
-  display:inline-block;
-  margin:0;
-  padding-top:8px;
-  padding-bottom:8px;
-  padding-left:16px;
-  padding-right:16px;
-  cursor:pointer;
-  border:0;
-  color:black;
-  background-color:transparent;
-  border-radius:0 2px 2px 0;
-  margin-left:-1px;
-`;
-
 export default Settings;

frontend/scenes/Starred/Starred.js

@@ -1,17 +1,11 @@
 // @flow
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
-import styled from 'styled-components';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 import DocumentList from 'components/DocumentList';
 import StarredStore from './StarredStore';
 
-const Container = styled(CenteredContent)`
-  width: 100%;
-  padding: 16px;
-`;
-
 @observer class Starred extends Component {
   store: StarredStore;
 
@@ -26,11 +20,11 @@ const Container = styled(CenteredContent)`
 
   render() {
     return (
-      <Container column auto>
+      <CenteredContent column auto>
         <PageTitle title="Starred" />
         <h1>Starred</h1>
         <DocumentList documents={this.store.documents} />
-      </Container>
+      </CenteredContent>
     );
   }
 }