5 files changed, 43 insertions, 28 deletions
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index 657760ab5..96fba890c 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -116,6 +116,10 @@
   &__name {
     color: $white;
     font-size: 18px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 200px;
   }
 
   &__balance {
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 4cbed6093..f93daec04 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -2,10 +2,10 @@
   Buttons
  */
 
+.btn-default,
 .btn-primary,
-.btn-primary--lg,
-.btn-secondary,
-.btn-secondary--lg {
+.btn-secondary {
+  height: 44px;
   background: $white;
   display: flex;
   justify-content: center;
@@ -20,10 +20,16 @@
   width: 100%;
   text-transform: uppercase;
   outline: none;
+
+  &--disabled,
+  &[disabled] {
+    cursor: auto;
+    opacity: .5;
+    pointer-events: none;
+  }
 }
 
-.btn-primary,
-.btn-primary--lg {
+.btn-primary {
   color: $curious-blue;
   border: 2px solid $spindle;
 
@@ -35,17 +41,23 @@
   &:hover {
     border-color: $curious-blue;
   }
+}
 
-  &--disabled,
-  &[disabled] {
-    cursor: auto;
-    opacity: .5;
-    pointer-events: none;
+.btn-secondary {
+  color: $monzo;
+  border: 2px solid lighten($monzo, 40%);
+
+  &:active {
+    background: lighten($monzo, 55%);
+    border-color: $monzo;
+  }
+
+  &:hover {
+    border-color: $monzo;
   }
 }
 
-.btn-secondary,
-.btn-secondary--lg {
+.btn-default {
   color: $scorpion;
   border: 2px solid $dusty-gray;
 
@@ -57,20 +69,9 @@
   &:hover {
     border-color: $scorpion;
   }
-
-  &--disabled,
-  &[disabled] {
-    cursor: auto;
-    opacity: .5;
-    pointer-events: none;
-  }
-}
-
-.btn-primary, .btn-secondary {
-  height: 44px;
 }
 
-.btn-primary--lg, .btn-secondary--lg {
+.btn--large {
   height: 54px;
 }
 
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index 69cde8a0f..09d66aedd 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -6,6 +6,7 @@
     justify-content: flex-start;
     align-items: center;
     flex: 0 0 auto;
+    padding-top: 16px;
   }
 
   @media screen and (min-width: $break-large) {
diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss
index c18b7fa59..b07d6af17 100644
--- a/ui/app/css/itcss/components/loading-overlay.scss
+++ b/ui/app/css/itcss/components/loading-overlay.scss
@@ -11,8 +11,8 @@
   background: rgba(255, 255, 255, .8);
 
   @media screen and (max-width: 575px) {
-    margin-top: 56px;
-    height: calc(100% - 56px);
+    margin-top: 66px;
+    height: calc(100% - 66px);
   }
 
   @media screen and (min-width: 576px) {
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index e8de317e3..72fda372f 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -14,10 +14,17 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   min-width: 0;
 
   &__token-balance {
-    font-size: 1.5rem;
+    margin-right: 4px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  &__token-balance, &__token-symbol {
+    font-size: 1.5rem;
+    flex: 0 0 auto;
 
     @media #{$wallet-balance-breakpoint-range} {
       font-size: 95%;
@@ -66,7 +73,9 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   }
 
   &__balance-wrapper {
-    flex: 1 1 auto;
+    flex: 1;
+    flex-flow: row wrap;
+    display: flex;
     min-width: 0;
   }
 }