Merge pull request #583 from mrfelton/fix/custom-connection-help-text

fix(onboarding): improve custom connection form field help text

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;
     }
   }
 }