mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-22 18:00:06 +01:00
style tweaks
This commit is contained in:
parent
992f92f7cf
commit
a9f6d18c46
@ -60,7 +60,7 @@ Lets visitors say thanks with Bitcoin or Ether. Uses [web3.js](https://github.co
|
||||
|
||||
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).
|
||||
|
||||
<img width="1186" alt="screen shot 2018-10-14 at 21 47 47" src="https://user-images.githubusercontent.com/90316/46921378-d0673b00-cffa-11e8-9d55-e954e9a56433.png" />
|
||||
<img width="1082" alt="screen shot 2018-10-14 at 22 03 57" src="https://user-images.githubusercontent.com/90316/46921544-1a512080-cffd-11e8-919f-d3e86dbd5cc5.png" />
|
||||
|
||||
If you want to know how this works, have a look at the respective components under
|
||||
|
||||
|
@ -4,14 +4,9 @@
|
||||
font-size: $font-size-mini;
|
||||
color: $brand-grey-light;
|
||||
max-width: 8rem;
|
||||
margin: auto;
|
||||
margin-bottom: $spacer / 2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border: 1px solid $brand-grey-dimmed;
|
||||
padding: $spacer / 10 $spacer / 2 $spacer / 6 $spacer / 2;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.identicon {
|
||||
@ -19,5 +14,6 @@
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: $spacer / 4;
|
||||
margin-right: $spacer / 8;
|
||||
margin-left: $spacer;
|
||||
}
|
||||
|
@ -4,11 +4,6 @@
|
||||
font-size: $font-size-mini;
|
||||
color: $brand-grey-light;
|
||||
text-align: center;
|
||||
margin-top: $spacer / 4;
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: $spacer / 2;
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Input from '../atoms/Input'
|
||||
import Account from './Account'
|
||||
import Conversion from './Conversion'
|
||||
import styles from './InputGroup.module.scss'
|
||||
|
||||
@ -10,7 +11,8 @@ export default class InputGroup extends PureComponent {
|
||||
hasAccount: PropTypes.bool.isRequired,
|
||||
amount: PropTypes.string.isRequired,
|
||||
onAmountChange: PropTypes.func.isRequired,
|
||||
handleButton: PropTypes.func.isRequired
|
||||
handleButton: PropTypes.func.isRequired,
|
||||
selectedAccount: PropTypes.string
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -19,7 +21,8 @@ export default class InputGroup extends PureComponent {
|
||||
hasAccount,
|
||||
amount,
|
||||
onAmountChange,
|
||||
handleButton
|
||||
handleButton,
|
||||
selectedAccount
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
@ -44,7 +47,10 @@ export default class InputGroup extends PureComponent {
|
||||
>
|
||||
Make it rain
|
||||
</button>
|
||||
<Conversion amount={amount} />
|
||||
<div className={styles.infoline}>
|
||||
<Conversion amount={amount} />
|
||||
{selectedAccount && <Account account={selectedAccount} />}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -72,3 +72,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.infoline {
|
||||
flex-basis: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: $spacer / 4;
|
||||
}
|
||||
|
@ -1,7 +1,6 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Web3 from 'web3'
|
||||
import Account from './Account'
|
||||
import InputGroup from './InputGroup'
|
||||
import Alerts from './Alerts'
|
||||
import styles from './index.module.scss'
|
||||
@ -188,8 +187,6 @@ export default class Web3Donation extends PureComponent {
|
||||
<p>Send Ether with MetaMask, Brave, or Mist.</p>
|
||||
</header>
|
||||
|
||||
{selectedAccount && <Account account={selectedAccount} />}
|
||||
|
||||
{web3Connected && (
|
||||
<div className={styles.web3Row}>
|
||||
{loading ? (
|
||||
@ -198,6 +195,7 @@ export default class Web3Donation extends PureComponent {
|
||||
<InputGroup
|
||||
hasCorrectNetwork={hasCorrectNetwork}
|
||||
hasAccount={hasAccount}
|
||||
selectedAccount={selectedAccount}
|
||||
amount={amount}
|
||||
onAmountChange={this.onAmountChange}
|
||||
handleButton={this.handleButton}
|
||||
|
@ -18,7 +18,7 @@
|
||||
header {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: $spacer / 2;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
h4 {
|
||||
font-size: $font-size-large;
|
||||
|
Loading…
Reference in New Issue
Block a user