Merge pull request #826 from meriadec/polishes

Visual polishes
7 years ago · d924c7bd60
22 changed files with 131 additions and 118 deletions
--- a/src/components/DeviceInteraction/DeviceInteractionStep.js
+++ b/src/components/DeviceInteraction/DeviceInteractionStep.js
@ -180,7 +180,7 @@ class DeviceInteractionStep extends PureComponent<
        <IconContainer isTransparent={!isActive && !isSuccess}>{step.icon}</IconContainer>
        <Box py={4} justify="center" grow shrink>
          {title && (
-            <Box color={isActive || isSuccess ? 'dark' : ''} ff="Open Sans|SemiBold">
+            <Box color={isActive || isSuccess ? 'dark' : ''} ff="Open Sans|Regular">
              {title}
            </Box>
          )}
--- a/src/components/DeviceInteraction/components.js
+++ b/src/components/DeviceInteraction/components.js
@ -4,7 +4,6 @@ import React from 'react'
 import styled from 'styled-components'

 import { radii } from 'styles/theme'
-import { rgba } from 'styles/helpers'

 import TranslatedError from 'components/TranslatedError'
 import Box from 'components/base/Box'
@ -13,12 +12,12 @@ import Spinner from 'components/base/Spinner'
 import IconCheck from 'icons/Check'
 import IconCross from 'icons/Cross'
 import IconExclamationCircle from 'icons/ExclamationCircle'
+import IconSmoothBorders from 'icons/SmoothBorders'

 export const DeviceInteractionStepContainer = styled(Box).attrs({
  horizontal: true,
  ff: 'Open Sans',
  fontSize: 3,
-  bg: 'white',
  color: 'graphite',
 })`
  position: relative;
@ -27,21 +26,28 @@ export const DeviceInteractionStepContainer = styled(Box).attrs({
  min-height: 80px;
  border: 1px solid ${p => p.theme.colors.fog};
  border-color: ${p =>
-    p.isError ? p.theme.colors.alertRed : p.isActive || p.isSuccess ? p.theme.colors.wallet : ''};
+    p.isError ? p.theme.colors.alertRed : p.isActive && !p.isFinished ? p.theme.colors.wallet : ''};
  border-top-color: ${p => (p.isFirst || p.isActive ? '' : 'transparent')};
  border-bottom-color: ${p => (p.isPrecedentActive ? 'transparent' : '')};
  border-bottom-left-radius: ${p => (p.isLast ? `${radii[1]}px` : 0)};
  border-bottom-right-radius: ${p => (p.isLast ? `${radii[1]}px` : 0)};
  border-top-left-radius: ${p => (p.isFirst ? `${radii[1]}px` : 0)};
  border-top-right-radius: ${p => (p.isFirst ? `${radii[1]}px` : 0)};
-  box-shadow: ${p =>
-    p.isActive && !p.isSuccess
-      ? `
-    ${rgba(p.isError ? p.theme.colors.alertRed : p.theme.colors.wallet, 0.2)} 0 0 3px 2px
-  `
-      : 'none'};
 `

+const AbsCenter = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const smoothBorders = <IconSmoothBorders size={28} />
+
 export const IconContainer = ({
  children,
  isTransparent,
@ -50,15 +56,15 @@ export const IconContainer = ({
  isTransparent: boolean,
 }) => (
  <Box
-    align="center"
-    justify="center"
+    relative
    color="dark"
    style={{
      width: 70,
      opacity: isTransparent ? 0.5 : 1,
    }}
  >
-    {children}
+    <AbsCenter>{smoothBorders}</AbsCenter>
+    <AbsCenter>{children}</AbsCenter>
  </Box>
 )

--- a/src/components/EnsureDeviceApp.js
+++ b/src/components/EnsureDeviceApp.js
@ -27,8 +27,8 @@ import { getCurrentDevice } from 'reducers/devices'
 export const WrongAppOpened = createCustomErrorClass('WrongAppOpened')
 export const WrongDeviceForAccount = createCustomErrorClass('WrongDeviceForAccount')

-const usbIcon = <IconUsb size={30} />
-const Bold = props => <Text ff="Open Sans|Bold" {...props} />
+const usbIcon = <IconUsb size={16} />
+const Bold = props => <Text ff="Open Sans|SemiBold" {...props} />

 const mapStateToProps = state => ({
  device: getCurrentDevice(state),
@ -107,7 +107,7 @@ class EnsureDeviceApp extends Component<{
          {
            id: 'address',
            title: this.renderOpenAppTitle,
-            icon: Icon ? <Icon size={30} /> : null,
+            icon: Icon ? <Icon size={16} /> : null,
            run: this.openAppInteractionHandler,
          },
        ]}
--- a/src/components/ExchangePage/index.js
+++ b/src/components/ExchangePage/index.js
@ -44,13 +44,13 @@ class ExchangePage extends PureComponent<Props> {
    return (
      <Box pb={6}>
        <TrackPage category="Exchange" />
-        <Box ff="Museo Sans|Regular" color="dark" fontSize={7} mb={3}>
+        <Box ff="Museo Sans|Regular" fontSize={7} color="dark">
          {t('app:exchange.title')}
        </Box>
-        <Box ff="Museo Sans|Light" color="grey" fontSize={5} mb={5}>
+        <Box ff="Museo Sans|Light" fontSize={5} mb={5}>
          {t('app:exchange.desc')}
        </Box>
-        <Box flow={5}>{cards.map(card => <ExchangeCard key={card.key} t={t} card={card} />)}</Box>
+        <Box flow={3}>{cards.map(card => <ExchangeCard key={card.key} t={t} card={card} />)}</Box>
      </Box>
    )
  }
--- a/src/components/GenuineCheck.js
+++ b/src/components/GenuineCheck.js
@ -24,7 +24,7 @@ import Text from 'components/base/Text'

 import IconUsb from 'icons/Usb'
 import IconHome from 'icons/Home'
-import IconGenuineCheck from 'icons/GenuineCheck'
+import IconCheck from 'icons/Check'

 const DeviceNotGenuineError = createCustomErrorClass('DeviceNotGenuine')

@ -36,15 +36,15 @@ type Props = {
  device: ?Device,
 }

-const usbIcon = <IconUsb size={26} />
-const homeIcon = <IconHome size={24} />
-const genuineCheckIcon = <IconGenuineCheck size={24} />
+const usbIcon = <IconUsb size={16} />
+const homeIcon = <IconHome size={16} />
+const genuineCheckIcon = <IconCheck size={16} />

 const mapStateToProps = state => ({
  device: getCurrentDevice(state),
 })

-const Bold = props => <Text ff="Open Sans|Bold" {...props} />
+const Bold = props => <Text ff="Open Sans|SemiBold" {...props} />

 // to speed up genuine check, cache result by device id
 const genuineDevices = new WeakSet()
--- a/src/components/GradientBox.js
+++ b/src/components/GradientBox.js
@ -5,10 +5,10 @@ export default styled.div`
  width: 100%;
  height: 60px;
  position: absolute;
-  bottom: 68px;
+  bottom: 0;
  left: 0;
  right: 0;
-  background: linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%);
+  background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
  z-index: 2;
  pointer-events: none;
 `
--- a/src/components/MainSideBar/index.js
+++ b/src/components/MainSideBar/index.js
@ -15,6 +15,7 @@ import type { UpdateStatus } from 'reducers/update'

 import { MODAL_RECEIVE, MODAL_SEND, MODAL_ADD_ACCOUNTS } from 'config/constants'

+import { i } from 'helpers/staticPath'
 import { accountsSelector } from 'reducers/accounts'
 import { openModal } from 'reducers/modals'
 import { getUpdateStatus } from 'reducers/update'
@ -65,6 +66,13 @@ class MainSideBar extends PureComponent<Props> {
    push(to)
  }

+  ADD_ACCOUNT_EMPTY_STATE = (
+    <Box relative>
+      <img style={{ position: 'absolute', top: 0, right: 5 }} alt="" src={i('arrow-add.svg')} />
+      {this.props.t('app:emptyState.sidebar.text')}
+    </Box>
+  )
+
  handleClickDashboard = () => this.push('/')
  handleOpenSendModal = () => this.props.openModal(MODAL_SEND)
  handleOpenReceiveModal = () => this.props.openModal(MODAL_RECEIVE)
@ -130,7 +138,7 @@ class MainSideBar extends PureComponent<Props> {
          <SideBarList
            title={t('app:sidebar.accounts', { count: accounts.length })}
            titleRight={addAccountButton}
-            emptyText={t('app:emptyState.sidebar.text')}
+            emptyState={this.ADD_ACCOUNT_EMPTY_STATE}
          >
            {accounts.map(account => (
              <AccountListItem
--- a/src/components/ManagerPage/AppsList.js
+++ b/src/components/ManagerPage/AppsList.js
@ -205,7 +205,7 @@ class AppsList extends PureComponent<Props, State> {
                    <ExclamationCircleThin size={44} />
                  </Box>
                  <Box
-                    color="black"
+                    color="dark"
                    mt={4}
                    fontSize={6}
                    ff="Museo Sans|Regular"
@ -238,7 +238,7 @@ class AppsList extends PureComponent<Props, State> {
                    <CheckCircle size={44} />
                  </Box>
                  <Box
-                    color="black"
+                    color="dark"
                    mt={4}
                    fontSize={6}
                    ff="Museo Sans|Regular"
--- a/src/components/ManagerPage/Dashboard.js
+++ b/src/components/ManagerPage/Dashboard.js
@ -22,7 +22,7 @@ const Dashboard = ({ device, deviceInfo, t }: Props) => (
  <Box flow={4} pb={8}>
    <TrackPage category="Manager" name="Dashboard" />
    <Box>
-      <Text ff="Museo Sans|Regular" fontSize={7} color="black">
+      <Text ff="Museo Sans|Regular" fontSize={7} color="dark">
        {t('app:manager.title')}
      </Text>
      <Text ff="Museo Sans|Light" fontSize={5}>
--- a/src/components/ManagerPage/ManagerGenuineCheck.js
+++ b/src/components/ManagerPage/ManagerGenuineCheck.js
@ -31,7 +31,7 @@ class ManagerGenuineCheck extends PureComponent<Props> {
            alt="connect your device"
            style={{ marginBottom: 30, maxWidth: 362, width: '100%' }}
          />
-          <Text ff="Museo Sans|Regular" fontSize={7} color="black" style={{ marginBottom: 10 }}>
+          <Text ff="Museo Sans|Regular" fontSize={7} color="dark" style={{ marginBottom: 10 }}>
            {t('app:manager.device.title')}
          </Text>
          <Text ff="Museo Sans|Light" fontSize={5} color="grey" align="center">
--- a/src/components/SettingsPage/SettingsSection.js
+++ b/src/components/SettingsPage/SettingsSection.js
@ -106,7 +106,7 @@ export function SettingsSectionRow({
        <Box ff="Open Sans|SemiBold" color="dark" fontSize={4}>
          {title}
        </Box>
-        <Box ff="Open Sans" fontSize={3} color="grey" mt={1} mr={1}>
+        <Box ff="Open Sans" fontSize={3} color="grey" mt={1} mr={1} style={{ maxWidth: 520 }}>
          {desc}
        </Box>
      </Box>
--- a/src/components/base/Button/index.js
+++ b/src/components/base/Button/index.js
@ -36,7 +36,7 @@ const buttonStyles: { [_: string]: Style } = {
          ? `
          0 0 0 1px ${darken(p.theme.colors.wallet, 0.3)} inset,
          0 0 0 1px ${rgba(p.theme.colors.wallet, 0.5)},
-          0 0 0 4px ${rgba(p.theme.colors.wallet, 0.3)};`
+          0 0 0 3px ${rgba(p.theme.colors.wallet, 0.3)};`
          : ''
      }
    `,
@ -56,7 +56,7 @@ const buttonStyles: { [_: string]: Style } = {
          ? `
          0 0 0 1px ${darken(p.theme.colors.alertRed, 0.3)} inset,
          0 0 0 1px ${rgba(p.theme.colors.alertRed, 0.5)},
-          0 0 0 4px ${rgba(p.theme.colors.alertRed, 0.3)};
+          0 0 0 3px ${rgba(p.theme.colors.alertRed, 0.3)};
        `
          : ''
      }
@ -69,15 +69,30 @@ const buttonStyles: { [_: string]: Style } = {
     `,
  },
  outline: {
-    default: p => `
-      background: transparent;
-      border: 1px solid ${
-        p.outlineColor ? p.theme.colors[p.outlineColor] || p.outlineColor : p.theme.colors.wallet
-      };
-      color: ${
-        p.outlineColor ? p.theme.colors[p.outlineColor] || p.outlineColor : p.theme.colors.wallet
-      };
-    `,
+    default: p => {
+      const c = p.outlineColor
+        ? p.theme.colors[p.outlineColor] || p.outlineColor
+        : p.theme.colors.wallet
+      return `
+        background: transparent;
+        border: 1px solid ${c};
+        color: ${c};
+        box-shadow: ${
+          p.isFocused
+            ? `
+            0 0 0 3px ${rgba(c, 0.3)};`
+            : ''
+        }
+      `
+    },
+    hover: p => {
+      const c = p.outlineColor
+        ? p.theme.colors[p.outlineColor] || p.outlineColor
+        : p.theme.colors.wallet
+      return `
+        background: ${rgba(c, 0.1)};
+      `
+    },
    active: p => `
      color: ${darken(
        p.outlineColor ? p.theme.colors[p.outlineColor] || p.outlineColor : p.theme.colors.wallet,
--- a/src/components/base/SideBar/SideBarList.js
+++ b/src/components/base/SideBar/SideBarList.js
@ -11,13 +11,13 @@ type Props = {
  children: any,
  title?: Node | string,
  scroll?: boolean,
-  titleRight?: any, // TODO: type should be more precise, but, eh ¯\_(ツ)_/¯
-  emptyText?: string,
+  titleRight?: any,
+  emptyState?: any,
 }

 class SideBarList extends Component<Props> {
  render() {
-    const { children, title, scroll, titleRight, emptyText, ...props } = this.props
+    const { children, title, scroll, titleRight, emptyState, ...props } = this.props
    const ListWrapper = scroll ? GrowScroll : Box
    return (
      <Fragment>
@ -34,9 +34,9 @@ class SideBarList extends Component<Props> {
          <ListWrapper flow={2} px={3} fontSize={3} {...props}>
            {children}
          </ListWrapper>
-        ) : emptyText ? (
+        ) : emptyState ? (
          <Box px={4} ff="Open Sans|Regular" fontSize={3} color="grey">
-            {emptyText}
+            {emptyState}
          </Box>
        ) : null}
      </Fragment>
--- a/src/components/modals/AddAccounts/steps/03-step-import.js
+++ b/src/components/modals/AddAccounts/steps/03-step-import.js
@ -15,9 +15,9 @@ import CurrencyBadge from 'components/base/CurrencyBadge'
 import Button from 'components/base/Button'
 import AccountsList from 'components/base/AccountsList'
 import IconExclamationCircleThin from 'icons/ExclamationCircleThin'
-import TranslatedError from '../../../TranslatedError'
-import Spinner from '../../../base/Spinner'
-import Text from '../../../base/Text'
+import TranslatedError from 'components/TranslatedError'
+import Spinner from 'components/base/Spinner'
+import Text from 'components/base/Text'

 import type { StepProps } from '../index'

@ -281,6 +281,9 @@ class StepImport extends PureComponent<StepProps> {
          {scanStatus === 'scanning' ? (
            <LoadingRow>
              <Spinner color="grey" size={16} />
+              <Box ml={2} ff="Open Sans|Regular" color="grey" fontSize={4}>
+                {t('app:common.sync.syncing')}
+              </Box>
            </LoadingRow>
          ) : null}
        </Box>
--- a/src/components/modals/OperationDetails.js
+++ b/src/components/modals/OperationDetails.js
@ -129,7 +129,7 @@ const OperationDetails = connect(mapStateToProps)((props: Props) => {
  return (
    <ModalBody onClose={onClose}>
      <ModalTitle>{t('app:operationDetails.title')}</ModalTitle>
-      <ModalContent style={{ height: 500 }} mx={-5} pb={0}>
+      <ModalContent relative style={{ height: 500 }} px={0} pb={0}>
        <GrowScroll px={5} pt={1} pb={8}>
          <Box flow={3}>
            <Box alignItems="center" mt={1}>
--- a/src/components/modals/ReleaseNotes.js
+++ b/src/components/modals/ReleaseNotes.js
@ -221,7 +221,7 @@ class ReleaseNotes extends PureComponent<Props, State> {
      return (
        <ModalBody onClose={onClose}>
          <ModalTitle>{t('app:releaseNotes.title')}</ModalTitle>
-          <ModalContent style={{ height: 500 }} mx={-5} pb={0}>
+          <ModalContent relative style={{ height: 500 }} px={0} pb={0}>
            <GrowScroll px={5} pb={8}>
              {content}
            </GrowScroll>
--- a/src/components/modals/UpdateFirmware/Disclaimer.js
+++ b/src/components/modals/UpdateFirmware/Disclaimer.js
@ -58,8 +58,8 @@ class DisclaimerModal extends PureComponent<Props, State> {
                  {t('app:manager.firmware.disclaimerAppReinstall')}
                </Text>
              </ModalContent>
-              <ModalContent style={{ height: 250, width: '100%' }}>
-                <GrowScroll>
+              <ModalContent relative pb={0} style={{ height: 250, width: '100%' }}>
+                <GrowScroll pb={5}>
                  <Notes>
                    <ReactMarkdown>{firmware.notes}</ReactMarkdown>
                  </Notes>
--- a/src/icons/GenuineCheck.js
+++ b/src/icons/GenuineCheck.js
@ -1,32 +0,0 @@
-// @flow
-
-import React, { Fragment } from 'react'
-
-const path = (
-  <Fragment>
-    <rect
-      x=".75"
-      y=".75"
-      width="24"
-      height="24"
-      rx="8"
-      fill="none"
-      fillRule="evenodd"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      transform="translate(4.75,4.75)"
-      width="100%"
-      height="100%"
-      fill="#000000"
-      d="m13.62 2.6083-8.2201 8.2201-3.0204-3.0204c-0.14644-0.14644-0.38388-0.14644-0.53034 0l-0.88388 0.88388c-0.14644 0.14644-0.14644 0.38388 0 0.53034l4.1694 4.1694c0.14644 0.14644 0.38388 0.14644 0.53034 0l9.3692-9.3692c0.14644-0.14644 0.14644-0.38387 0-0.53034l-0.88388-0.88388c-0.14644-0.14644-0.38388-0.14644-0.53031 0z"
-    />
-  </Fragment>
-)
-
-export default ({ size, ...p }: { size: number }) => (
-  <svg viewBox="0 0 25.5 25.5" height={size} width={size} {...p}>
-    {path}
-  </svg>
-)
--- a/src/icons/Home.js
+++ b/src/icons/Home.js
@ -4,29 +4,19 @@ import React, { Fragment } from 'react'

 const path = (
  <Fragment>
-    <rect
-      x=".75"
-      y=".75"
-      width="24"
-      height="24"
-      rx="8"
-      fill="none"
-      fillRule="evenodd"
-      stroke="currentColor"
-      strokeWidth="1.5"
+    <path
+      fill="currentColor"
+      d="m9.9609 0a1.0001 1.0001 0 0 0-0.57422 0.21094l-9 7a1.0001 1.0001 0 0 0-0.38672 0.78906v11c0 1.645 1.355 3 3 3h14c1.645 0 3-1.355 3-3v-11a1.0001 1.0001 0 0 0-0.38672-0.78906l-9-7a1.0001 1.0001 0 0 0-0.65234-0.21094zm0.039062 2.2676 8 6.2207v10.512c0 0.56413-0.43587 1-1 1h-14c-0.56413 0-1-0.43587-1-1v-10.512z"
    />
    <path
      fill="currentColor"
-      transform="translate(4.75,4.75)"
-      width="100%"
-      height="100%"
-      d="m2.75 6.3668v6.9665c0 0.32217 0.26117 0.58333 0.58333 0.58333h9.3333c0.32217 0 0.58333-0.26117 0.58333-0.58333v-6.9665l-5.25-4.0833zm-1.2105-0.95883 6-4.6667c0.27083-0.21065 0.65008-0.21065 0.92091 0l6 4.6667c0.18269 0.14209 0.28954 0.36057 0.28954 0.59201v7.3333c0 1.1506-0.93274 2.0833-2.0833 2.0833h-9.3333c-1.1506 0-2.0833-0.93274-2.0833-2.0833v-7.3333c0-0.23144 0.10685-0.44992 0.28954-0.59201zm5.2105 3.342v5.9167c0 0.41421-0.33579 0.75-0.75 0.75s-0.75-0.33579-0.75-0.75v-6.6667c0-0.41421 0.33579-0.75 0.75-0.75h4c0.41421 0 0.75 0.33579 0.75 0.75v6.6667c0 0.41421-0.33579 0.75-0.75 0.75-0.41421 0-0.75-0.33579-0.75-0.75v-5.9167z"
+      d="m7 10a1.0001 1.0001 0 0 0-1 1v10a1.0001 1.0001 0 1 0 2 0v-9h4v9a1.0001 1.0001 0 1 0 2 0v-10a1.0001 1.0001 0 0 0-1-1z"
    />
  </Fragment>
 )

 export default ({ size, ...p }: { size: number }) => (
-  <svg viewBox="0 0 25.5 25.5" height={size} width={size} {...p}>
+  <svg viewBox="0 0 20 22.014" height={size} width={size} {...p}>
    {path}
  </svg>
 )
--- a/src/icons/SmoothBorders.js
+++ b/src/icons/SmoothBorders.js
@ -0,0 +1,18 @@
+// @flow
+
+import React from 'react'
+
+const inner = (
+  <path
+    d="m8.75 0.75h12c4.432 0 8 3.568 8 8v12c0 4.432-3.568 8-8 8h-12c-4.432 0-8-3.568-8-8v-12c0-4.432 3.568-8 8-8z"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+  />
+)
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 29.5 29.5" height={size} width={size} {...p}>
+    {inner}
+  </svg>
+)
--- a/src/icons/Usb.js
+++ b/src/icons/Usb.js
@ -2,24 +2,15 @@

 import React from 'react'

-const group = (
-  <g fill="currentColor">
-    <path
-      fill="none"
-      d="m9 1h8c4.432 0 8 3.568 8 8v8c0 4.432-3.568 8-8 8h-8c-4.432 0-8-3.568-8-8v-8c0-4.432 3.568-8 8-8z"
-      fillRule="evenodd"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      fill="currentColor"
-      d="m19.79 9.65-2.94-2.94c-0.28-0.28-0.7-0.28-0.98 0l-2.45 2.45-1.05-0.98c-0.28-0.28-0.7-0.28-0.98 0l-3.01 3.01c-1.68 1.68-1.89 4.41-0.42 6.37l-1.75 1.75c-0.28 0.28-0.28 0.7 0 0.98s0.7 0.28 0.98 0l1.75-1.75c1.96 1.47 4.69 1.26 6.37-0.49l2.94-2.94c0.28-0.28 0.28-0.7 0-0.98l-0.98-0.98 2.52-2.45c0.28-0.28 0.28-0.77 0-1.05zm-5.46 7.42c-1.33 1.33-3.57 1.33-4.97 0-1.4-1.4-1.4-3.57 0-4.97l2.45-2.45 4.97 4.97zm2.03-4.9-1.96-1.96 1.96-1.96 1.96 1.96z"
-    />
-  </g>
+const inner = (
+  <path
+    transform="translate(-1 -.5)"
+    d="m14.79 3.65-2.94-2.94c-0.28-0.28-0.7-0.28-0.98 0l-2.45 2.45-1.05-0.98c-0.28-0.28-0.7-0.28-0.98 0l-3.01 3.01c-1.68 1.68-1.89 4.41-0.42 6.37l-1.75 1.75c-0.28 0.28-0.28 0.7 0 0.98s0.7 0.28 0.98 0l1.75-1.75c1.96 1.47 4.69 1.26 6.37-0.49l2.94-2.94c0.28-0.28 0.28-0.7 0-0.98l-0.98-0.98 2.52-2.45c0.28-0.28 0.28-0.77 0-1.05zm-5.46 7.42c-1.33 1.33-3.57 1.33-4.97 0-1.4-1.4-1.4-3.57 0-4.97l2.45-2.45 4.97 4.97zm2.03-4.9-1.96-1.96 1.96-1.96 1.96 1.96z"
+  />
 )

 export default ({ size, ...p }: { size: number }) => (
-  <svg viewBox="0 0 26 26" height={size} width={size} {...p}>
-    {group}
+  <svg viewBox="0 0 14 14" height={size} width={size} {...p}>
+    {inner}
  </svg>
 )
--- a/static/images/arrow-add.svg
+++ b/static/images/arrow-add.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>fleche</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Empty-State" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop/EmptyState/Dashboard" transform="translate(-177.000000, -396.000000)" fill="#D8D8D8" fill-rule="nonzero">
+            <g id="fleche" transform="translate(193.000000, 412.000000) scale(-1, 1) translate(-193.000000, -412.000000) translate(177.000000, 396.000000)">
+                <path d="M31.6933648,8.09651084 L31.6943649,8.09551085 C31.6953649,8.09401085 31.6963649,8.09251085 31.6973649,8.09051085 C31.7833657,7.99301089 31.8463663,7.87551095 31.8968668,7.751511 C31.9128669,7.71351102 31.923367,7.67751103 31.9348671,7.63901105 C31.9638674,7.5435111 31.9818676,7.44451114 31.9878677,7.34101119 C31.9908677,7.3030112 31.9968677,7.26701122 31.9958677,7.22801124 C31.9958677,7.20801125 32.0008678,7.19001126 31.9998678,7.17051126 C31.9928677,7.05101132 31.9688675,6.93551137 31.9318671,6.82701142 C31.9288671,6.81551143 31.920867,6.80651143 31.916867,6.79501144 C31.8728666,6.67551149 31.809866,6.56951154 31.7353652,6.47251158 C31.7248651,6.45901159 31.7213651,6.4410116 31.710365,6.4275116 L26.5548159,0.354514357 C26.1603121,-0.110485432 25.5128059,-0.119485428 25.1078021,0.336014366 C24.7037982,0.791014159 24.6962982,1.53701382 25.0918019,2.00301361 L27.8708284,5.27751212 C23.8102897,4.73951237 19.8187517,5.59401198 19.6302499,5.63601196 C7.30713242,7.86951095 -1.41345069,19.2495058 0.19006459,31.0040005 C0.269565348,31.5860002 0.704069489,32 1.19957421,32 C1.25257472,32 1.30557522,31.9955 1.35957574,31.9865 C1.91758106,31.8850001 2.29858469,31.2820003 2.21158386,30.6385006 C0.783070242,20.1685054 8.73964608,9.99750998 19.9802532,7.95951091 C20.0317537,7.94751091 24.155793,7.06251131 28.03883,7.67251104 L23.7502891,10.2190099 C23.2477844,10.5180097 23.0512825,11.2290094 23.3097849,11.8075092 C23.5677874,12.3870089 24.1837933,12.6115088 24.6877981,12.3160089 L31.4478625,8.30201075 C31.5393634,8.24651078 31.6213642,8.17701081 31.6933648,8.09651084 Z" id="Shape" transform="translate(16.000000, 16.000000) rotate(-90.000000) translate(-16.000000, -16.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>