diff --git a/app/components/Onboarding/ConnectionDetails.js b/app/components/Onboarding/ConnectionDetails.js index cf6a9497..1234b8e0 100644 --- a/app/components/Onboarding/ConnectionDetails.js +++ b/app/components/Onboarding/ConnectionDetails.js @@ -19,12 +19,14 @@ const ConnectionDetails = ({ input} value={connectionHost} onChange={event => setConnectionHost(event.target.value)} /> +

+ Hostname and port of the Lnd gRPC interface. Example: localhost:10009 +

{startLndHostError}

@@ -34,12 +36,12 @@ const ConnectionDetails = ({ input} value={connectionCert} onChange={event => setConnectionCert(event.target.value)} /> +

Path to the lnd tls cert. Example: /path/to/tls.cert

{startLndCertError}

@@ -49,12 +51,14 @@ const ConnectionDetails = ({ input} value={connectionMacaroon} onChange={event => setConnectionMacaroon(event.target.value)} /> +

+ Path to the lnd macaroon file. Example: /path/to/admin.macaroon +

{startLndMacaroonError}

diff --git a/app/components/Onboarding/ConnectionDetails.scss b/app/components/Onboarding/ConnectionDetails.scss index 34fb036e..83423449 100644 --- a/app/components/Onboarding/ConnectionDetails.scss +++ b/app/components/Onboarding/ConnectionDetails.scss @@ -4,15 +4,14 @@ color: $white; .input { - margin-bottom: 15px; + margin-bottom: 10px; } label { display: block; - font-size: 12px; - line-height: 14px; - padding-bottom: 5px; - min-height: 14px; + font-size: 14px; + line-height: 18px; + margin-bottom: 5px; } input { @@ -20,13 +19,14 @@ outline: none; border: 1px solid #404040; border-radius: 4px; - padding: 10px; + padding: 8px; color: $gold; -webkit-text-fill-color: $white; font-size: 18px; font-weight: 400; width: 600px; transition: all 0.25s; + margin-bottom: 5px; &.error { border: 1px solid $red; @@ -38,15 +38,20 @@ -webkit-text-fill-color: initial; } + .description { + font-size: 12px; + line-height: 18px; + opacity: 0.5; + } + .errorMessage { - margin-top: 10px; + font-size: 12px; + line-height: 18px; color: $red; - height: 10px; - visibility: hidden; - font-size: 10px; + display: none; &.visible { - visibility: visible; + display: block; } } }