12 files changed, 84 insertions, 9 deletions

diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index 154a71a36..44c752677 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -27,7 +27,7 @@
 }
 
 .auth {
-  background: $theme-brand-primary;
+  background: $theme-brand-gradient;
   display: flex;
   justify-content: center;
 
diff --git a/src/styles/button.scss b/src/styles/button.scss
index a66345114..38f8fd26d 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -61,6 +61,11 @@
 
   &:disabled { opacity: .2; }
 
+  &.franz-form__button--large {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+
   &.franz-form__button--secondary {
     background: $theme-gray-lighter;
     color: $theme-gray;
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 80c2fb633..d89d42b9e 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,6 +1,7 @@
 @import "./type-helper";
 
 $theme-brand-primary:        convert-rgb-string-to-color($raw-theme-brand-primary);
+$theme-brand-gradient:       linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);
 $theme-brand-success:        convert-rgb-string-to-color($raw-theme-brand-success);
 $theme-brand-info:           convert-rgb-string-to-color($raw-theme-brand-info);
 $theme-brand-warning:        convert-rgb-string-to-color($raw-theme-brand-warning);
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index b18bd6dcf..c09d69f6c 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -2,6 +2,18 @@
 
 html { overflow: hidden; }
 
+@keyframes pulse-danger {
+  0% {
+    background: darken($theme-brand-danger, 10%);
+  }
+  50% {
+    background: lighten($theme-brand-danger, 10%);
+  }
+  100% {
+    background: darken($theme-brand-danger, 10%);
+  }
+}
+
 .theme__dark .app {
   .sidebar {
     background: $dark-theme-gray-darker;
@@ -26,6 +38,27 @@ html { overflow: hidden; }
       &.is-active {
         color: $theme-brand-primary;
       }
+
+      .update-available { 
+        align-items: center;
+        background: $theme-brand-danger;
+        border-radius: 20px;
+        bottom: 5px;
+        color: #FFF;
+        display: flex;
+        justify-content: center;
+        padding: 0px 5px;
+        position: absolute;
+        right: 16px;
+        padding-top: 0;
+        font-size: 0px;
+        min-height: 15px;
+        min-width: 15px;
+
+        animation-name: pulse-danger;
+        animation-duration: 0.75s;
+        animation-iteration-count: 6;
+      }
     }
   }
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 784a04d3d..1e9ed5714 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -30,6 +30,7 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './content-tabs.scss';
 @import './invite.scss';
 @import './title-bar.scss';
+@import './quick-switch.scss';
 
 // form
 @import './input.scss';
diff --git a/src/styles/quick-switch.scss b/src/styles/quick-switch.scss
new file mode 100644
index 000000000..356123c4c
--- /dev/null
+++ b/src/styles/quick-switch.scss
@@ -0,0 +1,13 @@
+.theme__dark .quick-switch {
+  background: $dark-theme-gray-darkest;
+
+  .service {
+    background: $dark-theme-gray-dark;
+    color: $dark-theme-gray-lightest;
+    border: inherit;
+  }
+
+  .active {
+    background: $theme-brand-primary;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 87d401215..b1e148ca0 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -30,7 +30,9 @@
 
     &.is-selected {
       background: #FFF;
-      border: 2px solid $theme-brand-primary;
+      border-width: 2px;
+      border-style: solid;
+      border-color: $theme-brand-primary;
       color: $theme-brand-primary;
     }
 
diff --git a/src/styles/services.scss b/src/styles/services.scss
index 5acf92d2c..ef1097791 100644
--- a/src/styles/services.scss
+++ b/src/styles/services.scss
@@ -64,7 +64,7 @@
       margin: 25px 0 40px;
     }
 
-    a.button,
+    .button,
     button { margin: 40px 0 20px; }
   }
 
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 150d58e76..324175d0b 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -59,7 +59,9 @@
 
     .premium-info {
       background: $dark-theme-gray-darker;
-      border: 2px solid $theme-brand-primary;
+      border-width: 2px;
+      border-style: solid;
+      border-color: $theme-brand-primary;
     }
     .legal { color: $theme-gray-light; }
   }
@@ -170,7 +172,9 @@
     }
 
     .separator {
-      border-right: 1px solid darken($theme-brand-primary, 8%);
+      border-right-width: 1px;
+      border-right-style: solid;
+      border-right-color: $theme-brand-primary;
       height: 100%;
       margin: 0 15px;
       transform: skew(15deg) rotate(2deg);
@@ -224,7 +228,7 @@
 
   .settings__close {
     background: $theme-brand-primary;
-    border-left: 1px solid darken($theme-brand-primary, 8%);
+    // border-left: 1px solid darken($theme-brand-primary, 8%);
     color: #FFF;
     font-size: 20px;
     height: 50px;
@@ -233,7 +237,9 @@
     right: 0;
     transition: background $theme-transition-time;
     border-top-right-radius: $theme-border-radius;
+    cursor: pointer;
 
+    &::before { cursor: pointer; }
     &:hover { background: darken($theme-brand-primary, 5%); }
   }
 
@@ -296,6 +302,7 @@
   }
 
   .settings__delete-button { right: 0; }
+  .settings__open-dark-mode-button { right: 0; cursor:pointer; }
 
   .settings__empty-state {
     align-items: center;
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index cbd833f04..e500830ed 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -34,7 +34,9 @@
 
   &.is-active {
     background: lighten($theme-brand-primary, 35%);
-    border-left: 4px solid $theme-brand-primary;
+    border-left-width: 4px;
+    border-left-style: solid;
+    border-left-color: $theme-brand-primary;
 
     .tab-item__icon { margin-left: -4px; }
   }
@@ -64,6 +66,13 @@
     right: 8px;
 
     &.is-indirect { padding-top: 0; }
+    &.hibernating { 
+      padding-top: 0; 
+      background: $theme-gray; 
+      font-size: 0px;
+      min-height: 10px;
+      min-width: 10px;
+    }
   }
 
   .tab-item__info-badge {
diff --git a/src/styles/type.scss b/src/styles/type.scss
index 135d32da0..636b8fd36 100644
--- a/src/styles/type.scss
+++ b/src/styles/type.scss
@@ -33,13 +33,15 @@ p {
 
 strong { font-weight: bold; }
 
-a {
+a, button {
   color: $theme-text-color;
   text-decoration: none;
 
   &.button {
     background: none;
-    border: 2px solid $theme-brand-primary;
+    border-width: 2px;
+    border-style: solid;
+    border-color: $theme-brand-primary;
     border-radius: 3px;
     color: $theme-brand-primary;
     display: inline-block;
@@ -47,6 +49,7 @@ a {
     position: relative;
     text-align: center;
     transition: background .5s, color .5s;
+    cursor: pointer;
 
     &:hover {
       background: darken($theme-brand-primary, 5%);
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss
index b517431f0..c1f85391e 100644
--- a/src/styles/welcome.scss
+++ b/src/styles/welcome.scss
@@ -48,6 +48,7 @@
   .button {
     border-color: #FFF;
     color: #FFF;
+    cursor: pointer;
 
     &:hover {
       background: #FFF;