polish: make configurator inputs look more like mocks

This commit is contained in:
fragosti
2018-12-03 17:37:32 -08:00
committed by Fred Carlsen
parent fbb27b1fb2
commit 7a6339ae38
3 changed files with 6 additions and 3 deletions

View File

@@ -9,6 +9,7 @@ export interface InputProps {
fontSize?: string;
fontColor?: string;
border?: string;
padding?: string;
placeholderColor?: string;
placeholder?: string;
backgroundColor?: string;
@@ -22,7 +23,7 @@ const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, pl
export const Input = styled(PlainInput)`
font-size: ${props => props.fontSize};
width: ${props => props.width};
padding: 0.8em 1.2em;
padding: ${props => props.padding};
border-radius: 3px;
box-sizing: border-box;
font-family: 'Roboto Mono';
@@ -42,6 +43,7 @@ Input.defaultProps = {
placeholderColor: colors.darkGrey,
fontSize: '12px',
border: 'none',
padding: '0.8em 1.2em',
};
Input.displayName = 'Input';

View File

@@ -65,7 +65,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
hasBoxShadow={isOpen}
border={border}
backgroundColor={backgroundColor}
padding="0.8em"
padding="0.5em 0.8em"
width="100%"
>
<Container className="flex justify-between">
@@ -79,7 +79,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
</Text>
)}
{hasItems && (
<Container marginLeft="5px" display="inline-block" position="relative" bottom="2px">
<Container marginLeft="5px" display="inline-block">
<i
className="zmdi zmdi-chevron-down"
style={{ fontSize: iconSize, color: colors.darkGrey }}