diff --git a/.storybook/config.js b/.storybook/config.js index dbb67490..94bedc32 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -13,11 +13,11 @@ import { setIntlConfig, withIntl } from 'storybook-addon-intl' import StoryRouter from 'storybook-react-router' import { dark, light } from 'themes' import { getDefaultLocale, locales } from 'lib/i18n' -import { BackgroundDark, GlobalStyle } from 'components/UI' +import { BackgroundPrimary, GlobalStyle } from 'components/UI' -const BackgroundDarkWithTheme = withTheme(({ theme, ...rest }) => ( +const BackgroundPrimaryWithTheme = withTheme(({ theme, ...rest }) => (
- +
)) @@ -73,7 +73,7 @@ addDecorator( addDecorator(story => ( - {story()} + {story()} )) diff --git a/app/components/Activity/Activity.scss b/app/components/Activity/Activity.scss index c63646cc..e6630de2 100644 --- a/app/components/Activity/Activity.scss +++ b/app/components/Activity/Activity.scss @@ -3,7 +3,7 @@ .search { height: 55px; padding: 2px; - border-bottom: 1px solid $darkgrey; + border-bottom: 1px solid var(--tertiaryColor); .input { display: inline-block; @@ -31,14 +31,13 @@ } .activities { - background: var(--darkestBackground); + background: var(--primaryColor); .header { - background: var(--darkestBackground); + background: var(--primaryColor); color: var(--primaryText); margin: 0 auto; padding: 0 60px; - border-bottom: 1px solid $spaceborder; display: flex; flex-direction: row; justify-content: space-between; @@ -62,13 +61,13 @@ font-size: 20px; line-height: 24px; letter-spacing: 1px; - color: var(--primaryColor); + color: var(--primaryText); width: 100%; } .xIcon { cursor: pointer; - color: var(--white); + color: var(--primaryText); } } @@ -87,6 +86,10 @@ opacity: 1; } + &:hover { + opacity: 1; + } + &:nth-child(1) { margin-left: 0; } @@ -100,7 +103,7 @@ svg { width: 14px; height: 14px; - color: var(--primaryColor); + color: var(--primaryText); opacity: 0.5; cursor: pointer; transition: all 0.25s; @@ -151,31 +154,6 @@ border-bottom: 0.2px solid #a0a0a0; padding: 10px 0; } - - .left, - .center, - .right { - display: inline-block; - vertical-align: top; - } - - .center, - .right { - width: 10%; - } - - .left { - width: 80%; - color: $black; - } - - .center { - text-align: center; - } - - .right { - text-align: right; - } } .container { diff --git a/app/components/Activity/ActivityModal/ActivityModal.scss b/app/components/Activity/ActivityModal/ActivityModal.scss index 2b7dd213..f709a62c 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: var(--lightBackground); + background: var(--tertiaryColor); } .closeContainer { @@ -21,6 +21,6 @@ } svg { - color: $white; + color: var(--primaryText); } } diff --git a/app/components/Activity/Invoice/Invoice.js b/app/components/Activity/Invoice/Invoice.js index 5c96e24f..de66f2a6 100644 --- a/app/components/Activity/Invoice/Invoice.js +++ b/app/components/Activity/Invoice/Invoice.js @@ -44,9 +44,7 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyNa
diff --git a/app/components/Activity/InvoiceModal/InvoiceModal.scss b/app/components/Activity/InvoiceModal/InvoiceModal.scss index 1c55f963..d04c98b0 100644 --- a/app/components/Activity/InvoiceModal/InvoiceModal.scss +++ b/app/components/Activity/InvoiceModal/InvoiceModal.scss @@ -8,7 +8,7 @@ display: flex; flex-direction: row; align-items: center; - background: var(--darkestBackground); + background: var(--primaryColor); width: 85%; margin: 50px auto; padding: 30px 0; @@ -32,7 +32,7 @@ .right { width: 75%; min-height: 220px; - border-left: 1px solid $spaceborder; + border-left: 1px solid var(--highlight); padding: 10px 60px; .details { @@ -104,7 +104,7 @@ margin: 35px 10px; width: 235px; padding: 20px 10px; - background: var(--lightestBackground); + background: var(--secondaryColor); cursor: pointer; transition: 0.25s all; opacity: 0.75; diff --git a/app/components/Activity/PaymentModal/PaymentModal.scss b/app/components/Activity/PaymentModal/PaymentModal.scss index f104341d..a1c4b75e 100644 --- a/app/components/Activity/PaymentModal/PaymentModal.scss +++ b/app/components/Activity/PaymentModal/PaymentModal.scss @@ -5,7 +5,7 @@ font-size: 12px; width: 75%; margin: 0 auto; - background: var(--darkestBackground); + background: var(--primaryColor); } .header { @@ -69,7 +69,7 @@ } .footer { - background: var(--lightestBackground); + background: var(--secondaryColor); margin: 20px 0 50px 0; padding: 20px; text-align: center; diff --git a/app/components/Activity/Transaction/Transaction.js b/app/components/Activity/Transaction/Transaction.js index a36e9c01..4e7d60be 100644 --- a/app/components/Activity/Transaction/Transaction.js +++ b/app/components/Activity/Transaction/Transaction.js @@ -43,9 +43,7 @@ const Transaction = ({
diff --git a/app/components/Activity/Transaction/Transaction.scss b/app/components/Activity/Transaction/Transaction.scss index 48c2c947..e69de29b 100644 --- a/app/components/Activity/Transaction/Transaction.scss +++ b/app/components/Activity/Transaction/Transaction.scss @@ -1,89 +0,0 @@ -@import 'styles/variables.scss'; - -.container { - display: flex; - flex-direction: row; - cursor: pointer; - max-width: 960px; - margin: 0 auto; - height: 76px; - align-items: center; - border-bottom: 1px solid $grey; - font-size: 14px; - transition: background-color 0.1s linear; - transition-delay: 0.1s; - color: $darkestgrey; - position: relative; -} - -.icon { - display: block; - margin-right: 20px; - flex: none; - position: relative; - width: 36px; - height: 36px; - border: 1px solid $darkestgrey; - border-radius: 50%; - - svg { - color: $main; - font-size: 16px; - vertical-align: middle; - display: flex; - top: 0; - left: 50%; - height: 100%; - margin: 0 auto; - } -} - -.data { - display: flex; - flex-direction: row; - flex: 6 0; - - .title { - flex: 8 0; - } - - .subtitle { - padding-left: 20px; - flex: 2 0; - } -} - -.subtitle, -.date { - text-align: center; -} - -.date { - padding-left: 20px; - flex: 1 0; -} - -.amount { - flex: 1 0; - padding-left: 20px; - - &.positive { - color: $main; - } - - span { - display: block; - - &:nth-child(1) { - font-size: 14px; - } - - &:nth-child(2) { - font-size: 10px; - } - - .value { - font-size: 14px; - } - } -} diff --git a/app/components/Activity/TransactionModal/TransactionModal.scss b/app/components/Activity/TransactionModal/TransactionModal.scss index e04c5fe0..7504d9f3 100644 --- a/app/components/Activity/TransactionModal/TransactionModal.scss +++ b/app/components/Activity/TransactionModal/TransactionModal.scss @@ -5,7 +5,7 @@ font-size: 12px; width: 75%; margin: 0 auto; - background: var(--darkestBackground); + background: var(--primaryColor); } .header { @@ -78,7 +78,7 @@ } .footer { - background: var(--lightestBackground); + background: var(--secondaryColor); padding: 20px; text-align: center; diff --git a/app/components/App/App.scss b/app/components/App/App.scss index ce48d7a3..2464a29b 100644 --- a/app/components/App/App.scss +++ b/app/components/App/App.scss @@ -6,6 +6,6 @@ display: inline-block; vertical-align: top; overflow-y: auto; - background: var(--lightestBackground); + background: var(--secondaryColor); padding-top: 20px; } diff --git a/app/components/Contacts/AddChannel/AddChannel.scss b/app/components/Contacts/AddChannel/AddChannel.scss index be66f6f9..4de7c714 100644 --- a/app/components/Contacts/AddChannel/AddChannel.scss +++ b/app/components/Contacts/AddChannel/AddChannel.scss @@ -6,7 +6,7 @@ display: inline-block; vertical-align: top; height: 100vh; - background: var(--darkestBackground); + background: var(--primaryColor); } .header { @@ -15,13 +15,13 @@ justify-content: space-between; background: var(--gradient); padding: 15px 10px; - color: var(--white); + color: var(--primaryText); input { background: transparent; outline: 0; border: 0; - color: var(--white); + color: var(--primaryText); font-size: 14px; width: 90%; } @@ -42,7 +42,7 @@ } .nodes { - background: var(--lightestBackground); + background: var(--secondaryColor); .networkResults { overflow-y: auto; @@ -73,7 +73,7 @@ &:nth-child(2) { display: block; - color: $darkestgrey; + color: var(--gray); font-size: 8px; margin-top: 5px; } @@ -82,12 +82,12 @@ .connect { cursor: pointer; - color: $darkestgrey; + color: var(--gray); transition: all 0.25s; font-size: 10px; &:hover { - color: darken($darkestgrey, 10%); + opacity: 0.5; } } @@ -97,19 +97,20 @@ vertical-align: top; &.online { - color: $green; + color: var(--superGreen); } &.offline { - color: $darkestgrey; + color: var(--gray); } &.pending { - color: $orange; + color: var(--lightningOrange); } &.private { - color: darken($darkestgrey, 50%); + color: var(--gray); + opacity: 0.5; } } } @@ -117,7 +118,7 @@ } .manualForm { - color: $white; + color: var(--primaryText); text-align: center; margin: 0 25px; diff --git a/app/components/Contacts/ChannelForm/ChannelForm.scss b/app/components/Contacts/ChannelForm/ChannelForm.scss index b200d7ce..3a56d2ee 100644 --- a/app/components/Contacts/ChannelForm/ChannelForm.scss +++ b/app/components/Contacts/ChannelForm/ChannelForm.scss @@ -6,7 +6,7 @@ z-index: z('contact-form', 'modal'); height: 100vh; width: 100%; - background: var(--darkestBackground); + background: var(--primaryColor); } .closeContainer { diff --git a/app/components/Contacts/ConnectManually/ConnectManually.scss b/app/components/Contacts/ConnectManually/ConnectManually.scss index b1954315..0022f1d0 100644 --- a/app/components/Contacts/ConnectManually/ConnectManually.scss +++ b/app/components/Contacts/ConnectManually/ConnectManually.scss @@ -51,7 +51,7 @@ .header { text-align: center; padding-bottom: 20px; - border-bottom: 1px solid $spaceborder; + border-bottom: 1px solid var(--highlight); h1 { font-size: 22px; diff --git a/app/components/Contacts/Network/Network.js b/app/components/Contacts/Network/Network.js index 7275595a..9ab17fc5 100644 --- a/app/components/Contacts/Network/Network.js +++ b/app/components/Contacts/Network/Network.js @@ -7,7 +7,7 @@ import FaAngleDown from 'react-icons/lib/fa/angle-down' import { btc, blockExplorer } from 'lib/utils' import Plus from 'components/Icon/Plus' import Search from 'components/Icon/Search' -import { BackgroundLight, Text, Value } from 'components/UI' +import { BackgroundTertiary, Text, Value } from 'components/UI' import { FormattedNumber, FormattedMessage, injectIntl } from 'react-intl' import messages from './messages' @@ -164,7 +164,7 @@ class Network extends Component { ) const { refreshing } = this.state return ( - +

@@ -383,7 +383,7 @@ class Network extends Component { /> )} - + ) } } diff --git a/app/components/Contacts/Network/Network.scss b/app/components/Contacts/Network/Network.scss index 8099044d..a8a7b889 100644 --- a/app/components/Contacts/Network/Network.scss +++ b/app/components/Contacts/Network/Network.scss @@ -40,7 +40,7 @@ &:hover { svg { - background: var(--lightestBackground); + background: var(--secondaryColor); } } } @@ -65,7 +65,7 @@ transition: color 0.25s; &:hover { - color: $darkestgrey; + opacity: 0.5; } } @@ -89,7 +89,7 @@ color: var(--primaryText); &:hover { - color: $darkestgrey; + opacity: 0.5; } } } @@ -176,11 +176,11 @@ } .offline { - color: $darkestgrey; + color: var(--gray); } .closing { - color: var(--superRed); + color: var(--gray); } svg { @@ -195,7 +195,7 @@ bottom: 0; width: 100%; padding: 10px 20px; - border-top: 1px solid $darkestgrey; + border-top: 1px solid var(--gray); background: var(--darkBackground); .input { diff --git a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss index c633c72f..7cab825c 100644 --- a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss +++ b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss @@ -8,7 +8,7 @@ .header { padding: 20px 0; text-align: center; - border-bottom: 1px solid $spaceborder; + border-bottom: 1px solid var(--highlight); h1 { margin: 10px 0 15px 0; @@ -31,7 +31,7 @@ h2 { font-size: 10px; - background: var(--lightBackground); + background: var(--tertiaryColor); padding: 10px; border-radius: 17.5px; display: inline; diff --git a/app/components/Form/Form.scss b/app/components/Form/Form.scss index 8cf32338..7ec72ff6 100644 --- a/app/components/Form/Form.scss +++ b/app/components/Form/Form.scss @@ -6,7 +6,7 @@ z-index: z('form', 'container'); height: 100vh; width: 100%; - background: var(--lightestBackground); + background: var(--secondaryColor); } .closeContainer { diff --git a/app/components/LoadingBolt/LoadingBolt.scss b/app/components/LoadingBolt/LoadingBolt.scss index d1ddf19f..a0af1fd4 100644 --- a/app/components/LoadingBolt/LoadingBolt.scss +++ b/app/components/LoadingBolt/LoadingBolt.scss @@ -12,8 +12,8 @@ -45deg, rgba(255, 189, 89, 1) 10%, rgba(253, 152, 0, 1), - var(--lightestBackground), - var(--darkestBackground) + var(--secondaryColor), + var(--primaryColor) ); background-size: 400% 400%; animation: Gradient 15s ease infinite; diff --git a/app/components/Onboarding/FormContainer/FormContainer.scss b/app/components/Onboarding/FormContainer/FormContainer.scss index 06b8dd79..4607e98b 100644 --- a/app/components/Onboarding/FormContainer/FormContainer.scss +++ b/app/components/Onboarding/FormContainer/FormContainer.scss @@ -3,7 +3,7 @@ .container { position: relative; height: 100vh; - background: var(--lightBackground); + background: var(--tertiaryColor); } .header { @@ -44,7 +44,7 @@ .content { position: relative; - background: var(--darkestBackground); + background: var(--primaryColor); height: 100vh; padding: 20px 40px; } diff --git a/app/components/Onboarding/InitWallet/InitWallet.scss b/app/components/Onboarding/InitWallet/InitWallet.scss index 937d5456..e69de29b 100644 --- a/app/components/Onboarding/InitWallet/InitWallet.scss +++ b/app/components/Onboarding/InitWallet/InitWallet.scss @@ -1,63 +0,0 @@ -@import 'styles/variables.scss'; - -.container { - position: relative; -} - -.password { - background: transparent; - outline: none; - border: 1px solid #404040; - border-radius: 4px; - padding: 15px; - color: $gold; - -webkit-text-fill-color: $white; - font-size: 22px; -} - -.password::-webkit-input-placeholder { - text-shadow: none; - -webkit-text-fill-color: initial; -} - -.buttons { - margin-top: 15%; - text-align: center; - - div { - color: $white; - - &:nth-child(1) { - text-align: center; - margin-bottom: 40px; - - span { - padding: 15px 35px; - background: $darkspaceblue; - font-size: 14px; - opacity: 0.5; - transition: all 0.25s; - - &.active { - opacity: 1; - cursor: pointer; - - &:hover { - background: lighten($darkspaceblue, 10%); - } - } - } - } - - &:nth-child(2), - &:nth-child(3) { - font-size: 12px; - cursor: pointer; - margin: 10px 0; - - &:hover { - text-decoration: underline; - } - } - } -} diff --git a/app/components/Onboarding/Login/Login.scss b/app/components/Onboarding/Login/Login.scss index 03cd4748..a3383082 100644 --- a/app/components/Onboarding/Login/Login.scss +++ b/app/components/Onboarding/Login/Login.scss @@ -16,7 +16,7 @@ transition: all 0.25s; &.inputError { - border: 1px solid $red; + border: 1px solid var(--superRed); } } @@ -28,7 +28,7 @@ .error { margin-top: 20px; height: 20px; - color: $red; + color: var(--superRed); visibility: hidden; font-size: 12px; transition: all 0.25s; diff --git a/app/components/Onboarding/RecoverForm/RecoverForm.scss b/app/components/Onboarding/RecoverForm/RecoverForm.scss index 6dc42a4d..937722d6 100644 --- a/app/components/Onboarding/RecoverForm/RecoverForm.scss +++ b/app/components/Onboarding/RecoverForm/RecoverForm.scss @@ -31,7 +31,7 @@ .word { margin: 0 3px; - background-color: var(--darkestBackground); + background-color: var(--primaryText); outline: 0; border: none; padding: 8px 10px 6px 10px; diff --git a/app/components/Settings/Fiat/Fiat.scss b/app/components/Settings/Fiat/Fiat.scss index 0f94179d..c8f55fea 100644 --- a/app/components/Settings/Fiat/Fiat.scss +++ b/app/components/Settings/Fiat/Fiat.scss @@ -2,7 +2,7 @@ .submenuHeader { padding: 20px; - background: var(--darkestBackground); + background: var(--primaryColor); font-size: 10px; display: flex; flex-direction: row; @@ -20,13 +20,13 @@ overflow-y: scroll; li { - background: var(--lightestBackground); + background: var(--secondaryColor); cursor: pointer; opacity: 0.75; transition: 0.25s hover; &:hover { - background: var(--lightBackground); + background: var(--tertiaryColor); } &.active { @@ -35,7 +35,7 @@ svg { height: 10px; width: 10px; - color: $green; + color: var(--superGreen); } } diff --git a/app/components/Settings/Locale/Locale.scss b/app/components/Settings/Locale/Locale.scss index 6256dbd3..f59c8185 100644 --- a/app/components/Settings/Locale/Locale.scss +++ b/app/components/Settings/Locale/Locale.scss @@ -2,7 +2,7 @@ .submenuHeader { padding: 20px; - background: var(--darkestBackground); + background: var(--primaryColor); font-size: 10px; display: flex; flex-direction: row; @@ -20,13 +20,13 @@ overflow-y: scroll; li { - background: var(--lightestBackground); + background: var(--secondaryColor); cursor: pointer; opacity: 0.75; transition: 0.25s hover; &:hover { - background: var(--lightBackground); + background: var(--tertiaryColor); } &.active { diff --git a/app/components/Settings/Settings.scss b/app/components/Settings/Settings.scss index b4586edf..5b0a5f00 100644 --- a/app/components/Settings/Settings.scss +++ b/app/components/Settings/Settings.scss @@ -1,7 +1,7 @@ @import 'styles/variables.scss'; .container { - background: var(--lightestBackground); + background: var(--secondaryColor); position: absolute; width: 200px; top: 30px; @@ -18,7 +18,7 @@ transition: all 0.25s; &:hover { - background: var(--darkestBackground); + background: var(--primaryColor); } } } diff --git a/app/components/Settings/Theme/Theme.scss b/app/components/Settings/Theme/Theme.scss index 07909d24..85f7b884 100644 --- a/app/components/Settings/Theme/Theme.scss +++ b/app/components/Settings/Theme/Theme.scss @@ -2,7 +2,7 @@ .submenuHeader { padding: 20px; - background: var(--darkestBackground); + background: var(--primaryColor); font-size: 10px; display: flex; flex-direction: row; @@ -17,13 +17,13 @@ .themes { li { - background: var(--lightestBackground); + background: var(--secondaryColor); cursor: pointer; opacity: 0.75; transition: 0.25s hover; &:hover { - background: var(--lightBackground); + background: var(--tertiaryColor); } &.active { diff --git a/app/components/Syncing/Syncing.scss b/app/components/Syncing/Syncing.scss index 7c8d8809..c85a1845 100644 --- a/app/components/Syncing/Syncing.scss +++ b/app/components/Syncing/Syncing.scss @@ -4,13 +4,13 @@ position: relative; width: 100%; height: 100vh; - background: var(--darkestBackground); + background: var(--primaryColor); } .content { color: var(--primaryText); text-align: center; - background: var(--darkestBackground); + background: var(--primaryColor); header { text-align: left; @@ -37,7 +37,7 @@ } .address { - background: var(--darkestBackground); + background: var(--primaryColor); .textAddress { margin-top: 20px; @@ -46,12 +46,12 @@ font-size: 12px; &.text { - background: var(--lightBackground); + background: var(--tertiaryColor); padding: 10px; } &.icon { - background: var(--lightestBackground); + background: var(--secondaryColor); padding: 10px; cursor: pointer; transition: all 0.25s; @@ -81,7 +81,7 @@ color: var(--primaryText); text-align: center; padding: 40px 0; - background: var(--lightestBackground); + background: var(--secondaryColor); position: absolute; height: 31vh; width: 100%; @@ -97,7 +97,7 @@ margin: 0 auto; height: 10px; border-radius: 5px; - background: var(--darkestBackground); + background: var(--primaryColor); } .progress { diff --git a/app/components/UI/BackgroundDark.js b/app/components/UI/BackgroundDark.js deleted file mode 100644 index 44d6efdb..00000000 --- a/app/components/UI/BackgroundDark.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import { Box } from 'rebass' - -/** - * @render react - * @name BackgroundDark - * @example - * - */ -class BackgroundDark extends React.Component { - render() { - return - } -} - -export default BackgroundDark diff --git a/app/components/UI/BackgroundLight.js b/app/components/UI/BackgroundLight.js deleted file mode 100644 index 83b56593..00000000 --- a/app/components/UI/BackgroundLight.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import { Box } from 'rebass' - -/** - * @render react - * @name BackgroundLight - * @example - * - */ -class BackgroundLight extends React.Component { - render() { - return - } -} - -export default BackgroundLight diff --git a/app/components/UI/BackgroundLightest.js b/app/components/UI/BackgroundLightest.js deleted file mode 100644 index 9b8cda79..00000000 --- a/app/components/UI/BackgroundLightest.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import { Box } from 'rebass' - -/** - * @render react - * @name BackgroundLightest - * @example - * - */ -class BackgroundLightest extends React.Component { - render() { - return - } -} - -export default BackgroundLightest diff --git a/app/components/UI/BackgroundPrimary.js b/app/components/UI/BackgroundPrimary.js new file mode 100644 index 00000000..7893d0d0 --- /dev/null +++ b/app/components/UI/BackgroundPrimary.js @@ -0,0 +1,16 @@ +import React from 'react' +import { Box } from 'rebass' + +/** + * @render react + * @name BackgroundPrimary + * @example + * + */ +class BackgroundPrimary extends React.Component { + render() { + return + } +} + +export default BackgroundPrimary diff --git a/app/components/UI/BackgroundSecondary.js b/app/components/UI/BackgroundSecondary.js new file mode 100644 index 00000000..770e1c84 --- /dev/null +++ b/app/components/UI/BackgroundSecondary.js @@ -0,0 +1,16 @@ +import React from 'react' +import { Box } from 'rebass' + +/** + * @render react + * @name BackgroundSecondary + * @example + * + */ +class BackgroundSecondary extends React.Component { + render() { + return + } +} + +export default BackgroundSecondary diff --git a/app/components/UI/BackgroundTertiary.js b/app/components/UI/BackgroundTertiary.js new file mode 100644 index 00000000..34cd9fa5 --- /dev/null +++ b/app/components/UI/BackgroundTertiary.js @@ -0,0 +1,16 @@ +import React from 'react' +import { Box } from 'rebass' + +/** + * @render react + * @name BackgroundTertiary + * @example + * + */ +class BackgroundTertiary extends React.Component { + render() { + return + } +} + +export default BackgroundTertiary diff --git a/app/components/UI/Dropdown.js b/app/components/UI/Dropdown.js index 00f6ac86..0e50c3fd 100644 --- a/app/components/UI/Dropdown.js +++ b/app/components/UI/Dropdown.js @@ -62,7 +62,7 @@ Menu.defaultProps = { m: 0, mt: 1, p: 0, - bg: 'lightestBackground' + bg: 'secondaryColor' } /** @@ -71,7 +71,7 @@ Menu.defaultProps = { const MenuItem = styled(Box)` cursor: pointer; &:hover { - background-color: ${props => props.theme.colors.darkestBackground}; + background-color: ${props => props.theme.colors.primaryColor}; } ` MenuItem.defaultProps = { diff --git a/app/components/UI/GlobalStyle.js b/app/components/UI/GlobalStyle.js index 49ae7dd1..f8f74d3f 100644 --- a/app/components/UI/GlobalStyle.js +++ b/app/components/UI/GlobalStyle.js @@ -82,7 +82,7 @@ const GlobalStyle = createGlobalStyle` [data-hint]::after { content: attr(data-hint); - background: ${props => props.theme.colors.lightestBackground}; + background: ${props => props.theme.colors.secondaryColor}; color: ${props => props.theme.colors.primaryText}; border: 1px solid ${props => props.theme.colors.gray}; border-radius: 3px; diff --git a/app/components/UI/MainContent.js b/app/components/UI/MainContent.js index 4350c57f..ce2135ce 100644 --- a/app/components/UI/MainContent.js +++ b/app/components/UI/MainContent.js @@ -1,5 +1,5 @@ import React from 'react' -import { BackgroundDark } from 'components/UI' +import { BackgroundPrimary } from 'components/UI' /** * @render react @@ -8,7 +8,7 @@ import { BackgroundDark } from 'components/UI' * Some content */ const MainContent = props => ( - + ) export default MainContent diff --git a/app/components/UI/Modal.js b/app/components/UI/Modal.js index 15a8b35d..770eed1c 100644 --- a/app/components/UI/Modal.js +++ b/app/components/UI/Modal.js @@ -33,7 +33,7 @@ class Modal extends React.Component { const { hover } = this.state const { children, onClose } = this.props return ( - + ( (props.isOpen ? null : 'none')}; - background-color: ${props => props.theme.colors.lightestBackground}; + background-color: ${props => props.theme.colors.secondaryColor}; ` const SelectOptionItem = styled( @@ -28,7 +28,7 @@ const SelectOptionItem = styled( extend: Box, as: 'li', p: 3, - backgroundColor: 'lightestBackground' + backgroundColor: 'secondaryColor' }, 'space', 'color' diff --git a/app/components/UI/Sidebar.js b/app/components/UI/Sidebar.js index 29cd6c1f..ca6481d8 100644 --- a/app/components/UI/Sidebar.js +++ b/app/components/UI/Sidebar.js @@ -1,5 +1,5 @@ import React from 'react' -import { BackgroundLight } from 'components/UI' +import { BackgroundTertiary } from 'components/UI' /** * @render react @@ -7,7 +7,7 @@ import { BackgroundLight } from 'components/UI' * @example * Some content */ -const Sidebar = props => +const Sidebar = props => Sidebar.small = props => Sidebar.medium = props => diff --git a/app/components/UI/index.js b/app/components/UI/index.js index fcecd10b..95dc31cd 100644 --- a/app/components/UI/index.js +++ b/app/components/UI/index.js @@ -1,7 +1,7 @@ export AmountInput from './AmountInput' -export BackgroundDark from './BackgroundDark' -export BackgroundLight from './BackgroundLight' -export BackgroundLightest from './BackgroundLightest' +export BackgroundPrimary from './BackgroundPrimary' +export BackgroundTertiary from './BackgroundTertiary' +export BackgroundSecondary from './BackgroundSecondary' export Bar from './Bar' export Button from './Button' export Countdown from './Countdown' diff --git a/app/components/Wallet/ReceiveModal/ReceiveModal.scss b/app/components/Wallet/ReceiveModal/ReceiveModal.scss index 00d6bcb0..56640532 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: var(--darkestBackground); + background: var(--primaryColor); } .closeContainer { @@ -29,7 +29,7 @@ display: flex; flex-direction: row; align-items: center; - background: var(--lightBackground); + background: var(--tertiaryColor); width: 85%; margin: 10% auto 50px auto; color: var(--primaryText); @@ -101,7 +101,7 @@ flex-direction: row; align-items: center; font-size: 10px; - background: var(--lightestBackground); + background: var(--secondaryColor); .data, .copy { @@ -114,7 +114,7 @@ } .copy { - background: var(--darkestBackground); + background: var(--primaryColor); color: var(--primaryText); cursor: pointer; transition: all 0.25s; diff --git a/app/components/Wallet/Wallet.scss b/app/components/Wallet/Wallet.scss index 499b0172..481c9be6 100644 --- a/app/components/Wallet/Wallet.scss +++ b/app/components/Wallet/Wallet.scss @@ -1,7 +1,7 @@ @import 'styles/variables.scss'; .wallet { - background: var(--lightestBackground); + background: var(--secondaryColor); color: var(--primaryText); height: 200px; padding: 20px 40px; diff --git a/app/main.dev.js b/app/main.dev.js index 0993e44a..ad0ca0ae 100644 --- a/app/main.dev.js +++ b/app/main.dev.js @@ -118,7 +118,7 @@ app.on('ready', async () => { height: 600, minWidth: 950, minHeight: 425, - backgroundColor: get(theme, 'colors.darkestBackground', '#242633') + backgroundColor: get(theme, 'colors.primaryColor', '#242633') }) // Initialise the updater. diff --git a/app/styles/variables.scss b/app/styles/variables.scss index fc22f1b0..59f3af5f 100644 --- a/app/styles/variables.scss +++ b/app/styles/variables.scss @@ -1,42 +1,15 @@ -$white: #fff; -$black: #000; -$gray: #959595; -$invisibleGray: #555; - -$main: #ebb864; -$secondary: #1d1d1d; -$grey: #f2f2f2; -$traditionalgrey: #ccc; -$lightgrey: #f7f7f7; -$darkgrey: #ebebeb; -$darkestgrey: #999; -$bluegrey: #2a2d38; -$spacegrey: #222e2b; -$spaceblue: #252832; -$darkspaceblue: #1c1e26; -$spaceborder: #404040; - -$gold: #dea326; -$green: #0bb634; -$terminalgreen: #0f0; -$red: #ff556a; -$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; + --primaryColor: #242633; + --secondaryColor: #373947; + --tertiaryColor: #313340; --primaryText: #fff; + --highlight: #353745; --gradient: linear-gradient(270deg, #868b9f 0%, #333c5e 100%); } @@ -44,14 +17,14 @@ $curve: cubic-bezier(0.65, 0, 0.45, 1); --white: #fff; --black: #000; --gray: #959595; - --invisibleGray: #555; --lightningOrange: #fd9800; --superGreen: #39e673; --superRed: #e63939; - --darkestBackground: #fff; - --lightBackground: #ebebeb; - --lightestBackground: #f3f3f3; + --primaryColor: #fff; + --secondaryColor: #ebebeb; + --tertiaryColor: #f3f3f3; --primaryText: #000; + --highlight: #f2f2f2; --gradient: linear-gradient(270deg, #fd9800 0%, #ffbd59 100%); } diff --git a/app/themes/base.js b/app/themes/base.js index e856993b..b0967674 100644 --- a/app/themes/base.js +++ b/app/themes/base.js @@ -2,17 +2,21 @@ export const space = [0, 4, 8, 16, 32, 45, 72, 108] export const palette = { white: '#ffffff', - black: '#000', - gray: '#959595', + black: '#000000', lightningOrange: '#fd9800', lightningBrown: '#4a2c00', deepseaBlue: '#242633', seaBlue: '#313340', - underwaterBlue: '#353745', + hoverSeaBlue: '#353745', + underwaterBlue: '#373947', + seaGray: '#f3f3f3', + hoverSeaGray: '#f2f2f2', + underwaterGray: '#ebebeb', superGreen: '#39e673', pineGreen: '#0d331a', superRed: '#e63939', - mudBrown: '#330d0d' + mudBrown: '#330d0d', + gray: '#959595' } export const fontSizes = { diff --git a/app/themes/dark.js b/app/themes/dark.js index 3e62518a..0e771423 100644 --- a/app/themes/dark.js +++ b/app/themes/dark.js @@ -1,19 +1,38 @@ import base, { palette } from './base' +const { + white, + lightningOrange, + lightningBrown, + deepseaBlue, + seaBlue, + hoverSeaBlue, + underwaterBlue, + superGreen, + pineGreen, + superRed, + mudBrown, + gray +} = palette + const colors = { - ...palette, - invisibleGray: '#555', - darkestBackground: '#242633', - lightBackground: '#313340', - lightestBackground: '#373947', - highlight: '#353745', - primaryText: '#fff', - gradient: 'linear-gradient(270deg, #868b9f 0%, #333c5e 100%)' + primaryText: white, + lightningOrange, + lightningBrown, + superGreen, + pineGreen, + superRed, + mudBrown, + gray, + primaryColor: deepseaBlue, + secondaryColor: underwaterBlue, + tertiaryColor: seaBlue, + highlight: hoverSeaBlue } const buttons = { normal: { - backgroundColor: colors.lightBackground, + backgroundColor: colors.tertiaryColor, color: colors.lightningOrange, '&:hover:enabled': { backgroundColor: colors.highlight diff --git a/app/themes/light.js b/app/themes/light.js index 5706d09f..60d8a72e 100644 --- a/app/themes/light.js +++ b/app/themes/light.js @@ -1,19 +1,38 @@ import base, { palette } from './base' +const { + white, + black, + lightningOrange, + lightningBrown, + seaGray, + hoverSeaGray, + underwaterGray, + superGreen, + pineGreen, + superRed, + mudBrown, + gray +} = palette + const colors = { - ...palette, - invisibleGray: '#555', - darkestBackground: '#fff', - lightBackground: '#ebebeb', - lightestBackground: '#f3f3f3', - highlight: '#f6f6f6', - primaryText: '#000', - gradient: 'linear-gradient(270deg, #fd9800 0%, #ffbd59 100%)' + primaryText: black, + lightningOrange, + lightningBrown, + superGreen, + pineGreen, + superRed, + mudBrown, + gray, + primaryColor: white, + secondaryColor: underwaterGray, + tertiaryColor: seaGray, + highlight: hoverSeaGray } const buttons = { normal: { - backgroundColor: colors.lightBackground, + backgroundColor: colors.tertiaryColor, color: colors.lightningOrange, '&:hover:enabled': { backgroundColor: colors.highlight diff --git a/stories/color.stories.js b/stories/color.stories.js index c4e6cef7..e0d32bed 100644 --- a/stories/color.stories.js +++ b/stories/color.stories.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { storiesOf } from '@storybook/react' import { ThemeProvider, withTheme } from 'styled-components' import { Box, Card, Flex } from 'rebass' -import { BackgroundDark, Text } from 'components/UI' +import { BackgroundPrimary, Text } from 'components/UI' import { dark, light } from 'themes' import { Column, Group, Element } from './helpers' @@ -11,13 +11,16 @@ const Swatch = ({ name, color }) => ( {name} @@ -33,8 +36,8 @@ Swatch.propTypes = { const Palette = withTheme(({ theme, ...rest }) => ( - {Object.keys(theme.palette).map(key => ( - + {Object.keys(theme.colors).map(key => ( + ))} )) @@ -58,9 +61,9 @@ storiesOf('Welcome', module).addWithChapters('Color palette', { - + - + @@ -68,9 +71,9 @@ storiesOf('Welcome', module).addWithChapters('Color palette', { - + - + diff --git a/stories/components/background.stories.js b/stories/components/background.stories.js index 283e03dd..42c837e7 100644 --- a/stories/components/background.stories.js +++ b/stories/components/background.stories.js @@ -1,24 +1,24 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { BackgroundDark, BackgroundLight, BackgroundLightest } from 'components/UI' +import { BackgroundPrimary, BackgroundTertiary, BackgroundSecondary } from 'components/UI' storiesOf('Components.Background', module) .add('dark', () => ( - )) .add('light', () => ( - )) .add('lightest', () => ( - Submit - + 
{JSON.stringify(formState, null, 2)}
 diff --git a/stories/components/panel.stories.js b/stories/components/panel.stories.js index d7c6a935..06fe5796 100644 --- a/stories/components/panel.stories.js +++ b/stories/components/panel.stories.js @@ -4,8 +4,8 @@ import { Panel } from 'components/UI' storiesOf('Components.Panel', module).add('Panel', () => ( - Header here - Body here - Footer here + Header here + Body here + Footer here )) diff --git a/test/unit/components/UI/BackgroundDark.spec.js b/test/unit/components/UI/BackgroundDark.spec.js index fbc82e96..a6575da2 100644 --- a/test/unit/components/UI/BackgroundDark.spec.js +++ b/test/unit/components/UI/BackgroundDark.spec.js @@ -1,10 +1,10 @@ import React from 'react' import renderer from 'react-test-renderer' -import { BackgroundDark } from 'components/UI' +import { BackgroundPrimary } from 'components/UI' -describe('component.UI.BackgroundDark', () => { +describe('component.UI.BackgroundPrimary', () => { it('should render correctly', () => { - const tree = renderer.create().toJSON() + const tree = renderer.create().toJSON() expect(tree).toMatchSnapshot() }) }) diff --git a/test/unit/components/UI/BackgroundLight.spec.js b/test/unit/components/UI/BackgroundLight.spec.js index 02d54478..2e910037 100644 --- a/test/unit/components/UI/BackgroundLight.spec.js +++ b/test/unit/components/UI/BackgroundLight.spec.js @@ -1,10 +1,10 @@ import React from 'react' import renderer from 'react-test-renderer' -import { BackgroundLight } from 'components/UI' +import { BackgroundTertiary } from 'components/UI' -describe('component.UI.BackgroundLight', () => { +describe('component.UI.BackgroundTertiary', () => { it('should render correctly', () => { - const tree = renderer.create().toJSON() + const tree = renderer.create().toJSON() expect(tree).toMatchSnapshot() }) }) diff --git a/test/unit/components/UI/BackgroundLightest.spec.js b/test/unit/components/UI/BackgroundLightest.spec.js index 05cd111b..fd4d2d66 100644 --- a/test/unit/components/UI/BackgroundLightest.spec.js +++ b/test/unit/components/UI/BackgroundLightest.spec.js @@ -1,10 +1,10 @@ import React from 'react' import renderer from 'react-test-renderer' -import { BackgroundLightest } from 'components/UI' +import { BackgroundSecondary } from 'components/UI' -describe('component.UI.BackgroundLightest', () => { +describe('component.UI.BackgroundSecondary', () => { it('should render correctly', () => { - const tree = renderer.create().toJSON() + const tree = renderer.create().toJSON() expect(tree).toMatchSnapshot() }) }) diff --git a/test/unit/components/UI/BackgroundPrimary.spec.js b/test/unit/components/UI/BackgroundPrimary.spec.js new file mode 100644 index 00000000..a6575da2 --- /dev/null +++ b/test/unit/components/UI/BackgroundPrimary.spec.js @@ -0,0 +1,10 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import { BackgroundPrimary } from 'components/UI' + +describe('component.UI.BackgroundPrimary', () => { + it('should render correctly', () => { + const tree = renderer.create().toJSON() + expect(tree).toMatchSnapshot() + }) +}) diff --git a/test/unit/components/UI/__snapshots__/BackgroundDark.spec.js.snap b/test/unit/components/UI/__snapshots__/BackgroundDark.spec.js.snap index c78d0987..2597c8fa 100644 --- a/test/unit/components/UI/__snapshots__/BackgroundDark.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/BackgroundDark.spec.js.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`component.UI.BackgroundDark should render correctly 1`] = ` +exports[`component.UI.BackgroundPrimary should render correctly 1`] = ` .c0 { color: primaryText; - background-color: darkestBackground; + background-color: primaryColor; }
+`; diff --git a/test/unit/components/UI/__snapshots__/Input.spec.js.snap b/test/unit/components/UI/__snapshots__/Input.spec.js.snap index f167d832..46b07a3b 100644 --- a/test/unit/components/UI/__snapshots__/Input.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Input.spec.js.snap @@ -15,9 +15,9 @@ exports[`component.UI.Input should render correctly 1`] = ` padding: 16px; width: 100%; font-size: 13px; - color: #fff; + color: #ffffff; background-color: transparent; - color: #fff; + color: #ffffff; background-color: transparent; font-family: Roboto,system-ui,sans-serif; font-weight: 300; diff --git a/test/unit/components/UI/__snapshots__/LightningInvoiceInput.spec.js.snap b/test/unit/components/UI/__snapshots__/LightningInvoiceInput.spec.js.snap index 157c149f..6de45d8d 100644 --- a/test/unit/components/UI/__snapshots__/LightningInvoiceInput.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/LightningInvoiceInput.spec.js.snap @@ -15,9 +15,9 @@ exports[`component.UI.LightningInvoiceInput should render correctly 1`] = ` padding: 16px; width: 100%; font-size: 13px; - color: #fff; + color: #ffffff; background-color: transparent; - color: #fff; + color: #ffffff; background-color: transparent; font-family: Roboto,system-ui,sans-serif; font-weight: 300; diff --git a/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap b/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap index 80486793..83af9682 100644 --- a/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap @@ -5,7 +5,7 @@ exports[`component.UI.MainContent should render correctly 1`] = ` padding: 16px; width: 100%; color: primaryText; - background-color: darkestBackground; + background-color: primaryColor; height: 100%; } diff --git a/test/unit/components/UI/__snapshots__/Modal.spec.js.snap b/test/unit/components/UI/__snapshots__/Modal.spec.js.snap index d88fef06..ee2eadd0 100644 --- a/test/unit/components/UI/__snapshots__/Modal.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Modal.spec.js.snap @@ -19,7 +19,7 @@ exports[`component.UI.Modal should render correctly 1`] = ` .c0 { padding: 16px; width: 100%; - background-color: darkestBackground; + background-color: primaryColor; height: 100%; display: -webkit-box; display: -webkit-flex; diff --git a/test/unit/components/UI/__snapshots__/Page.spec.js.snap b/test/unit/components/UI/__snapshots__/Page.spec.js.snap index 6a4a96ae..bc31b94b 100644 --- a/test/unit/components/UI/__snapshots__/Page.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Page.spec.js.snap @@ -2,7 +2,7 @@ exports[`component.UI.Page should render correctly 1`] = ` .c0 { - background-color: darkestBackground; + background-color: primaryColor; height: 100%; min-width: 950px; min-height: 600px; diff --git a/test/unit/components/UI/__snapshots__/QRCode.spec.js.snap b/test/unit/components/UI/__snapshots__/QRCode.spec.js.snap index c9670239..027f0bc5 100644 --- a/test/unit/components/UI/__snapshots__/QRCode.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/QRCode.spec.js.snap @@ -107,7 +107,7 @@ exports[`component.UI.QRCode should render correctly 1`] = `
diff --git a/test/unit/components/UI/__snapshots__/Range.spec.js.snap b/test/unit/components/UI/__snapshots__/Range.spec.js.snap index 0080515e..324b9041 100644 --- a/test/unit/components/UI/__snapshots__/Range.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Range.spec.js.snap @@ -26,7 +26,7 @@ exports[`component.UI.Range should render correctly 1`] = ` appearance: none; height: 8px; cursor: ew-resize; - background: #fff; + background: #ffffff; box-shadow: -1000px 0 0 1000px orange; } diff --git a/test/unit/components/UI/__snapshots__/Select.spec.js.snap b/test/unit/components/UI/__snapshots__/Select.spec.js.snap index 8c400f03..8b9cce19 100644 --- a/test/unit/components/UI/__snapshots__/Select.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Select.spec.js.snap @@ -15,9 +15,9 @@ exports[`component.UI.Toggle should render correctly 1`] = ` padding: 16px; width: 100%; font-size: 13px; - color: #fff; + color: #ffffff; background-color: transparent; - color: #fff; + color: #ffffff; background-color: transparent; font-family: Roboto,system-ui,sans-serif; font-weight: 300; diff --git a/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap b/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap index da0519a5..ce194eb6 100644 --- a/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap @@ -5,7 +5,7 @@ exports[`component.UI.Sidebar should render correctly 1`] = ` padding: 16px; width: 33.33333333333333%; color: primaryText; - background-color: lightBackground; + background-color: tertiaryColor; }