1 files changed, 13 insertions, 33 deletions

diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index bdbdd2645..ccc9a0118 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -16,7 +16,8 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    margin: 2.8em 2.37em .8em;
+    margin: 2.3em 2.37em .8em;
+    flex: 0 0 auto;
   }
 
   .balance-container {
@@ -37,13 +38,16 @@
   }
 
   .balance-display {
+    .token-amount {
+      color: $black;
+    }
 
     @media screen and (max-width: $break-small) {
       text-align: center;
 
       .token-amount {
-        font-size: 175%;
-        margin-top: 12.5%;
+        font-size: 1.75rem;
+        margin-top: 1rem;
       }
 
       .fiat-amount {
@@ -54,12 +58,12 @@
     }
 
     @media screen and (min-width: $break-large) {
-      margin-left: 3%;
+      margin-left: .8em;
       justify-content: flex-start;
       align-items: flex-start;
 
       .token-amount {
-        font-size: 135%;
+        font-size: 1.5rem;
       }
 
       .fiat-amount {
@@ -69,13 +73,6 @@
     }
   }
 
-  .balance-icon {
-    border-radius: 25px;
-    width: 45px;
-    height: 45px;
-    border: 1px solid $alto;
-  }
-
   .hero-balance-buttons {
 
     @media screen and (max-width: $break-small) {
@@ -89,26 +86,9 @@
       flex-grow: 2;
       justify-content: flex-end;
     }
-
-    button.btn-clear {
-      background: $white;
-      border: 1px solid;
-      border-radius: 2px;
-      font-size: 12px;
-
-      @media screen and (max-width: $break-small) {
-        border-color: $curious-blue;
-        color: $curious-blue;
-        height: 36px;
-      }
-
-      @media screen and (min-width: $break-large) {
-        border-color: $curious-blue;
-        color: $curious-blue;
-        padding: 0;
-        width: 85px;
-        height: 34px;
-      }
-    }
   }
 }
+
+.hero-balance-button {
+  width: 6rem;
+}