update settings ui

1 files changed, 42 insertions, 29 deletions

diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 0955aaa0c..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; }
@@ -414,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;
@@ -426,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%);