From 7a6339ae38d424508a9f41c818b20dd8b8f09dce Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
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(-)

(limited to 'packages/website')

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<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';
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<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 }}
diff --git a/packages/website/ts/pages/instant/config_generator_address_input.tsx b/packages/website/ts/pages/instant/config_generator_address_input.tsx
index 2e5a6e533..c208fe52a 100644
--- a/packages/website/ts/pages/instant/config_generator_address_input.tsx
+++ b/packages/website/ts/pages/instant/config_generator_address_input.tsx
@@ -32,6 +32,7 @@ export class ConfigGeneratorAddressInput extends React.Component<
                 <Input
                     width="100%"
                     fontSize="16px"
+                    padding="0.7em 1em"
                     value={this.props.value}
                     onChange={this._handleChange}
                     placeholder="0xe99...aa8da4"
-- 
cgit v1.2.3