Browse Source

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
renovate/lint-staged-8.x
Tom Kirkpatrick 7 years ago
parent
commit
746038cc03
No known key found for this signature in database GPG Key ID: 72203A8EC5967EA8
  1. 16
      app/components/Onboarding/ConnectionType.js
  2. 29
      app/components/Onboarding/ConnectionType.scss

16
app/components/Onboarding/ConnectionType.js

@ -11,7 +11,14 @@ const ConnectionType = ({ connectionType, setConnectionType }) => (
> >
<div className={`${styles.button}`} onClick={() => setConnectionType('local')}> <div className={`${styles.button}`} onClick={() => setConnectionType('local')}>
{connectionType === 'local' ? <FaCircle /> : <FaCircleThin />} {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> </div>
</section> </section>
<section <section
@ -21,12 +28,19 @@ const ConnectionType = ({ connectionType, setConnectionType }) => (
{connectionType === 'custom' ? <FaCircle /> : <FaCircleThin />} {connectionType === 'custom' ? <FaCircle /> : <FaCircleThin />}
<span className={styles.label}>Custom</span> <span className={styles.label}>Custom</span>
</div> </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>
<section className={`${styles.option} ${connectionType === 'btcpayserver' && styles.active}`}> <section className={`${styles.option} ${connectionType === 'btcpayserver' && styles.active}`}>
<div className={`${styles.button}`} onClick={() => setConnectionType('btcpayserver')}> <div className={`${styles.button}`} onClick={() => setConnectionType('btcpayserver')}>
{connectionType === 'btcpayserver' ? <FaCircle /> : <FaCircleThin />} {connectionType === 'btcpayserver' ? <FaCircle /> : <FaCircleThin />}
<span className={styles.label}>BTCPay Server</span> <span className={styles.label}>BTCPay Server</span>
</div> </div>
<div className={`${styles.description}`}>
Connect to your own BTCPay Server instance to access your BTCPay Server wallet.
</div>
</section> </section>
</div> </div>
) )

29
app/components/Onboarding/ConnectionType.scss

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

Loading…
Cancel
Save