coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Move inputs and buttons to central components

Browse Source
This commit is contained in:
Tom Moor
2017-06-25 19:21:08 -07:00
parent 52765d9d1d
commit 93a44e4a4c
10 changed files with 141 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/scenes/Settings/Settings.js
View File

@ -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;