From d0a0a509a0d508b78a58c3867581b8900852867e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= Date: Fri, 13 Apr 2018 17:26:53 +0200 Subject: [PATCH] Update icons, add animate ticker --- package.json | 1 + src/components/AccountPage/index.js | 10 +++---- src/components/BalanceSummary/BalanceInfos.js | 6 ++-- src/components/Breadcrumb/Step.js | 5 +++- .../__snapshots__/CounterValue.test.js.snap | 12 ++++---- src/components/DashboardPage/AccountCard.js | 3 -- src/components/SideBar/index.js | 16 +++++------ src/components/base/Chart/refreshDraw.js | 2 +- .../__snapshots__/FormattedVal.test.js.snap | 12 ++++---- src/components/base/FormattedVal/index.js | 28 +++++++++++++++++-- src/components/modals/OperationDetails.js | 10 +------ src/config/constants.js | 2 +- src/icons/Manager.js | 12 ++++++++ src/icons/Receive.js | 12 ++++++++ src/icons/Send.js | 12 ++++++++ src/styles/reset.js | 5 ++++ yarn.lock | 13 +++++++-- 17 files changed, 114 insertions(+), 47 deletions(-) create mode 100644 src/icons/Manager.js create mode 100644 src/icons/Receive.js create mode 100644 src/icons/Send.js diff --git a/package.json b/package.json index c3543e6c..cd10c37c 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "raven-js": "^3.24.1", "react": "^16.3.1", "react-dom": "^16.3.1", + "react-flip-ticker": "^0.3.0", "react-i18next": "^7.5.1", "react-mortal": "^3.2.0", "react-motion": "^0.5.2", diff --git a/src/components/AccountPage/index.js b/src/components/AccountPage/index.js index b2e05625..6bc7a406 100644 --- a/src/components/AccountPage/index.js +++ b/src/components/AccountPage/index.js @@ -22,8 +22,8 @@ import { getCounterValueCode } from 'reducers/settings' import { openModal } from 'reducers/modals' import IconControls from 'icons/Controls' -import IconArrowDown from 'icons/ArrowDown' -import IconArrowUp from 'icons/ArrowUp' +import IconReceive from 'icons/Receive' +import IconSend from 'icons/Send' import BalanceSummary from 'components/BalanceSummary' import { @@ -123,13 +123,13 @@ class AccountPage extends PureComponent { @@ -155,12 +155,12 @@ class AccountPage extends PureComponent { diff --git a/src/components/BalanceSummary/BalanceInfos.js b/src/components/BalanceSummary/BalanceInfos.js index 12129e59..63ec6f5f 100644 --- a/src/components/BalanceSummary/BalanceInfos.js +++ b/src/components/BalanceSummary/BalanceInfos.js @@ -12,8 +12,8 @@ import FormattedVal from 'components/base/FormattedVal' const Sub = styled(Text).attrs({ ff: 'Open Sans', - color: 'warnGrey', fontSize: 4, + mt: 1, })` text-transform: lowercase; ` @@ -42,6 +42,7 @@ export function BalanceSincePercent(props: BalanceSinceProps) { return ( diff --git a/src/components/Breadcrumb/Step.js b/src/components/Breadcrumb/Step.js index 54521260..2fa0366b 100644 --- a/src/components/Breadcrumb/Step.js +++ b/src/components/Breadcrumb/Step.js @@ -16,6 +16,7 @@ const Wrapper = styled(Box).attrs({ ['active', 'valid'].includes(p.status) ? 'wallet' : p.status === 'error' ? 'alertRed' : 'grey', grow: true, justifyContent: 'center', + relative: true, })` width: ${RADIUS}px; flex-shrink: 0; @@ -42,9 +43,11 @@ const StepNumber = styled(Box).attrs({ const Label = styled(Box).attrs({ fontSize: 3, ff: 'Museo Sans|Bold', + px: 2, })` + line-height: 1.2; position: absolute; - margin-top: 23px; + top: 25px; transition: color ease-in-out 0.1s ${p => (['active', 'valid'].includes(p.status) ? 0.4 : 0)}s; ` diff --git a/src/components/CounterValue/__tests__/__snapshots__/CounterValue.test.js.snap b/src/components/CounterValue/__tests__/__snapshots__/CounterValue.test.js.snap index ccd2f43e..bfecc4b5 100644 --- a/src/components/CounterValue/__tests__/__snapshots__/CounterValue.test.js.snap +++ b/src/components/CounterValue/__tests__/__snapshots__/CounterValue.test.js.snap @@ -2,7 +2,7 @@ exports[`components CounterValue basic 1`] = ` + USD 10.00 @@ -11,7 +11,7 @@ exports[`components CounterValue basic 1`] = ` exports[`components CounterValue specifying ticker different from default 1`] = ` + USD 5.00 @@ -20,7 +20,7 @@ exports[`components CounterValue specifying ticker different from default 1`] = exports[`components CounterValue using countervalue different from default 1`] = ` + EUR 0.42 @@ -29,7 +29,7 @@ exports[`components CounterValue using countervalue different from default 1`] = exports[`components CounterValue with time travel whith date in countervalues 1`] = ` + USD 20.00 @@ -38,7 +38,7 @@ exports[`components CounterValue with time travel whith date in countervalues 1` exports[`components CounterValue with time travel whith date not in countervalues 1`] = ` + USD 0.00 @@ -47,7 +47,7 @@ exports[`components CounterValue with time travel whith date not in countervalue exports[`components CounterValue without countervalues populated 1`] = ` + USD 0.00 diff --git a/src/components/DashboardPage/AccountCard.js b/src/components/DashboardPage/AccountCard.js index c86b8691..4f95e7c8 100644 --- a/src/components/DashboardPage/AccountCard.js +++ b/src/components/DashboardPage/AccountCard.js @@ -60,9 +60,6 @@ const AccountCard = ({ unit={account.unit} showCode val={account.balance} - style={{ - lineHeight: 1, - }} /> diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js index 919a8706..ca0df6b4 100644 --- a/src/components/SideBar/index.js +++ b/src/components/SideBar/index.js @@ -15,12 +15,12 @@ import type { T } from 'types/common' import { openModal } from 'reducers/modals' import { getVisibleAccounts } from 'reducers/accounts' +import IconManager from 'icons/Manager' import IconPieChart from 'icons/PieChart' -import IconArrowDown from 'icons/ArrowDown' -import IconArrowUp from 'icons/ArrowUp' -import IconQrCode from 'icons/QrCode' -import IconSettings from 'icons/Settings' import IconPlus from 'icons/Plus' +import IconReceive from 'icons/Receive' +import IconSend from 'icons/Send' +import IconSettings from 'icons/Settings' import Box, { Tabbable } from 'components/base/Box' import FormattedVal from 'components/base/FormattedVal' @@ -79,13 +79,13 @@ class SideBar extends PureComponent { } linkTo="/"> {t('dashboard:title')} - } modal={MODAL_SEND}> + } modal={MODAL_SEND}> {t('send:title')} - } modal={MODAL_RECEIVE}> + } modal={MODAL_RECEIVE}> {t('receive:title')} - } linkTo="/manager"> + } linkTo="/manager"> {t('sidebar:manager')} } linkTo="/settings"> @@ -98,7 +98,7 @@ class SideBar extends PureComponent { {t('sidebar:accounts')} t('addAccount:title')}> openModal(MODAL_ADD_ACCOUNT)}> - + diff --git a/src/components/base/Chart/refreshDraw.js b/src/components/base/Chart/refreshDraw.js index e6bae8d1..2520cf34 100644 --- a/src/components/base/Chart/refreshDraw.js +++ b/src/components/base/Chart/refreshDraw.js @@ -11,7 +11,7 @@ import type { CTX } from './types' const TICK_X_SCALE = { week: 7, - month: 10, + month: 7, year: 13, default: 10, } diff --git a/src/components/base/FormattedVal/__tests__/__snapshots__/FormattedVal.test.js.snap b/src/components/base/FormattedVal/__tests__/__snapshots__/FormattedVal.test.js.snap index 6efadc81..b4a3a0c6 100644 --- a/src/components/base/FormattedVal/__tests__/__snapshots__/FormattedVal.test.js.snap +++ b/src/components/base/FormattedVal/__tests__/__snapshots__/FormattedVal.test.js.snap @@ -2,7 +2,7 @@ exports[`components FormattedVal renders a fiat 1`] = ` 20.00 @@ -11,7 +11,7 @@ exports[`components FormattedVal renders a fiat 1`] = ` exports[`components FormattedVal renders a formatted val 1`] = ` 4 @@ -20,7 +20,7 @@ exports[`components FormattedVal renders a formatted val 1`] = ` exports[`components FormattedVal renders a percent 1`] = ` 30 % @@ -29,7 +29,7 @@ exports[`components FormattedVal renders a percent 1`] = ` exports[`components FormattedVal shows code 1`] = ` BTC 4 @@ -38,7 +38,7 @@ exports[`components FormattedVal shows code 1`] = ` exports[`components FormattedVal shows sign 1`] = ` + 4 @@ -47,7 +47,7 @@ exports[`components FormattedVal shows sign 1`] = ` exports[`components FormattedVal shows sign 2`] = ` - 4 diff --git a/src/components/base/FormattedVal/index.js b/src/components/base/FormattedVal/index.js index 4392df46..be2f2ca7 100644 --- a/src/components/base/FormattedVal/index.js +++ b/src/components/base/FormattedVal/index.js @@ -2,6 +2,8 @@ import React from 'react' import styled from 'styled-components' +import Ticker from 'react-flip-ticker' + import isUndefined from 'lodash/isUndefined' import type { Unit } from '@ledgerhq/currencies' @@ -22,7 +24,10 @@ const T = styled(Text).attrs({ : p.isNegative ? p.theme.colors.alertRed : p.theme.colors.positiveGreen, -})`` +})` + line-height: 0.9; + white-space: pre; +` const I = ({ color, children }: { color: string, children: any }) => ( {children} @@ -30,6 +35,7 @@ const I = ({ color, children }: { color: string, children: any }) => ( type Props = { alwaysShowSign?: boolean, + animateTicker?: boolean, disableRounding?: boolean, fiat?: string | null, isPercent?: boolean, @@ -40,7 +46,16 @@ type Props = { } function FormattedVal(props: Props) { - const { disableRounding, fiat, isPercent, alwaysShowSign, showCode, withIcon, ...p } = props + const { + animateTicker, + disableRounding, + fiat, + isPercent, + alwaysShowSign, + showCode, + withIcon, + ...p + } = props let { val, unit } = props if (isUndefined(val)) { @@ -71,6 +86,10 @@ function FormattedVal(props: Props) { }) } + if (animateTicker) { + text = + } + return ( {withIcon ? ( @@ -86,7 +105,9 @@ function FormattedVal(props: Props) { )} - {text} + + {text} + ) : ( text @@ -97,6 +118,7 @@ function FormattedVal(props: Props) { FormattedVal.defaultProps = { alwaysShowSign: false, + animateTicker: false, disableRounding: false, fiat: null, isPercent: false, diff --git a/src/components/modals/OperationDetails.js b/src/components/modals/OperationDetails.js index 1c003c95..a6ed321d 100644 --- a/src/components/modals/OperationDetails.js +++ b/src/components/modals/OperationDetails.js @@ -76,20 +76,12 @@ const OperationDetails = ({ t }: { t: T }) => ( /> - + ( + + + +) diff --git a/src/icons/Receive.js b/src/icons/Receive.js new file mode 100644 index 00000000..dc96dbbc --- /dev/null +++ b/src/icons/Receive.js @@ -0,0 +1,12 @@ +// @flow + +import React from 'react' + +export default ({ size, ...p }: { size: number }) => ( + + + +) diff --git a/src/icons/Send.js b/src/icons/Send.js new file mode 100644 index 00000000..10670e5d --- /dev/null +++ b/src/icons/Send.js @@ -0,0 +1,12 @@ +// @flow + +import React from 'react' + +export default ({ size, ...p }: { size: number }) => ( + + + +) diff --git a/src/styles/reset.js b/src/styles/reset.js index cf523d02..fff1b4a9 100644 --- a/src/styles/reset.js +++ b/src/styles/reset.js @@ -62,4 +62,9 @@ em { } .tippy-tooltip .tippy-content { background: transparent; +} + +.currentTicker { + background: white; + z-index: 11 !important; }` diff --git a/yarn.lock b/yarn.lock index 3527d76a..80e4f258 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4785,7 +4785,7 @@ electron-builder-lib@~20.6.2: semver "^5.5.0" temp-file "^3.1.1" -electron-builder@^20.8.1: +electron-builder@^20.0.4, electron-builder@^20.8.1: version "20.8.1" resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-20.8.1.tgz#3d19607a7f7d3ee7f3e110a6fc66c720ed1d2cc0" dependencies: @@ -4965,7 +4965,7 @@ electron-webpack@^2.0.1: webpack-merge "^4.1.2" yargs "^11.1.0" -electron@1.8.4: +electron@1.8.4, electron@^1.8.2: version "1.8.4" resolved "https://registry.yarnpkg.com/electron/-/electron-1.8.4.tgz#cca8d0e6889f238f55b414ad224f03e03b226a38" dependencies: @@ -7984,6 +7984,9 @@ ledger-test-library@KhalilBellakrid/ledger-test-library-nodejs#7d37482: dependencies: axios "^0.17.1" bindings "^1.3.0" + electron "^1.8.2" + electron-builder "^20.0.4" + electron-rebuild "^1.7.3" nan "^2.6.2" prebuild-install "^2.2.2" @@ -10112,6 +10115,12 @@ react-error-overlay@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4" +react-flip-ticker@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/react-flip-ticker/-/react-flip-ticker-0.3.0.tgz#7ea4676317ddd5230e4c1f4e9adc2d0fc3bca527" + dependencies: + prop-types "^15.6.0" + react-fuzzy@^0.5.2: version "0.5.2" resolved "https://registry.yarnpkg.com/react-fuzzy/-/react-fuzzy-0.5.2.tgz#fc13bf6f0b785e5fefe908724efebec4935eaefe"