1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-22 18:00:06 +01:00

style tweaks

This commit is contained in:
Matthias Kretschmann 2018-10-14 22:04:54 +02:00
parent 992f92f7cf
commit a9f6d18c46
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 22 additions and 19 deletions

View File

@ -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

View File

@ -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;
}

View File

@ -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;

View File

@ -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>
)
}

View File

@ -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;
}

View File

@ -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}

View File

@ -18,7 +18,7 @@
header {
width: 100%;
text-align: center;
margin-bottom: $spacer / 2;
margin-bottom: $spacer;
h4 {
font-size: $font-size-large;