Merge tag 'v5.1.0'

# Conflicts:
#	README.md
#	src/components/layout/AppLayout.js

6 files changed, 45 insertions, 28 deletions

diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index 817801982..0a075036a 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -107,7 +107,7 @@
   &__scroll-container {
     max-height: 100vh;
     padding: 80px 0;
-    overflow: scroll;
+    overflow: auto;
     width: 100%;
   }
 
diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index f9fac039a..69879de31 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -8,7 +8,7 @@
   &.badge--primary,
   &.badge--premium {
     background: $theme-brand-primary;
-    color: $dark-theme-gray-smoke;
+    color: $dark-theme-gray-lightest;
   }
 }
 
@@ -19,6 +19,7 @@
   display: inline-block;
   font-size: 14px;
   padding: 5px 10px;
+  letter-spacing: 0;
 
   &.badge--primary,
   &.badge--premium {
diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss
index fb4917358..d3010942f 100644
--- a/src/styles/info-bar.scss
+++ b/src/styles/info-bar.scss
@@ -43,6 +43,10 @@
     }
   }
 
+  .info-bar__inline-button {
+    color: white;
+  }
+
   &.info-bar--bottom { order: 10; }
 
   &.info-bar--primary {
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 8b7cc512a..e858b7904 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -18,8 +18,14 @@ html { overflow: hidden; }
       font-size: 22px;
 
       &:hover,
-      &:active { color: $dark-theme-gray-smoke; }
-      &.is-muted { color: $theme-brand-primary; }
+      &:active {
+        color: $dark-theme-gray-smoke;
+      }
+
+      &.is-muted,
+      &.is-active {
+        color: $theme-brand-primary;
+      }
     }
   }
 
@@ -33,6 +39,7 @@ html { overflow: hidden; }
   .app__content { display: flex; }
 
   .app__service {
+    position: relative;
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -84,7 +91,7 @@ html { overflow: hidden; }
 
     &:hover,
     &:active { color: lighten($theme-gray-light, 10%); }
-    &.is-muted { color: $theme-brand-primary; }
+    &.is-muted, &.is-active { color: $theme-brand-primary; }
     &--new-service { padding-bottom: 6px; }
   }
 
@@ -124,15 +131,14 @@ html { overflow: hidden; }
   background: $theme-brand-warning;
   color: #FFF;
   display: block;
-  font-size: 10px;
+  font-size: 8px;
   height: auto;
   padding: 4px;
   position: fixed;
-  right: 5px;
-  top: 5px;
+  left: 9px;
+  bottom: 0px;
   transition: opacity .5s ease;
   width: auto;
   z-index: 999999999;
-
-  &:hover { opacity: 0; }
+  pointer-events: none;
 }
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 750b6bedd..1baff8b54 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -61,14 +61,9 @@
 
     .account {
       .account__box { background: $dark-theme-gray-darker; }
-
-      .invoices {
-        td { border-bottom: 1px solid $dark-theme-gray-darker; }
-        .invoices__action button { color: $theme-brand-primary; }
-      }
     }
 
-    .premium-info { 
+    .premium-info {
       background: $dark-theme-gray-darker;
       border: 2px solid $theme-brand-primary;
     }
@@ -329,15 +324,6 @@
     .account__avatar {
       margin-right: 20px;
       position: relative;
-
-      .emoji img { width: 30px; }
-    }
-
-    .account__avatar-premium {
-      font-size: 26px;
-      position: absolute;
-      right: 2px;
-      top: 2px;
     }
 
     .account__info {
@@ -345,6 +331,7 @@
 
       h2 { margin-bottom: 5px; }
       .badge { margin-top: 5px; }
+      .username { margin-right: 10 }
     }
 
     .account__subscription {
@@ -354,6 +341,22 @@
       .badge { margin-left: 10px; }
     }
 
+    .badge--premium {
+      margin-left: 1px;
+      position: relative;
+      top: -3px;
+      padding-top: 4px;
+      color: #FFF;
+      border-radius: 3px;
+    }
+
+
+    .manage-user-links {
+      margin-top: 20px;
+      display: flex;
+      justify-content: space-between;
+    }
+
     .account__subscription-button { margin-left: auto; }
     .franz-form__button { white-space: nowrap; }
     div { height: auto; }
@@ -414,6 +417,7 @@
 
   .settings-navigation__link {
     align-items: center;
+    justify-content: space-between;
     color: $theme-text-color;
     display: flex;
     flex-shrink: 0;
@@ -425,7 +429,9 @@
     &:hover {
       background: darken($theme-gray-lightest, 5%);
 
-      .badge { background: #FFF; }
+      .badge {
+        background: #FFF;
+      }
     }
 
     &.is-active {
@@ -442,8 +448,8 @@
   .settings-navigation__expander { flex: 1; }
 
   .badge {
+
     display: initial;
-    margin-left: 5px;
     transition: background $theme-transition-time, color $theme-transition-time;
   }
 
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss
index 0ce0c3379..52675ceed 100644
--- a/src/styles/toggle.scss
+++ b/src/styles/toggle.scss
@@ -41,7 +41,7 @@ $toggle-button-size: 22px;
 
     &.is-active .franz-form__toggle-button {
       background: $theme-brand-primary;
-      left: $toggle-width - $toggle-size - 3;;
+      left: $toggle-width - $toggle-size - 3;
     }
 
     input { display: none; }