Add css to resize and alighn input for editable lable

3 files changed, 12 insertions, 3 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index d4ed88013..7a0d5b23b 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -99,7 +99,7 @@ AccountDetailScreen.prototype.render = function() {
             },
           }, [
 
-            // What is shown when not editing:
+            // 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)
           ]),
diff --git a/ui/app/components/editable-label.js b/ui/app/components/editable-label.js
index 20e24a9c7..c35f3261c 100644
--- a/ui/app/components/editable-label.js
+++ b/ui/app/components/editable-label.js
@@ -18,13 +18,13 @@ EditableLabel.prototype.render = function() {
   if (state && state.isEditingLabel) {
 
     return h('div.editable-label', [
-      h('input', {
+      h('input.editable-input', {
         defaultValue: props.textValue,
         onKeyPress:(event) => {
           this.saveIfEnter(event)
         },
       }),
-      h('button', {
+      h('button.editable-button', {
         onClick:() => this.saveText(),
       }, 'Save')
     ])
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 3d22a1c33..fb2a1f552 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -219,6 +219,15 @@ app sections
   padding: 8px;*/
 }
 
+.editable-input{
+  font-size: 1em;
+  height: 31px;
+}
+
+.editable-button{
+  position: relative;
+  bottom: 2px;
+}
 /* Webkit */
 .unlock-screen input::-webkit-input-placeholder {
   text-align: center;