polish: make configurator inputs look more like mocks
This commit is contained in:
@@ -9,6 +9,7 @@ export interface InputProps {
|
|||||||
fontSize?: string;
|
fontSize?: string;
|
||||||
fontColor?: string;
|
fontColor?: string;
|
||||||
border?: string;
|
border?: string;
|
||||||
|
padding?: string;
|
||||||
placeholderColor?: string;
|
placeholderColor?: string;
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
backgroundColor?: string;
|
backgroundColor?: string;
|
||||||
@@ -22,7 +23,7 @@ const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, pl
|
|||||||
export const Input = styled(PlainInput)`
|
export const Input = styled(PlainInput)`
|
||||||
font-size: ${props => props.fontSize};
|
font-size: ${props => props.fontSize};
|
||||||
width: ${props => props.width};
|
width: ${props => props.width};
|
||||||
padding: 0.8em 1.2em;
|
padding: ${props => props.padding};
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: 'Roboto Mono';
|
font-family: 'Roboto Mono';
|
||||||
@@ -42,6 +43,7 @@ Input.defaultProps = {
|
|||||||
placeholderColor: colors.darkGrey,
|
placeholderColor: colors.darkGrey,
|
||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
border: 'none',
|
border: 'none',
|
||||||
|
padding: '0.8em 1.2em',
|
||||||
};
|
};
|
||||||
|
|
||||||
Input.displayName = 'Input';
|
Input.displayName = 'Input';
|
||||||
|
|||||||
@@ -65,7 +65,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||||||
hasBoxShadow={isOpen}
|
hasBoxShadow={isOpen}
|
||||||
border={border}
|
border={border}
|
||||||
backgroundColor={backgroundColor}
|
backgroundColor={backgroundColor}
|
||||||
padding="0.8em"
|
padding="0.5em 0.8em"
|
||||||
width="100%"
|
width="100%"
|
||||||
>
|
>
|
||||||
<Container className="flex justify-between">
|
<Container className="flex justify-between">
|
||||||
@@ -79,7 +79,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
{hasItems && (
|
{hasItems && (
|
||||||
<Container marginLeft="5px" display="inline-block" position="relative" bottom="2px">
|
<Container marginLeft="5px" display="inline-block">
|
||||||
<i
|
<i
|
||||||
className="zmdi zmdi-chevron-down"
|
className="zmdi zmdi-chevron-down"
|
||||||
style={{ fontSize: iconSize, color: colors.darkGrey }}
|
style={{ fontSize: iconSize, color: colors.darkGrey }}
|
||||||
|
|||||||
@@ -32,6 +32,7 @@ export class ConfigGeneratorAddressInput extends React.Component<
|
|||||||
<Input
|
<Input
|
||||||
width="100%"
|
width="100%"
|
||||||
fontSize="16px"
|
fontSize="16px"
|
||||||
|
padding="0.7em 1em"
|
||||||
value={this.props.value}
|
value={this.props.value}
|
||||||
onChange={this._handleChange}
|
onChange={this._handleChange}
|
||||||
placeholder="0xe99...aa8da4"
|
placeholder="0xe99...aa8da4"
|
||||||
|
|||||||
Reference in New Issue
Block a user