Connection dialog timestamp info (#5554)

* Timetsamp adjustment note

* Type & unneeded values

js/src/views/Connection/connection.css

@@ -49,7 +49,7 @@
 }
 
 .info {
-  margin-top: 2em;
+  margin-top: 1em;
   line-height: 1.618em
 }
 
@@ -59,6 +59,13 @@
   text-align: left;
 }
 
+.timestamp {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  margin: 0.75em 0;
+  padding: 1em;
+}
+
 .btnrow {
   text-align: right;
   padding: 0 4em;

js/src/views/Connection/connection.js

@@ -94,8 +94,15 @@ class Connection extends Component {
               } }
             />
           </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
+              autoFocus
               disabled={ loading }
               error={
                 validToken || (!token || !token.length)