Merge branch 'master' of https://github.com/meetfranz/franz into franz-5.3.0

5 files changed, 58 insertions, 36 deletions

diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index cbc720559..44c752677 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -9,7 +9,7 @@
   }
 
   .auth__logo.auth__logo--sm {
-    border: 4px solid $dark-theme-black;
+    border: none;
     box-shadow: 0 0 6px rgba($dark-theme-black, .5);
   }
 
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 9f226b61c..b18bd6dcf 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -32,14 +32,22 @@ html { overflow: hidden; }
   .app-loader .app-loader__title { color: $dark-theme-gray-lightest; }
 }
 
+body.win32:not(.isFullScreen) .app .app__content {
+  height: calc(100% - 28px);
+}
+
 .app {
-  display: flex;
-  flex-direction: column;
+  .app__content {
+    display: flex;
+    width: calc(100% + 300px);
+  }
 
-  .app__content { display: flex; }
+  .app__main-content {
+    display: flex;
+    width: 100%;
+  }
 
   .app__service {
-    // position: relative;
     display: flex;
     flex: 1;
     flex-direction: column;
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss
index 84222e1fe..5bdc60a57 100644
--- a/src/styles/recipes.scss
+++ b/src/styles/recipes.scss
@@ -2,6 +2,7 @@
 
 .theme__dark .recipe-teaser {
   background-color: $dark-theme-gray-dark;
+  color: $dark-theme-text-color;
 
   &:hover { background-color: $dark-theme-gray; }
 }
@@ -12,7 +13,7 @@
     display: flex;
     flex-flow: row wrap;
     height: auto;
-    min-height: 70%;
+    // min-height: 70%;
 
     &.recipes__list--disabled {
       filter: grayscale(100%);
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index f46ede4a2..d87ce652a 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -51,7 +51,6 @@ button {
   padding: 0;
 
   &:focus { outline: 0; }
-  .theme__dark & { color: $dark-theme-gray-smoke; }
 }
 
 html {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 1baff8b54..bb95ab5d2 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -1,45 +1,39 @@
 @import './config.scss';
 
 %headline {
-  color: $theme-gray-light;
+  color: #FFF;
   font-size: 20px;
   font-weight: 400;
   letter-spacing: -1px;
 
-  a { color: $theme-gray-light; }
+  a { color: #FFF }
 }
 
 %headline__dark {
-  color: $dark-theme-gray-lightest;
+  color: #FFF;
+  font-size: 20px;
+  font-weight: 400;
+  letter-spacing: -1px;
 
-  a { color: $dark-theme-gray-lightest; }
+  a { color: #FFF }
 }
 
 .theme__dark {
   .settings-wrapper { background: rgba($dark-theme-black, .8); }
 
   .settings {
-    background: $dark-theme-gray-darkest;
-    box-shadow: 0 20px 50px rgba($dark-theme-black, .5);
-
     .settings__header {
-      background: $dark-theme-gray-darker;
-
-      h1,
-      .settings__header-item { @extend %headline__dark; }
+      .mdi { color: #FFF }
+    }
 
-      .separator { border-right: 1px solid $dark-theme-gray-dark; }
-      .mdi { color: $dark-theme-gray-lightest; }
+    .settings__main {
+      background: $dark-theme-gray-darkest;
     }
 
     .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; }
 
     .settings__close {
-      background: $dark-theme-gray-darker;
-      border-left: none;
-      color: $dark-theme-gray-lightest;
-
-      &:hover { background: darken($dark-theme-gray-darker, 5%); }
+      color: #FFF;
     }
 
     &__settings-group h3 { color: $dark-theme-gray-lightest; }
@@ -76,6 +70,11 @@
 
     .settings-navigation__link {
       color: $dark-theme-gray-lightest;
+      border-bottom: 1px solid darken($dark-theme-gray-darker, 3%);
+
+      &:last-child {
+        border: 0,
+      }
 
       .badge {
         background: $dark-theme-gray-lighter;
@@ -129,15 +128,14 @@
 }
 
 .settings {
-  background: #FFF;
   border-radius: $theme-border-radius;
-  box-shadow: 0 20px 50px rgba(black, .5);
+  // box-shadow: 0 20px 50px rgba(black, .5);
   display: flex;
   height: 100%;
   max-height: 720px;
   max-width: 900px;
   min-height: 400px;
-  overflow: hidden;
+  // overflow: hidden;
   position: relative;
   width: 100%;
   z-index: 9999;
@@ -147,25 +145,32 @@
     flex: 1;
     flex-direction: column;
     height: auto;
+    border-radius: $theme-border-radius;
+    overflow: hidden;
+    box-shadow: 0 20px 50px rgba($dark-theme-black, .5);
+    background: #FFF;
   }
 
   .settings__header {
     align-items: center;
-    background: $theme-gray-lighter;
+    background: $theme-brand-primary;
     display: flex;
     height: 50px;
     padding: 0 40px;
     width: calc(100% - 60px);
+    color: #FFF;
 
     h1 {
       @extend %headline;
       margin: 0;
     }
 
-    .settings__header-item { @extend %headline; }
+    .settings__header-item {
+      @extend %headline;
+    }
 
     .separator {
-      border-right: 1px solid darken($theme-gray-lighter, 10%);
+      border-right: 1px solid darken($theme-brand-primary, 8%);
       height: 100%;
       margin: 0 15px;
       transform: skew(15deg) rotate(2deg);
@@ -218,17 +223,18 @@
   }
 
   .settings__close {
-    background: $theme-gray-lighter;
-    border-left: 1px solid darken($theme-gray-lighter, 5%);
-    color: $theme-gray-light;
+    background: $theme-brand-primary;
+    border-left: 1px solid darken($theme-brand-primary, 8%);
+    color: #FFF;
     font-size: 20px;
     height: 50px;
     padding: 0 20px;
     position: absolute;
     right: 0;
     transition: background $theme-transition-time;
+    border-top-right-radius: $theme-border-radius;
 
-    &:hover { background: darken($theme-gray-lighter, 5%); }
+    &:hover { background: darken($theme-brand-primary, 5%); }
   }
 
   .search-input { margin-bottom: 30px; }
@@ -360,6 +366,7 @@
     .account__subscription-button { margin-left: auto; }
     .franz-form__button { white-space: nowrap; }
     div { height: auto; }
+    [data-type="franz-button"] div { height: 100% }
 
     .invoices {
       width: 100%;
@@ -413,7 +420,13 @@
   background: $theme-gray-lightest;
   flex-direction: column;
   height: auto;
-  width: 200px;
+  width: 240px;
+  height: calc(100% - 100px);
+  align-self: center;
+  border-top-left-radius: $theme-border-radius;;
+  border-bottom-left-radius: $theme-border-radius;;
+  overflow: hidden;
+  box-shadow: 0 20px 50px rgba($dark-theme-black, .5);
 
   .settings-navigation__link {
     align-items: center;
@@ -425,6 +438,7 @@
     padding: 0 20px;
     text-decoration: none;
     transition: background $theme-transition-time, color $theme-transition-time;
+    border-bottom: 1px solid darken($theme-gray-lightest, 3%);
 
     &:hover {
       background: darken($theme-gray-lightest, 5%);