From 7a6339ae38d424508a9f41c818b20dd8b8f09dce Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 17:37:32 -0800 Subject: polish: make configurator inputs look more like mocks --- packages/website/ts/components/ui/input.tsx | 4 +++- packages/website/ts/components/ui/select.tsx | 4 ++-- packages/website/ts/pages/instant/config_generator_address_input.tsx | 1 + 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx index 1f56c814f..d21b9fd0e 100644 --- a/packages/website/ts/components/ui/input.tsx +++ b/packages/website/ts/components/ui/input.tsx @@ -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 = ({ 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'; diff --git a/packages/website/ts/components/ui/select.tsx b/packages/website/ts/components/ui/select.tsx index 743b082b0..e4fb50f59 100644 --- a/packages/website/ts/components/ui/select.tsx +++ b/packages/website/ts/components/ui/select.tsx @@ -65,7 +65,7 @@ export class Select extends React.Component { hasBoxShadow={isOpen} border={border} backgroundColor={backgroundColor} - padding="0.8em" + padding="0.5em 0.8em" width="100%" > @@ -79,7 +79,7 @@ export class Select extends React.Component { )} {hasItems && ( - +