Merge pull request #274 from loeck/master

Add Top/Bottom Icon for Balance Summary

src/components/BalanceSummary/BalanceInfos.js

@@ -42,10 +42,10 @@ export function BalanceSincePercent(props: BalanceSinceProps) {
   return (
     <Box {...otherProps}>
       <FormattedVal
+        fontSize={7}
         isPercent
         val={refBalance ? Math.floor((totalBalance - refBalance) / refBalance * 100) : 0}
-        alwaysShowSign
-        fontSize={7}
+        withIcon
       />
       <Sub>{t(`time:since.${since}`)}</Sub>
     </Box>
@@ -58,10 +58,10 @@ export function BalanceSinceDiff(props: Props) {
     <Box {...otherProps}>
       <FormattedVal
         fiat={counterValue}
-        alwaysShowSign
+        fontSize={7}
         showCode
         val={totalBalance - sinceBalance}
-        fontSize={7}
+        withIcon
       />
       <Sub>{t(`time:since.${since}`)}</Sub>
     </Box>
@@ -73,7 +73,6 @@ export function BalanceTotal(props: BalanceTotalProps) {
   return (
     <Box grow>
       <FormattedVal
-        alwaysShowSign={false}
         color="dark"
         fiat={counterValue}
         fontSize={8}

src/components/base/Chart/refreshDraw.js

@@ -21,8 +21,8 @@ function getTickXCount(tickXScale) {
 }
 
 const RENDER_TICK_X = {
-  year: 'MMM.',
-  default: 'MMM. D',
+  year: 'MMM',
+  default: 'MMM D',
 }
 
 function getRenderTickX(selectedTime) {
@@ -121,7 +121,7 @@ export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props })
 
     NODES.yTicks
       .selectAll('.tick:first-of-type line')
-      .attr('stroke-width', '2px')
+      .attr('stroke-width', '1px')
       .attr('stroke-dasharray', 'none')
   }
 
@@ -135,8 +135,7 @@ function stylizeAxis(axis) {
   axis.selectAll('path').attr('stroke', 'none')
   axis
     .selectAll('text')
-    .attr('stroke', themeColors.grey)
+    .attr('fill', themeColors.grey)
     .style('font-size', '12px')
     .style('font-family', 'Open Sans')
-    .style('font-weight', 300)
 }

src/components/base/FormattedVal/index.js

@@ -8,26 +8,40 @@ import type { Unit } from '@ledgerhq/currencies'
 
 import { formatCurrencyUnit, getFiatUnit } from '@ledgerhq/currencies'
 
+import Box from 'components/base/Box'
 import Text from 'components/base/Text'
 
+import IconBottom from 'icons/Bottom'
+import IconTop from 'icons/Top'
+
 const T = styled(Text).attrs({
   ff: 'Rubik',
-  color: p => (p.isNegative ? p.theme.colors.alertRed : p.theme.colors.positiveGreen),
+  color: p =>
+    p.withIcon
+      ? p.theme.colors.dark
+      : p.isNegative
+        ? p.theme.colors.alertRed
+        : p.theme.colors.positiveGreen,
 })``
 
+const I = ({ color, children }: { color: string, children: any }) => (
+  <Box color={color}>{children}</Box>
+)
+
 type Props = {
-  val: number,
+  alwaysShowSign?: boolean,
+  disableRounding?: boolean,
   fiat?: string | null,
   isPercent?: boolean,
-  unit?: Unit | null,
-  alwaysShowSign?: boolean,
   showCode?: boolean,
-  disableRounding?: boolean,
+  unit?: Unit | null,
+  val: number,
+  withIcon?: boolean,
 }
 
 function FormattedVal(props: Props) {
-  const { val, disableRounding, fiat, isPercent, alwaysShowSign, showCode, ...p } = props
-  let { unit } = props
+  const { disableRounding, fiat, isPercent, alwaysShowSign, showCode, withIcon, ...p } = props
+  let { val, unit } = props
 
   if (isUndefined(val)) {
     throw new Error('FormattedVal require a `val` prop. Received `undefined`')
@@ -45,6 +59,11 @@ function FormattedVal(props: Props) {
     } else if (!unit) {
       return ''
     }
+
+    if (withIcon && isNegative) {
+      val *= -1
+    }
+
     text = formatCurrencyUnit(unit, val, {
       alwaysShowSign,
       disableRounding,
@@ -53,8 +72,25 @@ function FormattedVal(props: Props) {
   }
 
   return (
-    <T isNegative={isNegative} {...p}>
-      {text}
+    <T isNegative={isNegative} withIcon={withIcon} {...p}>
+      {withIcon ? (
+        <Box horizontal alignItems="center" flow={1}>
+          <Box>
+            {isNegative ? (
+              <I color="alertRed">
+                <IconBottom size={16} />
+              </I>
+            ) : (
+              <I color="positiveGreen">
+                <IconTop size={16} />
+              </I>
+            )}
+          </Box>
+          <Box>{text}</Box>
+        </Box>
+      ) : (
+        text
+      )}
     </T>
   )
 }
@@ -66,6 +102,7 @@ FormattedVal.defaultProps = {
   isPercent: false,
   showCode: false,
   unit: null,
+  withIcon: false,
 }
 
 export default FormattedVal

src/icons/Bottom.js

@@ -0,0 +1,12 @@
+// @flow
+
+import React from 'react'
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    <path
+      fill="currentColor"
+      d="M11.82 5H4.149c-1.46 0-2.2 1.616-1.161 2.56l3.834 3.5c.641.584 1.683.584 2.327 0l3.838-3.5c1.028-.941.298-2.56-1.165-2.56z"
+    />
+  </svg>
+)

src/icons/Top.js

@@ -0,0 +1,12 @@
+// @flow
+
+import React from 'react'
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    <path
+      fill="currentColor"
+      d="M4.502 11h6.996c1.333 0 2.005-1.617 1.06-2.56l-3.497-3.5a1.5 1.5 0 0 0-2.122 0l-3.498 3.5C2.499 9.381 3.166 11 4.5 11z"
+    />
+  </svg>
+)