From 49d1bdea8a47139cc814d3c49aa97bf2d542d3d5 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Wed, 18 Jul 2018 22:57:47 -0400 Subject: [PATCH] design done --- app/_locales/en/messages.json | 44 ++++++- app/images/hardware-wallet-step-1.svg | 44 +++++++ app/images/hardware-wallet-step-2.svg | 81 +++++++++++++ app/images/hardware-wallet-step-3.svg | 42 +++++++ ui/app/components/account-menu/index.js | 2 +- .../connect-hardware/connect-screen.js | 111 +++++++++++++---- ui/app/css/itcss/components/new-account.scss | 113 ++++++++++++++---- 7 files changed, 387 insertions(+), 50 deletions(-) create mode 100644 app/images/hardware-wallet-step-1.svg create mode 100644 app/images/hardware-wallet-step-2.svg create mode 100644 app/images/hardware-wallet-step-3.svg diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 069db400d..f9f01f040 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -134,7 +134,7 @@ "confirmTransaction": { "message": "Confirm Transaction" }, - "connectHardware": { + "connectHardwareWallet": { "message": "Connect Hardware Wallet" }, "connect": { @@ -286,6 +286,9 @@ "downloadStateLogs": { "message": "Download State Logs" }, + "dontHaveATrezorWallet": { + "message": "Don't have a TREZOR hardware wallet?" + }, "dropped": { "message": "Dropped" }, @@ -407,8 +410,8 @@ "message": "Get Ether from a faucet for the $1", "description": "Displays network name for Ether faucet" }, - "getYourTrezor": { - "message": "Don't have a TREZOR hardware wallet? Order yours now!" + "getHelp": { + "message": "Get Help." }, "greaterThanMin": { "message": "must be greater than or equal to $1.", @@ -417,6 +420,15 @@ "hardware": { "message": "hardware" }, + "hardwareSupport": { + "message": "Hardware Support" + }, + "hardwareSupportMsg": { + "message": "You can now view your Hardware accounts in MetaMask! Scroll down and read how it works." + }, + "havingTroubleConnecting": { + "message": "Having trouble connecting?" + }, "here": { "message": "here", "description": "as in -click here- for more information (goes with troubleTokenBalances)" @@ -515,7 +527,7 @@ "message": "Max" }, "learnMore": { - "message": "Learn more." + "message": "Learn more" }, "lessThanMax": { "message": "must be less than or equal to $1.", @@ -778,6 +790,9 @@ "removeAccountDescription": { "message": "This account will be removed from your wallet. Please make sure you have the original seed phrase or private key for this imported account before continuing. You can import or create accounts again from the account drop-down. " }, + "readyToConnect": { + "message": "Ready to Connect?" + }, "rinkeby": { "message": "Rinkeby Test Network" }, @@ -874,6 +889,9 @@ "message": "Only send $1 to an Ethereum account address.", "description": "displays token symbol" }, + "orderOneHere": { + "message": "Order one here." + }, "searchTokens": { "message": "Search Tokens" }, @@ -892,6 +910,24 @@ "settings": { "message": "Settings" }, + "step1HardwareWallet": { + "message": "1. Connect Hardware Wallet" + }, + "step1HardwareWalletMsg": { + "message": "Connect your hardware wallet directly to your computer." + }, + "step2HardwareWallet": { + "message": "2. Select an Account" + }, + "step2HardwareWalletMsg": { + "message": "Select the account you want to view. You can only choose one at a time." + }, + "step3HardwareWallet": { + "message": "3. Start using dApps and more!" + }, + "step3HardwareWalletMsg": { + "message": "Use your hardware account like you would with any Ethereum account. Log in to dApps, send Eth, buy and store ERC20 tokens and Non-Fungible tokens like CryptoKitties." + }, "info": { "message": "Info" }, diff --git a/app/images/hardware-wallet-step-1.svg b/app/images/hardware-wallet-step-1.svg new file mode 100644 index 000000000..2b6596a43 --- /dev/null +++ b/app/images/hardware-wallet-step-1.svg @@ -0,0 +1,44 @@ + + + + 2981A924-C7CB-4957-87AD-8C680802DAD7 + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/images/hardware-wallet-step-2.svg b/app/images/hardware-wallet-step-2.svg new file mode 100644 index 000000000..9fff05b7e --- /dev/null +++ b/app/images/hardware-wallet-step-2.svg @@ -0,0 +1,81 @@ + + + + 27B850D0-B3BA-4F98-8BB4-B542D8BFDE3B + Created with sketchtool. + + + + + + + + + + + + + + + + + + 3 + + + OXz3…T3A4 + + + 0.020000 ETH + + + + + + + 1 + + + OXa4…s0a2 + + + 0.01500 ETH + + + + + + + 4 + + + OXd2…D0V4 + + + 0.030000 ETH + + + + + + + + + + + 2 + + + OXe7…B0a1 + + + 0.041000 ETH + + + + + + + + + \ No newline at end of file diff --git a/app/images/hardware-wallet-step-3.svg b/app/images/hardware-wallet-step-3.svg new file mode 100644 index 000000000..4a7655b3b --- /dev/null +++ b/app/images/hardware-wallet-step-3.svg @@ -0,0 +1,42 @@ + + + + CEB55C41-7BCE-405E-83CD-834B388B495F + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + LOGIN WITH + METAMASK + + + + + + \ No newline at end of file diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index fc48b60f3..9c063d31e 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -125,7 +125,7 @@ AccountMenu.prototype.render = function () { } }, icon: h('img.account-menu__item-icon', { src: 'images/connect-icon.svg' }), - text: this.context.t('connectHardware'), + text: this.context.t('connectHardwareWallet'), }), h(Divider), h(Item, { diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js index d4c479a58..47288c73f 100644 --- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js +++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js @@ -27,34 +27,97 @@ class ConnectScreen extends Component { ) } - renderConnectScreen () { + renderHeader () { return ( - h('div.new-account-connect-form', {}, [ - h('div.hw-connect', [ - h('h3.hw-connect__title', {}, this.context.t('trezorHardwareWallet')), - h('p.hw-connect__msg', {}, this.context.t('connectToTrezorHelp')), - h('p.hw-connect__msg', {}, [ - this.context.t('connectToTrezorTrouble'), - h('a.hw-connect__link', { - href: 'https://support.metamask.io/', - target: '_blank', - }, ` ${this.context.t('learnMore')}`), - ]), - ]), - h( - 'button.btn-primary.btn--large', - { onClick: this.props.connectToTrezor.bind(this) }, - this.props.btnText - ), - h('div.hw-connect__get-trezor', {}, [ - h('a', { - href: 'https://shop.trezor.io/?a=metamask', - target: '_blank', - }, this.context.t('getYourTrezor')), + h('div.hw-connect__header', {}, [ + h('h3.hw-connect__header__title', {}, this.context.t(`hardwareSupport`)), + h('p.hw-connect__header__msg', {}, this.context.t(`hardwareSupportMsg`)), + ]) + ) + } + + renderTrezorAffiliateLink () { + return h('div.hw-connect__get-trezor', {}, [ + h('p.hw-connect__get-trezor__msg', {}, this.context.t(`dontHaveATrezorWallet`)), + h('a.hw-connect__get-trezor__link', { + href: 'https://shop.trezor.io/?a=metamask', + target: '_blank', + }, this.context.t('orderOneHere')), + ]) + } + + renderConnectToTrezorButton () { + return h( + 'button.btn-primary.btn--large', + { onClick: this.props.connectToTrezor.bind(this) }, + this.props.btnText + ) + } + + renderLearnMore () { + return ( + h('p.hw-connect__learn-more', {}, [ + this.context.t('learnMore'), + h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}), + ]) + ) + } + + renderTutorialSteps () { + const steps = [ + { + asset: 'hardware-wallet-step-1', + dimensions: {width: '225px', height: '75px'}, + }, + { + asset: 'hardware-wallet-step-2', + dimensions: {width: '300px', height: '100px'}, + }, + { + asset: 'hardware-wallet-step-3', + dimensions: {width: '120px', height: '90px'}, + }, + ] + + return h('.hw-tutorial', {}, + steps.map((step, i) => ( + h('div.hw-connect', [ + h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)), + h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)), + h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }), + ]) + )) + ) + } + + renderFooter () { + return ( + h('div.hw-connect__footer', {}, [ + h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)), + this.renderConnectToTrezorButton(), + h('p.hw-connect__footer__msg', {}, [ + this.context.t(`havingTroubleConnecting`), + h('a.hw-connect__footer__link', { + href: '#', + target: '_blank', + }, this.context.t('getHelp')), ]), ]) ) - } + } + + renderConnectScreen () { + return ( + h('div.new-account-connect-form', {}, [ + this.renderHeader(), + this.renderTrezorAffiliateLink(), + this.renderConnectToTrezorButton(), + this.renderLearnMore(), + this.renderTutorialSteps(), + this.renderFooter(), + ]) + ) + } render () { if (this.props.browserSupported) { diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 0eacf4615..5af743a2e 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -1,9 +1,8 @@ .new-account { - width: 376px; + width: 375px; background-color: #FFFFFF; box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); z-index: 25; - padding-bottom: 31px; &__header { display: flex; @@ -153,10 +152,51 @@ } } +.hw-tutorial { + width: 375px; + border-top: 1px solid #D2D8DD; + border-bottom: 1px solid #D2D8DD; + overflow: visible; + display: block; + padding: 15px 30px; +} + .hw-connect { + &__header { + &__title { + margin-top: 5px; + margin-bottom: 15px; + font-size: 22px; + text-align: center; + } + + &__msg { + font-size: 14px; + color: #9b9b9b; + margin-top: 10px; + margin-bottom: 0px; + } + } + + &__learn-more { + margin-top: 15px; + font-size: 14px; + color: #5B5D67; + line-height: 19px; + text-align: center; + + &__arrow { + transform: rotate(90deg); + display: block; + text-align: center; + height: 30px; + margin: 0px auto 10px; + } + } + &__title { padding-top: 10px; - font-weight: 500; + font-weight: 400; font-size: 18px; } @@ -164,27 +204,59 @@ font-size: 14px; color: #9b9b9b; margin-top: 10px; - margin-bottom: 20px; + margin-bottom: 15px; } &__link { color: #2f9ae0; } - &__get-trezor { - display: flex; - flex-flow: column; - align-items: center; - padding: 30px 30px 0; - width: 305px; + &__footer { + width: 100%; - a { + &__title { + padding-top: 15px; + padding-bottom: 12px; + font-weight: 400; + font-size: 18px; + text-align: center; + } + + &__msg { + font-size: 14px; + color: #9b9b9b; + margin-top: 12px; + margin-bottom: 27px; + } + + &__link { + color: #2f9ae0; + margin-left: 5px; + } + } + + &__get-trezor { + width: 100%; + padding-bottom: 20px; + padding-top: 20px; + + &__msg { + font-size: 14px; + color: #9b9b9b; + } + + &__link { font-size: 14px; text-align: center; color: #2f9ae0; cursor: pointer; } } + + &__step-asset { + margin: 0px auto 20px; + display: flex; + } } .hw-account-list { @@ -303,6 +375,8 @@ flex-flow: column; align-items: center; padding: 15px 30px 0; + height: 710px; + overflow: auto; &__buttons { margin-top: 39px; @@ -316,23 +390,20 @@ min-width: initial; } - &__button.btn-primary { - background-color: #259DE5; - } - - &__button.btn-primary { + .btn-primary { background-color: #259DE5; color: #FFFFFF; + border: none; + width: 100%; + min-height: 54px; + font-weight: 300; + font-size: 14px; } &__button.btn-primary--disabled { cursor: not-allowed; opacity: .5; } - - - - } .hw-forget-device-container { @@ -352,7 +423,7 @@ display: flex; flex-flow: column; align-items: center; - padding: 30px 30px 0; + padding: 30px; &__input-label { color: $scorpion;