From 7d7e6f8df69f39968044143d045e70851ba32d43 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Tue, 21 Aug 2018 18:20:14 -0500
Subject: [PATCH] feat(testnet): add pill to UI on testnet

This commit adds a "Testnet" text UI next to our logo to show the user they are on the testnet network
---
 app/components/Wallet/Wallet.js   |  1 +
 app/components/Wallet/Wallet.scss | 20 +++++++++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js
index c565683c..88c35211 100644
--- a/app/components/Wallet/Wallet.js
+++ b/app/components/Wallet/Wallet.js
@@ -49,6 +49,7 @@ const Wallet = ({
         <header className={styles.header}>
           <section className={styles.logo}>
             <Isvg className={styles.bitcoinLogo} src={zapLogo} />
+            {info.data.testnet && <span className={styles.testnetPill}>Testnet</span>}
           </section>
 
           <section className={styles.user}>
diff --git a/app/components/Wallet/Wallet.scss b/app/components/Wallet/Wallet.scss
index 8cb8ce1d..17a7e05a 100644
--- a/app/components/Wallet/Wallet.scss
+++ b/app/components/Wallet/Wallet.scss
@@ -13,9 +13,23 @@
   flex-direction: row;
   justify-content: space-between;
 
-  .logo span svg {
-    width: 64px;
-    height: 24px;
+  .logo span {
+    line-height: 24px;
+
+    svg {
+      width: 64px;
+      height: 24px;
+      vertical-align: top;
+    }
+  }
+
+  .testnetPill {
+    margin-left: 10px;
+    // border: 1px solid rgb(57, 230, 115);
+    // padding: 5px 15px;
+    font-size: 10px;
+    border-radius: 100px;
+    color: rgb(57, 230, 115);
   }
 
   .user {