lukechilds
/
zap-desktop
mirror of https://github.com/lukechilds/zap-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

style(icons): update icons 

Update icons form latest designs.
next
Tom Kirkpatrick 6 years ago
parent
16d5ac9ebb
commit
a661bcd3bd
No known key found for this signature in database GPG Key ID: 72203A8EC5967EA8
20 changed files with 101 additions and 115 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      app/components/Icon/ArrowLeft.js
  2. 17
      app/components/Icon/ArrowRight.js
  3. 9
      app/components/Icon/BigArrowRight.js
  4. 2
      app/components/Icon/Litecoin.js
  5. 19
      app/components/Icon/PlusCircle.js
  6. 15
      app/components/Icon/ZapLogo.js
  7. 21
      app/components/Icon/ZapLogoBlack.js
  8. 5
      app/components/Onboarding/FormContainer/FormContainer.js
  9. 4
      app/components/Pay/PayButtons.js
  10. 5
      app/components/Syncing/Syncing.js
  11. 8
      app/components/Wallet/Wallet.js
  12. 0
      app/icons/arrow-left.svg
  13. 16
      app/icons/arrow-right.svg
  14. 15
      app/icons/big-arrow-right.svg
  15. 8
      app/icons/icon-plus.svg
  16. 9
      app/icons/plus-circle.svg
  17. 16
      app/icons/zap-logo-black.svg
  18. 25
      app/icons/zap-logo.svg
  19. 10
      stories/icons/icon.stories.js
  20. 2
      test/unit/components/Pay/__snapshots__/PayButtons.spec.js.snap

4
app/components/Icon/BigArrowLeft.js → app/components/Icon/ArrowLeft.js
View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const SvgBigArrowLeft = props => ( const SvgArrowLeft = props => (
<svg width="1em" height="1em" viewBox="0 0 16 12" {...props}> <svg width="1em" height="1em" viewBox="0 0 16 12" {...props}>
<path <path
d="M1 6h14m-8.474 5L1 6l5.526-5" d="M1 6h14m-8.474 5L1 6l5.526-5"
@ -13,4 +13,4 @@ const SvgBigArrowLeft = props => (
</svg> </svg>
) )
export default SvgBigArrowLeft export default SvgArrowLeft

17
app/components/Icon/ArrowRight.js
View File

@ -0,0 +1,17 @@
import React from 'react'
const SvgArrowRight = props => (
<svg width="1em" height="1em" viewBox="0 0 16 12" {...props}>
<g
stroke="currentColor"
fill="none"
fillRule="evenodd"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M1 6h14M9.474 11L15 6 9.474 1" />
</g>
</svg>
)
export default SvgArrowRight

9
app/components/Icon/BigArrowRight.js
View File

@ -2,14 +2,15 @@ import React from 'react'
const SvgBigArrowRight = props => ( const SvgBigArrowRight = props => (
<svg width="1em" height="1em" viewBox="0 0 40 28" {...props}> <svg width="1em" height="1em" viewBox="0 0 40 28" {...props}>
<path <g
d="M1 14h38M24 27l15-13L24 1" stroke="currentColor"
fill="none" fill="none"
fillRule="evenodd" fillRule="evenodd"
stroke="currentColor"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
/> >
<path d="M1 14h38M24 27l15-13L24 1" />
</g>
</svg> </svg>
) )

2
app/components/Icon/Litecoin.js
View File

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
const SvgLitecoin = props => ( const SvgLitecoin = props => (
<svg fill="currentColor" viewBox="0 0 40 40" dataIcon="ltc" {...props} width="1em" height="1em"> <svg fill="currentColor" viewBox="0 0 40 40" data-icon="ltc" {...props} width="1em" height="1em">
<path d="M12.29 28.04l1.29-5.52-1.58.67.63-2.85 1.64-.68L16.52 10h5.23l-1.52 7.14 2.09-.74-.58 2.7-2.05.8-.9 4.34h8.1l-.99 3.8z" /> <path d="M12.29 28.04l1.29-5.52-1.58.67.63-2.85 1.64-.68L16.52 10h5.23l-1.52 7.14 2.09-.74-.58 2.7-2.05.8-.9 4.34h8.1l-.99 3.8z" />
</svg> </svg>
) )

19
app/components/Icon/PlusCircle.js
View File

@ -1,20 +1,11 @@
import React from 'react' import React from 'react'
const SvgPlusCircle = props => ( const SvgPlusCircle = props => (
<svg <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
width="1em" <g fill="none" fillRule="evenodd" stroke="currentColor" transform="translate(1 1)">
height="1em" <path d="M11.121 7v8M7 11.121h8" strokeLinecap="round" strokeLinejoin="round" />
viewBox="0 0 24 24" <circle cx={11} cy={11} r={11} />
fill="none" </g>
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="plus-circle_svg__feather plus-circle_svg__feather-plus-circle"
{...props}
>
<circle cx={12} cy={12} r={10} />
<path d="M12 8v8M8 12h8" />
</svg> </svg>
) )

15
app/components/Icon/ZapLogo.js
View File

@ -1,18 +1,21 @@
import React from 'react' import React from 'react'
const SvgZapLogo = props => ( const SvgZapLogo = props => (
<svg width="1em" height="1em" viewBox="0 0 60 21" {...props}> <svg width="1em" height="1em" viewBox="0 0 63 26" {...props}>
<g fill="none" fillRule="evenodd"> <g fill="none" fillRule="evenodd">
<path <path
d="M29.533 15.014h6.865V16h-8.31v-.86l6.406-8.7h-6.21V5.433h7.685v.869l-6.436 8.71zM46.158 16c-.117-.332-.192-.824-.224-1.475-.41.534-.933.946-1.568 1.236a4.8 4.8 0 0 1-2.016.434c-1.016 0-1.838-.283-2.466-.85-.628-.566-.943-1.282-.943-2.148 0-1.028.428-1.842 1.285-2.441.856-.6 2.049-.899 3.579-.899h2.119v-1.2c0-.756-.233-1.35-.698-1.783-.466-.433-1.145-.65-2.037-.65-.813 0-1.487.209-2.021.626-.534.416-.8.918-.8 1.504l-1.173-.01c0-.84.39-1.568 1.172-2.183.781-.615 1.742-.923 2.881-.923 1.178 0 2.108.295 2.788.884.68.59 1.03 1.411 1.05 2.466v5c0 1.022.107 1.787.322 2.295V16h-1.25zm-3.672-.84c.782 0 1.48-.189 2.095-.566a3.333 3.333 0 0 0 1.343-1.514v-2.324h-2.09c-1.165.013-2.077.226-2.734.64-.658.413-.987.98-.987 1.704 0 .592.22 1.084.66 1.474.439.39 1.01.586 1.713.586zm17.211-4.336c0 1.647-.364 2.954-1.093 3.921-.73.967-1.706 1.45-2.93 1.45-1.445 0-2.552-.507-3.32-1.523v5.39H51.19V5.434h1.084l.059 1.494c.762-1.127 1.865-1.69 3.31-1.69 1.264 0 2.255.479 2.974 1.436.72.957 1.08 2.285 1.08 3.984v.166zm-1.172-.205c0-1.348-.276-2.412-.83-3.193-.553-.781-1.325-1.172-2.314-1.172-.716 0-1.332.172-1.846.517-.514.346-.908.847-1.181 1.504v5.069c.28.605.68 1.067 1.2 1.386.522.32 1.137.479 1.846.479.983 0 1.75-.392 2.3-1.177.55-.784.825-1.922.825-3.413z" d="M29.61 20.55h7.644v1.065H28v-.927l7.09-9.392h-6.873v-1.085h8.515v.938L29.61 20.55zm18.588 1.065a11.16 11.16 0 0 1-.185-1.001 6.668 6.668 0 0 1-.054-.854c-.435.597-1.015 1.093-1.74 1.486-.725.394-1.54.59-2.447.59-1.145 0-2.035-.294-2.67-.885-.634-.59-.95-1.38-.95-2.371 0-1.054.468-1.898 1.407-2.53.94-.632 2.206-.949 3.8-.949h2.6V13.69c0-.815-.27-1.454-.81-1.918-.54-.464-1.296-.696-2.268-.696-.906 0-1.658.221-2.256.664-.598.443-.897.984-.897 1.623l-1.196-.01-.022-.063c-.044-.85.357-1.611 1.202-2.282.844-.671 1.919-1.007 3.224-1.007 1.297 0 2.341.32 3.132.96.79.639 1.185 1.556 1.185 2.75v5.608c0 .4.023.79.07 1.17.048.379.126.755.234 1.127h-1.359zm-4.274-.896c.936 0 1.762-.212 2.48-.637.718-.425 1.236-.968 1.555-1.629v-2.382h-2.62c-1.183 0-2.127.244-2.834.733-.706.488-1.06 1.094-1.06 1.818 0 .618.22 1.122.658 1.512.439.39 1.046.585 1.821.585zM63 16.23c0 1.708-.399 3.07-1.196 4.085-.798 1.015-1.896 1.523-3.295 1.523-.827 0-1.55-.151-2.17-.454a3.901 3.901 0 0 1-1.517-1.296V26h-1.304V10.21h1.098l.163 1.772a4.12 4.12 0 0 1 1.517-1.466c.62-.344 1.35-.516 2.191-.516 1.414 0 2.52.546 3.317 1.639C62.6 12.732 63 14.188 63 16.008v.221zm-1.305-.221c0-1.448-.297-2.628-.892-3.542-.594-.913-1.464-1.37-2.61-1.37-.877 0-1.589.202-2.136.606-.548.404-.96.93-1.235 1.576v5.48a3.482 3.482 0 0 0 1.29 1.477c.56.358 1.262.537 2.103.537 1.138 0 2.003-.415 2.594-1.244.59-.829.886-1.929.886-3.299v-.221z"
fill="currentColor" fill="currentColor"
/> />
<g strokeLinecap="round" strokeLinejoin="round" strokeWidth={0.77}> <g fillRule="nonzero">
<path <path
d="M15.042 13.286c1.993-.395 3.355-2.2 3.15-4.174-.204-1.975-1.908-3.478-3.942-3.476h-.998c-.722-2.729-3.244-4.635-6.132-4.635C4.233 1 1.71 2.907.988 5.636c-.722 2.73.539 5.59 3.065 6.955" d="M16.673 5.802a5.17 5.17 0 0 1 5.152 4.646 5.168 5.168 0 0 1-4.12 5.585.447.447 0 0 1-.524-.361.458.458 0 0 1 .352-.538c2.156-.436 3.625-2.422 3.405-4.59-.22-2.17-2.062-3.827-4.265-3.825h-1.191a.448.448 0 0 1-.431-.34c-.81-3.123-3.644-5.31-6.892-5.31-3.249 0-6.083 2.187-6.892 5.31a7.059 7.059 0 0 0 3.44 7.953c.217.12.298.397.182.62a.44.44 0 0 1-.604.188 7.985 7.985 0 0 1-3.88-8.997A8.006 8.006 0 0 1 8.159.153a8.007 8.007 0 0 1 7.658 5.65h.856z"
stroke="currentColor" fill="currentColor"
/>
<path
d="M8.622 16.194c-.36 0-.571-.413-.368-.717l3.765-5.653a.438.438 0 0 1 .62-.119.466.466 0 0 1 .116.637l-3.288 4.936h4.803c.359 0 .57.413.368.717l-3.766 5.653a.438.438 0 0 1-.62.12.466.466 0 0 1-.115-.638l3.287-4.936H8.622z"
fill="#FD9800"
/> />
<path stroke="#F5B300" d="M10.292 8.727l-3.167 4.637h4.75L8.708 18" />
</g> </g>
</g> </g>
</svg> </svg>

21
app/components/Icon/ZapLogoBlack.js
View File

@ -1,21 +0,0 @@
import React from 'react'
const SvgZapLogoBlack = props => (
<svg width="1em" height="1em" viewBox="0 0 60 21" {...props}>
<g fill="none" fillRule="evenodd">
<path
d="M29.533 15.014h6.865V16h-8.31v-.86l6.406-8.7h-6.21V5.433h7.685v.869l-6.436 8.71zM46.158 16c-.117-.332-.192-.824-.224-1.475-.41.534-.933.946-1.568 1.236a4.8 4.8 0 0 1-2.016.434c-1.016 0-1.838-.283-2.466-.85-.628-.566-.943-1.282-.943-2.148 0-1.028.428-1.842 1.285-2.441.856-.6 2.049-.899 3.579-.899h2.119v-1.2c0-.756-.233-1.35-.698-1.783-.466-.433-1.145-.65-2.037-.65-.813 0-1.487.209-2.021.626-.534.416-.8.918-.8 1.504l-1.173-.01c0-.84.39-1.568 1.172-2.183.781-.615 1.742-.923 2.881-.923 1.178 0 2.108.295 2.788.884.68.59 1.03 1.411 1.05 2.466v5c0 1.022.107 1.787.322 2.295V16h-1.25zm-3.672-.84c.782 0 1.48-.189 2.095-.566a3.333 3.333 0 0 0 1.343-1.514v-2.324h-2.09c-1.165.013-2.077.226-2.734.64-.658.413-.987.98-.987 1.704 0 .592.22 1.084.66 1.474.439.39 1.01.586 1.713.586zm17.211-4.336c0 1.647-.364 2.954-1.093 3.921-.73.967-1.706 1.45-2.93 1.45-1.445 0-2.552-.507-3.32-1.523v5.39H51.19V5.434h1.084l.059 1.494c.762-1.127 1.865-1.69 3.31-1.69 1.264 0 2.255.479 2.974 1.436.72.957 1.08 2.285 1.08 3.984v.166zm-1.172-.205c0-1.348-.276-2.412-.83-3.193-.553-.781-1.325-1.172-2.314-1.172-.716 0-1.332.172-1.846.517-.514.346-.908.847-1.181 1.504v5.069c.28.605.68 1.067 1.2 1.386.522.32 1.137.479 1.846.479.983 0 1.75-.392 2.3-1.177.55-.784.825-1.922.825-3.413z"
fill="#313340"
/>
<g strokeLinecap="round" strokeLinejoin="round" strokeWidth={0.77}>
<path
d="M15.042 13.286c1.993-.395 3.355-2.2 3.15-4.174-.204-1.975-1.908-3.478-3.942-3.476h-.998c-.722-2.729-3.244-4.635-6.132-4.635C4.233 1 1.71 2.907.988 5.636c-.722 2.73.539 5.59 3.065 6.955"
stroke="#313340"
/>
<path stroke="#F5B300" d="M10.292 8.727l-3.167 4.637h4.75L8.708 18" />
</g>
</g>
</svg>
)
export default SvgZapLogoBlack

5
app/components/Onboarding/FormContainer/FormContainer.js
View File

@ -5,7 +5,6 @@ import { FormattedMessage } from 'react-intl'
import FaAngleLeft from 'react-icons/lib/fa/angle-left' import FaAngleLeft from 'react-icons/lib/fa/angle-left'
import FaAngleRight from 'react-icons/lib/fa/angle-right' import FaAngleRight from 'react-icons/lib/fa/angle-right'
import ZapLogo from 'components/Icon/ZapLogo' import ZapLogo from 'components/Icon/ZapLogo'
import ZapLogoBlack from 'components/Icon/ZapLogoBlack'
import Button from 'components/UI/Button' import Button from 'components/UI/Button'
import messages from './messages' import messages from './messages'
import styles from './FormContainer.scss' import styles from './FormContainer.scss'
@ -14,11 +13,7 @@ const FormContainer = ({ title, description, back, next, children, theme }) => (
<div className={`${styles.container} ${theme}`}> <div className={`${styles.container} ${theme}`}>
<header className={styles.header}> <header className={styles.header}>
<section> <section>
{theme === 'light' ? (
<ZapLogoBlack width="70px" height="32px" />
) : (
<ZapLogo width="70px" height="32px" /> <ZapLogo width="70px" height="32px" />
)}
</section> </section>
<section> <section>
<div <div

4
app/components/Pay/PayButtons.js
View File

@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl' import { FormattedMessage } from 'react-intl'
import { Box, Flex, Text } from 'rebass' import { Box, Flex, Text } from 'rebass'
import BigArrowLeft from 'components/Icon/BigArrowLeft' import ArrowLeft from 'components/Icon/ArrowLeft'
import { Button } from 'components/UI' import { Button } from 'components/UI'
import messages from './messages' import messages from './messages'
@ -51,7 +51,7 @@ class PayButtons extends React.PureComponent {
> >
<Flex> <Flex>
<Text> <Text>
<BigArrowLeft /> <ArrowLeft />
</Text> </Text>
<Text ml={1}> <Text ml={1}>
<FormattedMessage {...messages.back} /> <FormattedMessage {...messages.back} />

5
app/components/Syncing/Syncing.js
View File

@ -5,7 +5,6 @@ import QRCode from 'qrcode.react'
import copy from 'copy-to-clipboard' import copy from 'copy-to-clipboard'
import Copy from 'components/Icon/Copy' import Copy from 'components/Icon/Copy'
import ZapLogo from 'components/Icon/ZapLogo' import ZapLogo from 'components/Icon/ZapLogo'
import ZapLogoBlack from 'components/Icon/ZapLogoBlack'
import { showNotification } from 'lib/utils/notifications' import { showNotification } from 'lib/utils/notifications'
import { FormattedMessage, injectIntl } from 'react-intl' import { FormattedMessage, injectIntl } from 'react-intl'
import messages from './messages' import messages from './messages'
@ -103,11 +102,7 @@ class Syncing extends Component {
<div className={`${styles.container} ${theme.name}`}> <div className={`${styles.container} ${theme.name}`}>
<div className={styles.content}> <div className={styles.content}>
<header> <header>
{theme.name === 'light' ? (
<ZapLogoBlack width="70px" height="32px" />
) : (
<ZapLogo width="70px" height="32px" /> <ZapLogo width="70px" height="32px" />
)}
</header> </header>
{hasSynced === true && ( {hasSynced === true && (

8
app/components/Wallet/Wallet.js
View File

@ -8,7 +8,6 @@ import Settings from 'components/Settings'
import { Button, Dropdown, Text, Value } from 'components/UI' import { Button, Dropdown, Text, Value } from 'components/UI'
import CheckAnimated from 'components/Icon/CheckAnimated' import CheckAnimated from 'components/Icon/CheckAnimated'
import ZapLogo from 'components/Icon/ZapLogo' import ZapLogo from 'components/Icon/ZapLogo'
import ZapLogoBlack from 'components/Icon/ZapLogoBlack'
import Qrcode from 'components/Icon/Qrcode' import Qrcode from 'components/Icon/Qrcode'
import { FormattedNumber, FormattedMessage } from 'react-intl' import { FormattedNumber, FormattedMessage } from 'react-intl'
import messages from './messages' import messages from './messages'
@ -30,8 +29,7 @@ const Wallet = ({
setCurrency, setCurrency,
network, network,
settingsProps, settingsProps,
paymentTimeout, paymentTimeout
theme
}) => { }) => {
if (!ticker.currency) { if (!ticker.currency) {
return null return null
@ -46,11 +44,7 @@ const Wallet = ({
<div className={`${styles.wallet}`}> <div className={`${styles.wallet}`}>
<Flex as="header" justifyContent="space-between"> <Flex as="header" justifyContent="space-between">
<Flex as="section" alignItems="center"> <Flex as="section" alignItems="center">
{theme === 'light' ? (
<ZapLogoBlack width="70px" height="32px" />
) : (
<ZapLogo width="70px" height="32px" /> <ZapLogo width="70px" height="32px" />
)}
{info.data.testnet && ( {info.data.testnet && (
<Text color="superGreen" fontSize={1} ml={2}> <Text color="superGreen" fontSize={1} ml={2}>
Testnet Testnet

0
app/icons/big-arrow-left.svg → app/icons/arrow-left.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 258 B

After

Width:  |  Height:  |  Size: 258 B

16
app/icons/arrow-right.svg
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="12px" viewBox="0 0 16 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
<title>C9BDBB34-D9AD-49D7-8AD4-A3FE3D17A776</title>
<desc>Created with sketchtool.</desc>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="icon_arrow_right_lightning_orange" transform="translate(1.000000, 1.000000)" stroke="currentColor">
<g id="icon_big_arrow_right">
<g>
<path d="M14,5 L0,5" id="Shape" transform="translate(7.000000, 5.000000) scale(-1, 1) translate(-7.000000, -5.000000) "></path>
<polyline id="Shape" transform="translate(11.236842, 5.000000) scale(-1, 1) translate(-11.236842, -5.000000) " points="14 10 8.47368421 5 14 0"></polyline>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

15
app/icons/big-arrow-right.svg
View File

@ -1,5 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="28" viewBox="0 0 40 28"> <?xml version="1.0" encoding="UTF-8"?>
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"> <svg width="40px" height="28px" viewBox="0 0 40 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M1 14h38M24 27l15-13L24 1"/> <!-- Generator: sketchtool 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
<title>C3FF0EE0-873A-434F-B440-64784070ECA5</title>
<desc>Created with sketchtool.</desc>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="icon_big_arrow_right" transform="translate(1.000000, 1.000000)" stroke="currentColor">
<g id="Shape">
<path d="M38,13 L0,13" transform="translate(19.000000, 13.000000) scale(-1, 1) translate(-19.000000, -13.000000) "></path>
<polyline transform="translate(30.500000, 13.000000) scale(-1, 1) translate(-30.500000, -13.000000) " points="38 26 23 13 38 0"></polyline>
</g>
</g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 255 B

After

Width:  |  Height:  |  Size: 970 B

8
app/icons/icon-plus.svg
View File

@ -1,8 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 18 18">
<g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
<g stroke-linecap="round" stroke-linejoin="round">
<path d="M8.09 5v6M5 8.09h6"/>
</g>
<circle cx="8" cy="8" r="8"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 342 B

9
app/icons/plus-circle.svg
View File

@ -1 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
<g stroke-linecap="round" stroke-linejoin="round">
<path d="M11.121 7v8M7 11.121h8"/>
</g>
<circle cx="11" cy="11" r="11"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 351 B

After

Width:  |  Height:  |  Size: 349 B

16
app/icons/zap-logo-black.svg
View File

@ -1,16 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="21px" viewBox="0 0 60 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<title>Group 5</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Pay-Hover-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-56.000000, -23.000000)">
<g id="Group-5" transform="translate(56.000000, 20.000000)">
<path d="M29.5332033,18.0136719 L36.3984377,18.0136719 L36.3984377,19 L28.0878908,19 L28.0878908,18.140625 L34.4941408,9.43945312 L28.2832033,9.43945312 L28.2832033,8.43359375 L35.9687502,8.43359375 L35.9687502,9.30273438 L29.5332033,18.0136719 Z M46.1582032,19 C46.0410151,18.6679671 45.9661461,18.1764355 45.9335938,17.5253906 C45.5234355,18.0592475 45.0009798,18.4710272 44.366211,18.7607422 C43.7314422,19.0504572 43.0592484,19.1953125 42.3496094,19.1953125 C41.3339794,19.1953125 40.5120475,18.9121122 39.8837891,18.3457031 C39.2555308,17.779294 38.9414063,17.0631554 38.9414063,16.1972656 C38.9414063,15.1686146 39.3694619,14.3548207 40.225586,13.7558594 C41.0817101,13.156898 42.274732,12.8574219 43.8046876,12.8574219 L45.9238282,12.8574219 L45.9238282,11.65625 C45.9238282,10.9010379 45.6910831,10.3069683 45.225586,9.87402344 C44.7600889,9.44107856 44.0813847,9.22460938 43.1894532,9.22460938 C42.375647,9.22460938 41.7018256,9.43294063 41.1679688,9.84960938 C40.634112,10.2662781 40.3671876,10.7675752 40.3671876,11.3535156 L39.1953126,11.34375 C39.1953126,10.5039021 39.5859337,9.77637026 40.3671876,9.16113281 C41.1484415,8.54589536 42.1087183,8.23828125 43.2480469,8.23828125 C44.4264382,8.23828125 45.3557909,8.53287466 46.0361329,9.12207031 C46.7164748,9.71126597 47.0664062,10.5331979 47.0859376,11.5878906 L47.0859376,16.5878906 C47.0859376,17.6100312 47.1933584,18.3749975 47.4082032,18.8828125 L47.4082032,19 L46.1582032,19 Z M42.4863282,18.1601562 C43.2675821,18.1601562 43.9658173,17.9713561 44.5810547,17.59375 C45.1962922,17.2161439 45.6438789,16.7115917 45.9238282,16.0800781 L45.9238282,13.7558594 L43.8339844,13.7558594 C42.668614,13.7688803 41.7571648,13.9820943 41.0996094,14.3955078 C40.4420541,14.8089213 40.1132813,15.3769495 40.1132813,16.0996094 C40.1132813,16.6920603 40.3330057,17.1835918 40.772461,17.5742188 C41.2119163,17.9648457 41.7831997,18.1601562 42.4863282,18.1601562 Z M59.6972656,13.8242188 C59.6972656,15.4713624 59.3326859,16.7783155 58.6035156,17.7451172 C57.8743453,18.7119189 56.8977925,19.1953125 55.6738281,19.1953125 C54.2285083,19.1953125 53.1217486,18.6875051 52.3535156,17.671875 L52.3535156,23.0625 L51.1914062,23.0625 L51.1914062,8.43359375 L52.2753906,8.43359375 L52.3339843,9.92773438 C53.0957069,8.80142666 54.1992115,8.23828125 55.6445312,8.23828125 C56.9075583,8.23828125 57.8987594,8.71679209 58.618164,9.67382812 C59.3375686,10.6308642 59.6972656,11.9589759 59.6972656,13.6582031 L59.6972656,13.8242188 Z M58.5253906,13.6191406 C58.5253906,12.2714776 58.2487006,11.2070352 57.6953124,10.4257812 C57.1419243,9.64452734 56.3704476,9.25390625 55.3808593,9.25390625 C54.6647099,9.25390625 54.0494817,9.42643057 53.5351562,9.77148438 C53.0208307,10.1165382 52.6269544,10.6178353 52.3535156,11.2753906 L52.3535156,16.34375 C52.6334649,16.9492218 53.0338515,17.4114567 53.5546874,17.7304688 C54.0755234,18.0494808 54.6907516,18.2089844 55.4003906,18.2089844 C56.3834684,18.2089844 57.1500623,17.8167357 57.7001953,17.0322266 C58.2503282,16.2477174 58.5253906,15.1100335 58.5253906,13.6191406 Z" id="zap" fill="#313340"></path>
<g id="cloud-lightning" transform="translate(0.000000, 4.000000)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.77">
<path d="M15.0416667,12.2863636 C17.0346026,11.8913673 18.396646,10.0866143 18.1922712,8.11170759 C17.9878963,6.13680088 16.283606,4.63436876 14.25,4.63636364 L13.2525,4.63636364 C12.5303096,1.90723362 10.0081977,0.000523827862 7.12041491,0.000523855726 C4.23263213,0.000523883591 1.71052026,1.90723373 0.988329904,4.63636375 C0.26613955,7.36549378 1.52676812,10.2258816 4.05333333,11.5909091" id="Shape" stroke="#313340"></path>
<polyline id="Shape" stroke="#F5B300" points="10.2916667 7.72727273 7.125 12.3636364 11.875 12.3636364 8.70833333 17"></polyline>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.3 KiB

25
app/icons/zap-logo.svg
View File

@ -1,15 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="21px" viewBox="0 0 60 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg width="63px" height="26px" viewBox="0 0 63 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch --> <!-- Generator: sketchtool 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
<title>Group 5</title> <title>9A34091F-52FF-4333-89C8-0C5FDDF57D62</title>
<desc>Created with Sketch.</desc> <desc>Created with sketchtool.</desc>
<defs></defs> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Pay-Hover-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-56.000000, -23.000000)"> <g id="zap_logo_white">
<g id="Group-5" transform="translate(56.000000, 20.000000)"> <g>
<path d="M29.5332033,18.0136719 L36.3984377,18.0136719 L36.3984377,19 L28.0878908,19 L28.0878908,18.140625 L34.4941408,9.43945312 L28.2832033,9.43945312 L28.2832033,8.43359375 L35.9687502,8.43359375 L35.9687502,9.30273438 L29.5332033,18.0136719 Z M46.1582032,19 C46.0410151,18.6679671 45.9661461,18.1764355 45.9335938,17.5253906 C45.5234355,18.0592475 45.0009798,18.4710272 44.366211,18.7607422 C43.7314422,19.0504572 43.0592484,19.1953125 42.3496094,19.1953125 C41.3339794,19.1953125 40.5120475,18.9121122 39.8837891,18.3457031 C39.2555308,17.779294 38.9414063,17.0631554 38.9414063,16.1972656 C38.9414063,15.1686146 39.3694619,14.3548207 40.225586,13.7558594 C41.0817101,13.156898 42.274732,12.8574219 43.8046876,12.8574219 L45.9238282,12.8574219 L45.9238282,11.65625 C45.9238282,10.9010379 45.6910831,10.3069683 45.225586,9.87402344 C44.7600889,9.44107856 44.0813847,9.22460938 43.1894532,9.22460938 C42.375647,9.22460938 41.7018256,9.43294063 41.1679688,9.84960938 C40.634112,10.2662781 40.3671876,10.7675752 40.3671876,11.3535156 L39.1953126,11.34375 C39.1953126,10.5039021 39.5859337,9.77637026 40.3671876,9.16113281 C41.1484415,8.54589536 42.1087183,8.23828125 43.2480469,8.23828125 C44.4264382,8.23828125 45.3557909,8.53287466 46.0361329,9.12207031 C46.7164748,9.71126597 47.0664062,10.5331979 47.0859376,11.5878906 L47.0859376,16.5878906 C47.0859376,17.6100312 47.1933584,18.3749975 47.4082032,18.8828125 L47.4082032,19 L46.1582032,19 Z M42.4863282,18.1601562 C43.2675821,18.1601562 43.9658173,17.9713561 44.5810547,17.59375 C45.1962922,17.2161439 45.6438789,16.7115917 45.9238282,16.0800781 L45.9238282,13.7558594 L43.8339844,13.7558594 C42.668614,13.7688803 41.7571648,13.9820943 41.0996094,14.3955078 C40.4420541,14.8089213 40.1132813,15.3769495 40.1132813,16.0996094 C40.1132813,16.6920603 40.3330057,17.1835918 40.772461,17.5742188 C41.2119163,17.9648457 41.7831997,18.1601562 42.4863282,18.1601562 Z M59.6972656,13.8242188 C59.6972656,15.4713624 59.3326859,16.7783155 58.6035156,17.7451172 C57.8743453,18.7119189 56.8977925,19.1953125 55.6738281,19.1953125 C54.2285083,19.1953125 53.1217486,18.6875051 52.3535156,17.671875 L52.3535156,23.0625 L51.1914062,23.0625 L51.1914062,8.43359375 L52.2753906,8.43359375 L52.3339843,9.92773438 C53.0957069,8.80142666 54.1992115,8.23828125 55.6445312,8.23828125 C56.9075583,8.23828125 57.8987594,8.71679209 58.618164,9.67382812 C59.3375686,10.6308642 59.6972656,11.9589759 59.6972656,13.6582031 L59.6972656,13.8242188 Z M58.5253906,13.6191406 C58.5253906,12.2714776 58.2487006,11.2070352 57.6953124,10.4257812 C57.1419243,9.64452734 56.3704476,9.25390625 55.3808593,9.25390625 C54.6647099,9.25390625 54.0494817,9.42643057 53.5351562,9.77148438 C53.0208307,10.1165382 52.6269544,10.6178353 52.3535156,11.2753906 L52.3535156,16.34375 C52.6334649,16.9492218 53.0338515,17.4114567 53.5546874,17.7304688 C54.0755234,18.0494808 54.6907516,18.2089844 55.4003906,18.2089844 C56.3834684,18.2089844 57.1500623,17.8167357 57.7001953,17.0322266 C58.2503282,16.2477174 58.5253906,15.1100335 58.5253906,13.6191406 Z" id="zap" fill="#FFFFFF"></path> <g id="zap" transform="translate(28.000000, 10.000000)" fill="#FFFFFF">
<g id="cloud-lightning" transform="translate(0.000000, 4.000000)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.77"> <path d="M1.60941191,10.5507246 L9.2541185,10.5507246 L9.2541185,11.6152833 L0,11.6152833 L0,10.687747 L7.09011194,1.29644269 L0.217488096,1.29644269 L0.217488096,0.210803689 L8.73214706,0.210803689 L8.73214706,1.14888011 L1.60941191,10.5507246 Z M20.1981195,11.6152833 C20.1111238,11.2288079 20.0495028,10.8950387 20.0132546,10.6139657 C19.9770064,10.3328928 19.9588826,10.0483106 19.9588826,9.7602108 C19.5239042,10.3574909 18.9439418,10.8528746 18.2189778,11.2463768 C17.4940139,11.639879 16.6784417,11.8366271 15.7722367,11.8366271 C14.6267937,11.8366271 13.7369138,11.5415049 13.1025704,10.9512516 C12.4682269,10.3609984 12.1510599,9.57049244 12.1510599,8.57971014 C12.1510599,7.52568643 12.6204671,6.68248011 13.5592954,6.05006588 C14.4981237,5.41765165 15.7649792,5.10144928 17.3598998,5.10144928 L19.9588826,5.10144928 L19.9588826,3.68906456 C19.9588826,2.87395289 19.6888376,2.23452142 19.1487394,1.77075099 C18.6086413,1.30698055 17.8528777,1.07509881 16.881426,1.07509881 C15.9752211,1.07509881 15.2230823,1.29644047 14.624987,1.73913043 C14.0268918,2.1818204 13.7278486,2.72287779 13.7278486,3.36231884 L12.5316641,3.35177866 L12.5099153,3.28853755 C12.4664175,2.43829175 12.866954,1.67764938 13.711537,1.00658762 C14.55612,0.33552585 15.630863,0 16.9357981,0 C18.2334835,0 19.2774159,0.319715731 20.0676266,0.959156785 C20.8578373,1.59859784 21.2529368,2.51558472 21.2529368,3.71014493 L21.2529368,9.31752306 C21.2529368,9.71805207 21.2764977,10.108035 21.3236204,10.4874835 C21.3707431,10.8669321 21.4486755,11.2428616 21.5574201,11.6152833 L20.1981195,11.6152833 Z M15.9244784,10.7193676 C16.8596819,10.7193676 17.6861284,10.5068093 18.4038427,10.0816864 C19.121557,9.65656353 19.6398985,9.11374946 19.9588826,8.45322793 L19.9588826,6.07114625 L17.338151,6.07114625 C16.1564598,6.07114625 15.2122084,6.31532474 14.5053686,6.80368906 C13.7985287,7.29205339 13.4451141,7.89810793 13.4451141,8.62187088 C13.4451141,9.24023146 13.6644124,9.74439858 14.1030156,10.1343874 C14.5416188,10.5243761 15.148767,10.7193676 15.9244784,10.7193676 Z M35,6.22924901 C35,7.93676743 34.6012758,9.29819431 33.8038155,10.3135705 C33.0063551,11.3289467 31.9080512,11.8366271 30.5088708,11.8366271 C29.6824119,11.8366271 28.9592712,11.6855527 28.3394271,11.3833992 C27.7195829,11.0812457 27.2139281,10.6491025 26.8224476,10.0869565 L26.8224476,16 L25.517519,16 L25.517519,0.210803689 L26.6158339,0.210803689 L26.77895,1.98155468 C27.1704305,1.34914045 27.6760853,0.860783452 28.2959294,0.516469038 C28.9157736,0.172154625 29.6461638,0 30.487122,0 C31.9008017,0 33.0063551,0.546327431 33.8038155,1.63899868 C34.6012758,2.73166993 35,4.18795752 35,6.00790514 L35,6.22924901 Z M33.6950714,6.00790514 C33.6950714,4.56037924 33.3978407,3.37989038 32.8033702,2.46640316 C32.2088998,1.55291594 31.3389561,1.09617918 30.1935131,1.09617918 C29.3163067,1.09617918 28.6040403,1.29819736 28.0566925,1.70223979 C27.5093447,2.10628221 27.0979339,2.63152949 26.8224476,3.27799736 L26.8224476,8.75889328 C27.1196828,9.38428069 27.5492175,9.87615104 28.1110646,10.2345191 C28.6729116,10.5928872 29.3743037,10.7720685 30.2152619,10.7720685 C31.3534553,10.7720685 32.2179618,10.3574921 32.8088074,9.52832675 C33.399653,8.69916142 33.6950714,7.59947984 33.6950714,6.22924901 L33.6950714,6.00790514 Z"></path>
<path d="M15.0416667,12.2863636 C17.0346026,11.8913673 18.396646,10.0866143 18.1922712,8.11170759 C17.9878963,6.13680088 16.283606,4.63436876 14.25,4.63636364 L13.2525,4.63636364 C12.5303096,1.90723362 10.0081977,0.000523827862 7.12041491,0.000523855726 C4.23263213,0.000523883591 1.71052026,1.90723373 0.988329904,4.63636375 C0.26613955,7.36549378 1.52676812,10.2258816 4.05333333,11.5909091" id="Shape" stroke="#FFFFFF"></path> </g>
<polyline id="Shape" stroke="#F5B300" points="10.2916667 7.72727273 7.125 12.3636364 11.875 12.3636364 8.70833333 17"></polyline> <g id="cloud+lightning" fill-rule="nonzero">
<path d="M16.6727659,5.80227568 C19.3272782,5.79961847 21.5566955,7.80517054 21.8247454,10.4483461 C22.0930089,13.0936275 20.3085737,15.5064139 17.7047412,16.033042 C17.4630865,16.081917 17.2286366,15.9201965 17.1810827,15.6718292 C17.1335287,15.423462 17.2908783,15.1824996 17.532533,15.1336246 C19.688772,14.6975228 21.1575392,12.7115602 20.9376591,10.5433746 C20.7175653,8.37308316 18.8763332,6.71673697 16.6732003,6.71894213 L15.4819499,6.71894213 C15.2798916,6.71894213 15.1030828,6.57931111 15.051046,6.37864496 C14.2411564,3.25551826 11.40746,1.06944441 8.15879339,1.06944444 C4.91012674,1.06944448 2.07643043,3.25551838 1.26654089,6.3786451 C0.457757316,9.49750698 1.87029392,12.768117 4.7067742,14.3319196 C4.92380959,14.4515751 5.00537319,14.7294042 4.88895162,14.9524684 C4.77253004,15.1755325 4.50220976,15.2593618 4.28517437,15.1397063 C1.08702458,13.3765088 -0.511414741,9.67545665 0.404733062,6.14257278 C1.31977491,2.61395375 4.51007196,0.152777814 8.15879338,0.152777778 C11.6890414,0.152777743 14.7901518,2.45672047 15.8165859,5.80227552 L16.6727659,5.80227568 Z" id="Shape" fill="#FFFFFF"></path>
<path d="M8.62162162,16.1944444 C8.26294332,16.1944444 8.05102508,15.7813509 8.25366052,15.4771755 L12.0194263,9.82439775 C12.1585674,9.61553346 12.4361054,9.56214492 12.6393247,9.70515109 C12.842544,9.84815727 12.8944896,10.1334046 12.7553485,10.3422689 L9.46741271,15.2777778 L14.2702703,15.2777778 C14.6289486,15.2777778 14.8408668,15.6908713 14.6382314,15.9950467 L10.8724656,21.6478245 C10.7333245,21.8566888 10.4557865,21.9100773 10.2525672,21.7670711 C10.0493479,21.624065 9.99740226,21.3388176 10.1365434,21.1299533 L13.4244792,16.1944444 L8.62162162,16.1944444 Z" id="Shape" fill="#FD9800"></path>
</g>
</g> </g>
</g> </g>
</g> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

10
stories/icons/icon.stories.js
View File

@ -2,7 +2,8 @@ import React from 'react'
import { storiesOf } from '@storybook/react' import { storiesOf } from '@storybook/react'
import { Box, Flex } from 'rebass' 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 BigArrowRight from 'components/Icon/BigArrowRight'
import Bitcoin from 'components/Icon/Bitcoin' import Bitcoin from 'components/Icon/Bitcoin'
import Btcpay from 'components/Icon/Btcpay' import Btcpay from 'components/Icon/Btcpay'
@ -50,12 +51,12 @@ import Warning from 'components/Icon/Warning'
import X from 'components/Icon/X' import X from 'components/Icon/X'
import Zap from 'components/Icon/Zap' import Zap from 'components/Icon/Zap'
import ZapLogo from 'components/Icon/ZapLogo' import ZapLogo from 'components/Icon/ZapLogo'
import ZapLogoBlack from 'components/Icon/ZapLogoBlack'
const iconSizes = [16, 32, 64, 128] const iconSizes = [16, 32, 64, 128]
const zapIconsList = { const zapIconsList = {
BigArrowLeft, ArrowLeft,
ArrowRight,
BigArrowRight, BigArrowRight,
Bitcoin, Bitcoin,
Btcpay, Btcpay,
@ -102,8 +103,7 @@ const zapIconsList = {
Warning, Warning,
X, X,
Zap, Zap,
ZapLogo, ZapLogo
ZapLogoBlack
} }
const zapIconStories = storiesOf('Icons', module) const zapIconStories = storiesOf('Icons', module)

2
test/unit/components/Pay/__snapshots__/PayButtons.spec.js.snap
View File

@ -19,7 +19,7 @@ exports[`component.Form.PayButtons should render correctly with default props 1`
> >
<Styled(styled.div)> <Styled(styled.div)>
<Styled(styled.div)> <Styled(styled.div)>
<SvgBigArrowLeft /> <SvgArrowLeft />
</Styled(styled.div)> </Styled(styled.div)>
<Styled(styled.div) <Styled(styled.div)
ml={1} ml={1}

Write Preview
Loading…
Cancel
Save