From a9f6d18c46e380fd2d586e9a73cebe671e41d40f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 14 Oct 2018 22:04:54 +0200
Subject: [PATCH] style tweaks

---
 README.md                                          |  2 +-
 src/components/Web3Donation/Account.module.scss    |  8 ++------
 src/components/Web3Donation/Conversion.module.scss |  5 -----
 src/components/Web3Donation/InputGroup.jsx         | 12 +++++++++---
 src/components/Web3Donation/InputGroup.module.scss |  8 ++++++++
 src/components/Web3Donation/index.jsx              |  4 +---
 src/components/molecules/ModalThanks.module.scss   |  2 +-
 7 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 499219bd..4966021d 100644
--- a/README.md
+++ b/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
 
diff --git a/src/components/Web3Donation/Account.module.scss b/src/components/Web3Donation/Account.module.scss
index d06c7b35..d0ebeeb3 100644
--- a/src/components/Web3Donation/Account.module.scss
+++ b/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;
 }
diff --git a/src/components/Web3Donation/Conversion.module.scss b/src/components/Web3Donation/Conversion.module.scss
index 304732ad..3caec195 100644
--- a/src/components/Web3Donation/Conversion.module.scss
+++ b/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;
diff --git a/src/components/Web3Donation/InputGroup.jsx b/src/components/Web3Donation/InputGroup.jsx
index e05923f5..0e2edf8a 100644
--- a/src/components/Web3Donation/InputGroup.jsx
+++ b/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>
     )
   }
diff --git a/src/components/Web3Donation/InputGroup.module.scss b/src/components/Web3Donation/InputGroup.module.scss
index 8f74040d..27b0b23c 100644
--- a/src/components/Web3Donation/InputGroup.module.scss
+++ b/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;
+}
diff --git a/src/components/Web3Donation/index.jsx b/src/components/Web3Donation/index.jsx
index 5f028336..e6e388f2 100644
--- a/src/components/Web3Donation/index.jsx
+++ b/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}
diff --git a/src/components/molecules/ModalThanks.module.scss b/src/components/molecules/ModalThanks.module.scss
index a04f098c..0c10f1e1 100644
--- a/src/components/molecules/ModalThanks.module.scss
+++ b/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;