From 216debbf728812377127cc2af3ca21acf7f0c44e Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 13 Oct 2018 18:13:36 +0200 Subject: [PATCH] modal tweaks --- README.md | 10 +- src/components/atoms/Modal.module.scss | 28 +++- src/components/atoms/Web3Donation.jsx | 154 +++++++++++------- src/components/atoms/Web3Donation.module.scss | 35 ++-- src/components/molecules/ModalThanks.jsx | 5 + .../molecules/ModalThanks.module.scss | 32 +++- src/components/molecules/RelatedPosts.jsx | 2 +- src/styles/_code.scss | 2 +- 8 files changed, 170 insertions(+), 98 deletions(-) diff --git a/README.md b/README.md index 88b68622..749b88b0 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ - [🎉 Features](#-features) - [🎆 EXIF extraction](#-exif-extraction) - - [💰 Cryptocurrency donation via Web3/MetaMask](#-cryptocurrency-donation-via-web3-metamask) + - [💰 Cryptocurrency donation via Web3/MetaMask](#-cryptocurrency-donation-via-web3metamask) - [🕸 Related Posts](#-related-posts) - [🐝 Coinhive](#-coinhive) - [🏆 SEO component](#-seo-component) @@ -55,11 +55,11 @@ If you want to know how this works, have a look at the respective component unde ### 💰 Cryptocurrency donation via Web3/MetaMask -Lets visitors say thanks with Bitcoin or Ether. Includes full Web3 client for sending Ether via MetaMask or Mist. +Lets visitors say thanks with Bitcoin or Ether. Uses [web3.js](https://github.com/ethereum/web3.js) for sending Ether transactions via MetaMask, Brave or Mist. Component listens to account & network changes and adapts accordingly. As a fallback, QR codes are generated with [react-qr-svg](https://github.com/no23reason/react-qr-svg) from the addresses defined in [`config.js`](config.js). -screen shot 2018-10-11 at 21 01 37 +screen shot 2018-10-13 at 18 40 56 If you want to know how this works, have a look at the respective components under @@ -70,7 +70,7 @@ If you want to know how this works, have a look at the respective components und Under each post a list of related posts is displayed which are based on the tags of the currently viewed post. Also allows loading more related posts in place. -screen shot 2018-10-11 at 21 03 03 +screen shot 2018-10-11 at 21 03 03 If you want to know how this works, have a look at the respective component under @@ -80,7 +80,7 @@ If you want to know how this works, have a look at the respective component unde Includes a component for mining Monero with JavaScript via [Coinhive](https://coinhive.com). -screen shot 2018-10-11 at 21 09 49 +screen shot 2018-10-11 at 21 09 49 Functionality is opt-in on a post basis. Simply add this to any post's frontmatter to activate it for this post: diff --git a/src/components/atoms/Modal.module.scss b/src/components/atoms/Modal.module.scss index d00c65b4..cfade373 100644 --- a/src/components/atoms/Modal.module.scss +++ b/src/components/atoms/Modal.module.scss @@ -10,14 +10,15 @@ bottom: 0; z-index: 10; background: rgba($body-background-color, .9); - backdrop-filter: blur(5px); + // backdrop-filter: blur(5px); animation: fadein .3s; - padding: $spacer / 2; + padding: $spacer; @media (min-width: $screen-sm) { display: flex; - align-items: center; + align-items: flex-start; justify-content: center; + padding-top: 6vh; } } @@ -42,20 +43,31 @@ cursor: pointer; background: transparent; border: 0; - -webkit-appearance: none; + appearance: none; line-height: 1; - font-size: $font-size-large; - padding: 3px; + font-size: $font-size-h2; + padding: 4px; position: absolute; top: 0; right: ($spacer/4); - color: $brand-grey; + color: $brand-grey-light; font-weight: 500; + + &:hover, + &:focus { + color: $brand-grey; + } } -// Prevent background scrolling when modal is open .isModalOpen { + // Prevent background scrolling when modal is open overflow: hidden; + + // more cross-browser backdrop-filter + body > div:first-child { + transition: filter .85s ease-out; + filter: blur(5px); + } } .modal__title { diff --git a/src/components/atoms/Web3Donation.jsx b/src/components/atoms/Web3Donation.jsx index b8ab94ec..c81283af 100644 --- a/src/components/atoms/Web3Donation.jsx +++ b/src/components/atoms/Web3Donation.jsx @@ -7,6 +7,79 @@ import styles from './Web3Donation.module.scss' const ONE_SECOND = 1000 const ONE_MINUTE = ONE_SECOND * 60 +const InputGroup = ({ + networkId, + selectedAccount, + amount, + onAmountChange, + handleWeb3Button +}) => ( +
+
+ +
+ ETH +
+
+ +
+) + +InputGroup.propTypes = { + networkId: PropTypes.string, + selectedAccount: PropTypes.string, + amount: PropTypes.number, + onAmountChange: PropTypes.func, + handleWeb3Button: PropTypes.func +} + +const Alerts = ({ accounts, networkId, error, transactionHash }) => { + if (error || accounts.length === 0) { + return ( +
+ {accounts.length === 0 && + 'Web3 detected, but no account. Are you logged into your MetaMask account?'} + {networkId !== '1' && 'Please connect to Main network'} + {error && error.message} +
+ ) + } + + if (transactionHash) { + return ( +
+ You are awesome, thanks! +
+ + See your transaction on etherscan.io. + +
+ ) + } + + return null +} + +Alerts.propTypes = { + accounts: PropTypes.array, + networkId: PropTypes.string, + error: PropTypes.object, + transactionHash: PropTypes.string +} + export default class Web3Donation extends PureComponent { state = { web3Connected: false, @@ -139,73 +212,38 @@ export default class Web3Donation extends PureComponent { render() { return (
-

web3

-

Send Ether with MetaMask, Brave, or Mist.

+
+

web3

+

Send Ether with MetaMask, Brave, or Mist.

+
{this.state.web3Connected ? ( -
+
{this.state.loading ? ( 'Hang on...' ) : ( -
-
- -
- ETH -
-
- -
+ )} - {this.state.accounts.length === 0 && ( -
- Web3 detected, but no account. Are you logged into your MetaMask - account? -
- )} - - {this.state.networkId !== '1' && ( -
Please connect to Main network
- )} - - {this.state.error && ( -
{this.state.error.message}
- )} - - {this.state.transactionHash && ( -
- You are awesome, thanks! -
- - See your transaction on etherscan.io. - -
- )} +
) : ( -
No Web3 capable browser detected.
+ + No Web3 detected. Install MetaMask + , Brave, or{' '} + Mist. + )}
) diff --git a/src/components/atoms/Web3Donation.module.scss b/src/components/atoms/Web3Donation.module.scss index 2ae7bf90..dcf801d6 100644 --- a/src/components/atoms/Web3Donation.module.scss +++ b/src/components/atoms/Web3Donation.module.scss @@ -10,17 +10,15 @@ margin-bottom: $spacer; padding-bottom: $spacer * 1.5; - h4 { - font-size: $font-size-large; - margin-top: 0; - margin-bottom: $spacer / 4; - color: $brand-grey; - text-align: center; + small { + color: darken($alert-info, 60%); + margin-top: -($spacer / 2); + display: block; } +} - p { - color: $brand-grey-light; - } +.web3Row { + min-height: 58px; } .inputGroup { @@ -30,17 +28,17 @@ @media (min-width: $screen-sm) { display: flex; - max-width: 20rem; + max-width: 18rem; } button { width: 100%; border-top-left-radius: 0; border-top-right-radius: 0; - border-color: lighten($brand-grey-light, 20%); + border-color: lighten($brand-grey-light, 10%); @media (min-width: $screen-sm) { - width: 45%; + width: 50%; border-top-right-radius: $border-radius; border-top-left-radius: 0; border-bottom-left-radius: 0; @@ -53,26 +51,29 @@ position: relative; @media (min-width: $screen-sm) { - width: 55%; + width: 50%; } input { text-align: center; border: 1px solid lighten($brand-grey-light, 20%); - font-size: $font-size-h3; - padding: $spacer / 3 $spacer / 3 $spacer / 3 $spacer * 1.9; + font-size: $font-size-large; + padding: $spacer / 3 $spacer / 3 $spacer / 3 $spacer * 1.7; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; @media (min-width: $screen-sm) { - padding: $spacer / 4 0 $spacer / 3 $spacer * 1.9; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: $border-radius; border-bottom: 1px solid lighten($brand-grey-light, 20%); border-right: 0; } + + &::-webkit-inner-spin-button { + margin-left: -($spacer / 2); + } } } @@ -81,7 +82,7 @@ top: 1px; bottom: 1px; left: 1px; - font-size: $font-size-base; + font-size: $font-size-small; padding: $spacer / 3; color: $brand-grey-light; background: $brand-light; diff --git a/src/components/molecules/ModalThanks.jsx b/src/components/molecules/ModalThanks.jsx index 0e86656e..d035be71 100644 --- a/src/components/molecules/ModalThanks.jsx +++ b/src/components/molecules/ModalThanks.jsx @@ -36,6 +36,11 @@ class ModalThanks extends PureComponent {
+
+

Other wallets

+

Send Bitcoin or Ether from any wallet.

+
+ {Object.keys(author).map((address, i) => (
diff --git a/src/components/molecules/ModalThanks.module.scss b/src/components/molecules/ModalThanks.module.scss index 0f499ab2..0c10f1e1 100644 --- a/src/components/molecules/ModalThanks.module.scss +++ b/src/components/molecules/ModalThanks.module.scss @@ -6,6 +6,30 @@ justify-content: space-between; flex-wrap: wrap; } + + h4 { + text-align: center; + margin: 0; + margin-bottom: $spacer / 2; + color: $brand-grey; + text-transform: capitalize; + } + + header { + width: 100%; + text-align: center; + margin-bottom: $spacer; + + h4 { + font-size: $font-size-large; + margin-top: 0; + margin-bottom: $spacer / 6; + } + + p { + color: $brand-grey-light; + } + } } .coin { @@ -16,14 +40,6 @@ margin-top: 0; } - h4 { - font-size: $font-size-large; - margin-top: 0; - margin-bottom: $spacer / 2; - color: $brand-grey; - text-align: center; - } - > svg { margin-bottom: $spacer / 2; } diff --git a/src/components/molecules/RelatedPosts.jsx b/src/components/molecules/RelatedPosts.jsx index da6b9ef0..76e8c534 100644 --- a/src/components/molecules/RelatedPosts.jsx +++ b/src/components/molecules/RelatedPosts.jsx @@ -103,7 +103,7 @@ class RelatedPosts extends PureComponent { className={`${styles.button} btn`} onClick={this.shufflePosts} > - More Related Posts + Refresh Related Posts ) diff --git a/src/styles/_code.scss b/src/styles/_code.scss index 6db3a6e7..4979db36 100644 --- a/src/styles/_code.scss +++ b/src/styles/_code.scss @@ -43,7 +43,7 @@ pre { border-radius: $border-radius; // make 'em scrollable - overflow: scroll; + overflow: auto; -webkit-overflow-scrolling: touch; max-height: 300px;