From 94201d202168ef6b1ac265eb0e5cb2ffbf5199a3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 28 Feb 2019 13:28:38 -0300
Subject: [PATCH] faucet styling

---
 src/components/atoms/Spinner.module.scss |  3 +-
 src/routes/Faucet.module.scss            | 12 +++++
 src/routes/Faucet.tsx                    | 62 +++++++++++++++---------
 3 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/src/components/atoms/Spinner.module.scss b/src/components/atoms/Spinner.module.scss
index 78992c6..d2406f2 100644
--- a/src/components/atoms/Spinner.module.scss
+++ b/src/components/atoms/Spinner.module.scss
@@ -3,6 +3,7 @@
 .spinner {
     position: relative;
     text-align: center;
+    margin-top: $spacer * $line-height;
     margin-bottom: $spacer / 2;
 
     &:before {
@@ -13,7 +14,7 @@
         left: 50%;
         width: 20px;
         height: 20px;
-        margin-top: -10px;
+        margin-top: -20px;
         margin-left: -10px;
         border-radius: 50%;
         border: 2px solid $brand-purple;
diff --git a/src/routes/Faucet.module.scss b/src/routes/Faucet.module.scss
index 38b9719..2aef577 100644
--- a/src/routes/Faucet.module.scss
+++ b/src/routes/Faucet.module.scss
@@ -1,2 +1,14 @@
 @import '../styles/variables';
 
+.action {
+    text-align: center;
+    margin-top: $spacer * $line-height;
+
+    p {
+        margin-bottom: $spacer;
+    }
+}
+
+.success {
+    color: $green;
+}
diff --git a/src/routes/Faucet.tsx b/src/routes/Faucet.tsx
index 2a7ae5e..28acefb 100644
--- a/src/routes/Faucet.tsx
+++ b/src/routes/Faucet.tsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import Route from '../components/templates/Route'
 import Button from '../components/atoms/Button'
+import Spinner from '../components/atoms/Spinner'
 import { User } from '../context/User'
 import Web3message from '../components/molecules/Web3message'
 import styles from './Faucet.module.scss'
@@ -9,13 +10,15 @@ interface FaucetState {
     isLoading: boolean
     success?: string
     error?: string
+    eth?: string
 }
 
 class Faucet extends PureComponent<{}, FaucetState> {
     public state = {
         isLoading: false,
         success: undefined,
-        error: undefined
+        error: undefined,
+        eth: 'xx'
     }
 
     private getTokens = async (requestFromFaucet: () => void) => {
@@ -23,7 +26,12 @@ class Faucet extends PureComponent<{}, FaucetState> {
 
         try {
             await requestFromFaucet()
-            this.setState({ isLoading: false, success: 'Tokens added!' })
+            this.setState({
+                isLoading: false,
+                success: `Successfully added ${
+                    this.state.eth
+                } ETH to your account.`
+            })
         } catch (error) {
             this.setState({ isLoading: false, error })
         }
@@ -37,26 +45,36 @@ class Faucet extends PureComponent<{}, FaucetState> {
             >
                 <Web3message />
 
-                <User.Consumer>
-                    {states =>
-                        this.state.isLoading ? (
-                            'Getting tokens...'
-                        ) : this.state.error ? (
-                            this.state.error
-                        ) : this.state.success ? (
-                            this.state.success
-                        ) : (
-                            <Button
-                                primary
-                                onClick={() =>
-                                    this.getTokens(states.requestFromFaucet)
-                                }
-                            >
-                                Request Ether
-                            </Button>
-                        )
-                    }
-                </User.Consumer>
+                <div className={styles.action}>
+                    <p>
+                        Click the button below to request Ether for the Ocean
+                        POA network.
+                        <br /> You can only request Ether once every 24 hours
+                        for your address.
+                    </p>
+                    <User.Consumer>
+                        {states =>
+                            this.state.isLoading ? (
+                                <Spinner message="Getting Ether..." />
+                            ) : this.state.error ? (
+                                this.state.error
+                            ) : this.state.success ? (
+                                <div className={styles.success}>
+                                    {this.state.success}
+                                </div>
+                            ) : (
+                                <Button
+                                    primary
+                                    onClick={() =>
+                                        this.getTokens(states.requestFromFaucet)
+                                    }
+                                >
+                                    Request Ether
+                                </Button>
+                            )
+                        }
+                    </User.Consumer>
+                </div>
             </Route>
         )
     }