From 0acd6bf66d9760a56afd30f66494cb0158b6a32c Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Sat, 20 Oct 2018 10:02:44 +0200 Subject: [PATCH] style(global): update general styles Use https://www.npmjs.com/package/styled-reset to apply css resets and move all global styles to the GlobalStyle component. Update general styles inline with design design work. --- .stylelintignore | 3 - .svgrrc | 5 +- app/app.html | 4 - app/components/Activity/Activity.js | 17 +- app/components/Activity/Activity.scss | 36 ++- .../Activity/Transaction/Transaction.scss | 5 - app/components/App/App.js | 10 +- app/components/App/App.scss | 2 +- .../Contacts/AddChannel/AddChannel.scss | 4 +- .../ConnectManually/ConnectManually.js | 2 +- .../ConnectManually/ConnectManually.scss | 3 +- app/components/Contacts/Network/Network.js | 10 +- app/components/Contacts/Network/Network.scss | 24 +- .../SubmitChannelForm/SubmitChannelForm.js | 2 +- .../SubmitChannelForm/SubmitChannelForm.scss | 3 +- app/components/Form/Pay/Pay.js | 3 +- app/components/Form/Request/Request.js | 2 +- app/components/Form/Request/Request.scss | 3 +- app/components/Icon/BigArrowLeft.js | 16 ++ app/components/Icon/BigArrowRight.js | 4 +- app/components/Icon/Close.js | 12 + app/components/Icon/Error.js | 13 + app/components/Icon/IconPlus.js | 2 +- app/components/Icon/Lightning.js | 22 ++ app/components/Icon/Onchain.js | 29 ++ app/components/Icon/Spinner.js | 21 ++ app/components/Icon/Success.js | 21 ++ app/components/Icon/SystemError.js | 6 - app/components/Icon/SystemSuccess.js | 6 - .../Icon/{SystemWarning.js => Warning.js} | 0 app/components/Icon/X.js | 25 +- .../ConnectionConfirm/ConnectionConfirm.js | 8 +- .../ConnectionConfirm/ConnectionConfirm.scss | 8 +- .../ConnectionType/ConnectionType.scss | 2 +- .../Onboarding/FormContainer/FormContainer.js | 2 +- app/components/Onboarding/Login/Login.js | 3 +- app/components/Onboarding/Signup/Signup.scss | 1 - app/components/UI/BackgroundDark.js | 2 +- app/components/UI/BackgroundLight.js | 2 +- app/components/UI/BackgroundLightest.js | 2 +- app/components/UI/Bar.js | 14 +- app/components/UI/Button.js | 39 ++- app/components/UI/Dropdown.js | 23 +- app/components/UI/FormFieldMessage.js | 22 +- app/components/UI/GlobalStyle.js | 251 ++++++++++++++++++ app/components/UI/Heading.js | 11 +- app/components/UI/MenuItemGroup.js | 2 +- app/components/UI/Modal.js | 44 ++- app/components/UI/Notification.js | 26 +- app/components/UI/Page.js | 21 +- app/components/UI/Range.js | 2 +- app/components/UI/Select.js | 2 +- app/components/UI/Sidebar.js | 6 +- app/components/UI/Spinner.js | 32 ++- app/components/UI/Text.js | 2 +- app/components/Value/Value.js | 13 +- .../Wallet/ReceiveModal/ReceiveModal.scss | 1 - app/components/Wallet/Wallet.js | 64 ++--- app/components/Wallet/Wallet.scss | 4 +- app/containers/App.js | 3 +- app/containers/Root.js | 15 +- app/icons/big-arrow-left.svg | 5 + app/icons/big-arrow-right.svg | 6 +- app/icons/close.svg | 6 + app/icons/error.svg | 3 + app/icons/lightning.svg | 12 + app/icons/onchain.svg | 13 + app/icons/spinner.svg | 6 + app/icons/success.svg | 6 + app/icons/x.svg | 7 +- app/reducers/lnd.js | 2 - app/styles/animated_checkmark.scss | 52 ---- app/styles/app.global.scss | 97 ------- app/styles/keyframes.scss | 47 ---- app/styles/reset.scss | 48 ---- app/styles/tooltip.scss | 162 ----------- app/themes/base.js | 11 +- app/themes/dark.js | 7 +- app/themes/light.js | 7 +- internals/webpack/webpack.config.base.js | 34 +++ .../webpack.config.renderer.dev.dll.js | 69 ----- .../webpack/webpack.config.renderer.dev.js | 72 +---- .../webpack/webpack.config.renderer.prod.js | 78 +----- package.json | 1 + stories/components/button.stories.js | 11 +- stories/components/form.stories.js | 2 +- stories/components/icon.stories.js | 74 +++--- stories/components/modal.stories.js | 21 +- test/unit/components/UI/Notification.spec.js | 12 +- .../__snapshots__/BackgroundDark.spec.js.snap | 4 +- .../BackgroundLight.spec.js.snap | 4 +- .../BackgroundLightest.spec.js.snap | 4 +- .../UI/__snapshots__/Bar.spec.js.snap | 7 +- .../UI/__snapshots__/Button.spec.js.snap | 16 +- .../UI/__snapshots__/Dropdown.spec.js.snap | 8 +- .../UI/__snapshots__/Heading.spec.js.snap | 7 +- .../UI/__snapshots__/Input.spec.js.snap | 4 +- .../LightningInvoiceInput.spec.js.snap | 4 +- .../UI/__snapshots__/MainContent.spec.js.snap | 4 +- .../UI/__snapshots__/Menu.spec.js.snap | 2 +- .../UI/__snapshots__/Modal.spec.js.snap | 71 +++-- .../__snapshots__/Notification.spec.js.snap | 91 ++++--- .../UI/__snapshots__/Page.spec.js.snap | 4 +- .../UI/__snapshots__/Range.spec.js.snap | 2 +- .../UI/__snapshots__/Select.spec.js.snap | 4 +- .../UI/__snapshots__/Sidebar.spec.js.snap | 7 +- .../UI/__snapshots__/Spinner.spec.js.snap | 32 ++- .../UI/__snapshots__/Text.spec.js.snap | 3 + .../UI/__snapshots__/TextArea.spec.js.snap | 4 +- yarn.lock | 5 + 110 files changed, 1029 insertions(+), 1071 deletions(-) create mode 100644 app/components/Icon/BigArrowLeft.js create mode 100644 app/components/Icon/Close.js create mode 100644 app/components/Icon/Error.js create mode 100644 app/components/Icon/Lightning.js create mode 100644 app/components/Icon/Onchain.js create mode 100644 app/components/Icon/Spinner.js create mode 100644 app/components/Icon/Success.js delete mode 100644 app/components/Icon/SystemError.js delete mode 100644 app/components/Icon/SystemSuccess.js rename app/components/Icon/{SystemWarning.js => Warning.js} (100%) create mode 100644 app/icons/big-arrow-left.svg create mode 100644 app/icons/close.svg create mode 100644 app/icons/error.svg create mode 100644 app/icons/lightning.svg create mode 100644 app/icons/onchain.svg create mode 100644 app/icons/spinner.svg create mode 100644 app/icons/success.svg delete mode 100644 app/styles/animated_checkmark.scss delete mode 100644 app/styles/keyframes.scss delete mode 100644 app/styles/reset.scss delete mode 100644 app/styles/tooltip.scss diff --git a/.stylelintignore b/.stylelintignore index 76439d4b..1d7f56e2 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1,5 +1,2 @@ -# Style reset -app/styles/reset.scss - # Storybook storybook-static diff --git a/.svgrrc b/.svgrrc index 6e941549..bd73f1e9 100644 --- a/.svgrrc +++ b/.svgrrc @@ -1,9 +1,10 @@ { "icon": true, "replaceAttrValues": { - "#FD9800": "currentColor", "#FFF": "currentColor", "#F5A623": "currentColor", - "#010002": "currentColor" + "#010002": "currentColor", + "#E63939": "currentColor", + "#39E673": "currentColor" } } diff --git a/app/app.html b/app/app.html index f5857c9f..99c84c9c 100644 --- a/app/app.html +++ b/app/app.html @@ -4,10 +4,6 @@ Zap - - - -
diff --git a/app/components/Activity/Activity.js b/app/components/Activity/Activity.js index f1eac664..0ba20558 100644 --- a/app/components/Activity/Activity.js +++ b/app/components/Activity/Activity.js @@ -6,7 +6,7 @@ import FaRepeat from 'react-icons/lib/fa/repeat' import { FormattedMessage, injectIntl } from 'react-intl' import { Flex } from 'rebass' -import { Button } from 'components/UI' +import { Button, Text } from 'components/UI' import Wallet from 'components/Wallet' import Invoice from './Invoice' import Payment from './Payment' @@ -175,8 +175,9 @@ class Activity extends Component { className={f.key === filter.key ? styles.activeFilter : undefined} onClick={() => changeFilter(f)} > - - + + +
))} @@ -191,7 +192,13 @@ class Activity extends Component { this.repeat = ref }} > - {refreshing ? : } + {refreshing ? ( + + ) : ( + + + + )}
  • updateSearchActive(true)}> @@ -219,7 +226,7 @@ class Activity extends Component { {showExpiredToggle && currentActivity.length > 0 && ( - diff --git a/app/components/Contacts/ConnectManually/ConnectManually.scss b/app/components/Contacts/ConnectManually/ConnectManually.scss index 938c9f2c..b1954315 100644 --- a/app/components/Contacts/ConnectManually/ConnectManually.scss +++ b/app/components/Contacts/ConnectManually/ConnectManually.scss @@ -55,7 +55,7 @@ h1 { font-size: 22px; - font-weight: 100; + font-weight: 300; margin-top: 10px; letter-spacing: 1.5px; } @@ -75,7 +75,6 @@ color: var(--lightningOrange); -webkit-text-fill-color: var(--primaryText); width: 100%; - font-weight: 200; } } diff --git a/app/components/Contacts/Network/Network.js b/app/components/Contacts/Network/Network.js index f4cddf7e..409706b8 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 } from 'components/UI' import Value from 'components/Value' import { FormattedNumber, FormattedMessage, injectIntl } from 'react-intl' @@ -165,7 +165,7 @@ class Network extends Component { ) const { refreshing } = this.state return ( -
    +

    @@ -200,9 +200,9 @@ class Network extends Component { onClick={openContactsForm} data-hint={intl.formatMessage({ ...messages.open_channel })} > - + - +

    @@ -384,7 +384,7 @@ class Network extends Component { /> )} -
    + ) } } diff --git a/app/components/Contacts/Network/Network.scss b/app/components/Contacts/Network/Network.scss index b8f25921..8099044d 100644 --- a/app/components/Contacts/Network/Network.scss +++ b/app/components/Contacts/Network/Network.scss @@ -6,7 +6,6 @@ display: inline-block; vertical-align: top; height: 100vh; - background: var(--lightestBackground); padding-top: 20px; } @@ -14,13 +13,12 @@ display: flex; flex-direction: row; justify-content: space-between; - background: var(--lightestBackground); padding: 10px 20px; color: var(--primaryText); h2 { font-size: 14px; - font-weight: bold; + font-weight: 400; letter-spacing: 1.2px; margin-bottom: 5px; } @@ -33,16 +31,16 @@ .addChannel { cursor: pointer; transition: all 0.25s; + width: 120px; + text-align: right; svg { border-radius: 5px; } &:hover { - opacity: 0.5; - svg { - background: #272931; + background: var(--lightestBackground); } } } @@ -100,7 +98,6 @@ span { color: var(--primaryText); opacity: 1; - font-size: 10px; cursor: pointer; transition: all 0.25s; @@ -112,7 +109,7 @@ ul { margin-top: 20px; - height: calc(100vh - 200px); + height: calc(100vh - 208px); overflow-y: auto; overflow-x: hidden; } @@ -128,11 +125,11 @@ cursor: pointer; &:hover { - background: var(--lightBackground); + background: var(--darkBackground); } &.selectedChannel { - background: var(--lightBackground); + background: var(--darkBackground); padding-bottom: 0; .channelDetails { @@ -154,7 +151,6 @@ &:nth-child(2) { margin-left: 10px; font-size: 12px; - font-weight: 300; letter-spacing: 0.6px; line-height: 17px; } @@ -196,11 +192,11 @@ .search { position: absolute; - bottom: 20px; - width: calc(100% - 40px); + bottom: 0; + width: 100%; padding: 10px 20px; border-top: 1px solid $darkestgrey; - background: var(--lightestBackground); + background: var(--darkBackground); .input { display: inline-block; diff --git a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js index a3bc7da4..022dbd16 100644 --- a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js +++ b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js @@ -132,7 +132,7 @@ class SubmitChannelForm extends React.Component {
    -
    diff --git a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss index 3b4faadc..c633c72f 100644 --- a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss +++ b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss @@ -13,7 +13,7 @@ h1 { margin: 10px 0 15px 0; font-size: 22px; - font-weight: 100; + font-weight: 300; letter-spacing: 1.5px; } @@ -80,7 +80,6 @@ color: var(--lightningOrange); -webkit-text-fill-color: var(--primaryText); width: 100%; - font-weight: 200; } } diff --git a/app/components/Form/Pay/Pay.js b/app/components/Form/Pay/Pay.js index cf3013b6..0f7779f1 100644 --- a/app/components/Form/Pay/Pay.js +++ b/app/components/Form/Pay/Pay.js @@ -7,7 +7,6 @@ import AmountInput from 'components/AmountInput' import { Button, Dropdown } from 'components/UI' import { FormattedNumber, FormattedMessage, injectIntl } from 'react-intl' import messages from './messages' - import styles from './Pay.scss' class Pay extends Component { @@ -177,7 +176,7 @@ class Pay extends Component {
    -
    diff --git a/app/components/Form/Request/Request.js b/app/components/Form/Request/Request.js index 93501d7a..9e1c612d 100644 --- a/app/components/Form/Request/Request.js +++ b/app/components/Form/Request/Request.js @@ -85,7 +85,7 @@ const Request = ({
    -
    diff --git a/app/components/Form/Request/Request.scss b/app/components/Form/Request/Request.scss index 4d6ad25e..f579b3f8 100644 --- a/app/components/Form/Request/Request.scss +++ b/app/components/Form/Request/Request.scss @@ -13,7 +13,7 @@ h1 { font-size: 22px; - font-weight: 100; + font-weight: 300; margin-top: 10px; letter-spacing: 1.5px; } @@ -66,7 +66,6 @@ -webkit-text-fill-color: var(--primaryText); font-size: 20px; width: 100%; - font-weight: 200; padding: 15px; } diff --git a/app/components/Icon/BigArrowLeft.js b/app/components/Icon/BigArrowLeft.js new file mode 100644 index 00000000..d1a73661 --- /dev/null +++ b/app/components/Icon/BigArrowLeft.js @@ -0,0 +1,16 @@ +import React from 'react' + +const SvgBigArrowLeft = props => ( + + + +) + +export default SvgBigArrowLeft diff --git a/app/components/Icon/BigArrowRight.js b/app/components/Icon/BigArrowRight.js index bde1bc40..cf313333 100644 --- a/app/components/Icon/BigArrowRight.js +++ b/app/components/Icon/BigArrowRight.js @@ -1,9 +1,9 @@ import React from 'react' const SvgBigArrowRight = props => ( - + ( + + + + + + +) + +export default SvgClose diff --git a/app/components/Icon/Error.js b/app/components/Icon/Error.js new file mode 100644 index 00000000..6e0c8d70 --- /dev/null +++ b/app/components/Icon/Error.js @@ -0,0 +1,13 @@ +import React from 'react' + +const SvgError = props => ( + + + +) + +export default SvgError diff --git a/app/components/Icon/IconPlus.js b/app/components/Icon/IconPlus.js index 2fee840c..b2121ad5 100644 --- a/app/components/Icon/IconPlus.js +++ b/app/components/Icon/IconPlus.js @@ -2,7 +2,7 @@ import React from 'react' const SvgIconPlus = props => ( - + diff --git a/app/components/Icon/Lightning.js b/app/components/Icon/Lightning.js new file mode 100644 index 00000000..03955321 --- /dev/null +++ b/app/components/Icon/Lightning.js @@ -0,0 +1,22 @@ +import React from 'react' + +const SvgLightning = props => ( + + + + + + + + + + + + +) + +export default SvgLightning diff --git a/app/components/Icon/Onchain.js b/app/components/Icon/Onchain.js new file mode 100644 index 00000000..4d610afc --- /dev/null +++ b/app/components/Icon/Onchain.js @@ -0,0 +1,29 @@ +import React from 'react' + +const SvgOnchain = props => ( + + + + + + + + + + + + + +) + +export default SvgOnchain diff --git a/app/components/Icon/Spinner.js b/app/components/Icon/Spinner.js new file mode 100644 index 00000000..a9d72be1 --- /dev/null +++ b/app/components/Icon/Spinner.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgSpinner = props => ( + + + + + + +) + +export default SvgSpinner diff --git a/app/components/Icon/Success.js b/app/components/Icon/Success.js new file mode 100644 index 00000000..73bf86ce --- /dev/null +++ b/app/components/Icon/Success.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgSuccess = props => ( + + + + + + +) + +export default SvgSuccess diff --git a/app/components/Icon/SystemError.js b/app/components/Icon/SystemError.js deleted file mode 100644 index 964caec9..00000000 --- a/app/components/Icon/SystemError.js +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react' -import FaTimesCircle from 'react-icons/lib/fa/times-circle' - -const SystemIcon = props => - -export default SystemIcon diff --git a/app/components/Icon/SystemSuccess.js b/app/components/Icon/SystemSuccess.js deleted file mode 100644 index 11a8f153..00000000 --- a/app/components/Icon/SystemSuccess.js +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react' -import FaCheckCircle from 'react-icons/lib/fa/check-circle' - -const SystemIcon = props => - -export default SystemIcon diff --git a/app/components/Icon/SystemWarning.js b/app/components/Icon/Warning.js similarity index 100% rename from app/components/Icon/SystemWarning.js rename to app/components/Icon/Warning.js diff --git a/app/components/Icon/X.js b/app/components/Icon/X.js index 2d32ce85..0259171d 100644 --- a/app/components/Icon/X.js +++ b/app/components/Icon/X.js @@ -2,18 +2,27 @@ import React from 'react' const SvgX = props => ( - + + + + ) diff --git a/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.js b/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.js index 5044a7a9..fd5547f1 100644 --- a/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.js +++ b/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.js @@ -6,14 +6,12 @@ import styles from './ConnectionConfirm.scss' const ConnectionConfirm = ({ connectionHost }) => (
    -

    +

    {' '} {connectionHost.split(':')[0]}?{' '} -

    +

    - - - +

    ) diff --git a/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss b/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss index 6451548d..8884545d 100644 --- a/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss +++ b/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss @@ -3,12 +3,10 @@ .container { color: var(--primaryText); - p { + h2 { + font-size: 16px; margin-bottom: 20px; - } - - strong { - font-weight: bold; + font-weight: 300; } .host { diff --git a/app/components/Onboarding/ConnectionType/ConnectionType.scss b/app/components/Onboarding/ConnectionType/ConnectionType.scss index d0a2c98d..cad6b1d1 100644 --- a/app/components/Onboarding/ConnectionType/ConnectionType.scss +++ b/app/components/Onboarding/ConnectionType/ConnectionType.scss @@ -7,8 +7,8 @@ margin: 0; display: flex; align-items: center; - font-weight: 200; line-height: 20px; + font-size: 16px; .description { width: 80%; diff --git a/app/components/Onboarding/FormContainer/FormContainer.js b/app/components/Onboarding/FormContainer/FormContainer.js index f37c672f..baf89a95 100644 --- a/app/components/Onboarding/FormContainer/FormContainer.js +++ b/app/components/Onboarding/FormContainer/FormContainer.js @@ -6,7 +6,7 @@ import FaAngleLeft from 'react-icons/lib/fa/angle-left' import FaAngleRight from 'react-icons/lib/fa/angle-right' import ZapLogo from 'components/Icon/ZapLogo' import ZapLogoBlack from 'components/Icon/ZapLogoBlack' -import { Button } from 'components/UI' +import Button from 'components/UI/Button' import messages from './messages' import styles from './FormContainer.scss' diff --git a/app/components/Onboarding/Login/Login.js b/app/components/Onboarding/Login/Login.js index db1c13b6..8e343956 100644 --- a/app/components/Onboarding/Login/Login.js +++ b/app/components/Onboarding/Login/Login.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { FormattedMessage, injectIntl } from 'react-intl' -import { Button } from 'components/UI' +import Button from 'components/UI/Button' import messages from './messages' import styles from './Login.scss' @@ -37,7 +37,6 @@ const Login = ({ disabled={!passwordIsValid || unlockingWallet} onClick={() => unlockWallet(password)} processing={unlockingWallet} - size="large" > {unlockingWallet ? ( diff --git a/app/components/Onboarding/Signup/Signup.scss b/app/components/Onboarding/Signup/Signup.scss index b192d6be..af0126db 100644 --- a/app/components/Onboarding/Signup/Signup.scss +++ b/app/components/Onboarding/Signup/Signup.scss @@ -40,7 +40,6 @@ padding: 20px; border: 1px solid var(--primaryText); border-radius: 5px; - font-weight: 200; cursor: pointer; transition: all 0.25s; } diff --git a/app/components/UI/BackgroundDark.js b/app/components/UI/BackgroundDark.js index 0c36ff7f..44d6efdb 100644 --- a/app/components/UI/BackgroundDark.js +++ b/app/components/UI/BackgroundDark.js @@ -9,7 +9,7 @@ import { Box } from 'rebass' */ class BackgroundDark extends React.Component { render() { - return + return } } diff --git a/app/components/UI/BackgroundLight.js b/app/components/UI/BackgroundLight.js index 52183212..83b56593 100644 --- a/app/components/UI/BackgroundLight.js +++ b/app/components/UI/BackgroundLight.js @@ -9,7 +9,7 @@ import { Box } from 'rebass' */ class BackgroundLight extends React.Component { render() { - return + return } } diff --git a/app/components/UI/BackgroundLightest.js b/app/components/UI/BackgroundLightest.js index d3181678..9b8cda79 100644 --- a/app/components/UI/BackgroundLightest.js +++ b/app/components/UI/BackgroundLightest.js @@ -9,7 +9,7 @@ import { Box } from 'rebass' */ class BackgroundLightest extends React.Component { render() { - return + return } } diff --git a/app/components/UI/Bar.js b/app/components/UI/Bar.js index 4997e36b..200f0261 100644 --- a/app/components/UI/Bar.js +++ b/app/components/UI/Bar.js @@ -1,5 +1,5 @@ import React from 'react' -import { Box } from 'rebass' +import { Card } from 'rebass' /** * @render react @@ -9,7 +9,17 @@ import { Box } from 'rebass' */ class Bar extends React.PureComponent { render() { - return + return ( + + ) } } diff --git a/app/components/UI/Button.js b/app/components/UI/Button.js index 97214bdd..b8148896 100644 --- a/app/components/UI/Button.js +++ b/app/components/UI/Button.js @@ -8,7 +8,7 @@ const Wrapper = styled(BaseButton)` transition: all 0.25s; outline: none; border-radius: 5; - font-weight: normal; + font-weight: 300; line-height: '18px'; &:disabled { opacity: 0.5; @@ -34,43 +34,38 @@ class Button extends React.PureComponent { } static propTypes = { processing: PropTypes.bool, - size: PropTypes.oneOf(['small', 'medium', 'large']), + size: PropTypes.oneOf(['small', 'medium']), variant: PropTypes.string } render() { - const { children, processing, size, ...rest } = this.props + let { children, processing, size, ...rest } = this.props const sizes = { small: { x: 3, - y: 2, - fontSize: 's' + y: 2 }, medium: { - x: 3, - y: 2, - fontSize: 'm' - }, - large: { x: 5, - y: 3, - fontSize: 'l' + y: 3 } } + + size = sizes[size] || sizes['medium'] + return ( - + {processing ? ( - - {processing && } - {children} + + {processing && } + + {children} + ) : ( - {children} + + {children} + )} ) diff --git a/app/components/UI/Dropdown.js b/app/components/UI/Dropdown.js index 65070f89..c1862a8e 100644 --- a/app/components/UI/Dropdown.js +++ b/app/components/UI/Dropdown.js @@ -35,8 +35,7 @@ const DropdownButton = styled(Box)({ DropdownButton.defaultProps = { as: 'button', m: 0, - px: 0, - py: 2, + p: 0, textAlign: 'left' } @@ -60,6 +59,7 @@ const Menu = styled(Box)({ Menu.defaultProps = { as: 'ul', m: 0, + mt: 1, p: 0, bg: 'lightestBackground' } @@ -99,12 +99,7 @@ class Dropdown extends React.Component { static propTypes = { activeKey: PropTypes.string.isRequired, - items: PropTypes.arrayOf( - PropTypes.shape({ - key: PropTypes.string.isRequired, - name: PropTypes.string.isRequired - }) - ).isRequired, + items: PropTypes.array.isRequired, onChange: PropTypes.func } @@ -143,7 +138,17 @@ class Dropdown extends React.Component { render() { const { isOpen } = this.state - const { activeKey, items, theme, ...rest } = this.props + let { activeKey, items, theme, ...rest } = this.props + // coerce array of strings into array of objects. + items = items.map(item => { + if (typeof item === 'string') { + return { + name: item, + key: item + } + } + return item + }) const selectedItem = items.find(c => c.key === activeKey) return ( diff --git a/app/components/UI/FormFieldMessage.js b/app/components/UI/FormFieldMessage.js index abdc21d0..bf54da4e 100644 --- a/app/components/UI/FormFieldMessage.js +++ b/app/components/UI/FormFieldMessage.js @@ -1,9 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' -import { Box, Flex } from 'rebass' -import SystemSuccess from 'components/Icon/SystemSuccess' -import SystemWarning from 'components/Icon/SystemWarning' -import SystemError from 'components/Icon/SystemError' +import { Box, Flex, Text } from 'rebass' +import Success from 'components/Icon/Success' +import Warning from 'components/Icon/Warning' +import Error from 'components/Icon/Error' import styled from 'styled-components' import { variant } from 'styled-system' @@ -26,15 +26,17 @@ class FormFieldMessage extends React.Component { } render() { - const { children, variant } = this.props + const { children, variant, ...rest } = this.props return ( - + - {variant === 'success' && } - {variant === 'warning' && } - {variant === 'error' && } + {variant === 'success' && } + {variant === 'warning' && } + {variant === 'error' && } - {children} + + {children} + ) } diff --git a/app/components/UI/GlobalStyle.js b/app/components/UI/GlobalStyle.js index e38da917..1a2f9dca 100644 --- a/app/components/UI/GlobalStyle.js +++ b/app/components/UI/GlobalStyle.js @@ -1,20 +1,271 @@ import { createGlobalStyle } from 'styled-components' +import reset from 'styled-reset' +/* eslint-disable max-len */ const GlobalStyle = createGlobalStyle` + /* stylelint-disable font-family-no-missing-generic-family-keyword */ + ${reset} + + @font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + } + @font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + } + html { box-sizing: border-box; } + *, *:before, *:after { box-sizing: inherit; } + body { position: relative; overflow-y: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); font-family: 'Roboto', Arial, Helvetica, sans-serif; + font-weight: 300; font-size: 13px; } + + .element-show { + display: inherit; + } + + .element-hide { + display: none; + } + + /* + *Tooltips + */ + [data-hint] { + position: relative; + } + + [data-hint]::before, + [data-hint]::after { + position: absolute; + will-change: transform; + visibility: hidden; + opacity: 0; + z-index: 999; + pointer-events: none; + transition: 0.2s ease; + transition-delay: 0ms; + } + + [data-hint]::before { + content: ''; + position: absolute; + background: transparent; + border: 6px solid transparent; + z-index: 999; + } + + [data-hint]::after { + content: attr(data-hint); + background: ${props => props.theme.colors.lightestBackground}; + color: ${props => props.theme.colors.primaryText}; + border: 1px solid ${props => props.theme.colors.gray}; + border-radius: 3px; + max-width: 260px; + line-height: 1.4; + padding: 6px 10px; + word-wrap: break-word; + box-shadow: 0 3px 4px 0 rgba(30, 30, 30, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.5); + } + + [data-hint]:hover::before, + [data-hint]:hover::after { + visibility: visible; + opacity: 1; + } + + .hint--bottom::before, + .hint--bottom-left::before { + border-bottom-color: #404040; + } + + .hint--top::before, + .hint--top-left::before { + border-top-color: #404040; + } + + .hint--bottom::before { + margin-top: -12px; + } + + .hint--bottom::after { + margin-left: -18px; + } + + .hint--bottom::before, + .hint--bottom::after { + top: 100%; + left: 50%; + } + + .hint--bottom:hover::after, + .hint--bottom:hover::before { + transform: translateY(8px); + } + + .hint--top::before { + margin-bottom: -12px; + } + + .hint--top::after { + margin-left: -18px; + } + + .hint--top::before, + .hint--top::after { + bottom: 100%; + left: 50%; + } + + .hint--top:hover::after, + .hint--top:hover::before { + transform: translateY(-8px); + } + + .hint--top-left::before { + margin-bottom: -12px; + } + + .hint--top-left::after { + margin-right: -6px; + } + + .hint--top-left::before, + .hint--top-left::after { + bottom: 100%; + right: 12px; + } + + .hint--top-left:hover::after, + .hint--top-left:hover::before { + transform: translateY(-8px); + } + + .hint--bottom-left::before { + margin-top: -12px; + } + + .hint--bottom-left::after { + margin-right: -6px; + } + + .hint--bottom-left::before, + .hint--bottom-left::after { + top: 100%; + right: 12px; + } + + .hint--bottom-left:hover::after, + .hint--bottom-left:hover::before { + transform: translateY(8px); + } + + .hint--left::before { + margin-right: -12px; + margin-top: -6px; + } + + .hint--left::after { + margin-right: -14px; + } + + .hint--left::before, + .hint--left::after { + right: 100%; + bottom: 50%; + } + + .hint--left:hover::after, + .hint--left:hover::before { + transform: translateX(-8px); + } + + + /* + *Animated Checkmark + */ + + .checkmark__circle { + stroke-dasharray: 166; + stroke-dashoffset: 166; + stroke-width: 2; + stroke-miterlimit: 10; + stroke: ${props => props.theme.colors.superGreen}; + fill: none; + animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; + } + + .checkmark { + width: 20px; + height: 20px; + border-radius: 50%; + stroke-width: 2; + stroke: #fff; + stroke-miterlimit: 10; + box-shadow: inset 0 0 0 ${props => props.theme.colors.superGreen}; + animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both; + } + + .checkmark__check { + transform-origin: 50% 50%; + stroke-dasharray: 48; + stroke-dashoffset: 48; + animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; + } + + @keyframes stroke { + 100% { + stroke-dashoffset: 0; + } + } + + @keyframes scale { + 0%, + 100% { + transform: none; + } + + 50% { + transform: scale3d(1.1, 1.1, 1); + } + } + + @keyframes fill { + 100% { + box-shadow: inset 0 0 0 30px ${props => props.theme.colors.superGreen}; + } + } + + /* + *Generic spin animation. + */ + + @keyframes spin { + 100% { + transform: rotate(360deg); + } + } + + ` export default GlobalStyle diff --git a/app/components/UI/Heading.js b/app/components/UI/Heading.js index 919563da..cf82c2ce 100644 --- a/app/components/UI/Heading.js +++ b/app/components/UI/Heading.js @@ -11,7 +11,16 @@ class Heading extends React.PureComponent { static displayName = 'Heading' render() { - return + return ( + + ) } } diff --git a/app/components/UI/MenuItemGroup.js b/app/components/UI/MenuItemGroup.js index eb654cd2..2bd8b9f4 100644 --- a/app/components/UI/MenuItemGroup.js +++ b/app/components/UI/MenuItemGroup.js @@ -14,7 +14,7 @@ const SystemMenuItemGroup = system( const StyledMenuItemGroup = styled(SystemMenuItemGroup)` list-style-type: none; > .rc-menu-item-group-title { - font-weight: bold; + font-weight: 400; padding: ${props => props.theme.space[2]}px 0; } > .rc-menu-item-group-list { diff --git a/app/components/UI/Modal.js b/app/components/UI/Modal.js index 16de8f6b..58f65e67 100644 --- a/app/components/UI/Modal.js +++ b/app/components/UI/Modal.js @@ -1,7 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' import { Box, Flex } from 'rebass' -import { BackgroundDark } from 'components/UI' import X from 'components/Icon/X' /** @@ -10,24 +9,47 @@ import X from 'components/Icon/X' * @example * Some content */ -class Modal extends React.PureComponent { +class Modal extends React.Component { static displayName = 'Modal' static propTypes = { - children: PropTypes.node + children: PropTypes.node, + onClose: PropTypes.func + } + + state = { + hover: false + } + + hoverOn = () => { + this.setState({ hover: true }) + } + + hoverOff = () => { + this.setState({ hover: false }) } render() { - const { children } = this.props + const { hover } = this.state + const { children, onClose } = this.props return ( - - - + + + - - {children} - - + +     + + {children} + + ) } } diff --git a/app/components/UI/Notification.js b/app/components/UI/Notification.js index 35130e5e..422a37af 100644 --- a/app/components/UI/Notification.js +++ b/app/components/UI/Notification.js @@ -2,9 +2,9 @@ import React from 'react' import PropTypes from 'prop-types' import { Card, Flex, Text } from 'rebass' import X from 'components/Icon/X' -import SystemSuccess from 'components/Icon/SystemSuccess' -import SystemWarning from 'components/Icon/SystemWarning' -import SystemError from 'components/Icon/SystemError' +import Success from 'components/Icon/Success' +import Warning from 'components/Icon/Warning' +import Error from 'components/Icon/Error' import Spinner from './Spinner' /** @@ -57,14 +57,20 @@ class Notification extends React.Component { onMouseLeave={this.hoverOff} > - - {processing && } - {!processing && variant === 'success' && } - {!processing && variant === 'warning' && } - {!processing && variant === 'error' && } - {children} + + + {processing && } + {!processing && variant === 'success' && } + {!processing && variant === 'warning' && } + {!processing && variant === 'error' && } + + + {children} + - + + + ) diff --git a/app/components/UI/Page.js b/app/components/UI/Page.js index 0d4f1f7e..8e037fe3 100644 --- a/app/components/UI/Page.js +++ b/app/components/UI/Page.js @@ -7,18 +7,21 @@ import { Flex } from 'rebass' * @example * Some content */ -const Page = props => ( +const Page = ({ css, ...rest }) => ( ) diff --git a/app/components/UI/Range.js b/app/components/UI/Range.js index b86161fa..185bc4ae 100644 --- a/app/components/UI/Range.js +++ b/app/components/UI/Range.js @@ -20,7 +20,7 @@ const Input = styled.input` appearance: none; height: 8px; cursor: ew-resize; - background: ${props => props.theme.colors.white}; + background: ${props => props.theme.colors.primaryText}; box-shadow: -1000px 0 0 1000px orange; } ` diff --git a/app/components/UI/Select.js b/app/components/UI/Select.js index c0f8f577..52eebf42 100644 --- a/app/components/UI/Select.js +++ b/app/components/UI/Select.js @@ -138,7 +138,7 @@ class Select extends React.PureComponent { style={{ backgroundColor: highlightedIndex === index ? theme.colors.lightningOrange : null, - fontWeight: selectedItem === item ? 'bold' : 'normal' + fontWeight: selectedItem === item ? 'normal' : 'light' }} > {item.label || item.value} diff --git a/app/components/UI/Sidebar.js b/app/components/UI/Sidebar.js index 7abe9278..29cd6c1f 100644 --- a/app/components/UI/Sidebar.js +++ b/app/components/UI/Sidebar.js @@ -1,5 +1,5 @@ import React from 'react' -import { BackgroundLightest } from 'components/UI' +import { BackgroundLight } from 'components/UI' /** * @render react @@ -7,9 +7,7 @@ import { BackgroundLightest } from 'components/UI' * @example * Some content */ -const Sidebar = props => ( - -) +const Sidebar = props => Sidebar.small = props => Sidebar.medium = props => diff --git a/app/components/UI/Spinner.js b/app/components/UI/Spinner.js index 2642f9cb..e77daa04 100644 --- a/app/components/UI/Spinner.js +++ b/app/components/UI/Spinner.js @@ -1,5 +1,7 @@ +import React from 'react' import styled, { keyframes } from 'styled-components' -import { Card } from 'rebass' +import Spinner from 'components/Icon/Spinner' +import system from '@rebass/components' const rotate360 = keyframes` from { @@ -10,26 +12,28 @@ const rotate360 = keyframes` } ` +const Wrapper = system( + { + color: 'lightningOrange' + }, + 'space', + 'color' +) + /** * @render react * @name Spinner * @example * */ -const Spinner = styled(Card)` - border: 1px solid rgba(235, 184, 100, 0.1); - border-left-color: rgba(235, 184, 100, 0.6); - display: inline-block; +const SpinningSpinner = styled(Spinner)` animation: ${rotate360} 1s linear infinite; ` -Spinner.displayName = 'Spinner' -Spinner.defaultProps = { - borderRadius: 999, - width: '1em', - css: { - height: '1em' - } -} +const WrappedSpinner = props => ( + + + +) -export default Spinner +export default WrappedSpinner diff --git a/app/components/UI/Text.js b/app/components/UI/Text.js index 9c94bf91..70a44920 100644 --- a/app/components/UI/Text.js +++ b/app/components/UI/Text.js @@ -18,7 +18,7 @@ class Text extends React.PureComponent { render() { const { children } = this.props return ( - + {children} ) diff --git a/app/components/Value/Value.js b/app/components/Value/Value.js index 56f891b1..143309f2 100644 --- a/app/components/Value/Value.js +++ b/app/components/Value/Value.js @@ -1,20 +1,23 @@ import React from 'react' import PropTypes from 'prop-types' -import { btc } from 'lib/utils' +import { convert } from 'lib/utils/btc' const Value = ({ value, currency, currentTicker, fiatTicker }) => { if (currency === 'sats') { return {value > 0 ? value : value * -1} } - - return {btc.convert('sats', currency, value, currentTicker[fiatTicker].last)} + let price + if (currency === 'fiat') { + price = currentTicker[fiatTicker].last + } + return {convert('sats', currency, value, price)} } Value.propTypes = { value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), currency: PropTypes.string.isRequired, - currentTicker: PropTypes.object.isRequired, - fiatTicker: PropTypes.string.isRequired + currentTicker: PropTypes.object, + fiatTicker: PropTypes.string } export default Value diff --git a/app/components/Wallet/ReceiveModal/ReceiveModal.scss b/app/components/Wallet/ReceiveModal/ReceiveModal.scss index f09e1ef3..00d6bcb0 100644 --- a/app/components/Wallet/ReceiveModal/ReceiveModal.scss +++ b/app/components/Wallet/ReceiveModal/ReceiveModal.scss @@ -101,7 +101,6 @@ flex-direction: row; align-items: center; font-size: 10px; - font-weight: 200; background: var(--lightestBackground); .data, diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js index f5aa3402..93a35264 100644 --- a/app/components/Wallet/Wallet.js +++ b/app/components/Wallet/Wallet.js @@ -11,7 +11,6 @@ import CheckAnimated from 'components/Icon/CheckAnimated' import ZapLogo from 'components/Icon/ZapLogo' import ZapLogoBlack from 'components/Icon/ZapLogoBlack' import Qrcode from 'components/Icon/Qrcode' - import { FormattedNumber, FormattedMessage } from 'react-intl' import messages from './messages' @@ -70,43 +69,48 @@ const Wallet = ({ - + - - - + + + - - - + + + + + - - - + + {Boolean(fiatAmount) && ( + + {'≈ '} + + + )} + - - {Boolean(fiatAmount) && ( - - {'≈ '} - - - )} - - - diff --git a/app/components/Wallet/Wallet.scss b/app/components/Wallet/Wallet.scss index 655615a5..499b0172 100644 --- a/app/components/Wallet/Wallet.scss +++ b/app/components/Wallet/Wallet.scss @@ -1,9 +1,9 @@ @import 'styles/variables.scss'; .wallet { - background: var(--lightBackground); + background: var(--lightestBackground); color: var(--primaryText); - height: 180px; + height: 200px; padding: 20px 40px; } diff --git a/app/containers/App.js b/app/containers/App.js index 9bea70de..7eb9b928 100644 --- a/app/containers/App.js +++ b/app/containers/App.js @@ -5,7 +5,7 @@ import get from 'lodash.get' import { btc } from 'lib/utils' import { themeSelectors } from 'reducers/theme' -import { setCurrency, tickerSelectors, fetchTicker } from 'reducers/ticker' +import { setCurrency, tickerSelectors } from 'reducers/ticker' import { closeWalletModal } from 'reducers/address' import { fetchInfo, infoSelectors } from 'reducers/info' import { setFormType } from 'reducers/form' @@ -68,7 +68,6 @@ const mapDispatchToProps = { fetchBalance, fetchChannels, fetchSuggestedNodes, - fetchTicker, openChannel, closeChannel, toggleFilterPulldown, diff --git a/app/containers/Root.js b/app/containers/Root.js index f33fad03..0ba98db1 100644 --- a/app/containers/Root.js +++ b/app/containers/Root.js @@ -9,6 +9,7 @@ import { clearError, errorSelectors } from 'reducers/error' import { loadingSelectors, setLoading, setMounted } from 'reducers/loading' import { initCurrency, initLocale } from 'reducers/locale' import { initTheme, themeSelectors } from 'reducers/theme' +import { fetchTicker, tickerSelectors } from 'reducers/ticker' import { Page, Titlebar, GlobalStyle } from 'components/UI' import GlobalError from 'components/GlobalError' @@ -29,8 +30,10 @@ const SPLASH_SCREEN_TIME = 1500 class Root extends React.Component { static propTypes = { clearError: PropTypes.func.isRequired, + currentTicker: PropTypes.object, theme: PropTypes.object, error: PropTypes.string, + fetchTicker: PropTypes.func.isRequired, history: PropTypes.object.isRequired, initLocale: PropTypes.func.isRequired, initCurrency: PropTypes.func.isRequired, @@ -56,13 +59,16 @@ class Root extends React.Component { */ componentDidMount() { const { + currentTicker, + fetchTicker, initLocale, initCurrency, initTheme, isLoading, isMounted, setLoading, - setMounted + setMounted, + theme } = this.props // If this is the first time the app has mounted, initialise things. @@ -71,10 +77,11 @@ class Root extends React.Component { initTheme() initLocale() initCurrency() + fetchTicker() } // Hide the loading screen after a set time. - if (isLoading) { + if (isLoading || !currentTicker || !theme) { const timer = setTimeout(() => setLoading(false), SPLASH_SCREEN_TIME) this.setState({ timer }) } @@ -91,7 +98,7 @@ class Root extends React.Component { render() { const { clearError, theme, error, history, isLoading } = this.props - // Wait until we have determined the user's theme preference before displaying the app. + // Wait until we have loaded essential data before displaying anything.. if (!theme) { return null } @@ -119,6 +126,7 @@ class Root extends React.Component { } const mapStateToProps = state => ({ + currentTicker: tickerSelectors.currentTicker(state), theme: themeSelectors.currentThemeSettings(state), error: errorSelectors.getErrorState(state), isLoading: loadingSelectors.isLoading(state), @@ -127,6 +135,7 @@ const mapStateToProps = state => ({ const mapDispatchToProps = { clearError, + fetchTicker, initCurrency, initLocale, initTheme, diff --git a/app/icons/big-arrow-left.svg b/app/icons/big-arrow-left.svg new file mode 100644 index 00000000..d53fecff --- /dev/null +++ b/app/icons/big-arrow-left.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/icons/big-arrow-right.svg b/app/icons/big-arrow-right.svg index 2a597fdc..88a8e97b 100644 --- a/app/icons/big-arrow-right.svg +++ b/app/icons/big-arrow-right.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/app/icons/close.svg b/app/icons/close.svg new file mode 100644 index 00000000..03f5b9f7 --- /dev/null +++ b/app/icons/close.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/icons/error.svg b/app/icons/error.svg new file mode 100644 index 00000000..3f64a057 --- /dev/null +++ b/app/icons/error.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/icons/lightning.svg b/app/icons/lightning.svg new file mode 100644 index 00000000..c565f089 --- /dev/null +++ b/app/icons/lightning.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/app/icons/onchain.svg b/app/icons/onchain.svg new file mode 100644 index 00000000..1474a65b --- /dev/null +++ b/app/icons/onchain.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/app/icons/spinner.svg b/app/icons/spinner.svg new file mode 100644 index 00000000..2243d1f2 --- /dev/null +++ b/app/icons/spinner.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/icons/success.svg b/app/icons/success.svg new file mode 100644 index 00000000..c2d63e51 --- /dev/null +++ b/app/icons/success.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/icons/x.svg b/app/icons/x.svg index 7d5875ca..f77021ae 100644 --- a/app/icons/x.svg +++ b/app/icons/x.svg @@ -1 +1,6 @@ - \ No newline at end of file + + + + + + diff --git a/app/reducers/lnd.js b/app/reducers/lnd.js index 0a0d287b..52c7e932 100644 --- a/app/reducers/lnd.js +++ b/app/reducers/lnd.js @@ -1,7 +1,6 @@ import { createSelector } from 'reselect' import { showNotification } from 'lib/utils/notifications' import db from 'store/db' -import { fetchTicker } from './ticker' import { fetchBalance } from './balance' import { fetchInfo, setHasSynced, infoSelectors } from './info' import { lndWalletStarted, lndWalletUnlockerStarted } from './onboarding' @@ -55,7 +54,6 @@ export const lndSyncStatus = (event, status) => async (dispatch, getState) => { dispatch(setHasSynced(true)) // Fetch data now that we know LND is synced - dispatch(fetchTicker()) dispatch(fetchBalance()) dispatch(fetchInfo()) diff --git a/app/styles/animated_checkmark.scss b/app/styles/animated_checkmark.scss deleted file mode 100644 index 5ef7cc0b..00000000 --- a/app/styles/animated_checkmark.scss +++ /dev/null @@ -1,52 +0,0 @@ -$curve: cubic-bezier(0.65, 0, 0.45, 1); - -.checkmark__circle { - stroke-dasharray: 166; - stroke-dashoffset: 166; - stroke-width: 2; - stroke-miterlimit: 10; - stroke: $green; - fill: none; - animation: stroke 0.6s $curve forwards; -} - -.checkmark { - width: 20px; - height: 20px; - border-radius: 50%; - stroke-width: 2; - stroke: #fff; - stroke-miterlimit: 10; - box-shadow: inset 0 0 0 $green; - animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both; -} - -.checkmark__check { - transform-origin: 50% 50%; - stroke-dasharray: 48; - stroke-dashoffset: 48; - animation: stroke 0.3s $curve 0.8s forwards; -} - -@keyframes stroke { - 100% { - stroke-dashoffset: 0; - } -} - -@keyframes scale { - 0%, - 100% { - transform: none; - } - - 50% { - transform: scale3d(1.1, 1.1, 1); - } -} - -@keyframes fill { - 100% { - box-shadow: inset 0 0 0 30px $green; - } -} diff --git a/app/styles/app.global.scss b/app/styles/app.global.scss index c43cd199..7aad0bea 100644 --- a/app/styles/app.global.scss +++ b/app/styles/app.global.scss @@ -1,98 +1 @@ -@import '~font-awesome/css/font-awesome.css'; -@import 'reset.scss'; @import 'variables.scss'; -@import 'tooltip.scss'; -@import 'animated_checkmark.scss'; - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 300; - src: local('Roboto Light'), local('Roboto-Light'), - url(https://fonts.gstatic.com/s/roboto/v15/Fl4y0QdOxyyTHEGMXX8kcaCWcynf_cDxXwCLxiixG1c.ttf) - format('truetype'); -} - -body { - font-family: 'Roboto', Arial, Helvetica, sans-serif; -} - -// disable the pinball scrollers for windows -*, -input[type='text'], -input[type='number'] { - &::-webkit-inner-spin-button, - &::-webkit-outer-spin-button { - -webkit-appearance: none; - } -} - -.load-draw-svg { - stroke-dasharray: 211; - stroke-dashoffset: 2110; - stroke-width: 2; - stroke-linecap: round; - animation: dash 15s linear infinite; - fill-opacity: 0; - stroke: $main; -} - -@keyframes dash { - 0% { - stroke-dashoffset: 2110; - opacity: 1; - stroke: $main; - } - - 15% { - opacity: 1; - stroke: $main; - } - - 70% { - opacity: 1; - stroke: $main; - } - - 100% { - stroke-dashoffset: 0; - opacity: 1; - stroke: darken($main, 10%); - } -} - -@keyframes spin { - 100% { - transform: rotate(360deg); - } -} - -// network - -@keyframes dash { - to { - stroke-dashoffset: 1000; - } -} - -// each node in the map -// .network-node { -// -// } - -// each channel in the map -.network-link { - opacity: 0.6; -} - -.active-peer { - fill: #5589f3; -} - -.active-channel { - opacity: 1; - stroke: #88d4a2; - stroke-width: 15; - stroke-dasharray: 100; - animation: dash 2.5s infinite linear; -} diff --git a/app/styles/keyframes.scss b/app/styles/keyframes.scss deleted file mode 100644 index a9c3dc3a..00000000 --- a/app/styles/keyframes.scss +++ /dev/null @@ -1,47 +0,0 @@ -@import 'variables'; - -@keyframes fadeinOutD6 { - 0% { - transform: rotate(0deg); - } - - 50% { - transform: rotate(6deg); - } - - 100% { - transform: rotate(0deg); - } -} - -@keyframes fadeinOutD13 { - 0% { - transform: rotate(0deg); - } - - 50% { - transform: rotate(13deg); - } - - 100% { - transform: rotate(0deg); - } -} - -@keyframes colorchange { - 0% { color: $white; } - 25% { color: $gold; } - 50% { color: $white; } - 75% { color: $gold; } - 100% { color: $white; } -} - -@keyframes spin { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} diff --git a/app/styles/reset.scss b/app/styles/reset.scss deleted file mode 100644 index 3df61e8d..00000000 --- a/app/styles/reset.scss +++ /dev/null @@ -1,48 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} \ No newline at end of file diff --git a/app/styles/tooltip.scss b/app/styles/tooltip.scss deleted file mode 100644 index 7d329574..00000000 --- a/app/styles/tooltip.scss +++ /dev/null @@ -1,162 +0,0 @@ -@import 'styles/variables.scss'; - -/* Tooltips */ -[data-hint] { - position: relative; - - // display: inline-block; -} - -[data-hint]::before, -[data-hint]::after { - position: absolute; - will-change: transform; - visibility: hidden; - opacity: 0; - z-index: z('tooltip', 'after'); - pointer-events: none; - transition: 0.2s ease; - transition-delay: 0ms; -} - -[data-hint]::before { - content: ''; - position: absolute; - background: transparent; - border: 6px solid transparent; - z-index: z('tooltip', 'before'); -} - -[data-hint]::after { - content: attr(data-hint); - background: #404040; - color: #e0e0e0; - text-shadow: 0 -1px 0 black; - padding: 8px 10px; - line-height: 12px; - white-space: nowrap; - border-radius: 2px; - box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); - letter-spacing: normal; - font-size: 12px; - font-weight: normal; - font-style: inherit; - font-family: 'Noto Sans', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif; -} - -[data-hint]:hover::before, -[data-hint]:hover::after { - visibility: visible; - opacity: 1; -} - -.hint--bottom::before, -.hint--bottom-left::before { - border-bottom-color: #404040; -} - -.hint--top::before, -.hint--top-left::before { - border-top-color: #404040; -} - -.hint--bottom::before { - margin-top: -12px; -} - -.hint--bottom::after { - margin-left: -18px; -} - -.hint--bottom::before, -.hint--bottom::after { - top: 100%; - left: 50%; -} - -.hint--bottom:hover::after, -.hint--bottom:hover::before { - -webkit-transform: translateY(8px); - transform: translateY(8px); -} - -.hint--top::before { - margin-bottom: -12px; -} - -.hint--top::after { - margin-left: -18px; -} - -.hint--top::before, -.hint--top::after { - bottom: 100%; - left: 50%; -} - -.hint--top:hover::after, -.hint--top:hover::before { - -webkit-transform: translateY(-8px); - transform: translateY(-8px); -} - -.hint--top-left::before { - margin-bottom: -12px; -} - -.hint--top-left::after { - margin-right: -6px; -} - -.hint--top-left::before, -.hint--top-left::after { - bottom: 100%; - right: 30%; -} - -.hint--top-left:hover::after, -.hint--top-left:hover::before { - -webkit-transform: translateY(-8px); - transform: translateY(-8px); -} - -.hint--bottom-left::before { - margin-top: -12px; -} - -.hint--bottom-left::after { - margin-right: -6px; -} - -.hint--bottom-left::before, -.hint--bottom-left::after { - top: 100%; - right: 30%; -} - -.hint--bottom-left:hover::after, -.hint--bottom-left:hover::before { - -webkit-transform: translateY(8px); - transform: translateY(8px); -} - -.hint--left::before { - margin-right: -12px; - margin-top: -6px; -} - -.hint--left::after { - margin-right: -14px; -} - -.hint--left::before, -.hint--left::after { - right: 100%; - bottom: 50%; -} - -.hint--left:hover::after, -.hint--left:hover::before { - -webkit-transform: translateX(-8px); - transform: translateX(-8px); -} diff --git a/app/themes/base.js b/app/themes/base.js index d8d996ad..e856993b 100644 --- a/app/themes/base.js +++ b/app/themes/base.js @@ -1,4 +1,4 @@ -export const space = [0, 4, 8, 16, 32, 64, 128, 256] +export const space = [0, 4, 8, 16, 32, 45, 72, 108] export const palette = { white: '#ffffff', @@ -35,14 +35,13 @@ fontSizes[6] = fontSizes['xxl'] fontSizes[7] = fontSizes['xxxl'] export const fontWeights = { - normal: 400, - bold: 600 + light: 300, + normal: 400 } export const fonts = { - 0: '"Roboto Light", Roboto, system-ui, sans-serif', - sans: '"Roboto Light", Roboto, system-ui, sans-serif', - mono: '"SF Mono", "Roboto Mono", Menlo, monospace' + 0: 'Roboto, system-ui, sans-serif', + sans: 'Roboto, system-ui, sans-serif' } export const letterSpacings = { diff --git a/app/themes/dark.js b/app/themes/dark.js index af09a51d..3e62518a 100644 --- a/app/themes/dark.js +++ b/app/themes/dark.js @@ -27,13 +27,14 @@ const buttons = { color: colors.white }, secondary: { + opacity: 0.6, backgroundColor: 'transparent', - color: colors.white, + color: colors.primaryText, '&:hover:enabled': { - color: colors.lightningOrange + opacity: 1 }, '&:focus': { - color: colors.lightningOrange + opacity: 1 } } } diff --git a/app/themes/light.js b/app/themes/light.js index e972abeb..5706d09f 100644 --- a/app/themes/light.js +++ b/app/themes/light.js @@ -27,13 +27,14 @@ const buttons = { color: colors.white }, secondary: { + opacity: 0.6, backgroundColor: 'transparent', - color: colors.lightningOrange, + color: colors.primaryText, '&:hover:enabled': { - color: colors.black + opacity: 1 }, '&:focus': { - color: colors.black + opacity: 1 } } } diff --git a/internals/webpack/webpack.config.base.js b/internals/webpack/webpack.config.base.js index 64f39f50..1a398ed9 100644 --- a/internals/webpack/webpack.config.base.js +++ b/internals/webpack/webpack.config.base.js @@ -20,6 +20,7 @@ export default { module: { rules: [ + // JSX { test: /\.jsx?$/, exclude: /node_modules/, @@ -29,6 +30,39 @@ export default { cacheDirectory: true } } + }, + // WOFF Font + { + test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, + use: { + loader: 'url-loader', + options: { + limit: 10000, + mimetype: 'application/font-woff' + } + } + }, + // WOFF2 Font + { + test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, + use: { + loader: 'url-loader', + options: { + limit: 10000, + mimetype: 'application/font-woff' + } + } + }, + // TTF Font + { + test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, + use: { + loader: 'url-loader', + options: { + limit: 10000, + mimetype: 'application/octet-stream' + } + } } ] }, diff --git a/internals/webpack/webpack.config.renderer.dev.dll.js b/internals/webpack/webpack.config.renderer.dev.dll.js index cb0748a6..aaa28093 100644 --- a/internals/webpack/webpack.config.renderer.dev.dll.js +++ b/internals/webpack/webpack.config.renderer.dev.dll.js @@ -25,37 +25,6 @@ export default merge.smart(baseConfig, { */ module: { rules: [ - { - test: /\.global\.css$/, - use: [ - { - loader: 'style-loader' - }, - { - loader: 'css-loader', - options: { - sourceMap: true - } - } - ] - }, - { - test: /^((?!\.global).)*\.css$/, - use: [ - { - loader: 'style-loader' - }, - { - loader: 'css-loader', - options: { - modules: true, - sourceMap: true, - importLoaders: 1, - localIdentName: '[name]__[local]__[hash:base64:5]' - } - } - ] - }, // Add SASS support - compile all .global.scss files and pipe it to style.css { test: /\.global\.scss$/, @@ -101,44 +70,6 @@ export default merge.smart(baseConfig, { } ] }, - // WOFF Font - { - test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, - use: { - loader: 'url-loader', - options: { - limit: 10000, - mimetype: 'application/font-woff' - } - } - }, - // WOFF2 Font - { - test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, - use: { - loader: 'url-loader', - options: { - limit: 10000, - mimetype: 'application/font-woff' - } - } - }, - // TTF Font - { - test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, - use: { - loader: 'url-loader', - options: { - limit: 10000, - mimetype: 'application/octet-stream' - } - } - }, - // EOT Font - { - test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, - use: 'file-loader' - }, // SVG Font { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, diff --git a/internals/webpack/webpack.config.renderer.dev.js b/internals/webpack/webpack.config.renderer.dev.js index 8e413a57..041adec6 100644 --- a/internals/webpack/webpack.config.renderer.dev.js +++ b/internals/webpack/webpack.config.renderer.dev.js @@ -13,7 +13,6 @@ import webpack from 'webpack' import merge from 'webpack-merge' import { spawn, execSync } from 'child_process' import HtmlWebpackPlugin from 'html-webpack-plugin' -import CopyWebpackPlugin from 'copy-webpack-plugin' import AddAssetHtmlPlugin from 'add-asset-html-webpack-plugin' import CspHtmlWebpackPlugin from 'csp-html-webpack-plugin' import baseConfig, { rootDir } from './webpack.config.base' @@ -64,27 +63,6 @@ export default merge.smart(baseConfig, { } } }, - // Extract all .global.css to style.css as is - { - test: /\.global\.css$/, - use: ['style-loader'] - }, - // Pipe other styles through css modules and append to style.css - { - test: /^((?!\.global).)*\.css$/, - use: [ - 'style-loader', - { - loader: 'css-loader', - options: { - modules: true, - sourceMap: true, - importLoaders: 1, - localIdentName: '[name]__[local]__[hash:base64:5]' - } - } - ] - }, // Add SASS support - compile all .global.scss files and pipe it to style.css { test: /\.global\.scss$/, @@ -128,44 +106,6 @@ export default merge.smart(baseConfig, { } ] }, - // WOFF Font - { - test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, - use: { - loader: 'url-loader', - options: { - limit: 10000, - mimetype: 'application/font-woff' - } - } - }, - // WOFF2 Font - { - test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, - use: { - loader: 'url-loader', - options: { - limit: 10000, - mimetype: 'application/font-woff' - } - } - }, - // TTF Font - { - test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, - use: { - loader: 'url-loader', - options: { - limit: 10000, - mimetype: 'application/octet-stream' - } - } - }, - // EOT Font - { - test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, - use: 'file-loader' - }, // SVG Font { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, @@ -196,8 +136,6 @@ export default merge.smart(baseConfig, { debug: true }), - new CopyWebpackPlugin([path.join('app', 'empty.html')]), - new HtmlWebpackPlugin({ template: path.join('app', 'app.html') }), @@ -224,18 +162,10 @@ export default merge.smart(baseConfig, { "'self'", 'data:', 'http://localhost:*', - 'https://fonts.googleapis.com', 'https://s3.amazonaws.com', 'https://fonts.gstatic.com' ], - 'style-src': [ - "'self'", - 'blob:', - 'https://fonts.googleapis.com', - 'https://s3.amazonaws.com', - 'https://fonts.gstatic.com', - "'unsafe-inline'" - ] + 'style-src': ["'self'", 'blob:', 'https://s3.amazonaws.com', "'unsafe-inline'"] }) ], diff --git a/internals/webpack/webpack.config.renderer.prod.js b/internals/webpack/webpack.config.renderer.prod.js index c49b6d08..b8ed5dec 100644 --- a/internals/webpack/webpack.config.renderer.prod.js +++ b/internals/webpack/webpack.config.renderer.prod.js @@ -5,7 +5,6 @@ import path from 'path' import MiniCssExtractPlugin from 'mini-css-extract-plugin' import HtmlWebpackPlugin from 'html-webpack-plugin' -import CopyWebpackPlugin from 'copy-webpack-plugin' import CspHtmlWebpackPlugin from 'csp-html-webpack-plugin' import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer' import CleanWebpackPlugin from 'clean-webpack-plugin' @@ -33,26 +32,6 @@ export default merge.smart(baseConfig, { module: { rules: [ - // Extract all .global.css to style.css as is - { - test: /\.global\.css$/, - use: [MiniCssExtractPlugin.loader, 'css-loader'] - }, - // Pipe other styles through css modules and append to style.css - { - test: /^((?!\.global).)*\.css$/, - use: [ - MiniCssExtractPlugin.loader, - { - loader: 'css-loader', - options: { - modules: true, - importLoaders: 1, - localIdentName: '[name]__[local]__[hash:base64:5]' - } - } - ] - }, // Add SASS support - compile all .global.scss files and pipe it to style.css { test: /\.global\.scss$/, @@ -88,44 +67,6 @@ export default merge.smart(baseConfig, { } ] }, - // WOFF Font - { - test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, - use: { - loader: 'url-loader', - options: { - limit: 10000, - mimetype: 'application/font-woff' - } - } - }, - // WOFF2 Font - { - test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, - use: { - loader: 'url-loader', - options: { - limit: 10000, - mimetype: 'application/font-woff' - } - } - }, - // TTF Font - { - test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, - use: { - loader: 'url-loader', - options: { - limit: 10000, - mimetype: 'application/octet-stream' - } - } - }, - // EOT Font - { - test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, - use: 'file-loader' - }, // SVG Font { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, @@ -148,8 +89,6 @@ export default merge.smart(baseConfig, { plugins: [ new CleanWebpackPlugin([path.join('app', 'dist')]), - new CopyWebpackPlugin([path.join('app', 'empty.html')]), - new MiniCssExtractPlugin(), new HtmlWebpackPlugin({ @@ -161,21 +100,8 @@ export default merge.smart(baseConfig, { 'object-src': "'none'", 'connect-src': ["'self'", 'https://blockchain.info', 'https://zap.jackmallers.com'], 'script-src': ["'self'"], - 'font-src': [ - "'self'", - 'data:', - 'https://fonts.googleapis.com', - 'https://s3.amazonaws.com', - 'https://fonts.gstatic.com' - ], - 'style-src': [ - "'self'", - 'blob:', - 'https://fonts.googleapis.com', - 'https://s3.amazonaws.com', - 'https://fonts.gstatic.com', - "'unsafe-inline'" - ] + 'font-src': ["'self'", 'data:', 'https://s3.amazonaws.com', 'https://fonts.gstatic.com'], + 'style-src': ["'self'", 'blob:', 'https://s3.amazonaws.com', "'unsafe-inline'"] }), new BundleAnalyzerPlugin({ diff --git a/package.json b/package.json index ff3cd880..d306bf3c 100644 --- a/package.json +++ b/package.json @@ -349,6 +349,7 @@ "source-map-support": "^0.5.9", "split2": "^3.0.0", "styled-components": "^4.0.3", + "styled-reset": "^1.6.0", "tildify": "^1.2.0", "untildify": "^3.0.3", "validator": "^10.8.0" diff --git a/stories/components/button.stories.js b/stories/components/button.stories.js index 01b262e5..e90f4a09 100644 --- a/stories/components/button.stories.js +++ b/stories/components/button.stories.js @@ -44,13 +44,4 @@ storiesOf('Components.Button', module) Small button )) - .add('Medium', () => ( - - )) - .add('Large', () => ( - - )) + .add('Normal', () => ) diff --git a/stories/components/form.stories.js b/stories/components/form.stories.js index ad7a3573..cce1df39 100644 --- a/stories/components/form.stories.js +++ b/stories/components/form.stories.js @@ -91,7 +91,7 @@ storiesOf('Components.Form', module) )) .add('Range', () => (
    - +
    )) .add('Example form', () => ( diff --git a/stories/components/icon.stories.js b/stories/components/icon.stories.js index 94e7921c..b53992c4 100644 --- a/stories/components/icon.stories.js +++ b/stories/components/icon.stories.js @@ -2,14 +2,8 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { Box, Flex } from 'rebass' -import SystemArrowLeft from 'components/Icon/SystemArrowLeft' -import SystemArrowRight from 'components/Icon/SystemArrowRight' -import SystemError from 'components/Icon/SystemError' -import SystemNavNext from 'components/Icon/SystemNavNext' -import SystemNavPrevious from 'components/Icon/SystemNavPrevious' -import SystemSuccess from 'components/Icon/SystemSuccess' -import SystemWarning from 'components/Icon/SystemWarning' - +import BigArrowLeft from 'components/Icon/BigArrowLeft' +import BigArrowRight from 'components/Icon/BigArrowRight' import Bitcoin from 'components/Icon/Bitcoin' import Btcpay from 'components/Icon/Btcpay' import ChainLink from 'components/Icon/ChainLink' @@ -18,32 +12,41 @@ import Check from 'components/Icon/Check' import CheckAnimated from 'components/Icon/CheckAnimated' import CheckCircle from 'components/Icon/CheckCircle' import Clock from 'components/Icon/Clock' -import CloudLightning from 'components/Icon/CloudLightning' import Cloudbolt from 'components/Icon/Cloudbolt' +import CloudLightning from 'components/Icon/CloudLightning' import Contacts from 'components/Icon/Contacts' import Copy from 'components/Icon/Copy' +import Error from 'components/Icon/Error' import Eye from 'components/Icon/Eye' import Globe from 'components/Icon/Globe' import Hand from 'components/Icon/Hand' import Help from 'components/Icon/Help' import Help2 from 'components/Icon/Help2' -import BigArrowRight from 'components/Icon/BigArrowRight' import IconPlus from 'components/Icon/IconPlus' +import Lightning from 'components/Icon/Lightning' import Litecoin from 'components/Icon/Litecoin' import LndLogo from 'components/Icon/LndLogo' import LtcLogo from 'components/Icon/LtcLogo' import Network from 'components/Icon/Network' +import Onchain from 'components/Icon/Onchain' import PaperPlane from 'components/Icon/PaperPlane' import Peers from 'components/Icon/Peers' -import PlusCircle from 'components/Icon/PlusCircle' import Plus from 'components/Icon/Plus' +import PlusCircle from 'components/Icon/PlusCircle' import Qrcode from 'components/Icon/Qrcode' import Search from 'components/Icon/Search' import Settings from 'components/Icon/Settings' import SkinnyBitcoin from 'components/Icon/SkinnyBitcoin' +import Spinner from 'components/Icon/Spinner' +import Success from 'components/Icon/Success' +import SystemArrowLeft from 'components/Icon/SystemArrowLeft' +import SystemArrowRight from 'components/Icon/SystemArrowRight' +import SystemNavNext from 'components/Icon/SystemNavNext' +import SystemNavPrevious from 'components/Icon/SystemNavPrevious' import User from 'components/Icon/User' import Wallet from 'components/Icon/Wallet' import Wallet2 from 'components/Icon/Wallet2' +import Warning from 'components/Icon/Warning' import X from 'components/Icon/X' import Zap from 'components/Icon/Zap' import ZapLogo from 'components/Icon/ZapLogo' @@ -52,47 +55,58 @@ import ZapLogoBlack from 'components/Icon/ZapLogoBlack' const iconSizes = [16, 32, 64, 128] const zapIconsList = { + BigArrowLeft, + BigArrowRight, Bitcoin, Btcpay, - Channels, ChainLink, + Channels, Check, CheckAnimated, CheckCircle, Clock, - CloudLightning, Cloudbolt, + CloudLightning, Contacts, Copy, + Error, Eye, Globe, Hand, Help, Help2, - BigArrowRight, IconPlus, + Lightning, Litecoin, LndLogo, LtcLogo, Network, + Onchain, PaperPlane, Peers, - PlusCircle, Plus, + PlusCircle, Qrcode, Search, Settings, SkinnyBitcoin, + Spinner, + Success, + SystemArrowLeft, + SystemArrowRight, + SystemNavNext, + SystemNavPrevious, User, Wallet, Wallet2, + Warning, X, Zap, ZapLogo, ZapLogoBlack } -const zapIconStories = storiesOf('Components.Icon.Zap', module) +const zapIconStories = storiesOf('Components.Icon', module) Object.keys(zapIconsList).forEach(name => { var Icon = zapIconsList[name] @@ -109,31 +123,3 @@ Object.keys(zapIconsList).forEach(name => { )) }) - -const systemIconsList = { - SystemArrowLeft, - SystemArrowRight, - SystemError, - SystemNavNext, - SystemNavPrevious, - SystemSuccess, - SystemWarning -} - -const systemIconStories = storiesOf('Components.Icon.System', module) - -Object.keys(systemIconsList).forEach(name => { - var Icon = systemIconsList[name] - systemIconStories.add(name, () => ( - - {iconSizes.map(size => ( - - - {size} x {size}: - - - - ))} - - )) -}) diff --git a/stories/components/modal.stories.js b/stories/components/modal.stories.js index 743d0a76..30393670 100644 --- a/stories/components/modal.stories.js +++ b/stories/components/modal.stories.js @@ -1,13 +1,18 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Modal } from 'components/UI' +import { action } from '@storybook/addon-actions' +import { Modal, Page, Text } from 'components/UI' storiesOf('Components.Modal', module).add('Modal', () => ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat - non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + + )) diff --git a/test/unit/components/UI/Notification.spec.js b/test/unit/components/UI/Notification.spec.js index dbd4442a..f4d17ed7 100644 --- a/test/unit/components/UI/Notification.spec.js +++ b/test/unit/components/UI/Notification.spec.js @@ -2,9 +2,9 @@ import React from 'react' import renderer from 'react-test-renderer' import { configure, shallow } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' -import SystemSuccess from 'components/Icon/SystemSuccess' -import SystemWarning from 'components/Icon/SystemWarning' -import SystemError from 'components/Icon/SystemError' +import Success from 'components/Icon/Success' +import Warning from 'components/Icon/Warning' +import Error from 'components/Icon/Error' import { Notification, Spinner } from 'components/UI' configure({ adapter: new Adapter() }) @@ -18,21 +18,21 @@ describe('component.UI.Notification', () => { describe('variant = success', () => { it('should render with the success icon', () => { const wrapper = shallow() - expect(wrapper.find(SystemSuccess)).toHaveLength(1) + expect(wrapper.find(Success)).toHaveLength(1) }) }) describe('variant = warning', () => { it('should render with the warning icon', () => { const wrapper = shallow() - expect(wrapper.find(SystemWarning)).toHaveLength(1) + expect(wrapper.find(Warning)).toHaveLength(1) }) }) describe('variant = error', () => { it('should render with the error icon', () => { const wrapper = shallow() - expect(wrapper.find(SystemError)).toHaveLength(1) + expect(wrapper.find(Error)).toHaveLength(1) }) }) diff --git a/test/unit/components/UI/__snapshots__/BackgroundDark.spec.js.snap b/test/unit/components/UI/__snapshots__/BackgroundDark.spec.js.snap index 1c89463e..c78d0987 100644 --- a/test/unit/components/UI/__snapshots__/BackgroundDark.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/BackgroundDark.spec.js.snap @@ -2,12 +2,12 @@ exports[`component.UI.BackgroundDark should render correctly 1`] = ` .c0 { - color: white; + color: primaryText; background-color: darkestBackground; }
    `; diff --git a/test/unit/components/UI/__snapshots__/BackgroundLight.spec.js.snap b/test/unit/components/UI/__snapshots__/BackgroundLight.spec.js.snap index f0f3a5a1..574a8eb0 100644 --- a/test/unit/components/UI/__snapshots__/BackgroundLight.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/BackgroundLight.spec.js.snap @@ -2,12 +2,12 @@ exports[`component.UI.BackgroundLight should render correctly 1`] = ` .c0 { - color: white; + color: primaryText; background-color: lightBackground; }
    `; diff --git a/test/unit/components/UI/__snapshots__/BackgroundLightest.spec.js.snap b/test/unit/components/UI/__snapshots__/BackgroundLightest.spec.js.snap index 44bf96dc..da00731d 100644 --- a/test/unit/components/UI/__snapshots__/BackgroundLightest.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/BackgroundLightest.spec.js.snap @@ -2,12 +2,12 @@ exports[`component.UI.BackgroundLightest should render correctly 1`] = ` .c0 { - color: white; + color: primaryText; background-color: lightestBackground; }
    `; diff --git a/test/unit/components/UI/__snapshots__/Bar.spec.js.snap b/test/unit/components/UI/__snapshots__/Bar.spec.js.snap index 2b59d9de..d79e1ddd 100644 --- a/test/unit/components/UI/__snapshots__/Bar.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Bar.spec.js.snap @@ -3,12 +3,15 @@ exports[`component.UI.Bar should render correctly 1`] = ` .c0 { width: 100%; - background-color: white; - height: 1px; + border-bottom: none !important; + border: 1px solid; + border-color: primaryText; + opacity: 0.6; }
    `; diff --git a/test/unit/components/UI/__snapshots__/Button.spec.js.snap b/test/unit/components/UI/__snapshots__/Button.spec.js.snap index cd177f96..9d87670c 100644 --- a/test/unit/components/UI/__snapshots__/Button.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Button.spec.js.snap @@ -3,15 +3,16 @@ exports[`component.UI.Button should render correctly 1`] = ` .c1 { font-family: sans; + font-weight: normal; } .c0 { margin: 0px; - padding-left: 16px; - padding-right: 16px; - padding-top: 8px; - padding-bottom: 8px; - font-size: m; + padding-left: 64px; + padding-right: 64px; + padding-top: 16px; + padding-bottom: 16px; + font-size: inherit; color: white; background-color: blue; -webkit-appearance: none; @@ -29,7 +30,7 @@ exports[`component.UI.Button should render correctly 1`] = ` transition: all 0.25s; outline: none; border-radius: 5; - font-weight: normal; + font-weight: 300; line-height: '18px'; } @@ -44,12 +45,13 @@ exports[`component.UI.Button should render correctly 1`] = ` `; diff --git a/test/unit/components/UI/__snapshots__/Dropdown.spec.js.snap b/test/unit/components/UI/__snapshots__/Dropdown.spec.js.snap index ce49f027..f356667c 100644 --- a/test/unit/components/UI/__snapshots__/Dropdown.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Dropdown.spec.js.snap @@ -3,7 +3,9 @@ exports[`component.Dropdown should render correctly 1`] = ` .c2 { font-size: m; + color: primaryText; text-align: left; + line-height: 1.4; } .c0 { @@ -21,10 +23,7 @@ exports[`component.Dropdown should render correctly 1`] = ` .c1 { margin: 0px; - padding-left: 0px; - padding-right: 0px; - padding-top: 8px; - padding-bottom: 8px; + padding: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -52,6 +51,7 @@ exports[`component.Dropdown should render correctly 1`] = ` >
    BTC diff --git a/test/unit/components/UI/__snapshots__/Heading.spec.js.snap b/test/unit/components/UI/__snapshots__/Heading.spec.js.snap index 99866e2f..9d58c6ac 100644 --- a/test/unit/components/UI/__snapshots__/Heading.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Heading.spec.js.snap @@ -4,13 +4,16 @@ exports[`component.UI.Heading should render correctly 1`] = ` .c0 { margin: 0px; font-size: 32px; - font-weight: bold; + color: primaryText; + font-weight: light; + line-height: 1.4; }

    Heading here

    diff --git a/test/unit/components/UI/__snapshots__/Input.spec.js.snap b/test/unit/components/UI/__snapshots__/Input.spec.js.snap index 96fd68ec..f167d832 100644 --- a/test/unit/components/UI/__snapshots__/Input.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Input.spec.js.snap @@ -19,8 +19,8 @@ exports[`component.UI.Input should render correctly 1`] = ` background-color: transparent; color: #fff; background-color: transparent; - font-family: "Roboto Light",Roboto,system-ui,sans-serif; - font-weight: light; + font-family: Roboto,system-ui,sans-serif; + font-weight: 300; border: 1px solid; border: 1px solid; border-color: #959595; diff --git a/test/unit/components/UI/__snapshots__/LightningInvoiceInput.spec.js.snap b/test/unit/components/UI/__snapshots__/LightningInvoiceInput.spec.js.snap index d30b7dfa..47195d67 100644 --- a/test/unit/components/UI/__snapshots__/LightningInvoiceInput.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/LightningInvoiceInput.spec.js.snap @@ -19,8 +19,8 @@ exports[`component.UI.LightningInvoiceInput should render correctly 1`] = ` background-color: transparent; color: #fff; background-color: transparent; - font-family: "Roboto Light",Roboto,system-ui,sans-serif; - font-weight: light; + font-family: Roboto,system-ui,sans-serif; + font-weight: 300; border: 1px solid; border: 1px solid; border-color: #959595; diff --git a/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap b/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap index 59f65467..80486793 100644 --- a/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap @@ -4,14 +4,14 @@ exports[`component.UI.MainContent should render correctly 1`] = ` .c0 { padding: 16px; width: 100%; - color: white; + color: primaryText; background-color: darkestBackground; height: 100%; }
    `; diff --git a/test/unit/components/UI/__snapshots__/Menu.spec.js.snap b/test/unit/components/UI/__snapshots__/Menu.spec.js.snap index 8695d66a..41227182 100644 --- a/test/unit/components/UI/__snapshots__/Menu.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Menu.spec.js.snap @@ -28,7 +28,7 @@ exports[`component.UI.Menu should render correctly 1`] = ` } .c1 > .rc-menu-item-group-title { - font-weight: bold; + font-weight: 400; padding: 8px 0; } diff --git a/test/unit/components/UI/__snapshots__/Modal.spec.js.snap b/test/unit/components/UI/__snapshots__/Modal.spec.js.snap index 2315c967..2bfe5c18 100644 --- a/test/unit/components/UI/__snapshots__/Modal.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Modal.spec.js.snap @@ -1,22 +1,34 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`component.UI.Modal should render correctly 1`] = ` -.c0 { - height: 100vh; +.c2 { + margin-left: auto; + cursor: pointer; } -.c1 { +.c3 { padding: 8px; - color: white; - background-color: darkestBackground; - height: 100%; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; } -.c3 { - margin: 16px; +.c0 { + padding: 16px; + width: 100%; + background-color: darkestBackground; + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } -.c2 { +.c1 { + color: primaryText; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -29,33 +41,44 @@ exports[`component.UI.Modal should render correctly 1`] = `
    -
    - + + +
    -
    -
    + +
    `; diff --git a/test/unit/components/UI/__snapshots__/Notification.spec.js.snap b/test/unit/components/UI/__snapshots__/Notification.spec.js.snap index 0c8ddb42..7e2181dd 100644 --- a/test/unit/components/UI/__snapshots__/Notification.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Notification.spec.js.snap @@ -17,10 +17,23 @@ exports[`component.UI.Notification should render correctly 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .c3 { + font-size: xl; +} + +.c4 { margin-left: 8px; + font-weight: normal; +} + +.c5 { + font-size: xs; } .c0 { @@ -43,45 +56,63 @@ exports[`component.UI.Notification should render correctly 1`] = ` >
    +
    + + + + + + +
    +
    +
    +
    - + - + + -
    - - -
    `; diff --git a/test/unit/components/UI/__snapshots__/Page.spec.js.snap b/test/unit/components/UI/__snapshots__/Page.spec.js.snap index 90e4a9c7..37cffc08 100644 --- a/test/unit/components/UI/__snapshots__/Page.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Page.spec.js.snap @@ -3,10 +3,10 @@ exports[`component.UI.Page should render correctly 1`] = ` .c0 { background-color: darkestBackground; - min-height: 700px; min-width: 950px; + min-height: 600px; overflow-y: hidden; - box-shadow: 0 3px 4px 0 rgba(30,30,30,0.5); + box-shadow: 0 20px 70px rgba(0,0,0,0.55); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; diff --git a/test/unit/components/UI/__snapshots__/Range.spec.js.snap b/test/unit/components/UI/__snapshots__/Range.spec.js.snap index 4f7b7694..da3ab301 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: #ffffff; + background: #fff; 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 9ee5a47a..8c400f03 100644 --- a/test/unit/components/UI/__snapshots__/Select.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Select.spec.js.snap @@ -19,8 +19,8 @@ exports[`component.UI.Toggle should render correctly 1`] = ` background-color: transparent; color: #fff; background-color: transparent; - font-family: "Roboto Light",Roboto,system-ui,sans-serif; - font-weight: light; + font-family: Roboto,system-ui,sans-serif; + font-weight: 300; border: 1px solid; border: 1px solid; border-color: #959595; diff --git a/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap b/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap index 93d94dcf..da0519a5 100644 --- a/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap @@ -4,14 +4,13 @@ exports[`component.UI.Sidebar should render correctly 1`] = ` .c0 { padding: 16px; width: 33.33333333333333%; - color: white; - background-color: lightestBackground; - height: 100%; + color: primaryText; + background-color: lightBackground; }