Move inputs and buttons to central components

frontend/components/Button/Button.js

@@ -0,0 +1,69 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import { size, color } from 'styles/constants';
+import { darken } from 'polished';
+
+const RealButton = styled.button`
+  display: inline-block;
+  margin: 0 0 ${size.large};
+  padding: 0;
+  border: 0;
+  background: ${color.primary};
+  color: ${color.white};
+  border-radius: 4px;
+  min-width: 32px;
+  min-height: 32px;
+  text-decoration: none;
+  flex-shrink: 0;
+  outline: none;
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+  &:hover {
+    background: ${darken(0.05, color.primary)};
+  }
+`;
+
+const Label = styled.span`
+  padding: 2px 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const Inner = styled.span`
+  display: flex;
+  line-height: 28px;
+  justify-content: center;
+`;
+
+export type Props = {
+  type?: string,
+  value?: string,
+  icon?: React$Element<any>,
+  className?: string,
+  children?: React$Element<any>,
+};
+
+export default function Button({
+  type = 'text',
+  icon,
+  children,
+  value,
+  ...rest
+}: Props) {
+  const hasText = children !== undefined || value !== undefined;
+  const hasIcon = icon !== undefined;
+
+  return (
+    <RealButton {...rest}>
+      <Inner>
+        {hasIcon && icon}
+        {hasText && <Label>{children || value}</Label>}
+      </Inner>
+    </RealButton>
+  );
+}

frontend/components/Button/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Button from './Button';
+export default Button;

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>
+  );
+}

frontend/components/Input/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Input from './Input';
+export default Input;

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>
     );
   }
 }

frontend/styles/base.scss

@@ -55,6 +55,7 @@ h4, h5, h6 {
   line-height: 1.25;
   margin-top: 1em;
   margin-bottom: .5em;
+  color: #1f2429;
 }
 h1 { font-size: 2em }
 h2 { font-size: 1.5em }

package.json

@@ -134,6 +134,7 @@
     "normalizr": "2.0.1",
     "pg": "^6.1.5",
     "pg-hstore": "2.3.2",
+    "polished": "^1.2.1",
     "query-string": "^4.3.4",
     "randomstring": "1.1.5",
     "raw-loader": "^0.5.1",

yarn.lock

@@ -6663,6 +6663,10 @@ pluralize@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
 
+polished@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-1.2.1.tgz#83c18a85bf9d7023477cfc7049763b657d50f0f7"
+
 postcss-calc@^5.2.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"