fix(onboarding): improve custom connection help

Don't use placeholder for form field help text as this is only visible
when the form field is empty. Instead, add help text below the fields
so that it is always visible to the user in order to help them ensure
they are entering the correct values.

app/components/Onboarding/ConnectionDetails.js

@@ -19,12 +19,14 @@ const ConnectionDetails = ({
       <input
         type="text"
         id="connectionHost"
-        placeholder="Hostname / Port of the Lnd gRPC interface"
         className={`${styles.host} ${startLndHostError && styles.error}`}
         ref={input => input}
         value={connectionHost}
         onChange={event => setConnectionHost(event.target.value)}
       />
+      <p className={styles.description}>
+        Hostname and port of the Lnd gRPC interface. Example: localhost:10009
+      </p>
       <p className={`${startLndHostError && styles.visible} ${styles.errorMessage}`}>
         {startLndHostError}
       </p>
@@ -34,12 +36,12 @@ const ConnectionDetails = ({
       <input
         type="text"
         id="connectionCert"
-        placeholder="Path to the lnd tls cert"
         className={`${styles.cert} ${startLndCertError && styles.error}`}
         ref={input => input}
         value={connectionCert}
         onChange={event => setConnectionCert(event.target.value)}
       />
+      <p className={styles.description}>Path to the lnd tls cert. Example: /path/to/tls.cert</p>
       <p className={`${startLndCertError && styles.visible} ${styles.errorMessage}`}>
         {startLndCertError}
       </p>
@@ -49,12 +51,14 @@ const ConnectionDetails = ({
       <input
         type="text"
         id="connectionMacaroon"
-        placeholder="Path to the lnd macaroon file"
         className={`${styles.macaroon} ${startLndMacaroonError && styles.error}`}
         ref={input => input}
         value={connectionMacaroon}
         onChange={event => setConnectionMacaroon(event.target.value)}
       />
+      <p className={styles.description}>
+        Path to the lnd macaroon file. Example: /path/to/admin.macaroon
+      </p>
       <p className={`${startLndMacaroonError && styles.visible} ${styles.errorMessage}`}>
         {startLndMacaroonError}
       </p>

app/components/Onboarding/ConnectionDetails.scss

@@ -4,15 +4,14 @@
   color: $white;
 
   .input {
-    margin-bottom: 15px;
+    margin-bottom: 10px;
   }
 
   label {
     display: block;
-    font-size: 12px;
+    font-size: 14px;
-    line-height: 14px;
+    line-height: 18px;
-    padding-bottom: 5px;
+    margin-bottom: 5px;
-    min-height: 14px;
   }
 
   input {
@@ -20,13 +19,14 @@
     outline: none;
     border: 1px solid #404040;
     border-radius: 4px;
-    padding: 10px;
+    padding: 8px;
     color: $gold;
     -webkit-text-fill-color: $white;
     font-size: 18px;
     font-weight: 400;
     width: 600px;
     transition: all 0.25s;
+    margin-bottom: 5px;
 
     &.error {
       border: 1px solid $red;
@@ -38,15 +38,20 @@
     -webkit-text-fill-color: initial;
   }
 
+  .description {
+    font-size: 12px;
+    line-height: 18px;
+    opacity: 0.5;
+  }
+
   .errorMessage {
-    margin-top: 10px;
+    font-size: 12px;
+    line-height: 18px;
     color: $red;
-    height: 10px;
+    display: none;
-    visibility: hidden;
-    font-size: 10px;
 
     &.visible {
-      visibility: visible;
+      display: block;
     }
   }
 }