Fix signing tool (#1157)

* fix input

* remove logs

* with logs

* remove defaultValue

* unlock overlay warning

* address comments

* white space

packages/app-toolbox/src/Sign.tsx

@@ -2,20 +2,19 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps as Props } from '@polkadot/ui-app/types';
-import { KeyringPair } from '@polkadot/keyring/types';
-
-import React from 'react';
 import { Button , Input, InputAddress, Output, Static } from '@polkadot/ui-app';
+import { I18nProps as Props } from '@polkadot/ui-app/types';
 import keyring from '@polkadot/ui-keyring';
+import { KeyringPair } from '@polkadot/keyring/types';
 import { hexToU8a, isHex, stringToU8a, u8aToHex } from '@polkadot/util';
+import React from 'react';
 
-import Unlock from './Unlock';
+import styled from 'styled-components';
 import translate from './translate';
+import Unlock from './Unlock';
 
 type State = {
   currentPair: KeyringPair | null,
-  defaultValue?: string,
   data: string,
   isHexData: boolean,
   isLocked: boolean,
@@ -23,6 +22,37 @@ type State = {
   signature: string
 };
 
+const Wrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .unlock-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top:0;
+    left:0;
+    background-color: #0f0e0e7a;
+  }
+
+ .unlock-overlay-warning {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height:100%;
+  }
+
+  .unlock-overlay-content {
+    color:#fff;
+    text-align:center;
+
+    .ui--Button-Group {
+      text-align: center;
+    }
+  }
+`;
+
 class Sign extends React.PureComponent<Props, State> {
   state: State;
 
@@ -34,9 +64,6 @@ class Sign extends React.PureComponent<Props, State> {
 
     this.state = {
       currentPair,
-      defaultValue: currentPair
-        ? currentPair.address()
-        : void 0,
       data: '',
       isHexData: false,
       isLocked: currentPair
@@ -48,28 +75,33 @@ class Sign extends React.PureComponent<Props, State> {
   }
 
   render () {
+    const { isLocked } = this.state;
+
     return (
       <div className='toolbox--Sign'>
         {this.renderAccount()}
-        {this.renderInput()}
-        {this.renderSignature()}
-        {this.renderUnlock()}
-        {this.renderButtons()}
+        <Wrapper>
+          {this.renderInput()}
+          {this.renderSignature()}
+          <div className='unlock-overlay' hidden={!isLocked}>
+            {this.renderUnlockWarning()}
+          </div>
+          {this.renderUnlock()}
+        </Wrapper>
       </div>
     );
   }
 
   renderAccount () {
     const { t } = this.props;
-    const { defaultValue } = this.state;
 
     return (
       <div className='ui--row'>
         <InputAddress
           className='full'
-          defaultValue={defaultValue}
+          help={t('select the account you wish to sign data with')}
           isInput={false}
-          label={t('using my account')}
+          label={t('account')}
           onChange={this.onChangeAccount}
           type='account'
         />
@@ -77,7 +109,7 @@ class Sign extends React.PureComponent<Props, State> {
     );
   }
 
-  renderButtons () {
+  renderUnlockWarning () {
     const { t } = this.props;
     const { isLocked } = this.state;
 
@@ -86,13 +118,18 @@ class Sign extends React.PureComponent<Props, State> {
     }
 
     return (
-      <Button.Group>
-        <Button
-          isPrimary
-          onClick={this.toggleUnlock}
-          label={t('Unlock account')}
-        />
-      </Button.Group>
+      <div className='unlock-overlay-warning'>
+        <div className='unlock-overlay-content'>
+          {t('You need to unlock this account to be able to sign data.')}<br/>
+          <Button.Group>
+            <Button
+              isPrimary
+              onClick={this.toggleUnlock}
+              label={t('Unlock account')}
+            />
+          </Button.Group>
+        </div>
+      </div>
     );
   }