aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
authorbrunobar79 <brunobar79@gmail.com>2018-07-18 06:53:37 +0800
committerbrunobar79 <brunobar79@gmail.com>2018-07-18 06:53:37 +0800
commitcb97517b26a7732cbb7c4a9f30f85b5fa596e608 (patch)
tree8ee678caf3d09296f9132d057089d479e12e9a6f /ui/app
parente89350b19fdac56968303e5c48806a4605fb4b22 (diff)
downloadtangerine-wallet-browser-cb97517b26a7732cbb7c4a9f30f85b5fa596e608.tar
tangerine-wallet-browser-cb97517b26a7732cbb7c4a9f30f85b5fa596e608.tar.gz
tangerine-wallet-browser-cb97517b26a7732cbb7c4a9f30f85b5fa596e608.tar.bz2
tangerine-wallet-browser-cb97517b26a7732cbb7c4a9f30f85b5fa596e608.tar.lz
tangerine-wallet-browser-cb97517b26a7732cbb7c4a9f30f85b5fa596e608.tar.xz
tangerine-wallet-browser-cb97517b26a7732cbb7c4a9f30f85b5fa596e608.tar.zst
tangerine-wallet-browser-cb97517b26a7732cbb7c4a9f30f85b5fa596e608.zip
updated account list based on new designs
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/pages/create-account/connect-hardware/account-list.js38
-rw-r--r--ui/app/components/pages/create-account/connect-hardware/connect-screen.js2
-rw-r--r--ui/app/components/pages/create-account/connect-hardware/index.js2
-rw-r--r--ui/app/css/itcss/components/new-account.scss68
4 files changed, 85 insertions, 25 deletions
diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js
index 3bd6a00a7..06102e16f 100644
--- a/ui/app/components/pages/create-account/connect-hardware/account-list.js
+++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js
@@ -8,16 +8,20 @@ class AccountList extends Component {
super(props)
}
+ renderHeader () {
+ return (
+ h('div.hw-connect', [
+ h('h3.hw-connect__title', {}, this.context.t('selectAnAccount')),
+ h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')),
+ ])
+ )
+ }
+
renderAccounts () {
return h('div.hw-account-list', [
- h('div.hw-account-list__title_wrapper', [
- h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]),
- h('div.hw-account-list__device', {}, ['Trezor - ETH']),
- ]),
this.props.accounts.map((a, i) => {
return h('div.hw-account-list__item', { key: a.address }, [
- h('span.hw-account-list__item__index', a.index + 1),
h('div.hw-account-list__item__radio', [
h('input', {
type: 'radio',
@@ -32,10 +36,12 @@ class AccountList extends Component {
{
htmlFor: `address-${i}`,
},
- `${a.address.slice(0, 4)}...${a.address.slice(-4)}`
- ),
+ [
+ h('span.hw-account-list__item__index', a.index + 1),
+ `${a.address.slice(0, 4)}...${a.address.slice(-4)}`,
+ h('span.hw-account-list__item__balance', `${a.balance}`),
+ ]),
]),
- h('span.hw-account-list__item__balance', `${a.balance}`),
h(
'a.hw-account-list__item__link',
{
@@ -71,9 +77,15 @@ class AccountList extends Component {
}
renderButtons () {
- return h('div.new-account-create-form__buttons', {}, [
+ const disabled = this.props.selectedAccount === null
+ const buttonProps = {}
+ if (disabled) {
+ buttonProps.disabled = true
+ }
+
+ return h('div.new-account-connect-form__buttons', {}, [
h(
- 'button.btn-default.btn--large.new-account-create-form__button',
+ 'button.btn-default.btn--large.new-account-connect-form__button',
{
onClick: this.props.onCancel.bind(this),
},
@@ -81,9 +93,10 @@ class AccountList extends Component {
),
h(
- `button.btn-primary.btn--large.new-account-create-form__button ${this.props.selectedAccount === null ? '.btn-primary--disabled' : ''}`,
+ `button.btn-primary.btn--large.new-account-connect-form__button ${disabled ? '.btn-primary--disabled' : ''}`,
{
onClick: this.props.onUnlockAccount.bind(this),
+ ...buttonProps,
},
[this.context.t('unlock')]
),
@@ -99,7 +112,8 @@ class AccountList extends Component {
}
render () {
- return h('div', {}, [
+ return h('div.new-account-connect-form', {}, [
+ this.renderHeader(),
this.renderAccounts(),
this.renderPagination(),
this.renderButtons(),
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 8d9980b10..7fb36b511 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
@@ -29,7 +29,7 @@ class ConnectScreen extends Component {
renderConnectScreen () {
return (
- h('div', {}, [
+ 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')),
diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index dc9907f31..da42ddead 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -150,7 +150,7 @@ class ConnectHardwareForm extends Component {
}
render () {
- return h('div.new-account-create-form', [
+ return h('div', [
this.renderError(),
this.renderContent(),
])
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index a44fab3be..0eacf4615 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -157,13 +157,14 @@
&__title {
padding-top: 10px;
font-weight: 500;
+ font-size: 18px;
}
&__msg {
font-size: 14px;
color: #9b9b9b;
- margin-top: 15px;
- margin-bottom: 15px;
+ margin-top: 10px;
+ margin-bottom: 20px;
}
&__link {
@@ -242,12 +243,16 @@
&__item__index {
display: flex;
- width: 28px;
+ width: 24px;
}
&__item__radio {
display: flex;
flex: 1;
+
+ input {
+ margin-right: 9px;
+ }
}
&__item__label {
@@ -264,6 +269,7 @@
&__item__link {
display: flex;
+ margin-top: 3px;
}
&__item__link img {
@@ -278,11 +284,55 @@
margin-top: 10px;
&__button {
- height: 25px;
- flex: initial;
- min-width: 90px;
- font-size: 12px;
+ height: 19px;
+ display: flex;
+ width: 47px;
+ color: #33a4e7;
+ font-size: 14px;
+ line-height: 19px;
+ border: none;
+ min-width: 46px;
+ margin-right: 0px;
+ margin-left: 16px;
+ padding: 0px;
+ }
+}
+
+.new-account-connect-form {
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ padding: 15px 30px 0;
+
+ &__buttons {
+ margin-top: 39px;
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ &__button {
+ width: 150px;
+ min-width: initial;
+ }
+
+ &__button.btn-primary {
+ background-color: #259DE5;
+ }
+
+ &__button.btn-primary {
+ background-color: #259DE5;
+ color: #FFFFFF;
}
+
+ &__button.btn-primary--disabled {
+ cursor: not-allowed;
+ opacity: .5;
+ }
+
+
+
+
}
.hw-forget-device-container {
@@ -337,8 +387,4 @@
width: 150px;
min-width: initial;
}
-
- &__button.btn-primary--disabled {
- cursor: 'not-allowed';
- }
}