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 }) => (
>
setConnectionType('local')}>
{connectionType === 'local' ? : }
- Default
+
+ Default testnet
+
+
+
+ By selecting the defualt mode we will do everything for you. Just click and go!
+
+ (testnet only)
(
{connectionType === 'custom' ? : }
Custom
+
+ Connect to your own node. You will need to provide your own connection settings so this is
+ for advanced users only.
+
setConnectionType('btcpayserver')}>
{connectionType === 'btcpayserver' ? : }
BTCPay Server
+
+ Connect to your own BTCPay Server instance to access your BTCPay Server wallet.
+
)
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;
+ }
}
}