From a661bcd3bd4e8f6af7b90ea001bd15bbe1397f4c Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Sat, 17 Nov 2018 16:49:09 +0100 Subject: [PATCH] style(icons): update icons Update icons form latest designs. --- .../Icon/{BigArrowLeft.js => ArrowLeft.js} | 4 +-- app/components/Icon/ArrowRight.js | 17 +++++++++++++ app/components/Icon/BigArrowRight.js | 9 ++++--- app/components/Icon/Litecoin.js | 2 +- app/components/Icon/PlusCircle.js | 19 ++++---------- app/components/Icon/ZapLogo.js | 15 ++++++----- app/components/Icon/ZapLogoBlack.js | 21 ---------------- .../Onboarding/FormContainer/FormContainer.js | 7 +----- app/components/Pay/PayButtons.js | 4 +-- app/components/Syncing/Syncing.js | 7 +----- app/components/Wallet/Wallet.js | 10 ++------ .../{big-arrow-left.svg => arrow-left.svg} | 0 app/icons/arrow-right.svg | 16 ++++++++++++ app/icons/big-arrow-right.svg | 15 ++++++++--- app/icons/icon-plus.svg | 8 ------ app/icons/plus-circle.svg | 9 ++++++- app/icons/zap-logo-black.svg | 16 ------------ app/icons/zap-logo.svg | 25 +++++++++++-------- stories/icons/icon.stories.js | 10 ++++---- .../Pay/__snapshots__/PayButtons.spec.js.snap | 2 +- 20 files changed, 101 insertions(+), 115 deletions(-) rename app/components/Icon/{BigArrowLeft.js => ArrowLeft.js} (81%) create mode 100644 app/components/Icon/ArrowRight.js delete mode 100644 app/components/Icon/ZapLogoBlack.js rename app/icons/{big-arrow-left.svg => arrow-left.svg} (100%) create mode 100644 app/icons/arrow-right.svg delete mode 100644 app/icons/icon-plus.svg delete mode 100644 app/icons/zap-logo-black.svg diff --git a/app/components/Icon/BigArrowLeft.js b/app/components/Icon/ArrowLeft.js similarity index 81% rename from app/components/Icon/BigArrowLeft.js rename to app/components/Icon/ArrowLeft.js index 92233368..824d915c 100644 --- a/app/components/Icon/BigArrowLeft.js +++ b/app/components/Icon/ArrowLeft.js @@ -1,6 +1,6 @@ import React from 'react' -const SvgBigArrowLeft = props => ( +const SvgArrowLeft = props => ( ( ) -export default SvgBigArrowLeft +export default SvgArrowLeft diff --git a/app/components/Icon/ArrowRight.js b/app/components/Icon/ArrowRight.js new file mode 100644 index 00000000..b29c88eb --- /dev/null +++ b/app/components/Icon/ArrowRight.js @@ -0,0 +1,17 @@ +import React from 'react' + +const SvgArrowRight = props => ( + + + + + +) + +export default SvgArrowRight diff --git a/app/components/Icon/BigArrowRight.js b/app/components/Icon/BigArrowRight.js index 76a28cfb..8c462bef 100644 --- a/app/components/Icon/BigArrowRight.js +++ b/app/components/Icon/BigArrowRight.js @@ -2,14 +2,15 @@ import React from 'react' const SvgBigArrowRight = props => ( - + > + + ) diff --git a/app/components/Icon/Litecoin.js b/app/components/Icon/Litecoin.js index 0c71540c..0e4cf33b 100644 --- a/app/components/Icon/Litecoin.js +++ b/app/components/Icon/Litecoin.js @@ -1,7 +1,7 @@ import React from 'react' const SvgLitecoin = props => ( - + ) diff --git a/app/components/Icon/PlusCircle.js b/app/components/Icon/PlusCircle.js index 0875ad1d..2b0c4515 100644 --- a/app/components/Icon/PlusCircle.js +++ b/app/components/Icon/PlusCircle.js @@ -1,20 +1,11 @@ import React from 'react' const SvgPlusCircle = props => ( - - - + + + + + ) diff --git a/app/components/Icon/ZapLogo.js b/app/components/Icon/ZapLogo.js index b9a245bd..ae4e107a 100644 --- a/app/components/Icon/ZapLogo.js +++ b/app/components/Icon/ZapLogo.js @@ -1,18 +1,21 @@ import React from 'react' const SvgZapLogo = props => ( - + - + + - diff --git a/app/components/Icon/ZapLogoBlack.js b/app/components/Icon/ZapLogoBlack.js deleted file mode 100644 index 9b6760cc..00000000 --- a/app/components/Icon/ZapLogoBlack.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' - -const SvgZapLogoBlack = props => ( - - - - - - - - - -) - -export default SvgZapLogoBlack diff --git a/app/components/Onboarding/FormContainer/FormContainer.js b/app/components/Onboarding/FormContainer/FormContainer.js index baf89a95..a21a2c79 100644 --- a/app/components/Onboarding/FormContainer/FormContainer.js +++ b/app/components/Onboarding/FormContainer/FormContainer.js @@ -5,7 +5,6 @@ import { FormattedMessage } from 'react-intl' import FaAngleLeft from 'react-icons/lib/fa/angle-left' import FaAngleRight from 'react-icons/lib/fa/angle-right' import ZapLogo from 'components/Icon/ZapLogo' -import ZapLogoBlack from 'components/Icon/ZapLogoBlack' import Button from 'components/UI/Button' import messages from './messages' import styles from './FormContainer.scss' @@ -14,11 +13,7 @@ const FormContainer = ({ title, description, back, next, children, theme }) => (
- {theme === 'light' ? ( - - ) : ( - - )} +
- + diff --git a/app/components/Syncing/Syncing.js b/app/components/Syncing/Syncing.js index 0999a0c9..6132c536 100644 --- a/app/components/Syncing/Syncing.js +++ b/app/components/Syncing/Syncing.js @@ -5,7 +5,6 @@ import QRCode from 'qrcode.react' import copy from 'copy-to-clipboard' import Copy from 'components/Icon/Copy' import ZapLogo from 'components/Icon/ZapLogo' -import ZapLogoBlack from 'components/Icon/ZapLogoBlack' import { showNotification } from 'lib/utils/notifications' import { FormattedMessage, injectIntl } from 'react-intl' import messages from './messages' @@ -103,11 +102,7 @@ class Syncing extends Component {
- {theme.name === 'light' ? ( - - ) : ( - - )} +
{hasSynced === true && ( diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js index d8dbad8c..e1b6d135 100644 --- a/app/components/Wallet/Wallet.js +++ b/app/components/Wallet/Wallet.js @@ -8,7 +8,6 @@ import Settings from 'components/Settings' import { Button, Dropdown, Text, Value } from 'components/UI' import CheckAnimated from 'components/Icon/CheckAnimated' import ZapLogo from 'components/Icon/ZapLogo' -import ZapLogoBlack from 'components/Icon/ZapLogoBlack' import Qrcode from 'components/Icon/Qrcode' import { FormattedNumber, FormattedMessage } from 'react-intl' import messages from './messages' @@ -30,8 +29,7 @@ const Wallet = ({ setCurrency, network, settingsProps, - paymentTimeout, - theme + paymentTimeout }) => { if (!ticker.currency) { return null @@ -46,11 +44,7 @@ const Wallet = ({
- {theme === 'light' ? ( - - ) : ( - - )} + {info.data.testnet && ( Testnet diff --git a/app/icons/big-arrow-left.svg b/app/icons/arrow-left.svg similarity index 100% rename from app/icons/big-arrow-left.svg rename to app/icons/arrow-left.svg diff --git a/app/icons/arrow-right.svg b/app/icons/arrow-right.svg new file mode 100644 index 00000000..137c4f87 --- /dev/null +++ b/app/icons/arrow-right.svg @@ -0,0 +1,16 @@ + + + + C9BDBB34-D9AD-49D7-8AD4-A3FE3D17A776 + Created with sketchtool. + + + + + + + + + + + diff --git a/app/icons/big-arrow-right.svg b/app/icons/big-arrow-right.svg index 88a8e97b..387175f3 100644 --- a/app/icons/big-arrow-right.svg +++ b/app/icons/big-arrow-right.svg @@ -1,5 +1,14 @@ - - - + + + + C3FF0EE0-873A-434F-B440-64784070ECA5 + Created with sketchtool. + + + + + + + diff --git a/app/icons/icon-plus.svg b/app/icons/icon-plus.svg deleted file mode 100644 index 938bc73c..00000000 --- a/app/icons/icon-plus.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/app/icons/plus-circle.svg b/app/icons/plus-circle.svg index 4291ff05..8b897e52 100644 --- a/app/icons/plus-circle.svg +++ b/app/icons/plus-circle.svg @@ -1 +1,8 @@ - \ No newline at end of file + + + + + + + + diff --git a/app/icons/zap-logo-black.svg b/app/icons/zap-logo-black.svg deleted file mode 100644 index 51a270ee..00000000 --- a/app/icons/zap-logo-black.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - Group 5 - Created with Sketch. - - - - - - - - - - - \ No newline at end of file diff --git a/app/icons/zap-logo.svg b/app/icons/zap-logo.svg index 2e0032a4..6de0bbd5 100644 --- a/app/icons/zap-logo.svg +++ b/app/icons/zap-logo.svg @@ -1,15 +1,18 @@ - - - Group 5 - Created with Sketch. - - - - - - - + + + 9A34091F-52FF-4333-89C8-0C5FDDF57D62 + Created with sketchtool. + + + + + + + + + + diff --git a/stories/icons/icon.stories.js b/stories/icons/icon.stories.js index 280da5c1..2940fac9 100644 --- a/stories/icons/icon.stories.js +++ b/stories/icons/icon.stories.js @@ -2,7 +2,8 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { Box, Flex } from 'rebass' -import BigArrowLeft from 'components/Icon/BigArrowLeft' +import ArrowLeft from 'components/Icon/ArrowLeft' +import ArrowRight from 'components/Icon/ArrowRight' import BigArrowRight from 'components/Icon/BigArrowRight' import Bitcoin from 'components/Icon/Bitcoin' import Btcpay from 'components/Icon/Btcpay' @@ -50,12 +51,12 @@ import Warning from 'components/Icon/Warning' import X from 'components/Icon/X' import Zap from 'components/Icon/Zap' import ZapLogo from 'components/Icon/ZapLogo' -import ZapLogoBlack from 'components/Icon/ZapLogoBlack' const iconSizes = [16, 32, 64, 128] const zapIconsList = { - BigArrowLeft, + ArrowLeft, + ArrowRight, BigArrowRight, Bitcoin, Btcpay, @@ -102,8 +103,7 @@ const zapIconsList = { Warning, X, Zap, - ZapLogo, - ZapLogoBlack + ZapLogo } const zapIconStories = storiesOf('Icons', module) diff --git a/test/unit/components/Pay/__snapshots__/PayButtons.spec.js.snap b/test/unit/components/Pay/__snapshots__/PayButtons.spec.js.snap index c61005e3..8cf9801c 100644 --- a/test/unit/components/Pay/__snapshots__/PayButtons.spec.js.snap +++ b/test/unit/components/Pay/__snapshots__/PayButtons.spec.js.snap @@ -19,7 +19,7 @@ exports[`component.Form.PayButtons should render correctly with default props 1` > - +