From f7964c8686d1a1fb83b9e5c4903f22d5acf8c27b Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Tue, 18 Sep 2018 09:47:32 -0500 Subject: [PATCH] fix(theme): make compatible with multi-language --- app/components/Activity/Activity.js | 6 ++- app/components/Activity/Activity.scss | 42 +++++++-------- .../Activity/ActivityModal/ActivityModal.scss | 2 +- .../Activity/InvoiceModal/InvoiceModal.scss | 19 +++---- .../Activity/PaymentModal/PaymentModal.scss | 16 +++--- .../TransactionModal/TransactionModal.js | 26 ++++----- .../TransactionModal/TransactionModal.scss | 19 ++++--- app/components/App/App.js | 6 ++- app/components/App/App.scss | 4 +- .../Contacts/AddChannel/AddChannel.js | 52 +++++++++--------- .../Contacts/AddChannel/AddChannel.scss | 21 ++++---- .../Contacts/ChannelForm/ChannelForm.scss | 4 +- .../ConnectManually/ConnectManually.scss | 31 ++++------- app/components/Contacts/Network/Network.scss | 39 +++++++------- .../SubmitChannelForm/SubmitChannelForm.scss | 23 ++++---- .../SuggestedNodes/SuggestedNodes.scss | 2 +- app/components/Form/Form.scss | 4 +- app/components/Form/Pay/Pay.scss | 34 ++++++------ app/components/Form/Request/Request.scss | 30 ++++++----- app/components/LoadingBolt/LoadingBolt.js | 13 +++-- app/components/LoadingBolt/LoadingBolt.scss | 54 +++++++++++++++++-- app/components/Onboarding/Alias/Alias.scss | 4 +- .../Onboarding/Autopilot/Autopilot.scss | 20 +++---- .../Onboarding/BtcPayServer/BtcPayServer.scss | 10 ++-- .../ConnectionConfirm/ConnectionConfirm.scss | 4 +- .../ConnectionDetails/ConnectionDetails.scss | 12 ++--- .../ConnectionType/ConnectionType.scss | 16 +++--- .../Onboarding/FormContainer/FormContainer.js | 10 ++-- .../FormContainer/FormContainer.scss | 20 +++---- app/components/Onboarding/Login/Login.scss | 12 ++--- .../NewWalletPassword/NewWalletPassword.scss | 14 ++--- .../NewWalletSeed/NewWalletSeed.scss | 21 +------- app/components/Onboarding/Onboarding.js | 21 ++++++-- .../Onboarding/ReEnterSeed/ReEnterSeed.scss | 10 ++-- .../Onboarding/RecoverForm/RecoverForm.scss | 10 ++-- app/components/Onboarding/Signup/Signup.scss | 20 +++---- app/components/Onboarding/Syncing/Syncing.js | 9 ++-- .../Onboarding/Syncing/Syncing.scss | 39 +++++++------- app/components/Settings/Fiat/Fiat.js | 2 +- app/components/Settings/Fiat/Fiat.scss | 14 +++-- app/components/Settings/Locale/Locale.scss | 18 ++++--- app/components/Settings/Menu/Menu.js | 6 +++ app/components/Settings/Menu/messages.js | 3 +- app/components/Settings/Settings.js | 8 ++- app/components/Settings/Settings.scss | 4 +- app/components/Settings/Theme/Theme.js | 43 +++++++++++++++ app/components/Settings/Theme/Theme.scss | 43 +++++++++++++++ app/components/Settings/Theme/index.js | 3 ++ app/components/Settings/Theme/messages.js | 8 +++ .../Wallet/ReceiveModal/ReceiveModal.scss | 19 ++++--- app/components/Wallet/Wallet.js | 8 +-- app/components/Wallet/Wallet.scss | 34 ++++++------ app/containers/Activity.js | 13 ++++- app/containers/App.js | 2 + app/containers/Root.js | 7 ++- app/icons/cloud_lightning.svg | 1 + app/icons/zap_logo_black.svg | 16 ++++++ app/reducers/settings.js | 23 +++++++- app/styles/variables.scss | 32 +++++++++++ .../__snapshots__/settings.spec.js.snap | 4 ++ 60 files changed, 639 insertions(+), 371 deletions(-) create mode 100644 app/components/Settings/Theme/Theme.js create mode 100644 app/components/Settings/Theme/Theme.scss create mode 100644 app/components/Settings/Theme/index.js create mode 100644 app/components/Settings/Theme/messages.js create mode 100644 app/icons/cloud_lightning.svg create mode 100644 app/icons/zap_logo_black.svg diff --git a/app/components/Activity/Activity.js b/app/components/Activity/Activity.js index d8b85852..fce2d2cb 100644 --- a/app/components/Activity/Activity.js +++ b/app/components/Activity/Activity.js @@ -92,11 +92,13 @@ class Activity extends Component { updateSearchActive, updateSearchText, walletProps, - intl + intl, + + settings } = this.props if (balance.channelBalance === null || balance.walletBalance === null) { - return + return } const refreshClicked = () => { diff --git a/app/components/Activity/Activity.scss b/app/components/Activity/Activity.scss index c8ab0b84..03fa499f 100644 --- a/app/components/Activity/Activity.scss +++ b/app/components/Activity/Activity.scss @@ -31,11 +31,11 @@ } .activities { - background: $white; + background: var(--darkestBackground); .header { - background: $spaceblue; - color: $white; + background: var(--darkestBackground); + color: var(--primaryText); margin: 0 auto; padding: 0 40px; border-bottom: 1px solid $spaceborder; @@ -47,7 +47,7 @@ transition: all 0.25s; &.search { - background: linear-gradient(270deg, #868b9f 0%, #333c5e 100%); + background: var(--gradient); section { &:nth-child(1) { @@ -62,13 +62,14 @@ font-size: 20px; line-height: 24px; letter-spacing: 1px; - color: $white; + color: var(--primaryColor); width: 100%; } .xIcon svg { width: 25px; height: 25px; + stroke: var(--white); } } @@ -96,13 +97,12 @@ display: block; position: relative; margin: 0 15px; - padding: 20px 0; } svg { width: 14px; height: 14px; - color: $white; + color: var(--primaryColor); opacity: 0.5; cursor: pointer; transition: all 0.25s; @@ -118,7 +118,7 @@ right: 15px; width: auto; height: 1px; - background: white; + background: var(--primaryText); position: absolute; bottom: -1px; } @@ -127,7 +127,7 @@ } .activityContainer { - background: $spaceblue; + background: var(--primaryBackground); transition: opacity 0.25s; height: calc(100vh - 304px); overflow-y: auto; @@ -142,20 +142,20 @@ .toggleExpired { margin: 0 auto; - font-size: 16px; + font-size: 14px; font-weight: bold; - color: $white; - background: #31343f; - padding: 10px; + color: var(--primaryText); + background: var(--lightBackground); + padding: 10px 7.5px; width: 200px; text-align: center; border-radius: 5px; cursor: pointer; - opacity: 0.5; + opacity: 1; transition: all 0.25s; &:hover { - opacity: 1; + opacity: 0.5; } } @@ -165,7 +165,7 @@ margin-bottom: 30px; h2 { - color: $white; + color: var(--primaryText); font-size: 10px; font-weight: bold; border-bottom: 0.2px solid #a0a0a0; @@ -207,7 +207,7 @@ font-size: 14px; transition: background-color 0.1s linear; transition-delay: 0.1s; - color: $white; + color: var(--primaryText); position: relative; &.unpaid { @@ -300,7 +300,7 @@ margin-right: 5px; svg { - color: $white; + color: var(--primaryText); font-size: 10px; vertical-align: middle; display: flex; @@ -330,7 +330,7 @@ flex-direction: column; text-align: right; font-size: 12px; - color: $white; + color: var(--primaryText); span { &:nth-child(1) { @@ -348,11 +348,11 @@ } .plus { - color: $green; + color: var(--superGreen); } .minus { - color: $red; + color: var(--superRed); } } } diff --git a/app/components/Activity/ActivityModal/ActivityModal.scss b/app/components/Activity/ActivityModal/ActivityModal.scss index 0e5d77a5..2b7dd213 100644 --- a/app/components/Activity/ActivityModal/ActivityModal.scss +++ b/app/components/Activity/ActivityModal/ActivityModal.scss @@ -3,7 +3,7 @@ .container { position: relative; height: 100vh; - background: $bluegrey; + background: var(--lightBackground); } .closeContainer { diff --git a/app/components/Activity/InvoiceModal/InvoiceModal.scss b/app/components/Activity/InvoiceModal/InvoiceModal.scss index b4c23eb1..49163b18 100644 --- a/app/components/Activity/InvoiceModal/InvoiceModal.scss +++ b/app/components/Activity/InvoiceModal/InvoiceModal.scss @@ -1,14 +1,14 @@ @import 'styles/variables.scss'; .container { - color: $white; + color: var(--primaryText); } .content { display: flex; flex-direction: row; align-items: center; - background: $spaceblue; + background: var(--darkestBackground); width: 85%; margin: 50px auto; padding: 30px 0; @@ -82,13 +82,13 @@ li { padding: 8px 15px; - background: #191919; + background: var(--lightBackground); cursor: pointer; transition: 0.25s hover; - border-bottom: 1px solid #0f0f0f; + border-bottom: 1px solid var(--lightestBackground); &:hover { - background: #0f0f0f; + background: var(--lightestBackground); } } } @@ -99,12 +99,12 @@ text-align: right; .notPaid { - color: $orange; + color: var(--lightningOrange); margin-top: 5px; } .paid { - color: $green; + color: var(--superGreen); margin-top: 5px; } } @@ -149,12 +149,13 @@ margin: 35px 10px; width: 235px; padding: 20px 10px; - background: #31343f; + background: var(--lightestBackground); cursor: pointer; transition: 0.25s all; + opacity: 0.75; &:hover { - background: darken(#31343f, 5%); + opacity: 1; } } } diff --git a/app/components/Activity/PaymentModal/PaymentModal.scss b/app/components/Activity/PaymentModal/PaymentModal.scss index 15877bef..dc918bc9 100644 --- a/app/components/Activity/PaymentModal/PaymentModal.scss +++ b/app/components/Activity/PaymentModal/PaymentModal.scss @@ -1,11 +1,11 @@ @import 'styles/variables.scss'; .container { - color: $white; + color: var(--primaryText); font-size: 12px; width: 75%; margin: 0 auto; - background: $spaceblue; + background: var(--darkestBackground); } .header { @@ -17,13 +17,13 @@ section { &:nth-child(1) { font-size: 16px; - color: $green; + color: var(--primaryText); svg { width: 16px; height: 16px; vertical-align: top; - fill: $green; + fill: var(--primaryText); } span:nth-child(2) { @@ -94,13 +94,13 @@ li { padding: 8px 15px; - background: #191919; + background: var(--lightBackground); cursor: pointer; transition: 0.25s hover; - border-bottom: 1px solid #0f0f0f; + border-bottom: 1px solid var(--lightestBackground); &:hover { - background: #0f0f0f; + background: var(--lightestBackground); } } } @@ -113,7 +113,7 @@ } .footer { - background: #31343f; + background: var(--lightestBackground); margin: 20px 0 50px 0; padding: 20px; text-align: center; diff --git a/app/components/Activity/TransactionModal/TransactionModal.js b/app/components/Activity/TransactionModal/TransactionModal.js index b205613a..fbbf9a16 100644 --- a/app/components/Activity/TransactionModal/TransactionModal.js +++ b/app/components/Activity/TransactionModal/TransactionModal.js @@ -55,18 +55,20 @@ const TransactionModal = ({ -
- - - {' '} - {currencyName} - -
+ {!transaction.received && ( +
+ + + {' '} + {currencyName} + +
+ )} diff --git a/app/components/Activity/TransactionModal/TransactionModal.scss b/app/components/Activity/TransactionModal/TransactionModal.scss index 0d9f6841..552ca353 100644 --- a/app/components/Activity/TransactionModal/TransactionModal.scss +++ b/app/components/Activity/TransactionModal/TransactionModal.scss @@ -1,11 +1,11 @@ @import 'styles/variables.scss'; .container { - color: $white; + color: var(--primaryText); font-size: 12px; width: 75%; margin: 0 auto; - background: $spaceblue; + background: var(--darkestBackground); } .header { @@ -17,13 +17,16 @@ section { &:nth-child(1) { font-size: 16px; - color: $green; + color: var(--primaryText); svg { width: 16px; height: 16px; vertical-align: top; - fill: $green; + + g { + stroke: var(--primaryText); + } } span:nth-child(2) { @@ -99,13 +102,13 @@ li { padding: 8px 15px; - background: #191919; + background: var(--lightBackground); cursor: pointer; transition: 0.25s hover; - border-bottom: 1px solid #0f0f0f; + border-bottom: 1px solid var(--lightestBackground); &:hover { - background: #0f0f0f; + background: var(--lightestBackground); } } } @@ -119,7 +122,7 @@ } .footer { - background: #31343f; + background: var(--lightestBackground); padding: 20px; text-align: center; diff --git a/app/components/App/App.js b/app/components/App/App.js index 9117cbbb..cee2b240 100644 --- a/app/components/App/App.js +++ b/app/components/App/App.js @@ -56,15 +56,17 @@ class App extends Component { activityModalProps, channelFormProps, + settings, + children } = this.props if (!currentTicker) { - return + return } return ( -
+
diff --git a/app/components/App/App.scss b/app/components/App/App.scss index 117d521c..74156432 100644 --- a/app/components/App/App.scss +++ b/app/components/App/App.scss @@ -6,11 +6,11 @@ display: inline-block; vertical-align: top; overflow-y: auto; + background: var(--lightBackground); + padding-top: 20px; } .titleBar { - background: $spacegrey; - height: 20px; -webkit-user-select: none; -webkit-app-region: drag; } diff --git a/app/components/Contacts/AddChannel/AddChannel.js b/app/components/Contacts/AddChannel/AddChannel.js index 9d7efdc3..d6c42177 100644 --- a/app/components/Contacts/AddChannel/AddChannel.js +++ b/app/components/Contacts/AddChannel/AddChannel.js @@ -112,31 +112,33 @@ const AddChannel = ({ -
-
    - {filteredNetworkNodes.map(node => ( -
  • -
    - {node.alias.length > 0 ? ( -

    - {node.alias.trim()} - - ({node.pub_key.substr(0, 10)} - ... - {node.pub_key.substr(node.pub_key.length - 10)}) - -

    - ) : ( -

    - {node.pub_key} -

    - )} -
    -
    {renderRightSide(node)}
    -
    • - ))} -
-
+ {filteredNetworkNodes.length > 0 && ( +
+
    + {filteredNetworkNodes.map(node => ( +
  • +
    + {node.alias.length > 0 ? ( +

    + {node.alias.trim()} + + ({node.pub_key.substr(0, 10)} + ... + {node.pub_key.substr(node.pub_key.length - 10)}) + +

    + ) : ( +

    + {node.pub_key} +

    + )} +
    +
    {renderRightSide(node)}
    +
    • + ))} +
+
+ )} {showManualForm && (
diff --git a/app/components/Contacts/AddChannel/AddChannel.scss b/app/components/Contacts/AddChannel/AddChannel.scss index bf5ca9dd..7cdc0d23 100644 --- a/app/components/Contacts/AddChannel/AddChannel.scss +++ b/app/components/Contacts/AddChannel/AddChannel.scss @@ -6,22 +6,22 @@ display: inline-block; vertical-align: top; height: 100vh; - background: #31343f; + background: var(--darkestBackground); } .header { display: flex; flex-direction: row; justify-content: space-between; - background: linear-gradient(270deg, #868b9f 0%, #333c5e 100%); + background: var(--gradient); padding: 15px 10px; - color: $white; + color: var(--white); input { background: transparent; outline: 0; border: 0; - color: $white; + color: var(--white); font-size: 14px; width: 90%; } @@ -42,13 +42,13 @@ } .nodes { - background: #31343f; + background: var(--lightestBackground); .networkResults { overflow-y: auto; - margin-top: 30px; - padding: 0 10px; - color: $white; + padding: 30px 10px 0 10px; + color: var(--primaryText); + min-height: 131px; li { display: flex; @@ -127,14 +127,15 @@ } div { - background: #383b47; + background: var(--lightningOrange); font-size: 16px; padding: 10px; cursor: pointer; transition: all 0.25s; + border-radius: 5px; &:hover { - background: lighten(#383b47, 10%); + opacity: 0.75; } } } diff --git a/app/components/Contacts/ChannelForm/ChannelForm.scss b/app/components/Contacts/ChannelForm/ChannelForm.scss index 66913917..588575c4 100644 --- a/app/components/Contacts/ChannelForm/ChannelForm.scss +++ b/app/components/Contacts/ChannelForm/ChannelForm.scss @@ -6,7 +6,7 @@ z-index: 10; height: 100vh; width: 100%; - background: #31343f; + background: var(--darkestBackground); } .closeContainer { @@ -24,6 +24,6 @@ } svg { - color: $white; + color: var(--primaryText); } } diff --git a/app/components/Contacts/ConnectManually/ConnectManually.scss b/app/components/Contacts/ConnectManually/ConnectManually.scss index e98cffc6..cc1ff3f7 100644 --- a/app/components/Contacts/ConnectManually/ConnectManually.scss +++ b/app/components/Contacts/ConnectManually/ConnectManually.scss @@ -6,7 +6,7 @@ z-index: 10; height: 100vh; width: 100%; - background: #31343f; + background: red; } .closeContainer { @@ -24,13 +24,13 @@ } svg { - color: $white; + color: var(--primaryText); } } .content { padding: 0 40px; - color: $white; + color: var(--primaryText); .header { padding: 20px 100px; @@ -61,18 +61,6 @@ } } -.title { - margin: 50px 0; - - h2 { - font-size: 14px; - background: $spaceblue; - padding: 10px; - border-radius: 17.5px; - display: inline; - } -} - .input { display: flex; flex-direction: row; @@ -84,8 +72,8 @@ background: transparent; outline: none; border: 0; - color: $gold; - -webkit-text-fill-color: $white; + color: var(--lightningOrange); + -webkit-text-fill-color: var(--primaryText); width: 100%; font-weight: 200; } @@ -100,7 +88,7 @@ .errorMessage { margin-top: 20px; font-size: 12px; - color: $red; + color: var(--superRed); min-height: 12px; visibility: hidden; @@ -123,13 +111,14 @@ transition: 0.25s all; &.active { - background: $gold; - color: $spaceblue; + background: var(--lightningOrange); + color: var(--white); font-weight: bold; opacity: 1; + transition: all 0.25s; &:hover { - background: darken($gold, 5%); + opacity: 0.75; } } } diff --git a/app/components/Contacts/Network/Network.scss b/app/components/Contacts/Network/Network.scss index db5e9c43..a998ce29 100644 --- a/app/components/Contacts/Network/Network.scss +++ b/app/components/Contacts/Network/Network.scss @@ -6,16 +6,17 @@ display: inline-block; vertical-align: top; height: 100vh; - background: #31343f; + background: var(--lightestBackground); + padding-top: 20px; } .header { display: flex; flex-direction: row; justify-content: space-between; - background: #2d303b; + background: var(--lightestBackground); padding: 10px 20px; - color: $white; + color: var(--primaryText); h2 { font-size: 14px; @@ -61,7 +62,7 @@ h2, h2 span { - color: $white; + color: var(--primaryText); cursor: pointer; transition: color 0.25s; @@ -87,7 +88,7 @@ li { margin: 10px 0; cursor: pointer; - color: $white; + color: var(--primaryText); &:hover { color: $darkestgrey; @@ -97,7 +98,7 @@ } span { - color: $white; + color: var(--primaryText); opacity: 1; font-size: 10px; cursor: pointer; @@ -121,17 +122,17 @@ } .channel { - color: $white; + color: var(--primaryText); padding: 10px 0 10px 0; margin: 10px 0; cursor: pointer; &:hover { - background: #272b37; + background: var(--lightBackground); } &.selectedChannel { - background: #272b37; + background: var(--lightBackground); padding-bottom: 0; .channelDetails { @@ -171,11 +172,11 @@ } .online { - color: $green; + color: var(--superGreen); } .pending { - color: $orange; + color: var(--lightningOrange); } .offline { @@ -183,7 +184,7 @@ } .closing { - color: $red; + color: var(--superRed); } svg { @@ -199,7 +200,7 @@ width: calc(100% - 40px); padding: 10px 20px; border-top: 1px solid $darkestgrey; - background: #2d303b; + background: var(--lightestBackground); .input { display: inline-block; @@ -213,7 +214,7 @@ font-size: 25px; text-align: center; cursor: pointer; - color: $white; + color: var(--primaryText); opacity: 0.5; svg { @@ -231,7 +232,7 @@ border-radius: 0; height: 50px; font-size: 12px; - color: $white; + color: var(--primaryText); } } @@ -285,7 +286,7 @@ transition: all 0.25s; h4 { - color: $white; + color: var(--primaryText); opacity: 0.5; font-size: 9px; margin-top: 10px; @@ -304,13 +305,13 @@ h5 { font-size: 12px; - color: $white; + color: var(--primaryText); margin-bottom: 10px; font-weight: 600; } p { - color: $white; + color: var(--primaryText); opacity: 0.5; font-size: 8px; text-align: center; @@ -320,7 +321,7 @@ .actions { text-align: center; font-size: 12px; - color: #ff7686; + color: var(--superRed); section { padding: 20px 0; diff --git a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss index b37b0a80..46f177e6 100644 --- a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss +++ b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss @@ -2,7 +2,7 @@ .content { padding: 0 40px; - color: $white; + color: var(--primaryText); margin: 0 auto; width: 500px; @@ -32,7 +32,7 @@ h2 { font-size: 10px; - background: $spaceblue; + background: var(--lightBackground); padding: 10px; border-radius: 17.5px; display: inline; @@ -78,8 +78,8 @@ border: 1px solid #404040; border-radius: 4px; padding: 15px; - color: $gold; - -webkit-text-fill-color: $white; + color: var(--lightningOrange); + -webkit-text-fill-color: var(--primaryText); width: 100%; font-weight: 200; } @@ -126,13 +126,12 @@ li { padding: 8px 15px; - background: #191919; + background: var(--lightBackground); cursor: pointer; transition: 0.25s hover; - border-bottom: 1px solid #0f0f0f; &:hover { - background: #0f0f0f; + background: var(--lightestBackground); } } } @@ -140,7 +139,7 @@ .fiatAmount { margin-top: 20px; - opacity: 0.5; + opacity: 0.75; } .submit { @@ -151,19 +150,19 @@ width: 235px; margin: 0 auto; padding: 20px 10px; - background: #31343f; + background: var(--lightBackground); opacity: 0.5; cursor: pointer; transition: 0.25s all; &.active { - background: $gold; - color: $spacegrey; + background: var(--lightningOrange); + color: var(--white); font-weight: bold; opacity: 1; &:hover { - background: darken($gold, 5%); + opacity: 0.5; } } } diff --git a/app/components/Contacts/SuggestedNodes/SuggestedNodes.scss b/app/components/Contacts/SuggestedNodes/SuggestedNodes.scss index ad85f1c5..d3eaa6e4 100644 --- a/app/components/Contacts/SuggestedNodes/SuggestedNodes.scss +++ b/app/components/Contacts/SuggestedNodes/SuggestedNodes.scss @@ -1,7 +1,7 @@ @import 'styles/variables.scss'; .container { - color: $white; + color: var(--primaryText); padding: 10px; header { diff --git a/app/components/Form/Form.scss b/app/components/Form/Form.scss index 7c457752..945131f1 100644 --- a/app/components/Form/Form.scss +++ b/app/components/Form/Form.scss @@ -6,7 +6,7 @@ z-index: 20; height: 100vh; width: 100%; - background: $spaceblue; + background: var(--lightestBackground); } .closeContainer { @@ -24,6 +24,6 @@ } svg { - color: $white; + color: var(--primaryText); } } diff --git a/app/components/Form/Pay/Pay.scss b/app/components/Form/Pay/Pay.scss index 36de905f..5c8124a0 100644 --- a/app/components/Form/Pay/Pay.scss +++ b/app/components/Form/Pay/Pay.scss @@ -9,7 +9,7 @@ .header { text-align: center; padding-bottom: 20px; - color: $white; + color: var(--primaryText); border-bottom: 1px solid $spaceborder; h1 { @@ -18,11 +18,15 @@ margin-top: 10px; letter-spacing: 1.5px; } + + svg g { + stroke: var(--primaryText); + } } .content { margin-top: 40px; - color: $white; + color: var(--primaryText); .destination { margin-bottom: 10px; @@ -34,7 +38,7 @@ min-height: 14px; &.active { - background: #23252f; + background: var(--lightBackground); border-radius: 10px; min-height: 0; } @@ -80,8 +84,8 @@ background: transparent; outline: none; border: 1px solid #404040; - color: $gold; - -webkit-text-fill-color: $white; + color: var(--lightningOrange); + -webkit-text-fill-color: var(--primaryText); font-size: 12px; width: 100%; font-weight: 200; @@ -131,13 +135,12 @@ li { padding: 8px 15px; - background: #191919; + background: var(--lightBackground); cursor: pointer; transition: 0.25s hover; - border-bottom: 1px solid #0f0f0f; &:hover { - background: #0f0f0f; + background: var(--darkestBackground); } } } @@ -154,22 +157,23 @@ text-align: center; .button { - width: 235px; + width: 200px; margin: 0 auto; - padding: 20px 10px; - background: #31343f; + padding: 15px 7.5px; + background: var(--lightBackground); + border-radius: 5px; opacity: 0.5; cursor: pointer; transition: 0.25s all; &.active { - background: $gold; - color: $spaceblue; + background: var(--lightningOrange); + color: var(--white); font-weight: bold; opacity: 1; &:hover { - background: darken($gold, 5%); + // background: darken(var(--lightningOrange), 5%); } } } @@ -177,7 +181,7 @@ } .errorMessage { - color: $red; + color: var(--superRed); font-size: 12px; min-height: 20px; opacity: 0; diff --git a/app/components/Form/Request/Request.scss b/app/components/Form/Request/Request.scss index 60dece07..4a50f27e 100644 --- a/app/components/Form/Request/Request.scss +++ b/app/components/Form/Request/Request.scss @@ -9,7 +9,7 @@ .header { text-align: center; padding-bottom: 20px; - color: $white; + color: var(--primaryText); border-bottom: 1px solid $spaceborder; h1 { @@ -18,11 +18,15 @@ margin-top: 10px; letter-spacing: 1.5px; } + + svg g { + stroke: var(--primaryText); + } } .content { margin-top: 50px; - color: $white; + color: var(--primaryText); .memo { margin-top: 35px; @@ -60,8 +64,8 @@ outline: none; border: 1px solid #404040; border-radius: 4px; - color: $gold; - -webkit-text-fill-color: $white; + color: var(--lightningOrange); + -webkit-text-fill-color: var(--primaryText); font-size: 20px; width: 100%; font-weight: 200; @@ -110,13 +114,12 @@ li { padding: 8px 15px; - background: #191919; + background: var(--lightBackground); cursor: pointer; transition: 0.25s hover; - border-bottom: 1px solid #0f0f0f; &:hover { - background: #0f0f0f; + background: var(--darkestBackground); } } } @@ -133,22 +136,23 @@ text-align: center; .button { - width: 235px; + width: 200px; margin: 0 auto; - padding: 20px 10px; - background: #31343f; + padding: 15px 7.5px; + background: var(--lightBackground); + border-radius: 5px; opacity: 0.5; cursor: pointer; transition: 0.25s all; &.active { - background: $gold; - color: $spaceblue; + background: var(--lightningOrange); + color: var(--white); font-weight: bold; opacity: 1; &:hover { - background: darken($gold, 5%); + opacity: 0.75; } } } diff --git a/app/components/LoadingBolt/LoadingBolt.js b/app/components/LoadingBolt/LoadingBolt.js index ac046d9a..9adbfb87 100644 --- a/app/components/LoadingBolt/LoadingBolt.js +++ b/app/components/LoadingBolt/LoadingBolt.js @@ -1,17 +1,18 @@ import React from 'react' +import PropTypes from 'prop-types' import Isvg from 'react-inlinesvg' -import cloudboltIcon from 'icons/cloudbolt.svg' +import cloudLightningIcon from 'icons/cloud_lightning.svg' import { FormattedMessage } from 'react-intl' import messages from './messages' import styles from './LoadingBolt.scss' -const LoadingBolt = () => ( -
+const LoadingBolt = ({ theme }) => ( +
- +

@@ -19,4 +20,8 @@ const LoadingBolt = () => (
) +LoadingBolt.propTypes = { + theme: PropTypes.string.isRequired +} + export default LoadingBolt diff --git a/app/components/LoadingBolt/LoadingBolt.scss b/app/components/LoadingBolt/LoadingBolt.scss index 16a50730..506aeb2b 100644 --- a/app/components/LoadingBolt/LoadingBolt.scss +++ b/app/components/LoadingBolt/LoadingBolt.scss @@ -7,23 +7,71 @@ left: 0; width: 100%; height: 100%; - background: $spaceblue; text-align: center; + background: linear-gradient(-45deg, rgba(255, 189, 89, 0.7) 10%, rgba(253, 152, 0, 0.85), var(--lightestBackground), var(--darkestBackground)); + background-size: 400% 400%; + -webkit-animation: Gradient 15s ease infinite; + -moz-animation: Gradient 15s ease infinite; + animation: Gradient 15s ease infinite; } .content { position: relative; - top: calc(50% - 250px); + top: calc(50% - 125px); min-height: 250px; .bolt svg { height: 155px; width: 150px; + stroke-width: 0.5; + stroke: var(--primaryText); } h1 { - color: $main; + color: var(--primaryText); margin-top: 50px; font-size: 25px; } } + +@-webkit-keyframes Gradient { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 50%; + } + + 100% { + background-position: 0% 50%; + } +} + +@-moz-keyframes Gradient { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 50%; + } + + 100% { + background-position: 0% 50%; + } +} + +@keyframes Gradient { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 50%; + } + + 100% { + background-position: 0% 50%; + } +} diff --git a/app/components/Onboarding/Alias/Alias.scss b/app/components/Onboarding/Alias/Alias.scss index 11a5827f..fb096d6a 100644 --- a/app/components/Onboarding/Alias/Alias.scss +++ b/app/components/Onboarding/Alias/Alias.scss @@ -6,8 +6,8 @@ border: 1px solid #404040; border-radius: 4px; padding: 15px; - color: $gold; - -webkit-text-fill-color: $white; + color: var(--lightningOrange); + -webkit-text-fill-color: var(--primaryText); font-size: 22px; } diff --git a/app/components/Onboarding/Autopilot/Autopilot.scss b/app/components/Onboarding/Autopilot/Autopilot.scss index d27905cf..6b98defb 100644 --- a/app/components/Onboarding/Autopilot/Autopilot.scss +++ b/app/components/Onboarding/Autopilot/Autopilot.scss @@ -1,7 +1,7 @@ @import 'styles/variables.scss'; .container { - color: $white; + color: var(--primaryText); section { margin-bottom: 0; @@ -9,28 +9,28 @@ &.enable { &.active { div { - color: $gold; - border-color: $gold; + color: var(--lightningOrange); + border-color: var(--lightningOrange); } } div:hover { - color: $gold; - border-color: $gold; + color: var(--lightningOrange); + border-color: var(--lightningOrange); } } &.disable { &.active { div { - color: $gold; - border-color: $gold; + color: var(--lightningOrange); + border-color: var(--lightningOrange); } } div:hover { - color: $gold; - border-color: $gold; + color: var(--lightningOrange); + border-color: var(--lightningOrange); } } @@ -39,7 +39,7 @@ text-align: center; display: inline-block; padding: 20px; - border: 1px solid $white; + border: 1px solid var(--primaryText); border-radius: 5px; font-weight: 200; cursor: pointer; diff --git a/app/components/Onboarding/BtcPayServer/BtcPayServer.scss b/app/components/Onboarding/BtcPayServer/BtcPayServer.scss index 23a24908..07c31726 100644 --- a/app/components/Onboarding/BtcPayServer/BtcPayServer.scss +++ b/app/components/Onboarding/BtcPayServer/BtcPayServer.scss @@ -1,7 +1,7 @@ @import 'styles/variables.scss'; .container { - color: $white; + color: var(--primaryText); .input { margin-bottom: 15px; @@ -21,14 +21,14 @@ border: 1px solid #404040; border-radius: 4px; padding: 10px; - color: $gold; - -webkit-text-fill-color: $white; + color: var(--lightningOrange); + -webkit-text-fill-color: var(--primaryText); font-size: 14px; width: 95%; transition: all 0.25s; &.error { - border: 1px solid $red; + border: 1px solid var(--superRed); } } @@ -48,7 +48,7 @@ margin-top: 8px; font-size: 12px; line-height: 18px; - color: $red; + color: var(--superRed); display: none; &.visible { diff --git a/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss b/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss index cc1696e4..6451548d 100644 --- a/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss +++ b/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss @@ -1,7 +1,7 @@ @import 'styles/variables.scss'; .container { - color: $white; + color: var(--primaryText); p { margin-bottom: 20px; @@ -12,6 +12,6 @@ } .host { - color: $green; + color: var(--superGreen); } } diff --git a/app/components/Onboarding/ConnectionDetails/ConnectionDetails.scss b/app/components/Onboarding/ConnectionDetails/ConnectionDetails.scss index 8832dcbb..f4aa0af8 100644 --- a/app/components/Onboarding/ConnectionDetails/ConnectionDetails.scss +++ b/app/components/Onboarding/ConnectionDetails/ConnectionDetails.scss @@ -1,7 +1,7 @@ @import 'styles/variables.scss'; .container { - color: $white; + color: var(--primaryText); .input { margin-bottom: 10px; @@ -17,11 +17,11 @@ input { background: transparent; outline: none; - border: 1px solid #404040; + border: 1px solid var(--primaryText); border-radius: 4px; padding: 8px; - color: $gold; - -webkit-text-fill-color: $white; + color: var(--lightningOrange); + -webkit-text-fill-color: var(--primaryText); font-size: 18px; font-weight: 400; width: 600px; @@ -29,7 +29,7 @@ margin-bottom: 5px; &.error { - border: 1px solid $red; + border: 1px solid var(--superRed); } } @@ -47,7 +47,7 @@ .errorMessage { font-size: 12px; line-height: 18px; - color: $red; + color: var(--superRed); display: none; &.visible { diff --git a/app/components/Onboarding/ConnectionType/ConnectionType.scss b/app/components/Onboarding/ConnectionType/ConnectionType.scss index 86d94be4..3df6f78a 100644 --- a/app/components/Onboarding/ConnectionType/ConnectionType.scss +++ b/app/components/Onboarding/ConnectionType/ConnectionType.scss @@ -1,7 +1,7 @@ @import 'styles/variables.scss'; .container { - color: $white; + color: var(--primaryText); section { margin: 0; @@ -12,7 +12,7 @@ .description { width: 80%; - opacity: 0.25; + // opacity: 0.25; transition: all 0.25s; } @@ -25,7 +25,7 @@ text-align: center; display: flex; padding: 20px; - border: 1px solid $white; + border: 1px solid var(--primaryText); border-radius: 5px; cursor: pointer; transition: all 0.25s; @@ -34,19 +34,19 @@ &.active { .button { - color: $gold; - border-color: $gold; + color: var(--lightningOrange); + border-color: var(--lightningOrange); } .description { opacity: 0.8; - color: $gold; + color: var(--lightningOrange); } } .button:hover { - color: $gold; - border-color: $gold; + color: var(--lightningOrange); + border-color: var(--lightningOrange); } .label { diff --git a/app/components/Onboarding/FormContainer/FormContainer.js b/app/components/Onboarding/FormContainer/FormContainer.js index 8d073696..09fe4736 100644 --- a/app/components/Onboarding/FormContainer/FormContainer.js +++ b/app/components/Onboarding/FormContainer/FormContainer.js @@ -8,16 +8,17 @@ import FaAngleRight from 'react-icons/lib/fa/angle-right' import zapLogo from 'icons/zap_logo.svg' import { FormattedMessage } from 'react-intl' +import zapLogoBlack from 'icons/zap_logo_black.svg' import messages from './messages' import styles from './FormContainer.scss' -const FormContainer = ({ title, description, back, next, children }) => ( +const FormContainer = ({ title, description, back, next, children, theme }) => (
- +
( ) FormContainer.propTypes = { - title: PropTypes.node.isRequired, - description: PropTypes.node.isRequired, + title: PropTypes.object.isRequired, + description: PropTypes.object.isRequired, + theme: PropTypes.string.isRequired, back: PropTypes.func, next: PropTypes.func, diff --git a/app/components/Onboarding/FormContainer/FormContainer.scss b/app/components/Onboarding/FormContainer/FormContainer.scss index 22c572b8..d447eba9 100644 --- a/app/components/Onboarding/FormContainer/FormContainer.scss +++ b/app/components/Onboarding/FormContainer/FormContainer.scss @@ -3,11 +3,11 @@ .container { position: relative; height: 100vh; - background: $darkspaceblue; + background: var(--darkestBackground); } .titleBar { - background: $spacegrey; + background: var(--lightBackground); height: 20px; -webkit-user-select: none; -webkit-app-region: drag; @@ -20,7 +20,7 @@ padding: 20px 40px; .help { - color: $white; + color: var(--primaryText); text-decoration: underline; cursor: pointer; transition: all 0.25s; @@ -32,7 +32,7 @@ } .info { - color: $white; + color: var(--primaryText); margin-bottom: 20px; padding: 20px 40px; @@ -50,7 +50,7 @@ .content { position: relative; - background: $spaceblue; + background: var(--lightBackground); height: 100vh; padding: 40px 40px; } @@ -59,7 +59,7 @@ position: absolute; bottom: 0; padding: 25px 40px; - color: $white; + color: var(--primaryText); width: calc(100% - 80px); .buttonsContainer { @@ -70,13 +70,13 @@ .nextButton { cursor: pointer; transition: all 0.25s; - background: $darkspaceblue; - padding: 10px 30px 10px 40px; - width: 54px; + background: var(--lightningOrange); + padding: 8px 20px 8px 30px; text-align: center; + border-radius: 5px; &:hover { - background: lighten($darkspaceblue, 10%); + opacity: 0.5; } } diff --git a/app/components/Onboarding/Login/Login.scss b/app/components/Onboarding/Login/Login.scss index 77af231c..ffb06373 100644 --- a/app/components/Onboarding/Login/Login.scss +++ b/app/components/Onboarding/Login/Login.scss @@ -10,10 +10,9 @@ border: 1px solid #404040; border-radius: 4px; padding: 15px; - color: $gold; - -webkit-text-fill-color: $white; + color: var(--lightningOrange); + -webkit-text-fill-color: var(--primaryText); font-size: 22px; - //border-bottom: 1px solid transparent; transition: all 0.25s; &.inputError { @@ -43,7 +42,7 @@ text-align: center; div { - color: $white; + color: var(--primaryText); &:nth-child(1) { text-align: center; @@ -51,10 +50,11 @@ span { padding: 15px 35px; - background: $darkspaceblue; + background: var(--lightningOrange); font-size: 14px; opacity: 0.5; transition: all 0.25s; + border-radius: 5px; &.button { position: relative; @@ -65,7 +65,7 @@ cursor: pointer; &:hover { - background: lighten($darkspaceblue, 10%); + opacity: 0.5; } } } diff --git a/app/components/Onboarding/NewWalletPassword/NewWalletPassword.scss b/app/components/Onboarding/NewWalletPassword/NewWalletPassword.scss index f653ad2e..192fc0fa 100644 --- a/app/components/Onboarding/NewWalletPassword/NewWalletPassword.scss +++ b/app/components/Onboarding/NewWalletPassword/NewWalletPassword.scss @@ -7,16 +7,16 @@ .password { background: transparent; outline: none; - border: 1px solid #404040; + border: 1px solid var(--primaryText); border-radius: 4px; padding: 15px; - color: $gold; - -webkit-text-fill-color: $white; + color: var(--lightningOrange); + -webkit-text-fill-color: var(--primaryText); font-size: 22px; transition: all 0.25s; &.error { - border: 1px solid $red; + border: 1px solid var(--superRed); } } @@ -26,7 +26,7 @@ } .errorMessage { - color: $red; + color: var(--superRed); margin-top: 10px; font-size: 10px; visibility: hidden; @@ -37,12 +37,12 @@ } .helpMessage { - color: white; + color: var(--primaryText); opacity: 0.87; padding-top: 10px; font-size: 14px; &.red { - color: $red; + color: var(--superRed); } } diff --git a/app/components/Onboarding/NewWalletSeed/NewWalletSeed.scss b/app/components/Onboarding/NewWalletSeed/NewWalletSeed.scss index 3544f89c..3e2a9ba8 100644 --- a/app/components/Onboarding/NewWalletSeed/NewWalletSeed.scss +++ b/app/components/Onboarding/NewWalletSeed/NewWalletSeed.scss @@ -2,7 +2,7 @@ .container { font-size: 14px; - color: $white; + color: var(--primaryText); letter-spacing: 1.5px; li { @@ -14,7 +14,7 @@ section { display: inline-block; vertical-align: middle; - color: $white; + color: var(--primaryText); &:nth-child(1) { width: 15%; @@ -28,21 +28,4 @@ } } } - - .word { - margin: 0 3px; - background-color: #1c1e26; - outline: 0; - border: none; - padding: 10px; - color: $white; - - &.valid { - color: $green; - } - - &.invalid { - color: $red; - } - } } diff --git a/app/components/Onboarding/Onboarding.js b/app/components/Onboarding/Onboarding.js index e21a9033..9637a477 100644 --- a/app/components/Onboarding/Onboarding.js +++ b/app/components/Onboarding/Onboarding.js @@ -36,6 +36,7 @@ const Onboarding = ({ seed, fetchingSeed }, + theme, connectionTypeProps, connectionDetailProps, connectionConfirmProps, @@ -58,6 +59,7 @@ const Onboarding = ({ } description={} + theme={theme} back={null} next={() => { switch (connectionType) { @@ -81,6 +83,7 @@ const Onboarding = ({ } description={} + theme={theme} back={() => changeStep(0.1)} next={() => { // dont allow the user to move on if we don't at least have a hostname. @@ -100,6 +103,7 @@ const Onboarding = ({ } description={} + theme={theme} back={() => changeStep(0.1)} next={() => { // dont allow the user to move on if the connection string is invalid. @@ -119,6 +123,7 @@ const Onboarding = ({ } description={} + theme={theme} back={() => changeStep(previousStep)} next={() => { startLnd({ @@ -139,6 +144,7 @@ const Onboarding = ({ } description={} + theme={theme} back={() => changeStep(0.1)} next={() => changeStep(2)} > @@ -150,6 +156,7 @@ const Onboarding = ({ } description={} + theme={theme} back={() => changeStep(1)} next={() => startLnd({ type: connectionType, alias, autopilot })} > @@ -171,6 +178,7 @@ const Onboarding = ({ }} /> } + theme={theme} back={null} next={null} > @@ -182,6 +190,7 @@ const Onboarding = ({ } description={} + theme={theme} back={null} next={() => { // dont allow the user to move on if the confirmation password doesnt match the original password @@ -206,6 +215,7 @@ const Onboarding = ({ } description={} + theme={theme} back={() => changeStep(4)} next={() => { // require the user to select create wallet or import wallet @@ -227,6 +237,7 @@ const Onboarding = ({ } description={} + theme={theme} back={() => changeStep(5)} next={() => { const recoverySeed = recoverFormProps.recoverSeedInput.map(input => input.word) @@ -242,6 +253,7 @@ const Onboarding = ({ } description={} + theme={theme} back={() => changeStep(5)} next={() => changeStep(7)} > @@ -262,6 +274,7 @@ const Onboarding = ({ }} /> } + theme={theme} back={() => changeStep(6)} next={() => { // don't allow them to move on if they havent re-entered the seed correctly @@ -276,18 +289,18 @@ const Onboarding = ({ ) default: - return + return } } if (startingLnd) { - return + return } if (fetchingSeed) { - return + return } - return
{renderStep()}
+ return
{renderStep()}
} Onboarding.propTypes = { diff --git a/app/components/Onboarding/ReEnterSeed/ReEnterSeed.scss b/app/components/Onboarding/ReEnterSeed/ReEnterSeed.scss index 5e88d706..6a003e5b 100644 --- a/app/components/Onboarding/ReEnterSeed/ReEnterSeed.scss +++ b/app/components/Onboarding/ReEnterSeed/ReEnterSeed.scss @@ -12,12 +12,12 @@ display: inline-block; margin: 10px; width: 25%; - border: 0.2px solid #ccc; + border: 0.2px solid var(--primaryText); padding: 5px 10px; section { display: inline-block; - color: $white; + color: var(--primaryText); margin: 0; &:nth-child(1) { @@ -34,17 +34,17 @@ outline: 0; border: none; padding: 8px 10px 6px 10px; - color: $white; + color: var(--primaryText); font-family: 'Courier', courier, sans-serif; font-size: 14px; line-height: 18px; &.valid { - color: $green; + color: var(--superGreen); } &.invalid { - color: $red; + color: var(--superRed); } } diff --git a/app/components/Onboarding/RecoverForm/RecoverForm.scss b/app/components/Onboarding/RecoverForm/RecoverForm.scss index f9284873..6dc42a4d 100644 --- a/app/components/Onboarding/RecoverForm/RecoverForm.scss +++ b/app/components/Onboarding/RecoverForm/RecoverForm.scss @@ -12,7 +12,7 @@ section { display: inline-block; - color: $white; + color: var(--primaryText); margin: 0; &:nth-child(1) { @@ -31,21 +31,21 @@ .word { margin: 0 3px; - background-color: #1c1e26; + background-color: var(--darkestBackground); outline: 0; border: none; padding: 8px 10px 6px 10px; - color: $white; + color: var(--primaryText); font-family: 'Courier', courier, sans-serif; font-size: 14px; line-height: 18px; &.valid { - color: $green; + color: var(--superGreen); } &.invalid { - color: $red; + color: var(--superRed); } } diff --git a/app/components/Onboarding/Signup/Signup.scss b/app/components/Onboarding/Signup/Signup.scss index 8c13e2d0..4b367e4b 100644 --- a/app/components/Onboarding/Signup/Signup.scss +++ b/app/components/Onboarding/Signup/Signup.scss @@ -1,7 +1,7 @@ @import 'styles/variables.scss'; .container { - color: $white; + color: var(--primaryText); section { margin-bottom: 20px; @@ -9,28 +9,28 @@ &.enable { &.active { div { - color: $gold; - border-color: $gold; + color: var(--lightningOrange); + border-color: var(--lightningOrange); } } div:hover { - color: $gold; - border-color: $gold; + color: var(--lightningOrange); + border-color: var(--lightningOrange); } } &.disable { &.active { div { - color: $gold; - border-color: $gold; + color: var(--lightningOrange); + border-color: var(--lightningOrange); } } div:hover { - color: $gold; - border-color: $gold; + color: var(--lightningOrange); + border-color: var(--lightningOrange); } } @@ -38,7 +38,7 @@ width: 185px; display: inline-block; padding: 20px; - border: 1px solid $white; + border: 1px solid var(--primaryText); border-radius: 5px; font-weight: 200; cursor: pointer; diff --git a/app/components/Onboarding/Syncing/Syncing.js b/app/components/Onboarding/Syncing/Syncing.js index 9a4c17c1..9d6e9a76 100644 --- a/app/components/Onboarding/Syncing/Syncing.js +++ b/app/components/Onboarding/Syncing/Syncing.js @@ -4,6 +4,7 @@ import QRCode from 'qrcode.react' import copy from 'copy-to-clipboard' import Isvg from 'react-inlinesvg' import zapLogo from 'icons/zap_logo.svg' +import zapLogoDark from 'icons/zap_logo_black.svg' import copyIcon from 'icons/copy.svg' import { showNotification } from 'lib/utils/notifications' import { FormattedMessage, injectIntl } from 'react-intl' @@ -46,7 +47,8 @@ class Syncing extends Component { blockHeight, lndBlockHeight, lndCfilterHeight, - intl + intl, + theme } = this.props let { syncMessageDetail, syncMessageExtraDetail } = this.state @@ -85,12 +87,12 @@ class Syncing extends Component { } return ( -
+
- +
{hasSynced === true && ( @@ -176,6 +178,7 @@ class Syncing extends Component { Syncing.propTypes = { address: PropTypes.string.isRequired, + theme: PropTypes.string.isRequired, hasSynced: PropTypes.bool, syncStatus: PropTypes.string.isRequired, syncPercentage: PropTypes.number, diff --git a/app/components/Onboarding/Syncing/Syncing.scss b/app/components/Onboarding/Syncing/Syncing.scss index 99e3cd79..5f585207 100644 --- a/app/components/Onboarding/Syncing/Syncing.scss +++ b/app/components/Onboarding/Syncing/Syncing.scss @@ -3,20 +3,20 @@ .container { position: relative; height: 100vh; - background: #2a2d38; + background: var(--darkestBackground); } .titleBar { height: 20px; -webkit-user-select: none; -webkit-app-region: drag; - background: #1c1e26; + background: var(--darkestBackground); } .content { - color: $white; + color: var(--primaryText); text-align: center; - background: #1c1e26; + background: var(--darkestBackground); header { text-align: left; @@ -25,7 +25,7 @@ .title { margin: 30px; - background: #1c1e26; + background: var(--darkestBackground); h1 { font-size: 20px; @@ -38,7 +38,7 @@ } .address { - background: #1c1e26; + background: var(--darkestBackground); .textAddress { margin-top: 20px; @@ -47,16 +47,16 @@ font-size: 12px; &.text { - background: #2a2d38; + background: var(--lightBackground); padding: 10px; } &.icon { - background: #383b47; + background: var(--lightestBackground); padding: 10px; cursor: pointer; transition: all 0.25s; - color: $white; + color: var(--primaryText); &:hover { opacity: 0.25; @@ -73,17 +73,19 @@ .qrcode { border-style: solid; - border-color: white; + border-color: var(--primaryText); border-width: 2px; } } .progressContainer { - color: $white; + color: var(--primaryText); text-align: center; - margin-top: 10%; - padding: 40px; - background: #2a2d38; + padding: 40px 0; + background: var(--lightestBackground); + position: absolute; + width: 100%; + bottom: 0; h3 { margin-bottom: 20px; @@ -95,24 +97,23 @@ margin: 0 auto; height: 10px; border-radius: 5px; - background: $spaceborder; + background: var(--darkestBackground); } .progress { - background: $gold; - background: #dea326; + background: var(--lightningOrange); height: 10px; border-radius: 5px; transition: all 0.25s; } h4 { - color: $gold; + color: var(--lightningOrange); margin-top: 10px; } .progressDetail { - color: $gold; + color: var(--lightningOrange); font-size: 12px; margin-top: 10px; } diff --git a/app/components/Settings/Fiat/Fiat.js b/app/components/Settings/Fiat/Fiat.js index 1eb25b76..c1b581be 100644 --- a/app/components/Settings/Fiat/Fiat.js +++ b/app/components/Settings/Fiat/Fiat.js @@ -34,7 +34,7 @@ Fiat.propTypes = { fiatTicker: PropTypes.string.isRequired, fiatTickers: PropTypes.array.isRequired, disableSubMenu: PropTypes.func.isRequired, - setFiatTicker: PropTypes.func.isRequired + setFiatTicker: PropTypes.func } export default Fiat diff --git a/app/components/Settings/Fiat/Fiat.scss b/app/components/Settings/Fiat/Fiat.scss index 1319273a..0f94179d 100644 --- a/app/components/Settings/Fiat/Fiat.scss +++ b/app/components/Settings/Fiat/Fiat.scss @@ -2,7 +2,7 @@ .submenuHeader { padding: 20px; - background: lighten(#1d1f27, 20%); + background: var(--darkestBackground); font-size: 10px; display: flex; flex-direction: row; @@ -11,7 +11,7 @@ transition: all 0.25s; &:hover { - background: lighten(#1d1f27, 10%); + opacity: 0.75; } } @@ -20,13 +20,17 @@ overflow-y: scroll; li { - background: #191919; + background: var(--lightestBackground); cursor: pointer; - border-bottom: 1px solid #0f0f0f; + opacity: 0.75; transition: 0.25s hover; + &:hover { + background: var(--lightBackground); + } + &.active { - background: #0f0f0f; + opacity: 1; svg { height: 10px; diff --git a/app/components/Settings/Locale/Locale.scss b/app/components/Settings/Locale/Locale.scss index 5d321843..6256dbd3 100644 --- a/app/components/Settings/Locale/Locale.scss +++ b/app/components/Settings/Locale/Locale.scss @@ -1,8 +1,8 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .submenuHeader { padding: 20px; - background: lighten(#1d1f27, 20%); + background: var(--darkestBackground); font-size: 10px; display: flex; flex-direction: row; @@ -11,7 +11,7 @@ transition: all 0.25s; &:hover { - background: lighten(#1d1f27, 10%); + opacity: 0.75; } } @@ -20,18 +20,22 @@ overflow-y: scroll; li { - background: #191919; + background: var(--lightestBackground); cursor: pointer; - border-bottom: 1px solid #0f0f0f; + opacity: 0.75; transition: 0.25s hover; + &:hover { + background: var(--lightBackground); + } + &.active { - background: #0f0f0f; + opacity: 1; svg { height: 10px; width: 10px; - color: $green; + color: var(--superGreen); } } diff --git a/app/components/Settings/Menu/Menu.js b/app/components/Settings/Menu/Menu.js index 589ea035..9c909f72 100644 --- a/app/components/Settings/Menu/Menu.js +++ b/app/components/Settings/Menu/Menu.js @@ -17,6 +17,12 @@ const Menu = ({ setActiveSubMenu }) => ( +
  • setActiveSubMenu('theme')}> + + + + +
    • ) diff --git a/app/components/Settings/Menu/messages.js b/app/components/Settings/Menu/messages.js index 124da17e..6723bba5 100644 --- a/app/components/Settings/Menu/messages.js +++ b/app/components/Settings/Menu/messages.js @@ -3,5 +3,6 @@ import { defineMessages } from 'react-intl' /* eslint-disable max-len */ export default defineMessages({ fiat: 'Fiat Currency', - locale: 'Language' + locale: 'Language', + theme: 'Theme' }) diff --git a/app/components/Settings/Settings.js b/app/components/Settings/Settings.js index 1ef59983..44db88f9 100644 --- a/app/components/Settings/Settings.js +++ b/app/components/Settings/Settings.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import Menu from './Menu' import Fiat from './Fiat' import Locale from './Locale' +import Theme from './Theme' import styles from './Settings.scss' class Settings extends React.Component { @@ -48,13 +49,15 @@ class Settings extends React.Component { } renderSettings() { - const { settings, fiatProps, localeProps, setActiveSubMenu } = this.props + const { settings, fiatProps, localeProps, themeProps, setActiveSubMenu } = this.props switch (settings.activeSubMenu) { case 'fiat': return case 'locale': return + case 'theme': + return default: return } @@ -74,7 +77,8 @@ Settings.propTypes = { setActiveSubMenu: PropTypes.func.isRequired, toggleSettings: PropTypes.func.isRequired, fiatProps: PropTypes.object.isRequired, - localeProps: PropTypes.object.isRequired + localeProps: PropTypes.object.isRequired, + themeProps: PropTypes.object.isRequired } export default Settings diff --git a/app/components/Settings/Settings.scss b/app/components/Settings/Settings.scss index 85514751..c7159c2a 100644 --- a/app/components/Settings/Settings.scss +++ b/app/components/Settings/Settings.scss @@ -1,5 +1,5 @@ .container { - background: #1d1f27; + background: var(--lightestBackground); position: absolute; width: 200px; top: 30px; @@ -16,7 +16,7 @@ transition: all 0.25s; &:hover { - background: #0f0f0f; + background: var(--darkestBackground); } } } diff --git a/app/components/Settings/Theme/Theme.js b/app/components/Settings/Theme/Theme.js new file mode 100644 index 00000000..9f549cf9 --- /dev/null +++ b/app/components/Settings/Theme/Theme.js @@ -0,0 +1,43 @@ +import React from 'react' +import PropTypes from 'prop-types' +import FaAngleLeft from 'react-icons/lib/fa/angle-left' +import Isvg from 'react-inlinesvg' +import checkIcon from 'icons/check.svg' + +import { FormattedMessage } from 'react-intl' +import messages from './messages' + +import styles from './Theme.scss' + +const Fiat = ({ theme, disableSubMenu, setTheme }) => ( +
    +
    + + + + +
    +
      +
    • setTheme('dark')}> + + + + {theme === 'dark' && } +
      • +
    • setTheme('light')}> + + + + {theme === 'light' && } +
      • +
    +
    +) + +Fiat.propTypes = { + theme: PropTypes.string.isRequired, + disableSubMenu: PropTypes.func.isRequired, + setTheme: PropTypes.func +} + +export default Fiat diff --git a/app/components/Settings/Theme/Theme.scss b/app/components/Settings/Theme/Theme.scss new file mode 100644 index 00000000..07909d24 --- /dev/null +++ b/app/components/Settings/Theme/Theme.scss @@ -0,0 +1,43 @@ +@import 'styles/variables.scss'; + +.submenuHeader { + padding: 20px; + background: var(--darkestBackground); + font-size: 10px; + display: flex; + flex-direction: row; + justify-content: end; + align-items: center; + transition: all 0.25s; + + &:hover { + opacity: 0.75; + } +} + +.themes { + li { + background: var(--lightestBackground); + cursor: pointer; + opacity: 0.75; + transition: 0.25s hover; + + &:hover { + background: var(--lightBackground); + } + + &.active { + opacity: 1; + + svg { + height: 10px; + width: 10px; + color: var(--superGreen); + } + } + + span:nth-child(1) { + line-height: 12px; + } + } +} diff --git a/app/components/Settings/Theme/index.js b/app/components/Settings/Theme/index.js new file mode 100644 index 00000000..3ee4d14e --- /dev/null +++ b/app/components/Settings/Theme/index.js @@ -0,0 +1,3 @@ +import Theme from './Theme' + +export default Theme diff --git a/app/components/Settings/Theme/messages.js b/app/components/Settings/Theme/messages.js new file mode 100644 index 00000000..e736cf92 --- /dev/null +++ b/app/components/Settings/Theme/messages.js @@ -0,0 +1,8 @@ +import { defineMessages } from 'react-intl' + +/* eslint-disable max-len */ +export default defineMessages({ + title: 'Theme', + dark: 'Dark', + light: 'Light' +}) diff --git a/app/components/Wallet/ReceiveModal/ReceiveModal.scss b/app/components/Wallet/ReceiveModal/ReceiveModal.scss index 9ff4c74d..f09e1ef3 100644 --- a/app/components/Wallet/ReceiveModal/ReceiveModal.scss +++ b/app/components/Wallet/ReceiveModal/ReceiveModal.scss @@ -3,7 +3,7 @@ .container { position: relative; height: 100vh; - background: $bluegrey; + background: var(--darkestBackground); } .closeContainer { @@ -21,7 +21,7 @@ } svg { - color: $white; + color: var(--primaryText); } } @@ -29,10 +29,10 @@ display: flex; flex-direction: row; align-items: center; - background: $spaceblue; + background: var(--lightBackground); width: 85%; margin: 10% auto 50px auto; - color: $white; + color: var(--primaryText); .left { width: 30%; @@ -72,7 +72,7 @@ .qrcode { border-style: solid; - border-color: white; + border-color: var(--primaryText); border-width: 2px; } } @@ -80,7 +80,6 @@ .right { width: 70%; min-height: 220px; - border-left: 1px solid $spaceborder; padding: 30px 30px; .pubkey, @@ -103,7 +102,7 @@ align-items: center; font-size: 10px; font-weight: 200; - background: $bluegrey; + background: var(--lightestBackground); .data, .copy { @@ -116,13 +115,13 @@ } .copy { - background: #383b47; - color: $white; + background: var(--darkestBackground); + color: var(--primaryText); cursor: pointer; transition: all 0.25s; &:hover { - background: lighten(#383b47, 5%); + opacity: 0.5; } svg { diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js index 26b27ba5..b05ffccb 100644 --- a/app/components/Wallet/Wallet.js +++ b/app/components/Wallet/Wallet.js @@ -10,6 +10,7 @@ import AnimatedCheckmark from 'components/AnimatedCheckmark' import Settings from 'components/Settings' import zapLogo from 'icons/zap_logo.svg' +import zapLogoBlack from 'icons/zap_logo_black.svg' import qrCode from 'icons/qrcode.svg' import { FormattedNumber, FormattedMessage } from 'react-intl' @@ -34,7 +35,8 @@ const Wallet = ({ setWalletCurrencyFilters, network, settingsProps, - paymentTimeout + paymentTimeout, + theme }) => { const fiatAmount = btc.satoshisToFiat( parseInt(balance.walletBalance, 10) + parseInt(balance.channelBalance, 10), @@ -47,11 +49,11 @@ const Wallet = ({ } return ( -
    +
    - + {info.data.testnet && Testnet}
    diff --git a/app/components/Wallet/Wallet.scss b/app/components/Wallet/Wallet.scss index a8cde7ea..9b113a61 100644 --- a/app/components/Wallet/Wallet.scss +++ b/app/components/Wallet/Wallet.scss @@ -1,8 +1,8 @@ @import 'styles/variables.scss'; .wallet { - background: $bluegrey; - color: $white; + background: var(--lightBackground); + color: var(--primaryText); transition: background 0.25s; height: 150px; padding: 20px 40px; @@ -25,8 +25,6 @@ .testnetPill { margin-left: 10px; - // border: 1px solid rgb(57, 230, 115); - // padding: 5px 15px; font-size: 10px; border-radius: 100px; color: rgb(57, 230, 115); @@ -67,6 +65,10 @@ .bitcoinLogo svg { width: 20px; height: 32px; + + g { + fill: var(--gray); + } } .details { @@ -88,7 +90,7 @@ } span:nth-child(2) svg { - color: $white; + color: var(--primaryText); width: 20px; height: 32px; opacity: 1; @@ -112,7 +114,7 @@ svg { width: 25px; height: 32px; - color: $white; + color: var(--white); } ul { @@ -127,13 +129,12 @@ li { font-size: 12px; padding: 0 15px; - background: #191919; + background: var(--lightestBackground); cursor: pointer; transition: 0.25s hover; - border-bottom: 1px solid #0f0f0f; &:hover { - background: #0f0f0f; + background: var(--darkestBackground); } } } @@ -148,7 +149,7 @@ margin: 5px; font-size: 10px; border-radius: 5px; - border: 1px solid $white; + border: 1px solid var(--white); padding: 5px 10px; cursor: pointer; opacity: 0.5; @@ -178,20 +179,19 @@ .pay, .request { - font-size: 16px; + font-size: 13px; font-weight: bold; - color: $white; - background: #31343f; - padding: 10px; - width: 100px; + color: var(--white); + background: var(--lightningOrange); + padding: 10px 7.5px; + width: 80px; text-align: center; border-radius: 5px; cursor: pointer; - opacity: 0.5; transition: all 0.25s; &:hover { - opacity: 1; + opacity: 0.75; } &:nth-child(1) { diff --git a/app/containers/Activity.js b/app/containers/Activity.js index dac3ef68..da6fd7e8 100644 --- a/app/containers/Activity.js +++ b/app/containers/Activity.js @@ -22,7 +22,7 @@ import { payFormSelectors } from 'reducers/payform' import { setWalletCurrencyFilters } from 'reducers/info' -import { setSettingsOpen, setActiveSubMenu, disableSubMenu } from 'reducers/settings' +import { setSettingsOpen, setActiveSubMenu, disableSubMenu, setTheme } from 'reducers/settings' import Activity from 'components/Activity' @@ -49,7 +49,8 @@ const mapDispatchToProps = { setWalletCurrencyFilters, setSettingsOpen, setActiveSubMenu, - disableSubMenu + disableSubMenu, + setTheme } const mapStateToProps = state => ({ @@ -107,6 +108,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({ currencyName: stateProps.currencyName, network: stateProps.info.network, paymentTimeout: stateProps.payment.paymentTimeout, + theme: stateProps.settings.theme, setCurrency: dispatchProps.setCurrency, setWalletCurrencyFilters: dispatchProps.setWalletCurrencyFilters, @@ -135,11 +137,18 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({ disableSubMenu: dispatchProps.disableSubMenu, setFiatTicker: dispatchProps.setFiatTicker }, + localeProps: { locales: stateProps.locales, currentLocale: stateProps.currentLocale, disableSubMenu: dispatchProps.disableSubMenu, setLocale: dispatchProps.setLocale + }, + + themeProps: { + theme: stateProps.settings.theme, + setTheme: dispatchProps.setTheme, + disableSubMenu: dispatchProps.disableSubMenu } } } diff --git a/app/containers/App.js b/app/containers/App.js index 5572050f..ef6387e4 100644 --- a/app/containers/App.js +++ b/app/containers/App.js @@ -162,6 +162,8 @@ const mapStateToProps = state => ({ network: state.network, + settings: state.settings, + activityModalItem: activitySelectors.activityModalItem(state), currentTicker: tickerSelectors.currentTicker(state), diff --git a/app/containers/Root.js b/app/containers/Root.js index d3767c49..1ca82228 100644 --- a/app/containers/Root.js +++ b/app/containers/Root.js @@ -68,6 +68,7 @@ const mapStateToProps = state => ({ onboarding: state.onboarding, address: state.address, info: state.info, + theme: state.settings.theme, syncPercentage: lndSelectors.syncPercentage(state), passwordIsValid: onboardingSelectors.passwordIsValid(state), @@ -88,7 +89,8 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { lndCfilterHeight: stateProps.lnd.lndCfilterHeight, hasSynced: stateProps.info.hasSynced, syncPercentage: stateProps.syncPercentage, - address: stateProps.address.address + address: stateProps.address.address, + theme: stateProps.theme } const connectionTypeProps = { @@ -179,6 +181,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { const onboardingProps = { onboarding: stateProps.onboarding, + theme: stateProps.theme, changeStep: dispatchProps.changeStep, startLnd: dispatchProps.startLnd, submitNewWallet: dispatchProps.submitNewWallet, @@ -223,7 +226,7 @@ const Root = ({ history, lnd, onboardingProps, syncingProps }) => { // Don't launch the app without a connection to lnd. if (!lnd.lightningGrpcActive && !lnd.walletUnlockerGrpcActive) { - return + return } return ( diff --git a/app/icons/cloud_lightning.svg b/app/icons/cloud_lightning.svg new file mode 100644 index 00000000..32d154cc --- /dev/null +++ b/app/icons/cloud_lightning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/icons/zap_logo_black.svg b/app/icons/zap_logo_black.svg new file mode 100644 index 00000000..51a270ee --- /dev/null +++ b/app/icons/zap_logo_black.svg @@ -0,0 +1,16 @@ + + + + Group 5 + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/app/reducers/settings.js b/app/reducers/settings.js index 04a676f5..b67d4755 100644 --- a/app/reducers/settings.js +++ b/app/reducers/settings.js @@ -1,3 +1,7 @@ +import Store from 'electron-store' + +// Settings store +const store = new Store({ name: 'settings' }) // ------------------------------------ // Constants // ------------------------------------ @@ -5,6 +9,8 @@ export const SET_SETTINGS_OPEN = 'SET_SETTINGS_OPEN' export const SET_ACTIVE_SUBMENU = 'SET_ACTIVE_SUBMENU' export const DISABLE_SUBMENU = 'DISABLE_SUBMENU' +export const SET_THEME = 'SET_THEME' + // ------------------------------------ // Actions // ------------------------------------ @@ -28,13 +34,25 @@ export function disableSubMenu() { } } +export function setTheme(theme) { + // Persist the new fiatTicker in our ticker store + store.set('theme', theme) + + return { + type: SET_THEME, + theme + } +} + // ------------------------------------ // Action Handlers // ------------------------------------ const ACTION_HANDLERS = { [SET_SETTINGS_OPEN]: (state, { settingsOpen }) => ({ ...state, settingsOpen }), [SET_ACTIVE_SUBMENU]: (state, { activeSubMenu }) => ({ ...state, activeSubMenu }), - [DISABLE_SUBMENU]: state => ({ ...state, activeSubMenu: null }) + [DISABLE_SUBMENU]: state => ({ ...state, activeSubMenu: null }), + + [SET_THEME]: (state, { theme }) => ({ ...state, theme }) } // ------------------------------------ @@ -42,7 +60,8 @@ const ACTION_HANDLERS = { // ------------------------------------ const initialState = { settingsOpen: false, - activeSubMenu: null + activeSubMenu: null, + theme: store.get('theme', 'dark') } export default function settingsReducer(state = initialState, action) { diff --git a/app/styles/variables.scss b/app/styles/variables.scss index 510ef096..373b3685 100644 --- a/app/styles/variables.scss +++ b/app/styles/variables.scss @@ -1,5 +1,7 @@ $white: #fff; $black: #000; +$gray: #959595; +$invisibleGray: #555; $main: #ebb864; $secondary: #1d1d1d; @@ -22,3 +24,33 @@ $blue: #007bb6; $orange: #ff8a65; $yellow: #fff680; $curve: cubic-bezier(0.65, 0, 0.45, 1); + +:root { + --white: #fff; + --black: #000; + --gray: #959595; + --invisibleGray: #555; + --lightningOrange: #fd9800; + --superGreen: #39e673; + --superRed: #e63939; + --darkestBackground: #242633; + --lightBackground: #313340; + --lightestBackground: #373947; + --primaryText: #fff; + --gradient: linear-gradient(270deg, #868b9f 0%, #333c5e 100%); +} + +.light { + --white: #fff; + --black: #000; + --gray: #959595; + --invisibleGray: #555; + --lightningOrange: #fd9800; + --superGreen: #39e673; + --superRed: #e63939; + --darkestBackground: #fff; + --lightBackground: #ebebeb; + --lightestBackground: #f3f3f3; + --primaryText: #000; + --gradient: linear-gradient(270deg, #fd9800 0%, #ffbd59 100%); +} diff --git a/test/unit/reducers/__snapshots__/settings.spec.js.snap b/test/unit/reducers/__snapshots__/settings.spec.js.snap index 1006c724..2a8690e9 100644 --- a/test/unit/reducers/__snapshots__/settings.spec.js.snap +++ b/test/unit/reducers/__snapshots__/settings.spec.js.snap @@ -4,6 +4,7 @@ exports[`reducers settingsReducer should correctly disableSubmenu 1`] = ` Object { "activeSubMenu": null, "settingsOpen": false, + "theme": "dark", } `; @@ -11,6 +12,7 @@ exports[`reducers settingsReducer should correctly setActiveSubmenu 1`] = ` Object { "activeSubMenu": true, "settingsOpen": false, + "theme": "dark", } `; @@ -18,6 +20,7 @@ exports[`reducers settingsReducer should correctly setSettingsOpen 1`] = ` Object { "activeSubMenu": null, "settingsOpen": true, + "theme": "dark", } `; @@ -25,5 +28,6 @@ exports[`reducers settingsReducer should handle initial state 1`] = ` Object { "activeSubMenu": null, "settingsOpen": false, + "theme": "dark", } `;