Improve sign and verify message output styling

[karmacoma]

Actual appearance

Sign message

Verify message

Desired appearance

In order to better clarify input versus output to the user. I propose something like the following which gives a terminal feel to them.

textarea {
  color: white;
  background-color: black;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  margin-top: 10px;
  font-family: monospace;
}

Note: Currently these text areas are editable. We should set them to readonly. Alternatively, we can contain them within a <pre> element instead.

Sign message

Verify message

Steps to reproduce

Sign or verify a message using lisk-nano.

[karmacoma]

I have opened a corresponding issue on lisk-js which might help make the actual structure of the returned output clearer: LiskArchive/lisk-elements#112

[maxkordek]

I re-open this issue as it's something which stood out during the testing. The version Oliver provided looks much, much better. Right now it's a mess. With the CANCEL button it will look very good.