5 files changed, 67 insertions, 17 deletions

diff --git a/src/styles/button.scss b/src/styles/button.scss
index cf2568fc4..d18b683d5 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -8,11 +8,11 @@
   &:active { background: lighten($theme-brand-primary, 5%); }
 
   &.franz-form__button--secondary {
-    background: $dark-theme-gray-lighter;
+    background: $dark-theme-gray-dark;
     color: $dark-theme-text-color;
 
-    &:hover { background: lighten($dark-theme-gray-lighter, 10%); }
-    &:active { background: lighten($dark-theme-gray-lighter, 20%); }
+    &:hover { background: lighten($dark-theme-gray-dark, 10%); }
+    &:active { background: lighten($dark-theme-gray-dark, 20%); }
   }
 
   &.franz-form__button--danger {
@@ -138,4 +138,4 @@
     color: #FFFFFF;
     cursor: pointer;  
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 6afe872bd..a33d26cf1 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,7 +1,7 @@
 @import "./type-helper";
 
 $theme-brand-primary:        convert-rgb-string-to-color($raw-theme-brand-primary);
-$theme-brand-gradient:       #7266F0;
+$theme-brand-gradient:       $theme-brand-primary;
 $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 ecc305193..acbd65ad1 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -17,9 +17,13 @@ html { overflow: hidden; }
 .theme__dark .app {
   .sidebar {
     background: $dark-theme-gray-darker;
-    box-shadow: 0 0 5px 0 $dark-theme-black;
     color: $theme-text-color;
 
+    &::after {
+      box-shadow: inset 0 0 5px 0 $dark-theme-black,
+                  inset 0 0 2px 0 rgba(0, 0, 0, 0.4);
+    }
+
     .sidebar__add-service {
       color: $dark-theme-gray-lighter;
       background: $dark-theme-gray;
@@ -108,9 +112,9 @@ body.win32:not(.isFullScreen) .app .app__content {
 .darwin .sidebar { padding-top: 23px; }
 
 .sidebar {
+  position: relative;
   align-items: center;
   background: $theme-gray-lightest;
-  box-shadow: 1px 0 10px rgba(0, 0, 0, .08);
   color: $theme-text-color;
   display: flex;
   flex-direction: column;
@@ -119,6 +123,20 @@ body.win32:not(.isFullScreen) .app .app__content {
   width: $theme-sidebar-width;
   z-index: 200;
 
+  &::after {
+    content: ' ';
+    position: absolute;
+    top: -10px;
+    right: 0;
+    bottom: -10px;
+    left: -10px;
+    z-index: 1000;
+    pointer-events: none;
+    clip-path: inset(10px 0 10px 10px);
+    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, .12),
+                inset 0 0 2px 0 rgba(0, 0, 0, 0.24);
+  }
+
   .sidebar__add-service {
     color: $theme-gray-light;
     background: $theme-gray-lighter;
@@ -191,4 +209,4 @@ body.win32:not(.isFullScreen) .app .app__content {
 
 a, button {
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index d09353e38..fb2f1c32a 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -36,7 +36,7 @@
     background: lighten($theme-brand-primary, 35%);
     border-left-width: 4px;
     border-left-style: solid;
-    border-left-color: $theme-brand-primary;
+    color: $theme-brand-primary;
 
     .tab-item__icon { margin-left: -4px; }
   }
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss
index 55660a088..426032bf6 100644
--- a/src/styles/vertical.scss
+++ b/src/styles/vertical.scss
@@ -1,13 +1,24 @@
-$sidebar-width: 65px;
+@import './config.scss';
+
+$sidebar-width: 64px;
 
 .sidebar {
   width: 100vw;
   height: $sidebar-width;
   flex-direction: row;
   position: absolute;
+  top: 0;
   right: 0;
   padding-bottom: 0px;
 
+  &::after {
+    top: -10px;
+    right: -10px;
+    bottom: 0;
+    left: -10px;
+    clip-path: inset(10px 10px 0 10px);
+  }
+
   div:first-of-type {
     overflow-x: scroll;
     width: 100%;
@@ -22,7 +33,6 @@ $sidebar-width: 65px;
         border-left-width: 0px;
         border-top-width: 4px;
         border-top-style: solid;
-        border-top-color: #7367f0;
         padding-left: 4px;
       }
 
@@ -40,17 +50,39 @@ $sidebar-width: 65px;
   }
 }
 
-.app_service {
-  width: 100vw;
-  position: absolute;
-  top: $sidebar-width;
-  right: 0;
+.app .app__content {
+  padding-top: $sidebar-width;
+}
+
+.workspaces-drawer {
+  margin-top: -$sidebar-width;
+  height: 100vh;
+  position: relative;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    top: -10px;
+    right: 0;
+    bottom: -10px;
+    left: -10px;
+    z-index: 1000;
+    pointer-events: none;
+    clip-path: inset(10px 0 10px 10px);
+    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .12),
+                inset 0 0 2px 0 rgba(0, 0, 0, 0.36);
+  }
 }
 
 .theme__dark {
   .sidebar .sidebar__button--workspaces.is-active {
     background-color: #2d2f31;
   }
+
+  .workspaces-drawer::after {
+    box-shadow: inset 0 0 10px 0 $dark-theme-black,
+                inset 0 0 2px 0 rgba(0, 0, 0, 0.4);
+  }
 }
 
 .darwin .sidebar {
@@ -59,4 +91,4 @@ $sidebar-width: 65px;
   .sidebar__button--workspaces.is-active {
     height: $sidebar-width - 22px;
   }
-}
\ No newline at end of file
+}