style tweaks

README.md

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

src/components/Web3Donation/Account.module.scss

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

src/components/Web3Donation/Conversion.module.scss

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

src/components/Web3Donation/InputGroup.jsx

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

src/components/Web3Donation/InputGroup.module.scss

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

src/components/Web3Donation/index.jsx

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

src/components/molecules/ModalThanks.module.scss

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