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,36 +5,57 @@
 
   section {
     margin: 0;
+    display: flex;
+    align-items: center;
+    font-weight: 200;
+    line-height: 20px;
 
-    &.option {
+    .description {
-      .button {
+      width: 80%;
-        width: 150px;
+      opacity: 0.25;
-        text-align: center;
+      transition: all 0.25s;
-        display: flex;
+    }
-        padding: 20px;
-        border: 1px solid $white;
-        border-radius: 5px;
-        font-weight: 200;
-        cursor: pointer;
-        transition: all 0.25s;
-        margin-bottom: 20px;
-      }
 
-      &.active {
+    &:hover .description {
-        .button {
+      opacity: 0.5;
-          color: $gold;
+    }
-          border-color: $gold;
+
-        }
+    .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 {
+      .description {
-        margin-left: 15px;
+        opacity: 0.8;
+        color: $gold;
       }
     }
+
+    .button:hover {
+      color: $gold;
+      border-color: $gold;
+    }
+
+    .label {
+      margin-left: 15px;
+    }
+
+    .superscript {
+      vertical-align: super;
+      font-size: 10px;
+    }
   }
 }