diff --git a/app/images/lattice-logo.png b/app/images/lattice-logo.png deleted file mode 100644 index 0100aba0f..000000000 Binary files a/app/images/lattice-logo.png and /dev/null differ diff --git a/app/images/ledger-logo.svg b/app/images/ledger-logo.svg deleted file mode 100644 index aa4118230..000000000 --- a/app/images/ledger-logo.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/app/images/qrcode-wallet-logo.svg b/app/images/qrcode-wallet-logo.svg deleted file mode 100644 index a88a7635e..000000000 --- a/app/images/qrcode-wallet-logo.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - qr-logo的副本2 - - - - - - - - \ No newline at end of file diff --git a/app/images/trezor-logo.svg b/app/images/trezor-logo.svg deleted file mode 100644 index 139ea7810..000000000 --- a/app/images/trezor-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/components/ui/logo/__snapshots__/logo-moonpay.test.js.snap b/ui/components/ui/logo/__snapshots__/logo-moonpay.test.js.snap index 4c8e21872..41518b5d6 100644 --- a/ui/components/ui/logo/__snapshots__/logo-moonpay.test.js.snap +++ b/ui/components/ui/logo/__snapshots__/logo-moonpay.test.js.snap @@ -3,7 +3,9 @@ exports[`LogoMoonPay renders the LogoMoonPay component 1`] = `
{ return ( @@ -43,6 +45,10 @@ LogoDepositEth.propTypes = { * Additional className to add to the root svg */ className: PropTypes.string, + /** + * Aria label to add to the logo component + */ + ariaLabel: PropTypes.string, }; export default LogoDepositEth; diff --git a/ui/components/ui/logo/logo-lattice.js b/ui/components/ui/logo/logo-lattice.js new file mode 100644 index 000000000..489ee8feb --- /dev/null +++ b/ui/components/ui/logo/logo-lattice.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const LogoLattice = ({ + width = '100%', + color = 'var(--color-text-default)', + className, + ariaLabel, +}) => { + return ( + + + + ); +}; + +LogoLattice.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, + /** + * Aria label to add to the logo component + */ + ariaLabel: PropTypes.string, +}; + +export default LogoLattice; diff --git a/ui/components/ui/logo/logo-ledger.js b/ui/components/ui/logo/logo-ledger.js new file mode 100644 index 000000000..57b00d1ce --- /dev/null +++ b/ui/components/ui/logo/logo-ledger.js @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const LogoLedger = ({ + width = '100%', + color = 'var(--color-text-default)', + className, + ariaLabel, +}) => { + return ( + + + + ); +}; + +LogoLedger.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, + /** + * Aria label to add to the logo component + */ + ariaLabel: PropTypes.string, +}; + +export default LogoLedger; diff --git a/ui/components/ui/logo/logo-moonpay.js b/ui/components/ui/logo/logo-moonpay.js index ea7b4ffc8..781b30255 100644 --- a/ui/components/ui/logo/logo-moonpay.js +++ b/ui/components/ui/logo/logo-moonpay.js @@ -4,14 +4,17 @@ import PropTypes from 'prop-types'; const COLOR_MOONPAY_CIRCLES = '#7D00FF'; const LogoMoonPay = ({ - className, - size, + width = '100%', color = 'var(--color-text-default)', + className, + ariaLabel, }) => { return ( @@ -29,17 +32,21 @@ const LogoMoonPay = ({ LogoMoonPay.propTypes = { /** - * Additional className to add to the root svg + * The width of the logo. Defaults to 100% */ - className: PropTypes.string.isRequired, + width: PropTypes.string, /** - * The color of the text of the logo accepts any valid css value + * The color of the logo defaults to var(--color-text-default) */ color: PropTypes.string, /** - * The width of the logo accepts any valid css value + * Additional className to add to the root svg + */ + className: PropTypes.string, + /** + * Aria label to add to the logo component */ - size: PropTypes.string, + ariaLabel: PropTypes.string, }; export default LogoMoonPay; diff --git a/ui/components/ui/logo/logo-qr-based.js b/ui/components/ui/logo/logo-qr-based.js new file mode 100644 index 000000000..9305ecd6c --- /dev/null +++ b/ui/components/ui/logo/logo-qr-based.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const LogoQRBased = ({ + width = '100%', + color = 'var(--color-text-default)', + className, + ariaLabel, +}) => { + return ( + + + + + ); +}; + +LogoQRBased.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, + /** + * Aria label to add to the logo component + */ + ariaLabel: PropTypes.string, +}; + +export default LogoQRBased; diff --git a/ui/components/ui/logo/logo-transak.js b/ui/components/ui/logo/logo-transak.js index 64233c16c..d0ea72dc6 100644 --- a/ui/components/ui/logo/logo-transak.js +++ b/ui/components/ui/logo/logo-transak.js @@ -1,13 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; -const LogoTransak = ({ width = '100%', className }) => { +const LogoTransak = ({ width = '100%', className, ariaLabel }) => { return ( { + return ( + + + + ); +}; + +LogoTrezor.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, + /** + * Aria label to add to the logo component + */ + ariaLabel: PropTypes.string, +}; + +export default LogoTrezor; diff --git a/ui/components/ui/logo/logo-wyre.js b/ui/components/ui/logo/logo-wyre.js index 07c8eafe0..fd8d22d65 100644 --- a/ui/components/ui/logo/logo-wyre.js +++ b/ui/components/ui/logo/logo-wyre.js @@ -5,12 +5,14 @@ const LogoWyre = ({ width = '100%', color = 'var(--color-text-default)', className, + ariaLabel, }) => { return ( @@ -38,6 +40,10 @@ LogoWyre.propTypes = { * Additional className to add to the root svg */ className: PropTypes.string, + /** + * Aria label to add to the logo component + */ + ariaLabel: PropTypes.string, }; export default LogoWyre; diff --git a/ui/components/ui/logo/logo.stories.js b/ui/components/ui/logo/logo.stories.js index 583262e14..a031e341e 100644 --- a/ui/components/ui/logo/logo.stories.js +++ b/ui/components/ui/logo/logo.stories.js @@ -5,11 +5,16 @@ import { COLORS } from '../../../helpers/constants/design-system'; import Card from '../card'; import Box from '../box'; +import Typography from '../typography'; import LogoMoonPay from './logo-moonpay'; import LogoWyre from './logo-wyre'; import LogoTransak from './logo-transak'; import LogoDepositEth from './logo-deposit-eth'; +import LogoLeger from './logo-ledger'; +import LogoQRBased from './logo-qr-based'; +import LogoTrezor from './logo-trezor'; +import LogoLattice from './logo-lattice'; import README from './README.mdx'; @@ -31,6 +36,9 @@ export default { className: { control: 'text', }, + ariaLabel: { + control: 'text', + }, }, }; @@ -43,7 +51,7 @@ const LogoItem = ({ Component }) => { backgroundColor={COLORS.BACKGROUND_DEFAULT} > {Component} - {`${Component.type.__docgenInfo.displayName}`} + {`${Component.type.__docgenInfo.displayName}`} ); }; @@ -64,6 +72,10 @@ export const DefaultStory = (args) => ( } /> } /> } /> + } /> + } /> + } /> + } />
); diff --git a/ui/pages/create-account/connect-hardware/index.scss b/ui/pages/create-account/connect-hardware/index.scss index c239eb17c..cb296bc41 100644 --- a/ui/pages/create-account/connect-hardware/index.scss +++ b/ui/pages/create-account/connect-hardware/index.scss @@ -42,8 +42,8 @@ } &__btn { - background: #fbfbfb; - border: 1px solid #e5e5e5; + background: var(--color-background-alternative); + border: 1px solid var(--color-border-muted); height: 100px; width: 150px; flex: 1; diff --git a/ui/pages/create-account/connect-hardware/select-hardware.js b/ui/pages/create-account/connect-hardware/select-hardware.js index be4d1326b..fc058ae45 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.js +++ b/ui/pages/create-account/connect-hardware/select-hardware.js @@ -2,6 +2,11 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import Button from '../../../components/ui/button'; +import LogoLedger from '../../../components/ui/logo/logo-ledger'; +import LogoQRBased from '../../../components/ui/logo/logo-qr-based'; +import LogoTrezor from '../../../components/ui/logo/logo-trezor'; +import LogoLattice from '../../../components/ui/logo/logo-lattice'; + import { DEVICE_NAMES, LEDGER_TRANSPORT_TYPES, @@ -37,11 +42,7 @@ export default class SelectHardware extends Component { })} onClick={(_) => this.setState({ selectedDevice: DEVICE_NAMES.TREZOR })} > - Trezor + ); } @@ -54,11 +55,7 @@ export default class SelectHardware extends Component { })} onClick={(_) => this.setState({ selectedDevice: DEVICE_NAMES.LATTICE })} > - + ); } @@ -71,11 +68,7 @@ export default class SelectHardware extends Component { })} onClick={(_) => this.setState({ selectedDevice: DEVICE_NAMES.LEDGER })} > - Ledger + ); } @@ -88,11 +81,7 @@ export default class SelectHardware extends Component { })} onClick={(_) => this.setState({ selectedDevice: DEVICE_NAMES.QR })} > - QRCode + ); }