Merge pull request #743 from mrfelton/feat/connection-type-descriptions

feat(onboarding): add connection type descriptions

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>
 )

app/components/Onboarding/ConnectionType.scss

@@ -5,19 +5,31 @@
 
   section {
     margin: 0;
+    display: flex;
+    align-items: center;
+    font-weight: 200;
+    line-height: 20px;
+
+    .description {
+      width: 80%;
+      opacity: 0.25;
+      transition: all 0.25s;
+    }
+
+    &:hover .description {
+      opacity: 0.5;
+    }
 
-    &.option {
     .button {
-        width: 150px;
+      width: 20%;
       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;
+      margin: 15px 20px 10px 0;
     }
 
     &.active {
@@ -25,6 +37,11 @@
         color: $gold;
         border-color: $gold;
       }
+
+      .description {
+        opacity: 0.8;
+        color: $gold;
+      }
     }
 
     .button:hover {
@@ -35,6 +52,10 @@
     .label {
       margin-left: 15px;
     }
+
+    .superscript {
+      vertical-align: super;
+      font-size: 10px;
     }
   }
 }