From 746038cc030ba69cf6a4546af7364bb68e3e7a5f Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Wed, 5 Sep 2018 15:05:43 +0200
Subject: [PATCH] feat(onboarding): add connection type descriptions

Add descriptions to each connection type to help users understand what
each of the different options do.

Fix #676
---
 app/components/Onboarding/ConnectionType.js   | 16 ++++-
 app/components/Onboarding/ConnectionType.scss | 65 ++++++++++++-------
 2 files changed, 58 insertions(+), 23 deletions(-)

diff --git a/app/components/Onboarding/ConnectionType.js b/app/components/Onboarding/ConnectionType.js
index 3b43c9ce..3354a878 100644
--- a/app/components/Onboarding/ConnectionType.js
+++ b/app/components/Onboarding/ConnectionType.js
@@ -11,7 +11,14 @@ const ConnectionType = ({ connectionType, setConnectionType }) => (
     >
       <div className={`${styles.button}`} onClick={() => setConnectionType('local')}>
         {connectionType === 'local' ? <FaCircle /> : <FaCircleThin />}
-        <span className={styles.label}>Default</span>
+        <span className={styles.label}>
+          Default <span className={styles.superscript}>testnet</span>
+        </span>
+      </div>
+      <div className={`${styles.description}`}>
+        By selecting the defualt mode we will do everything for you. Just click and go!
+        <br />
+        (testnet only)
       </div>
     </section>
     <section
@@ -21,12 +28,19 @@ const ConnectionType = ({ connectionType, setConnectionType }) => (
         {connectionType === 'custom' ? <FaCircle /> : <FaCircleThin />}
         <span className={styles.label}>Custom</span>
       </div>
+      <div className={`${styles.description}`}>
+        Connect to your own node. You will need to provide your own connection settings so this is
+        for advanced users only.
+      </div>
     </section>
     <section className={`${styles.option} ${connectionType === 'btcpayserver' && styles.active}`}>
       <div className={`${styles.button}`} onClick={() => setConnectionType('btcpayserver')}>
         {connectionType === 'btcpayserver' ? <FaCircle /> : <FaCircleThin />}
         <span className={styles.label}>BTCPay Server</span>
       </div>
+      <div className={`${styles.description}`}>
+        Connect to your own BTCPay Server instance to access your BTCPay Server wallet.
+      </div>
     </section>
   </div>
 )
diff --git a/app/components/Onboarding/ConnectionType.scss b/app/components/Onboarding/ConnectionType.scss
index e94d994d..69d95a2e 100644
--- a/app/components/Onboarding/ConnectionType.scss
+++ b/app/components/Onboarding/ConnectionType.scss
@@ -5,36 +5,57 @@
 
   section {
     margin: 0;
+    display: flex;
+    align-items: center;
+    font-weight: 200;
+    line-height: 20px;
 
-    &.option {
-      .button {
-        width: 150px;
-        text-align: center;
-        display: flex;
-        padding: 20px;
-        border: 1px solid $white;
-        border-radius: 5px;
-        font-weight: 200;
-        cursor: pointer;
-        transition: all 0.25s;
-        margin-bottom: 20px;
-      }
+    .description {
+      width: 80%;
+      opacity: 0.25;
+      transition: all 0.25s;
+    }
 
-      &.active {
-        .button {
-          color: $gold;
-          border-color: $gold;
-        }
-      }
+    &:hover .description {
+      opacity: 0.5;
+    }
+
+    .button {
+      width: 20%;
+      text-align: center;
+      display: flex;
+      padding: 20px;
+      border: 1px solid $white;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: all 0.25s;
+      margin: 15px 20px 10px 0;
+    }
 
-      .button:hover {
+    &.active {
+      .button {
         color: $gold;
         border-color: $gold;
       }
 
-      .label {
-        margin-left: 15px;
+      .description {
+        opacity: 0.8;
+        color: $gold;
       }
     }
+
+    .button:hover {
+      color: $gold;
+      border-color: $gold;
+    }
+
+    .label {
+      margin-left: 15px;
+    }
+
+    .superscript {
+      vertical-align: super;
+      font-size: 10px;
+    }
   }
 }