Improve sign/verify message ui - Closes #150

src/components/signVerify/signMessage.js

@@ -1,4 +1,5 @@
 import lisk from 'lisk-js';
+import './signVerifyMessage.less';
 
 /**
  * This component contains the form for signing a message

src/components/signVerify/signMessage.pug

@@ -18,11 +18,11 @@ div
       md-input-container.md-block
         label Message
         textarea.message(name='message', ng-model='$ctrl.message', ng-change='$ctrl.sign()', md-autofocus)
-      div(layout='row', layout-align='center center')
-        md-button(ng-click="$ctrl.$mdDialog.cancel()") Cancel
-        span(flex)
-        md-button.md-raised.md-primary.sign-button(ngclipboard, data-clipboard-text='{{$ctrl.result}}', ng-click='$ctrl.showResult()', ngclipboard-success="$ctrl.dialog.successToast('Result copied to clipboard')", ng-disabled='!$ctrl.result || $ctrl.resultIsShown') Sign and copy result to clipboard
-    div(ng-if='$ctrl.resultIsShown')
+    md-dialog-actions(layout='row', ng-if='!$ctrl.resultIsShown')
+      md-button(ng-click="$ctrl.$mdDialog.cancel()") Cancel
+      span(flex)
+      md-button.md-raised.md-primary.sign-button(ngclipboard, data-clipboard-text='{{$ctrl.result}}', ng-click='$ctrl.showResult()', ngclipboard-success="$ctrl.dialog.successToast('Result copied to clipboard')", ng-disabled='!$ctrl.result || $ctrl.resultIsShown') Sign and copy result to clipboard
+    div.result-wrapper(ng-if='$ctrl.resultIsShown')
       md-input-container.md-block
-        label Result
+        h4 Result
         textarea.result(name='result', ng-model='$ctrl.result', readonly)

src/components/signVerify/signVerifyMessage.less

@@ -0,0 +1,24 @@
+sign-message, verify-message {
+  md-input-container {
+    margin-bottom: 0;
+    textarea.result {
+      background: #333;
+      border-radius: 5px;
+      overflow: hidden;
+      color: #fff;
+      font-family: monospace;
+      padding: 12px 24px;
+    }
+
+    .md-errors-spacer:empty {
+      display: none;
+    }
+  }
+
+  div.result-wrapper {
+      padding-top: 24px;
+      md-input-container {
+          margin-top: 0;
+      }
+  }
+}

src/components/signVerify/verifyMessage.js

@@ -1,4 +1,5 @@
 import lisk from 'lisk-js';
+import './signVerifyMessage.less';
 
 /**
  * This component contains the form for verifying a signed message

src/components/signVerify/verifyMessage.pug

@@ -22,8 +22,8 @@ div
         textarea.signature(name='signature', ng-model='$ctrl.signature.value', ng-change='$ctrl.verify()')
         div(ng-messages='$ctrl.signature.error')
           div(ng-message='invalid') Invalid
-    div(ng-show='$ctrl.result')
+    div.result-wrapper(ng-show='$ctrl.result')
       md-input-container.md-block
-        label Original Message
+        h4 Original Message
         textarea.result(name='result', ng-model='$ctrl.result', readonly)