faucet styling

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;

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

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,14 +45,23 @@ class Faucet extends PureComponent<{}, FaucetState> {
             >
                 <Web3message />
 
+                <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 ? (
-                            'Getting tokens...'
+                                <Spinner message="Getting Ether..." />
                             ) : this.state.error ? (
                                 this.state.error
                             ) : this.state.success ? (
-                            this.state.success
+                                <div className={styles.success}>
+                                    {this.state.success}
+                                </div>
                             ) : (
                                 <Button
                                     primary
@@ -57,6 +74,7 @@ class Faucet extends PureComponent<{}, FaucetState> {
                             )
                         }
                     </User.Consumer>
+                </div>
             </Route>
         )
     }