Fix CSS for SelectItem, and InputCurrency

src/components/ReceiveBox.js

@@ -21,7 +21,7 @@ export const AddressBox = styled(Box).attrs({
   bg: 'lightGrey',
   p: 2,
 })`
-  border-radius: 3px;
+  border-radius: ${p => p.theme.radii[1]}px;
   border: 1px solid ${p => p.theme.colors.fog};
   cursor: text;
   text-align: center;

src/components/RequestAmount/index.js

@@ -30,8 +30,11 @@ const InputCenter = styled(Box).attrs({
   ff: 'Rubik',
   color: 'graphite',
   fontSize: 4,
+  alignItems: 'center',
   justifyContent: 'center',
-})``
+})`
+  width: 30px;
+`
 
 const mapStateToProps = (state, { account }) => {
   const counterValue = getCounterValue(state)
@@ -258,8 +261,14 @@ export class RequestAmount extends PureComponent<Props, State> {
     })
 
     return (
-      <Box horizontal flow={2}>
+      <Box horizontal flow={5}>
+        <Box horizontal>
           <InputCurrency
+            containerProps={{
+              style: {
+                width: 156,
+              },
+            }}
             unit={unit.left}
             value={value.left}
             onChange={this.handleChangeAmount('left')}
@@ -267,15 +276,23 @@ export class RequestAmount extends PureComponent<Props, State> {
           />
           <InputCenter>=</InputCenter>
           <InputCurrency
+            containerProps={{
+              style: {
+                width: 156,
+              },
+            }}
             unit={unit.right}
             value={value.right}
             onChange={this.handleChangeAmount('right')}
             renderRight={<InputRight>{unit.right.code}</InputRight>}
           />
-        <Button ml={5} primary onClick={this.handleClickMax}>
+        </Box>
+        <Box grow justifyContent="flex-end">
+          <Button primary onClick={this.handleClickMax}>
             {t('common:max')}
           </Button>
         </Box>
+      </Box>
     )
   }
 }

src/components/base/Button/index.js

@@ -19,7 +19,7 @@ const Base = styled.button.attrs({
   ${fontSize};
   ${fontWeight};
   ${fontFamily};
-  border-radius: 4px;
+  border-radius: ${p => p.theme.radii[1]}px;
   border: ${p =>
     p.primary ? 'none' : `2px solid ${p.disabled ? 'transparent' : p.theme.colors.grey}`};
   cursor: ${p => (p.disabled ? 'default' : 'pointer')};

src/components/base/Input/index.js

@@ -14,7 +14,7 @@ const Container = styled(Box).attrs({
   horizontal: true,
 })`
   background: ${p => p.theme.colors.white};
-  border-radius: 3px;
+  border-radius: ${p => p.theme.radii[1]}px;
   border: 1px solid ${p => p.theme.colors.fog};
   box-shadow: ${p => (p.isFocus ? `rgba(0, 0, 0, 0.05) 0 2px 2px` : 'none')};
   height: 40px;
@@ -49,7 +49,7 @@ export const Textarea = styled.textarea.attrs({
   min-height: 80px;
   color: ${p => p.theme.colors.dark};
   background: ${p => p.theme.colors.white};
-  border-radius: 3px;
+  border-radius: ${p => p.theme.radii[1]}px;
   border: 1px solid ${p => p.theme.colors.fog};
   box-shadow: none;
   &:focus {

src/components/base/InputCurrency/index.js

@@ -43,6 +43,13 @@ const Currencies = styled(Box)`
   right: -1px;
 `
 
+const Currency = styled(Box).attrs({
+  color: 'grey',
+  fontSize: 2,
+  pl: 2,
+  pr: 1,
+})``
+
 type Value = string | number
 
 type Props = {
@@ -133,8 +140,6 @@ class InputCurrency extends PureComponent<Props, State> {
       return null
     }
 
-    const renderItem = item => item.code
-
     return (
       <Currencies onClick={e => e.stopPropagation()}>
         <Select
@@ -144,8 +149,8 @@ class InputCurrency extends PureComponent<Props, State> {
           onChange={item => onChange(unformat(item, value), item)}
           items={units}
           value={unit}
-          renderItem={renderItem}
-          renderSelected={renderItem}
+          renderItem={item => item.code}
+          renderSelected={item => <Currency>{item.code}</Currency>}
         />
       </Currencies>
     )

src/components/base/Modal/index.js

@@ -77,7 +77,7 @@ const Wrapper = styled(Tabbable).attrs({
   }),
 })`
   outline: none;
-  width: 570px;
+  width: 500px;
   z-index: 2;
 `
 

src/components/base/Select/index.js

@@ -63,15 +63,31 @@ const TriggerBtn = styled(Box).attrs({
 
 const Item = styled(Box).attrs({
   alignItems: 'center',
-  p: 2,
+  fontSize: 4,
+  ff: p => `Open Sans|${p.selected ? 'SemiBold' : 'Regular'}`,
+  px: 3,
+  py: 2,
+  color: 'dark',
 })`
   background: ${p => (p.highlighted ? p.theme.colors.lightGrey : p.theme.colors.white)};
+
+  ${p =>
+    p.first &&
+    `
+    border-top-left-radius: ${p.theme.radii[1]}px;
+    border-top-right-radius: ${p.theme.radii[1]}px;
+  `} ${p =>
+    p.last &&
+    `
+    border-bottom-left-radius: ${p.theme.radii[1]}px;
+    border-bottom-right-radius: ${p.theme.radii[1]}px;
+  `};
 `
 
 const Dropdown = styled(Box).attrs({
   mt: 1,
 })`
-  border-radius: 3px;
+  border-radius: ${p => p.theme.radii[1]}px;
   border: 1px solid ${p => p.theme.colors.fog};
   box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px;
   left: 0;
@@ -162,7 +178,14 @@ class Select extends PureComponent<Props> {
                 innerRef={n => (this._children[i] = n)}
                 {...getItemProps({ item })}
               >
-                <Item highlighted={i === highlightedIndex} horizontal flow={2}>
+                <Item
+                  first={i === 0}
+                  last={i === items.length - 1}
+                  highlighted={i === highlightedIndex}
+                  selected={selectedItem === item}
+                  horizontal
+                  flow={3}
+                >
                   <Box grow>
                     {renderItem ? (
                       renderItem(item)
@@ -235,7 +258,7 @@ class Select extends PureComponent<Props> {
                 <Box relative>
                   <Input keepEvent {...getInputProps({ placeholder })} onClick={openMenu} />
                   <FloatingDown>
-                    <IconAngleDown width={10} height={10} />
+                    <IconAngleDown width={16} height={16} />
                   </FloatingDown>
                 </Box>
               ) : (
@@ -257,7 +280,7 @@ class Select extends PureComponent<Props> {
                     )}
                   </Box>
                   <FloatingDown>
-                    <IconAngleDown width={10} height={10} />
+                    <IconAngleDown width={16} height={16} />
                   </FloatingDown>
                 </TriggerBtn>
               )}

src/components/modals/Send/01-step-amount.js

@@ -126,7 +126,7 @@ function Fees(props: PropsFees) {
   return (
     <Fragment>
       <Select
-        style={{ width: 200 }}
+        style={{ width: 156 }}
         items={[{ key: 'custom', name: 'Custom' }]}
         value={{ key: 'custom', name: 'Custom' }}
         renderSelected={item => item.name}

src/icons/AngleDown.js

@@ -1,10 +1,10 @@
 import React from 'react'
 
 export default props => (
-  <svg viewBox="0 0 8 7" {...props}>
+  <svg viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
-      d="M4 3.76671849l2.19299639-2.05643618c.29899515-.28037641.78376209-.28037641 1.08275724 0 .29899516.28037641.29899516.73495639 0 1.0153328L4.54137862 5.28971769c-.29899515.28037641-.78376209.28037641-1.08275724 0L.72424637 2.72561511c-.29899516-.28037641-.29899516-.73495639 0-1.0153328.29899515-.28037641.78376209-.28037641 1.08275724 0L4 3.76671849z"
+      d="M7.70123023 10.2169906L3.62390158 6.53574061c-.16520211-.146875-.16520211-.384375 0-.53125l.24956063-.221875c.16520211-.146875.43233744-.146875.59753955 0L8 8.97949061l3.5289982-3.19375c.1652022-.146875.4323375-.146875.5975396 0l.2495606.221875c.1652021.146875.1652021.384375 0 .53125L8.29876977 10.2201156c-.16520211.14375-.43233743.14375-.59753954-.003125z"
     />
   </svg>
 )