diff --git a/app/images/deposit-eth.svg b/app/images/deposit-eth.svg deleted file mode 100644 index 997c3b7ac..000000000 --- a/app/images/deposit-eth.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/app/images/transak.svg b/app/images/transak.svg deleted file mode 100644 index 8f8d7790a..000000000 --- a/app/images/transak.svg +++ /dev/null @@ -1,112 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/app/images/wyre.svg b/app/images/wyre.svg deleted file mode 100644 index ef524cb4c..000000000 --- a/app/images/wyre.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js b/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js index 9eb6940d8..0cfae77ee 100644 --- a/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js +++ b/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js @@ -6,6 +6,9 @@ import { } from '../../../../../shared/constants/network'; import Button from '../../../ui/button'; import LogoMoonPay from '../../../ui/logo/logo-moonpay'; +import LogoWyre from '../../../ui/logo/logo-wyre'; +import LogoTransak from '../../../ui/logo/logo-transak'; +import LogoDepositEth from '../../../ui/logo/logo-deposit-eth'; export default class DepositEtherModal extends Component { static contextTypes = { @@ -128,15 +131,7 @@ export default class DepositEtherModal extends Component {
{this.renderRow({ - logo: ( -
- ), + logo: , title: t('buyCryptoWithTransak', [symbol]), text: t('buyCryptoWithTransakDescription', [symbol]), buttonLabel: t('continueToTransak'), @@ -153,9 +148,7 @@ export default class DepositEtherModal extends Component { hide: !isBuyableTransakChain, })} {this.renderRow({ - logo: ( - - ), + logo: , title: t('buyCryptoWithMoonPay', [symbol]), text: t('buyCryptoWithMoonPayDescription', [symbol]), buttonLabel: t('continueToMoonPay'), @@ -172,15 +165,7 @@ export default class DepositEtherModal extends Component { hide: !isBuyableMoonPayChain, })} {this.renderRow({ - logo: ( -
- ), + logo: , title: t('buyWithWyre'), text: t('buyWithWyreDescription'), buttonLabel: t('continueToWyre'), @@ -198,15 +183,7 @@ export default class DepositEtherModal extends Component { })} {this.renderRow({ logo: ( - + ), title: t('directDepositCrypto', [symbol]), text: t('directDepositCryptoExplainer', [symbol]), diff --git a/ui/components/app/modals/deposit-ether-modal/index.scss b/ui/components/app/modals/deposit-ether-modal/index.scss index 18009d267..007e0b581 100644 --- a/ui/components/app/modals/deposit-ether-modal/index.scss +++ b/ui/components/app/modals/deposit-ether-modal/index.scss @@ -18,7 +18,7 @@ } &__logo { - height: 60px; + max-height: 40px; background-repeat: no-repeat; background-size: contain; background-position: center; @@ -27,8 +27,12 @@ justify-content: center; align-items: center; - &--moonpay { - height: 30px; + &--lg { + max-height: 60px; + } + + @media screen and (min-width: $break-large) { + height: 60px; } } diff --git a/ui/components/ui/logo/README.mdx b/ui/components/ui/logo/README.mdx new file mode 100644 index 000000000..83468d14e --- /dev/null +++ b/ui/components/ui/logo/README.mdx @@ -0,0 +1,15 @@ +import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; + +import LogoWyre from './logo-wyre'; + +# Logo + +Logo components that are theme compatible + + + + + +## Component API + + diff --git a/ui/components/ui/logo/logo-deposit-eth.js b/ui/components/ui/logo/logo-deposit-eth.js new file mode 100644 index 000000000..9c11cc305 --- /dev/null +++ b/ui/components/ui/logo/logo-deposit-eth.js @@ -0,0 +1,48 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const LogoDepositEth = ({ + width = '100%', + color = 'var(--color-text-default)', + className, +}) => { + return ( + + + + + + + ); +}; + +LogoDepositEth.propTypes = { + /** + * The width of the logo. Defaults to 100% + */ + width: PropTypes.string, + /** + * The color of the logo defaults to var(--color-text-default) + */ + color: PropTypes.string, + /** + * Additional className to add to the root svg + */ + className: PropTypes.string, +}; + +export default LogoDepositEth; diff --git a/ui/components/ui/logo/logo-transak.js b/ui/components/ui/logo/logo-transak.js new file mode 100644 index 000000000..64233c16c --- /dev/null +++ b/ui/components/ui/logo/logo-transak.js @@ -0,0 +1,102 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const LogoTransak = ({ width = '100%', className }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +LogoTransak.propTypes = { + /** + * The width of the logo. Defaults to 100% + */ + width: PropTypes.string, + /** + * Additional className to add to the root svg + */ + className: PropTypes.string, +}; + +export default LogoTransak; diff --git a/ui/components/ui/logo/logo-wyre.js b/ui/components/ui/logo/logo-wyre.js new file mode 100644 index 000000000..07c8eafe0 --- /dev/null +++ b/ui/components/ui/logo/logo-wyre.js @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const LogoWyre = ({ + width = '100%', + color = 'var(--color-text-default)', + className, +}) => { + return ( + + + + + + + + + + ); +}; + +LogoWyre.propTypes = { + /** + * The width of the logo. Defaults to 100% + */ + width: PropTypes.string, + /** + * The color of the logo defaults to var(--color-text-default) + */ + color: PropTypes.string, + /** + * Additional className to add to the root svg + */ + className: PropTypes.string, +}; + +export default LogoWyre; diff --git a/ui/components/ui/logo/logo.stories.js b/ui/components/ui/logo/logo.stories.js new file mode 100644 index 000000000..583262e14 --- /dev/null +++ b/ui/components/ui/logo/logo.stories.js @@ -0,0 +1,70 @@ +import PropTypes from 'prop-types'; +import React from 'react'; + +import { COLORS } from '../../../helpers/constants/design-system'; + +import Card from '../card'; +import Box from '../box'; + +import LogoMoonPay from './logo-moonpay'; +import LogoWyre from './logo-wyre'; +import LogoTransak from './logo-transak'; +import LogoDepositEth from './logo-deposit-eth'; + +import README from './README.mdx'; + +export default { + title: 'Components/UI/Logo', + id: __filename, + parameters: { + docs: { + page: README, + }, + }, + argTypes: { + color: { + control: 'text', + }, + size: { + control: 'text', + }, + className: { + control: 'text', + }, + }, +}; + +const LogoItem = ({ Component }) => { + return ( + + {Component} + {`${Component.type.__docgenInfo.displayName}`} + + ); +}; + +LogoItem.propTypes = { + Component: PropTypes.node, +}; + +export const DefaultStory = (args) => ( +
+ } /> + } /> + } /> + } /> +
+); + +DefaultStory.args = {};