Merge pull request #259 from MetaMask/uiFixes

Do a little UI house cleaning

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Current Master
 
+- Clean up UI
+- Remove nonfunctional QR code button
+
 ## 2.3.1 2016-06-09
 
 - Style up the info page

ui/app/account-detail.js

@@ -101,7 +101,7 @@ AccountDetailScreen.prototype.render = function() {
 
             // What is shown when not editing + edit text:
             h('label.editing-label',[h('.edit-text','edit')]),
-            h('h2.font-medium.color-forest', {title: 'edit'}, identity && identity.name)
+            h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
           ]),
         ]),
 
@@ -118,16 +118,19 @@ AccountDetailScreen.prototype.render = function() {
             },
           }, addressSummary(selected)),
 
-          h('i.fa.fa-download.fa-md.cursor-pointer.color-orange', {
-            onClick: () => this.requestAccountExport(selected),
-          }),
-
-          h('i.fa.fa-qrcode.fa-md.cursor-disabled.color-orange', {
-            onClick: () => console.warn('QRCode not implented...'),
+           h('i.fa.fa-clipboard.fa-md.cursor-pointer.color-orange', {
+            onClick: () => copyToClipboard(ethUtil.toChecksumAddress(selected)),
+            style:{
+              marginLeft: '64px',
+            },
           }),
 
-          h('i.fa.fa-clipboard.fa-md.cursor-pointer.color-orange', {
-            onClick: () => copyToClipboard(ethUtil.toChecksumAddress(selected)),
+          h('i.fa.fa-download.fa-md.cursor-pointer.color-orange', {
+            onClick: () => this.requestAccountExport(selected),
+            style:{
+              position: 'relative',
+              right: '32px',
+            },
           }),
 
         ]),

ui/app/components/account-export.js

@@ -42,8 +42,12 @@ ExportAccountView.prototype.render = function() {
       }, [
         h('p.error', warning),
         h('p', confirmation),
-        h('input#exportAccount', {
+        h('input#exportAccount.sizing-input', {
           onKeyPress: this.onExportKeyPress.bind(this),
+          style: {
+            position: 'relative',
+            top: '1.5px',
+          }
         }),
         h('button', {
           onClick: () => this.onExportKeyPress({ key: 'Enter', preventDefault: () => {} }),

ui/app/components/editable-label.js

@@ -18,7 +18,7 @@ EditableLabel.prototype.render = function() {
   if (state && state.isEditingLabel) {
 
     return h('div.editable-label', [
-      h('input.editable-input', {
+      h('input.sizing-input', {
         defaultValue: props.textValue,
         onKeyPress:(event) => {
           this.saveIfEnter(event)
@@ -30,7 +30,7 @@ EditableLabel.prototype.render = function() {
     ])
 
   } else {
-    return h('div', {
+    return h('div.name-label', {
       onClick:(event) => {
         this.setState({ isEditingLabel: true })
       },

ui/app/css/index.css

@@ -223,7 +223,7 @@ app sections
   padding: 8px;*/
 }
 
-.editable-input{
+.sizing-input{
   font-size: 1em;
   height: 31px;
 }
@@ -365,22 +365,23 @@ input.large-input {
 .account-detail-section {
 
 }
-
+.name-label{
+  margin-bottom: 14px;
+}
 .edit-text {
-  height: 15px;
+  height: 100%;
   visibility: hidden;
 }
 .editing-label {
   cursor: text;
-  width: 60px;
-  height: 20px;
-  position: absolute;
+  width: 100%;
+  position: relative;
+  top: 7px;
   text-align: right;
   font-size: small;
-  padding-top: 15px;
   color: #F7861C;
 }
-.editing-label:hover div{
+.name-label:hover .edit-text {
   visibility: visible;
 }
 /* tx confirm */