Merge pull request #217 from meriadec/master

Update style of Breadcrumb, Input, Select, and SelectAccount

src/components/Breadcrumb/Step.js

@@ -5,12 +5,14 @@ import styled from 'styled-components'
 
 import Box from 'components/base/Box'
 
+const RADIUS = 17
+
 const Wrapper = styled(Box).attrs({
   align: 'center',
   justify: 'center',
   color: p => (p.isActive ? 'wallet' : 'fog'),
 })`
-  width: 40px;
+  width: ${RADIUS}px;
   flex-shrink: 0;
   text-align: center;
   font-size: 9px;
@@ -19,22 +21,26 @@ const Wrapper = styled(Box).attrs({
 const Number = styled(Box).attrs({
   align: 'center',
   justify: 'center',
-  color: p => (p.isActive ? 'white' : 'fog'),
+  color: 'white',
-  bg: p => (p.isActive ? 'wallet' : 'pearl'),
+  bg: p => (p.isActive ? 'wallet' : 'fog'),
+  ff: 'Rubik|Regular',
 })`
-  width: 20px;
+  width: ${RADIUS}px;
-  height: 20px;
+  height: ${RADIUS}px;
   border-radius: 50%;
-  font-size: 9px;
+  font-size: 10px;
+  line-height: 10px;
   box-shadow: ${p => `0 0 0 ${p.isActive ? 4 : 0}px ${p.theme.colors.lightGrey}`};
   transition: all ease-in-out 0.1s ${p => (p.isActive ? 0.4 : 0)}s;
 `
 
 const Bar = styled.div`
   height: 2px;
-  background: ${p => p.theme.colors.pearl};
+  background: ${p => p.theme.colors.fog};
   flex-grow: 1;
+  max-width: 100px;
   position: relative;
+  margin-top: -2px;
 
   &:after {
     background: ${p => p.theme.colors.pearl};
@@ -52,9 +58,12 @@ const Bar = styled.div`
   }
 `
 
-const Label = styled(Box)`
+const Label = styled(Box).attrs({
+  fontSize: 3,
+  ff: 'Museo Sans|Bold',
+})`
   position: absolute;
-  margin-top: 30px;
+  margin-top: 27px;
   transition: color ease-in-out 0.1s ${p => (p.isActive ? 0.4 : 0)}s;
 `
 

src/components/Breadcrumb/index.js

@@ -16,6 +16,7 @@ type Props = {
 const Wrapper = styled(Box).attrs({
   horizontal: true,
   align: 'center',
+  justify: 'center',
 })`
   margin-bottom: 25px;
 `

src/components/SelectAccount/index.js

@@ -1,10 +1,10 @@
 // @flow
 
 import React from 'react'
-import { compose } from 'redux'
 import { connect } from 'react-redux'
 import { translate } from 'react-i18next'
 import noop from 'lodash/noop'
+import { getIconByCoinType } from '@ledgerhq/currencies/react'
 
 import type { T, Accounts, Account } from 'types/common'
 
@@ -19,18 +19,27 @@ const mapStateToProps = state => ({
   accounts: getVisibleAccounts(state),
 })
 
-const renderItem = a => (
+const renderItem = a => {
-  <Box horizontal alignItems="center">
+  const Icon = getIconByCoinType(a.coinType)
-    <Box grow>
+  const { color } = a.currency
-      <Text ff="Open Sans|SemiBold" color="dark" fontSize={4}>
+  return (
-        {a.name}
+    <Box horizontal alignItems="center" flow={2}>
-      </Text>
+      {Icon && (
+        <Box style={{ width: 16, height: 16, color }}>
+          <Icon size={16} />
+        </Box>
+      )}
+      <Box grow>
+        <Text ff="Open Sans|SemiBold" color="dark" fontSize={4}>
+          {a.name}
+        </Text>
+      </Box>
+      <Box>
+        <FormattedVal color="grey" val={a.balance} unit={a.unit} showCode />
+      </Box>
     </Box>
-    <Box>
+  )
-      <FormattedVal color="grey" val={a.balance} unit={a.unit} />
+}
-    </Box>
-  </Box>
-)
 
 type Props = {
   accounts: Accounts,
@@ -39,7 +48,7 @@ type Props = {
   t: T,
 }
 
-export const SelectAccount = ({ accounts, onChange, value, t }: Props) => (
+const RawSelectAccount = ({ accounts, onChange, value, t }: Props) => (
   <Select
     value={value && accounts.find(a => value && a.id === value.id)}
     renderSelected={renderItem}
@@ -52,9 +61,11 @@ export const SelectAccount = ({ accounts, onChange, value, t }: Props) => (
   />
 )
 
-SelectAccount.defaultProps = {
+RawSelectAccount.defaultProps = {
   onChange: noop,
   value: undefined,
 }
 
-export default compose(connect(mapStateToProps), translate())(SelectAccount)
+export const SelectAccount = translate()(RawSelectAccount)
+
+export default connect(mapStateToProps)(SelectAccount)

src/components/base/Input/index.js

@@ -2,16 +2,19 @@
 
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
-import { space } from 'styled-system'
+import { space, fontSize } from 'styled-system'
 
 import fontFamily from 'styles/styled/fontFamily'
 
 const Base = styled.input.attrs({
-  p: 4,
+  px: 3,
   ff: 'Open Sans|SemiBold',
+  fontSize: 4,
 })`
   ${space};
   ${fontFamily};
+  ${fontSize};
+  height: 40px;
   border: 1px solid ${p => p.theme.colors.fog};
   border-radius: 3px;
   display: flex;

src/components/base/Select/Triangles.js

@@ -1,33 +0,0 @@
-// @flow
-
-import React from 'react'
-import styled from 'styled-components'
-
-import Box from 'components/base/Box'
-
-const UpTriangle = styled.div`
-  width: 0;
-  height: 0;
-  border-left: ${p => p.size}px solid transparent;
-  border-right: ${p => p.size}px solid transparent;
-  border-bottom: ${p => p.size}px solid ${p => p.theme.colors[p.color]};
-`
-
-const DownTriangle = styled.div`
-  width: 0;
-  height: 0;
-  border-left: ${p => p.size}px solid transparent;
-  border-right: ${p => p.size}px solid transparent;
-  border-top: ${p => p.size}px solid ${p => p.theme.colors[p.color]};
-`
-
-const Triangles = ({ size, color }: { size?: number, color?: string }) => (
-  <Box flow={1}>
-    <UpTriangle size={size} color={color} />
-    <DownTriangle size={size} color={color} />
-  </Box>
-)
-
-Triangles.defaultProps = { size: 5, color: 'fog' }
-
-export default Triangles

src/components/base/Select/index.js

@@ -14,8 +14,7 @@ import Search from 'components/base/Search'
 import Text from 'components/base/Text'
 
 import IconCheck from 'icons/Check'
-
+import IconAngleDown from 'icons/AngleDown'
-import Triangles from './Triangles'
 
 type Props = {
   fuseOptions?: Object,
@@ -37,10 +36,11 @@ const Container = styled(Box).attrs({ relative: true, color: 'graphite' })``
 
 const TriggerBtn = styled(Box).attrs({
   ff: 'Open Sans|SemiBold',
-  p: 4,
+  fontSize: 4,
+  pl: 3,
   pr: 5,
 })`
-  min-height: 64px;
+  height: 40px;
   ${space};
   border: 1px solid ${p => p.theme.colors.fog};
   border-radius: 3px;
@@ -62,12 +62,6 @@ const Item = styled(Box).attrs({
   background: ${p => (p.highlighted ? p.theme.colors.lightGrey : p.theme.colors.white)};
 `
 
-const ItemWrapper = styled(Box)`
-  & + & {
-    border-top: 1px solid ${p => p.theme.colors.fog};
-  }
-`
-
 const Dropdown = styled(Box).attrs({
   mt: 1,
 })`
@@ -81,7 +75,7 @@ const Dropdown = styled(Box).attrs({
   z-index: 1;
 `
 
-const FloatingTriangles = styled(Box).attrs({
+const FloatingDown = styled(Box).attrs({
   alignItems: 'center',
   justifyContent: 'center',
   mr: 2,
@@ -90,6 +84,7 @@ const FloatingTriangles = styled(Box).attrs({
   top: 0;
   right: 0;
   bottom: 0;
+  color: ${p => p.theme.colors.grey};
 
   // to "simulate" border to make arrows appears at the exact same place as
   // the no-input version
@@ -97,15 +92,12 @@ const FloatingTriangles = styled(Box).attrs({
 `
 
 const IconSelected = styled(Box).attrs({
-  bg: 'wallet',
+  color: 'wallet',
-  color: 'white',
   alignItems: 'center',
   justifyContent: 'center',
 })`
-  border-radius: 50%;
+  height: 12px;
-  height: 15px;
+  width: 12px;
-  font-size: 5px;
-  width: 15px;
   opacity: ${p => (p.selected ? 1 : 0)};
 `
 
@@ -156,7 +148,7 @@ class Select extends PureComponent<Props> {
             }}
           >
             {items.map((item, i) => (
-              <ItemWrapper
+              <Box
                 key={keyProp ? item[keyProp] : item.key}
                 innerRef={n => (this._children[i] = n)}
                 {...getItemProps({ item })}
@@ -171,17 +163,17 @@ class Select extends PureComponent<Props> {
                   </Box>
                   <Box>
                     <IconSelected selected={selectedItem === item}>
-                      <IconCheck height={7} width={7} />
+                      <IconCheck height={12} width={12} />
                     </IconSelected>
                   </Box>
                 </Item>
-              </ItemWrapper>
+              </Box>
             ))}
           </GrowScroll>
         ) : (
-          <ItemWrapper>
+          <Box>
             <Item>{'No results'}</Item>
-          </ItemWrapper>
+          </Box>
         )}
       </Dropdown>
     )
@@ -231,9 +223,9 @@ class Select extends PureComponent<Props> {
               {searchable ? (
                 <Box relative>
                   <Input keepEvent {...getInputProps({ placeholder })} onClick={openMenu} />
-                  <FloatingTriangles>
+                  <FloatingDown>
-                    <Triangles />
+                    <IconAngleDown width={10} height={10} />
-                  </FloatingTriangles>
+                  </FloatingDown>
                 </Box>
               ) : (
                 <TriggerBtn
@@ -250,9 +242,9 @@ class Select extends PureComponent<Props> {
                       <Text color="fog">{placeholder}</Text>
                     )}
                   </Box>
-                  <FloatingTriangles>
+                  <FloatingDown>
-                    <Triangles />
+                    <IconAngleDown width={10} height={10} />
-                  </FloatingTriangles>
+                  </FloatingDown>
                 </TriggerBtn>
               )}
               {isOpen &&