Merge pull request #168 from meriadec/master

Update colors

src/components/Breadcrumb/Step.js

@@ -8,7 +8,7 @@ import Box from 'components/base/Box'
 const Wrapper = styled(Box).attrs({
   align: 'center',
   justify: 'center',
-  color: p => (p.isActive ? 'blue' : 'mouse'),
+  color: p => (p.isActive ? 'wallet' : 'mouse'),
 })`
   width: 40px;
   flex-shrink: 0;
@@ -20,13 +20,13 @@ const Number = styled(Box).attrs({
   align: 'center',
   justify: 'center',
   color: p => (p.isActive ? 'white' : 'mouse'),
-  bg: p => (p.isActive ? 'blue' : 'pearl'),
+  bg: p => (p.isActive ? 'wallet' : 'pearl'),
 })`
   width: 20px;
   height: 20px;
   border-radius: 50%;
   font-size: 9px;
-  box-shadow: ${p => `0 0 0 ${p.isActive ? 4 : 0}px ${p.theme.colors.cream}`};
+  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;
 `
 
@@ -45,7 +45,7 @@ const Bar = styled.div`
     top: 0;
     bottom: 0;
     position: absolute;
-    background: ${p => p.theme.colors.blue};
+    background: ${p => p.theme.colors.wallet};
     transition: transform ease-in-out 0.4s;
     transform-origin: center left;
     transform: scaleX(${p => (p.isActive ? 1 : 0)});

src/components/DashboardPage/AccountCard.js

@@ -23,11 +23,11 @@ const AccountCard = ({
   return (
     <Card p={4} flow={4} flex={1} style={{ cursor: 'pointer' }} onClick={onClick}>
       <Box horizontal ff="Open Sans|SemiBold" flow={3} alignItems="center">
-        <Box alignItems="center" justifyContent="center" style={{ color: '#fcb653' }}>
+        <Box alignItems="center" justifyContent="center" style={{ color: account.currency.color }}>
           {Icon && <Icon size={20} />}
         </Box>
         <Box>
-          <Box style={{ textTransform: 'uppercase' }} fontSize={0} color="warmGrey">
+          <Box style={{ textTransform: 'uppercase' }} fontSize={0} color="graphite">
             {account.unit.code}
           </Box>
           <Box fontSize={4} color="dark">
@@ -48,7 +48,7 @@ const AccountCard = ({
       <AreaChart
         tiny
         id={`account-chart-${account.id}`}
-        color="#fcb653"
+        color={account.currency.color}
         height={52}
         data={data}
         strokeWidth={1}

src/components/DashboardPage/AccountsOrder.js

@@ -27,7 +27,7 @@ import IconArrowUp from 'icons/ArrowUp'
 const OrderIcon = styled(Box).attrs({
   alignItems: 'center',
   justifyContent: 'center',
-  color: 'dodgerBlue',
+  color: 'wallet',
 })`
   opacity: ${p => (p.isActive ? 1 : 0)};
 `

src/components/DashboardPage/BalanceInfos.js

@@ -23,7 +23,7 @@ type Props = {
 
 const Sub = styled(Text).attrs({
   ff: 'Open Sans',
-  color: 'warmGrey',
+  color: 'graphite',
   fontSize: 4,
 })``
 

src/components/DashboardPage/index.js

@@ -229,7 +229,7 @@ class DashboardPage extends PureComponent<Props, State> {
               <Box px={6}>
                 <BalanceInfos since={selectedTime} />
               </Box>
-              <Box ff="Open Sans" fontSize={4} color="warmGrey">
+              <Box ff="Open Sans" fontSize={4} color="graphite">
                 <AreaChart
                   id="dashboard-chart"
                   margin={{

src/components/DevTools.js

@@ -78,7 +78,7 @@ const fontSizes: Array<SimpleType> = theme.fontSizes.map((s, i) => ({
 }))
 
 const Container = styled(Box).attrs({
-  bg: 'night',
+  bg: 'dark',
   p: 5,
   grow: true,
   color: 'white',
@@ -98,7 +98,7 @@ const Items = styled(Box).attrs({
 
 const Item = styled(Box).attrs({
   alignItems: 'center',
-  bg: 'night',
+  bg: 'dark',
   borderRadius: 1,
   color: 'white',
   justifyContent: 'center',
@@ -276,7 +276,7 @@ class DevTools extends PureComponent<any, State> {
 }
 
 const Color = ({ onClick, color }: { onClick: Function, color: ColorType }) => (
-  <Item bg={color.val} color={color.isDark ? 'white' : 'night'} onClick={onClick}>
+  <Item bg={color.val} color={color.isDark ? 'white' : 'dark'} onClick={onClick}>
     {color.name}
   </Item>
 )

src/components/GlobalSearch.js

@@ -14,7 +14,6 @@ const Container = styled(Box).attrs({
   horizontal: true,
   ff: 'Open Sans|SemiBold',
   fontSize: 4,
-  color: p => (p.isFocused ? 'dark' : 'warmGrey'),
 })``
 
 const Input = styled.input`
@@ -22,10 +21,6 @@ const Input = styled.input`
   background: transparent;
   outline: none;
   flex-grow: 1;
-
-  &::placeholder {
-    color: ${p => p.theme.colors.warmGrey};
-  }
 `
 
 type State = {

src/components/ReceiveBox.js

@@ -20,7 +20,7 @@ import QRCode from 'components/base/QRCode'
 import Text from 'components/base/Text'
 
 export const AddressBox = styled(Box).attrs({
-  bg: 'cream',
+  bg: 'lightGrey',
   p: 2,
 })`
   border-radius: 3px;

src/components/RecipientAddress/index.js

@@ -10,7 +10,7 @@ import Icon from 'components/base/Icon'
 import Input from 'components/base/Input'
 
 const IconQrCode = ({ onClick }: { onClick: Function }) => (
-  <Box color="steel" style={{ position: 'absolute', right: 15 }}>
+  <Box color="graphite" style={{ position: 'absolute', right: 15 }}>
     <Icon fontSize={30} name="qrcode" style={{ cursor: 'pointer' }} onClick={onClick} />
   </Box>
 )

src/components/SelectAccount/index.js

@@ -24,7 +24,7 @@ const mapStateToProps: MapStateToProps<*, *, *> = state => ({
 const renderItem = item => (
   <Box horizontal alignItems="center">
     <Box grow>
-      <Text color="night" fontSize={0} fontWeight="bold">
+      <Text color="dark" fontSize={0} fontWeight="bold">
         {item.name}
       </Text>
     </Box>

src/components/SideBar/Item.js

@@ -38,12 +38,13 @@ const Container = styled(Tabbable).attrs({
   cursor: pointer;
   color: ${p => p.theme.colors.dark};
   opacity: ${p => (p.isActive ? 1 : 0.4)};
-  background: ${p => (p.isActive ? p.theme.colors.argile : '')};
+  background: ${p => (p.isActive ? p.theme.colors.lightGrey : '')};
   height: ${p => (p.big ? 50 : 36)}px;
   outline: none;
 
-  &:hover {
-    background: ${p => (p.isActive ? p.theme.colors.argile : p.theme.colors.cream)};
+  &:hover,
+  &:focus {
+    background: ${p => p.theme.colors.lightGrey};
   }
 `
 
@@ -88,7 +89,7 @@ function Item({
       <Box justifyContent="center">
         <Text fontSize={4}>{children}</Text>
         {desc && (
-          <Box color="steel" fontSize={3}>
+          <Box color="graphite" fontSize={3}>
             {desc}
           </Box>
         )}
@@ -98,7 +99,7 @@ function Item({
 }
 
 Item.defaultProps = {
-  iconActiveColor: 'blue',
+  iconActiveColor: 'wallet',
   big: false,
   desc: null,
   icon: null,

src/components/SideBar/index.js

@@ -107,7 +107,7 @@ class SideBar extends PureComponent<Props> {
                     desc={
                       <FormattedVal
                         alwaysShowSign={false}
-                        color="warmGrey"
+                        color="graphite"
                         unit={account.unit}
                         showCode
                         val={account.balance || 0}

src/components/TopBar.js

@@ -46,14 +46,14 @@ const Inner = styled(Box).attrs({
 const Bar = styled.div`
   height: 15px;
   width: 1px;
-  background: ${p => p.theme.colors.mouse};
+  background: #ff0000;
 `
 
 const Activity = styled.div`
   background: ${p =>
     p.progress === true
-      ? p.theme.colors.dodgerBlue
-      : p.fail === true ? p.theme.colors.grenade : p.theme.colors.green};
+      ? p.theme.colors.wallet
+      : p.fail === true ? p.theme.colors.alertRed : p.theme.colors.positiveGreen};
   border-radius: 50%;
   bottom: 20px;
   height: 4px;
@@ -148,7 +148,7 @@ class TopBar extends PureComponent<Props, State> {
     const { sync } = this.state
 
     return (
-      <Container bg="cream" color="warmGrey">
+      <Container bg="lightGrey" color="graphite">
         <Inner>
           <Box grow horizontal flow={4}>
             <GlobalSearch t={t} />
@@ -184,12 +184,11 @@ class TopBar extends PureComponent<Props, State> {
               ]}
               renderItem={({ item, isHighlighted }) => (
                 <DropDownItem isHighlighted={isHighlighted}>
-                  <Box color={isHighlighted ? 'dodgerBlue' : ''}>{item.icon}</Box>
+                  <Box color={isHighlighted ? 'wallet' : ''}>{item.icon}</Box>
                   <Box>{item.label}</Box>
                 </DropDownItem>
               )}
               alignItems="center"
-              color="warmGrey"
               ff="Open Sans|SemiBold"
               flow={1}
               fontSize={4}

src/components/TransactionsList/index.js

@@ -22,7 +22,7 @@ const AMOUNT_COL_SIZE = 150
 
 const Cap = styled(Text).attrs({
   fontSize: 2,
-  color: 'warmGrey',
+  color: 'graphite',
   ff: 'Museo Sans|Bold',
 })`
   text-transform: uppercase;
@@ -38,7 +38,7 @@ const Day = styled(Text).attrs({
 `
 
 const Hour = styled(Day).attrs({
-  color: 'warmGrey',
+  color: 'graphite',
 })``
 
 const HeaderCol = ({ size, children, ...props }: { size?: number, children: any }) => (
@@ -101,7 +101,11 @@ const Transaction = ({
             style={{ cursor: 'pointer' }}
             onClick={() => onAccountClick && onAccountClick(tx.account)}
           >
-            <Box alignItems="center" justifyContent="center" style={{ color: '#fcb653' }}>
+            <Box
+              alignItems="center"
+              justifyContent="center"
+              style={{ color: tx.account.currency.color }}
+            >
               {Icon && <Icon size={16} />}
             </Box>
             <Box ff="Open Sans|SemiBold" fontSize={4} color="dark">
@@ -119,7 +123,7 @@ const Transaction = ({
           display: 'block',
         }}
       >
-        <Box ff="Open Sans" fontSize={3} color="lead">
+        <Box ff="Open Sans" fontSize={3} color="graphite">
           {tx.balance > 0 ? t('transactionsList.from') : t('transactionsList.to')}
         </Box>
         <Box color="dark" ff="Open Sans" fontSize={3}>

src/components/UpdateNotifier.js

@@ -30,7 +30,7 @@ const mapStateToProps: MapStateToProps<*, *, *> = (state: State) => ({
 
 const Container = styled(Box).attrs({
   p: 1,
-  bg: 'blue',
+  bg: 'wallet',
   color: 'white',
   style: p => ({
     transform: `translate3d(0, ${p.offset}%, 0)`,

src/components/base/Button/index.js

@@ -48,7 +48,7 @@ function getProps({ disabled, icon, primary }: Object) {
       primary,
       {
         color: 'white',
-        bg: 'blue',
+        bg: 'wallet',
         withShadow: true,
       },
       {

src/components/base/CheckBox/index.js

@@ -27,9 +27,9 @@ const Base = styled(Tabbable).attrs({
   outline: none;
   border-radius: 3px;
   border: 1px solid transparent;
-  background-color: ${p => (p.isChecked ? p.theme.colors.blue : p.theme.colors.white)};
+  background-color: ${p => (p.isChecked ? p.theme.colors.wallet : p.theme.colors.white)};
   box-shadow: 0 0 0 ${p => (p.isChecked ? 4 : 1)}px
-    ${p => (p.isChecked ? p.theme.colors.cream : p.theme.colors.argile)};
+    ${p => (p.isChecked ? p.theme.colors.lightGrey : p.theme.colors.graphite)};
   font-size: 7px;
   height: 19px;
   width: 19px;

src/components/base/DropDown/index.js

@@ -30,7 +30,7 @@ export const DropDownItem = styled(Box).attrs({
   fontSize: 4,
   px: 3,
   color: p => (p.isHighlighted || p.isActive ? 'dark' : 'warnGrey'),
-  bg: p => (p.isActive ? 'cream' : ''),
+  bg: p => (p.isActive ? 'lightGrey' : ''),
 })`
   cursor: pointer;
   height: 40px;

src/components/base/FormattedVal.js

@@ -10,7 +10,7 @@ import Text from 'components/base/Text'
 
 const T = styled(Text).attrs({
   ff: 'Rubik',
-  color: p => (p.isNegative ? p.theme.colors.grenade : p.theme.colors.green),
+  color: p => (p.isNegative ? p.theme.colors.alertRed : p.theme.colors.positiveGreen),
 })``
 
 type Props = {

src/components/base/GrowScroll/stories.js

@@ -14,8 +14,8 @@ stories.add('basic', () => {
 
   return (
     <Box
-      bg={reverseColor ? 'night' : 'white'}
-      color={reverseColor ? 'white' : 'night'}
+      bg={reverseColor ? 'dark' : 'white'}
+      color={reverseColor ? 'white' : 'dark'}
       style={{
         border: '1px solid black',
       }}

src/components/base/Input/index.js

@@ -13,7 +13,7 @@ const Base = styled.input.attrs({
   border-radius: 3px;
   display: flex;
   width: 100%;
-  color: ${p => p.theme.colors.steel};
+  color: ${p => p.theme.colors.graphite};
   background: ${p => p.theme.colors.white};
 
   &::placeholder {

src/components/base/Overlay.js

@@ -8,7 +8,7 @@ import { rgba } from 'styles/helpers'
 import Box from 'components/base/Box'
 
 const Overlay = styled(({ sticky, ...props }) => <Box sticky {...props} />)`
-  background-color: ${p => rgba(p.theme.colors.night, 0.4)};
+  background-color: ${p => rgba(p.theme.colors.dark, 0.4)};
   position: fixed;
 `
 

src/components/base/Pills/index.js

@@ -24,8 +24,8 @@ const Container = styled(Box).attrs({
 
 const Pill = styled(Tabbable).attrs({
   ff: p => (p.isActive ? 'Open Sans|SemiBold' : 'Open Sans'),
-  color: p => (p.isActive ? 'dodgerBlue' : 'warmGrey'),
-  bg: p => (p.isActive ? rgba(p.theme.colors.dodgerBlue, 0.1) : ''),
+  color: p => (p.isActive ? 'wallet' : 'grey'),
+  bg: p => (p.isActive ? rgba(p.theme.colors.wallet, 0.1) : ''),
   px: 3,
   fontSize: 4,
   borderRadius: 1,
@@ -37,7 +37,7 @@ const Pill = styled(Tabbable).attrs({
   cursor: ${p => (p.isActive ? 'default' : 'pointer')};
 
   &:focus {
-    color: ${p => p.theme.colors.dodgerBlue};
+    color: ${p => p.theme.colors.wallet};
     background-color: ${p => (p.isActive ? '' : rgba(p.theme.colors.black, 0.02))};
   }
 `

src/components/base/Radio/index.js

@@ -7,7 +7,7 @@ import { Tabbable } from 'components/base/Box'
 
 const Base = styled(Tabbable).attrs({ relative: true })`
   outline: none;
-  box-shadow: 0 0 0 1px ${p => (p.isChecked ? p.theme.colors.cream : p.theme.colors.argile)};
+  box-shadow: 0 0 0 1px ${p => (p.isChecked ? p.theme.colors.lightGrey : p.theme.colors.graphite)};
   border-radius: 50%;
   height: 19px;
   width: 19px;
@@ -15,7 +15,7 @@ const Base = styled(Tabbable).attrs({ relative: true })`
 
   &:focus {
     box-shadow: 0 0 0 ${p => (p.isChecked ? 4 : 2)}px
-      ${p => (p.isChecked ? p.theme.colors.cream : p.theme.colors.argile)};
+      ${p => (p.isChecked ? p.theme.colors.lightGrey : p.theme.colors.graphite)};
   }
 
   &:before,
@@ -31,7 +31,7 @@ const Base = styled(Tabbable).attrs({ relative: true })`
   }
 
   &:before {
-    background-color: ${p => p.theme.colors.blue};
+    background-color: ${p => p.theme.colors.wallet};
     ${p =>
       p.isChecked &&
       `

src/components/base/Select/index.js

@@ -32,7 +32,7 @@ type Props = {
   value?: Object | null,
 }
 
-const Container = styled(Box).attrs({ relative: true, color: 'steel' })``
+const Container = styled(Box).attrs({ relative: true, color: 'graphite' })``
 
 const TriggerBtn = styled(Box).attrs({
   p: 2,
@@ -43,7 +43,7 @@ const TriggerBtn = styled(Box).attrs({
   border-radius: 3px;
   display: flex;
   width: 100%;
-  color: ${p => p.theme.colors.steel};
+  color: ${p => p.theme.colors.graphite};
   background: ${p => p.theme.colors.white};
   cursor: pointer;
   &:focus {
@@ -56,7 +56,7 @@ const Item = styled(Box).attrs({
   alignItems: 'center',
   p: 2,
 })`
-  background: ${p => (p.highlighted ? p.theme.colors.cream : p.theme.colors.white)};
+  background: ${p => (p.highlighted ? p.theme.colors.lightGrey : p.theme.colors.white)};
 `
 
 const ItemWrapper = styled(Box)`
@@ -94,7 +94,7 @@ const FloatingTriangles = styled(Box).attrs({
 `
 
 const IconSelected = styled(Box).attrs({
-  bg: 'blue',
+  bg: 'wallet',
   color: 'white',
   alignItems: 'center',
   justifyContent: 'center',

src/components/base/Tabs/index.js

@@ -21,9 +21,11 @@ const Tab = styled(Tabbable).attrs({
   fontSize: 3,
 })`
   border-bottom: 2px solid transparent;
-  border-bottom-color: ${p => (p.isActive ? p.theme.colors.blue : '')};
+  border-bottom-color: ${p => (p.isActive ? p.theme.colors.wallet : '')};
   color: ${p =>
-    p.isActive ? p.theme.colors.blue : p.isDisabled ? p.theme.colors.grey : p.theme.colors.steel};
+    p.isActive
+      ? p.theme.colors.wallet
+      : p.isDisabled ? p.theme.colors.grey : p.theme.colors.graphite};
   margin-bottom: -1px;
   outline: none;
   cursor: ${p => (p.isActive ? 'default' : p.isDisabled ? 'not-allowed' : 'pointer')};

src/components/layout/Default.js

@@ -61,7 +61,7 @@ class Default extends Component<Props> {
           <Box grow horizontal bg="white">
             <SideBar />
 
-            <Box shrink grow bg="cream" color="grey" relative>
+            <Box shrink grow bg="lightGrey" color="grey" relative>
               <TopBar />
               <UpdateNotifier />
               <Container innerRef={n => (this._scrollContainer = n)}>

src/components/modals/AddAccount/RestoreAccounts.js

@@ -10,7 +10,7 @@ import Text from 'components/base/Text'
 import type { Accounts } from 'types/common'
 
 const Container = styled(Box)`
-  border: 1px solid ${p => p.theme.colors.grenade};
+  border: 1px solid ${p => p.theme.colors.alertRed};
 `
 
 type Props = {

src/components/modals/AddAccount/index.js

@@ -325,7 +325,7 @@ class AddAccountModal extends PureComponent<Props, State> {
 
           return (
             <ModalBody onClose={onClose} flow={3}>
-              <Text fontSize={6} color="steel">
+              <Text fontSize={6} color="graphite">
                 {t('addAccount.title')}
               </Text>
               <Step {...this.getStepProps()} />

src/components/modals/Receive.js

@@ -65,7 +65,7 @@ class ReceiveModal extends PureComponent<Props, State> {
 
           return (
             <ModalBody onClose={onClose} flow={3}>
-              <Text fontSize={4} color="steel">
+              <Text fontSize={4} color="graphite">
                 {t('receive.title')}
               </Text>
               <Box flow={1}>

src/components/modals/Send.js

@@ -30,9 +30,7 @@ const Steps = {
       }}
     >
       <Box flow={3}>
-        <Text fontSize={6} color="steel">
-          {t('send.title')}
-        </Text>
+        <Text fontSize={6}>{t('send.title')}</Text>
         <Box flow={1}>
           <Label>Account to debit</Label>
           <SelectAccount onChange={props.onChangeInput('account')} value={props.value.account} />

src/components/modals/SettingsAccount.js

@@ -141,7 +141,7 @@ class SettingsAccount extends PureComponent<Props, State> {
 
           return (
             <ModalBody onClose={onClose} flow={3}>
-              <Text fontSize={4} color="steel">
+              <Text fontSize={4} color="graphite">
                 Account settings
               </Text>
               <Box

src/styles/theme.js

@@ -63,27 +63,23 @@ export const fontFamilies = {
 export const colors = {
   transparent: 'transparent',
 
-  black: '#000000',
-  white: '#ffffff',
-
-  argile: '#eeeeee',
-  blue: '#6193ff',
-  cream: '#f9f9f9',
-  grey: '#a8b6c2',
-  green: '#a6d495',
-  grenade: '#ea2e49',
-  lead: '#999999',
-  mouse: '#e2e2e2',
-  night: '#1d2028',
-  ocean: '#27d0e2',
-  pearl: '#f4f4f4',
-  shark: '#666666',
-  steel: '#767676',
+  argile: '#ff0000',
+  mouse: '#ff0000',
+  pearl: '#ff0000',
 
+  // new colors
+  identity: '#41ccb4',
+  wallet: '#4b84ff',
+  positiveGreen: '#96d071',
+  alertRed: '#fa4352',
+  black: '#000000',
   dark: '#1d2028',
-  dodgerBlue: '#4b84ff',
-  paleGrey: '#f7f8fa',
-  warmGrey: '#999999',
+  smoke: '#666666',
+  graphite: '#767676',
+  grey: '#999999',
+  fog: '#d8d8d8',
+  lightGrey: '#f9f9f9',
+  white: '#ffffff',
 }
 
 export default {