updated account list based on new designs

MetaMask · Jul 17, 2018 · cb97517 · cb97517
1 parent e89350b
commit cb97517
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 25 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
@@ -877,6 +877,12 @@
   "selectAnAddress": {
     "message": "Select an Address"
   },
+  "selectAnAccount": {
+    "message": "Select an Account"
+  },
+  "selectAnAccountHelp": {
+    "message": "These are the accounts available in your hardware wallet. Select the one you’d like to use in MetaMask."
+  },
   "sendTokensAnywhere": {
     "message": "Send Tokens to anyone with an Ethereum account"
   },

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
@@ -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,19 +77,26 @@ 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),
         },
         [this.context.t('cancel')]
       ),
 
       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
@@ -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
@@ -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
@@ -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';
-  }
 }