From 93a44e4a4cd47efee84cc286d07052ead754568f Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 25 Jun 2017 19:21:08 -0700 Subject: [PATCH] Move inputs and buttons to central components --- frontend/components/Button/Button.js | 69 ++++++++++++++++++++++++++ frontend/components/Button/index.js | 3 ++ frontend/components/Input/Input.js | 51 +++++++++++++++++++ frontend/components/Input/index.js | 3 ++ frontend/scenes/Dashboard/Dashboard.js | 6 ++- frontend/scenes/Settings/Settings.js | 41 ++------------- frontend/scenes/Starred/Starred.js | 10 +--- frontend/styles/base.scss | 1 + package.json | 1 + yarn.lock | 4 ++ 10 files changed, 141 insertions(+), 48 deletions(-) create mode 100644 frontend/components/Button/Button.js create mode 100644 frontend/components/Button/index.js create mode 100644 frontend/components/Input/Input.js create mode 100644 frontend/components/Input/index.js diff --git a/frontend/components/Button/Button.js b/frontend/components/Button/Button.js new file mode 100644 index 00000000..31b826dd --- /dev/null +++ b/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, + className?: string, + children?: React$Element, +}; + +export default function Button({ + type = 'text', + icon, + children, + value, + ...rest +}: Props) { + const hasText = children !== undefined || value !== undefined; + const hasIcon = icon !== undefined; + + return ( + + + {hasIcon && icon} + {hasText && } + + + ); +} diff --git a/frontend/components/Button/index.js b/frontend/components/Button/index.js new file mode 100644 index 00000000..70118ffe --- /dev/null +++ b/frontend/components/Button/index.js @@ -0,0 +1,3 @@ +// @flow +import Button from './Button'; +export default Button; diff --git a/frontend/components/Input/Input.js b/frontend/components/Input/Input.js new file mode 100644 index 00000000..da09d541 --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/frontend/components/Input/index.js b/frontend/components/Input/index.js new file mode 100644 index 00000000..e005a8af --- /dev/null +++ b/frontend/components/Input/index.js @@ -0,0 +1,3 @@ +// @flow +import Input from './Input'; +export default Input; diff --git a/frontend/scenes/Dashboard/Dashboard.js b/frontend/scenes/Dashboard/Dashboard.js index af6ff217..d470b9da 100644 --- a/frontend/scenes/Dashboard/Dashboard.js +++ b/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 ( + +

Home

{!collections.isLoaded ? diff --git a/frontend/scenes/Settings/Settings.js b/frontend/scenes/Settings/Settings.js index 709a7dfd..9c27d69e 100644 --- a/frontend/scenes/Settings/Settings.js +++ b/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 (
- (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; diff --git a/frontend/scenes/Starred/Starred.js b/frontend/scenes/Starred/Starred.js index 71cf53d8..5c51b244 100644 --- a/frontend/scenes/Starred/Starred.js +++ b/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 ( - +

Starred

- + ); } } diff --git a/frontend/styles/base.scss b/frontend/styles/base.scss index c7bd8153..3fcc4acd 100644 --- a/frontend/styles/base.scss +++ b/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 } diff --git a/package.json b/package.json index 404c6f5c..3ce6affa 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index aa035e59..27043076 100644 --- a/yarn.lock +++ b/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"