extracted balance component and renders to the format, also wired in the account name

1 files changed, 20 insertions, 3 deletions

diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index f7ecf0cdf..f657e4f2c 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -20,7 +20,25 @@ $break-large: 576px;
     margin: 2.8em 0.9em 0.8em 0.9em;
   }
 
-  .hero-balance-display {
+  .balance-container {
+
+    display: flex;
+    margin: 0;
+    justify-content: flex-start;
+    align-items: center;
+
+    @media screen and (max-width: $break-small) {
+      flex-direction: column;
+    }
+
+    @media screen and (min-width: $break-large) {
+      flex-direction: row;
+      flex-grow: 3;
+    }
+
+  }
+
+  .balance-display {
 
     @media screen and (max-width: $break-small) {
       text-align: center;
@@ -38,7 +56,6 @@ $break-large: 576px;
     }
 
     @media screen and (min-width: $break-large) {
-      flex-grow: 3;
       margin-left: 3%;
       justify-content: flex-start;
       align-items: flex-start;
@@ -56,7 +73,7 @@ $break-large: 576px;
 
   }
 
-  .hero-balance-icon {
+  .balance-icon {
     border-radius: 25px;
     width: 45px;
     height: 45px;