From 6b13d9a445d8852fd141d12b636048ccdbbf88e6 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Sun, 22 Jul 2018 17:22:00 +0200
Subject: [PATCH] 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.
---
 .../Onboarding/ConnectionDetails.js           | 10 ++++---
 .../Onboarding/ConnectionDetails.scss         | 27 +++++++++++--------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/app/components/Onboarding/ConnectionDetails.js b/app/components/Onboarding/ConnectionDetails.js
index cf6a9497..1234b8e0 100644
--- a/app/components/Onboarding/ConnectionDetails.js
+++ b/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>
diff --git a/app/components/Onboarding/ConnectionDetails.scss b/app/components/Onboarding/ConnectionDetails.scss
index 34fb036e..83423449 100644
--- a/app/components/Onboarding/ConnectionDetails.scss
+++ b/app/components/Onboarding/ConnectionDetails.scss
@@ -4,15 +4,14 @@
   color: $white;
 
   .input {
-    margin-bottom: 15px;
+    margin-bottom: 10px;
   }
 
   label {
     display: block;
-    font-size: 12px;
-    line-height: 14px;
-    padding-bottom: 5px;
-    min-height: 14px;
+    font-size: 14px;
+    line-height: 18px;
+    margin-bottom: 5px;
   }
 
   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;
-    visibility: hidden;
-    font-size: 10px;
+    display: none;
 
     &.visible {
-      visibility: visible;
+      display: block;
     }
   }
 }