usability improvements to security token Dialog #7112 (#7134)

js/src/Connection/connection.css

@@ -53,9 +53,9 @@
 }
 
 .form {
-  margin-top: 0.75em;
+  margin-top: 1em;
   padding: 0 4em;
-  text-align: left;
+  text-align: center;
 }
 
 .timestamp {
@@ -71,14 +71,15 @@
 }
 
 .icons {
-  padding-top: 1.5em;
+  margin-top: 2em;
+  margin-bottom: 0px;
 }
 
 .icon,
 .iconSmall {
   display: inline-block;
-  padding: 1em;
-  padding-bottom: 1em;
+  margin-top: 2em;
+  padding: 0 1.5em;
   vertical-align: middle;
 }
 
@@ -92,10 +93,13 @@
 }
 
 .console {
+  width: 80%;
   font-family: 'Roboto Mono', monospace;
-  background: rgba(0, 0, 0, 0.25);
+  background: rgba(0, 0, 0, 0.65);
   font-size: 16px;
-  padding: 0 0.25em;
+  padding: 0.5em 0.25em;
+  margin: 1em auto;
+  border-radius: 3px;
 }
 
 @keyframes pulse {
@@ -123,10 +127,11 @@
   color: rgb(208, 208, 208);
 }
 
-.formInput input {
+.formInput input[type=text] {
   background: rgba(0, 0, 0, 0.25) !important;
+  text-align: center;
 }
 
-.formInput input:focus {
+.formInput input[type=text]:focus {
   background: rgba(0, 0, 0, 0.25) !important;
 }

js/src/Connection/connection.js

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 
 import GradientBg from '@parity/ui/lib/GradientBg';
 import Input from '@parity/ui/lib/Form/Input';
-import { CompareIcon, ComputerIcon, DashboardIcon, VpnIcon } from '@parity/ui/lib/Icons';
+import { CompareIcon, ComputerIcon, DashboardIcon, VpnIcon, KeyIcon } from '@parity/ui/lib/Icons';
 
 import styles from './connection.css';
 
@@ -64,7 +64,7 @@ class Connection extends Component {
               <div className={ styles.icon }>
                 {
                   needsToken
-                    ? <VpnIcon className={ styles.svg } />
+                    ? <KeyIcon className={ styles.svg } />
                     : <DashboardIcon className={ styles.svg } />
                 }
               </div>
@@ -90,18 +90,12 @@ class Connection extends Component {
           <div>
             <FormattedMessage
               id='connection.noConnection'
-              defaultMessage='Unable to make a connection to the Parity Secure API. To update your secure token or to generate a new one, run: {newToken} and paste the generated token into the space below.'
+              defaultMessage='To proceed you need to generate a new security token by running the following command in your terminal {newToken} Then copy &amp; paste the newly generated token here'
               values={ {
-                newToken: <div className={ styles.console }>parity signer new-token</div>
+                newToken: <div className={ styles.console }>$ parity signer new-token</div>
               } }
             />
           </div>
-          <div className={ styles.timestamp }>
-            <FormattedMessage
-              id='connection.timestamp'
-              defaultMessage='Ensure that both the Parity node and this machine connecting have computer clocks in-sync with each other and with a timestamp server, ensuring both successful token validation and block operations.'
-            />
-          </div>
           <div className={ styles.form }>
             <Input
               className={ styles.formInput }
@@ -120,7 +114,7 @@ class Connection extends Component {
               hint={
                 <FormattedMessage
                   id='connection.token.hint'
-                  defaultMessage='Insert the generated token here'
+                  defaultMessage='xxXX-Xxxx-xXxx-XxXX'
                 />
               }
               onChange={ this.onChangeToken }