From 9bfa522da339d235bbc88ae6b1123755685a9dfb Mon Sep 17 00:00:00 2001
From: tibing <parapupum@gmail.com>
Date: Thu, 31 Aug 2017 14:58:28 +0300
Subject: [PATCH] refactor(theme): style settings sidebar

---
 src/app/@core/data/state.service.ts           | 15 ++++--------
 .../theme-settings.component.scss             | 23 +++++++++++++++----
 .../theme-settings.component.ts               |  4 ++--
 .../@theme/layouts/sample/sample.layout.scss  | 20 +++++++++-------
 4 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/app/@core/data/state.service.ts b/src/app/@core/data/state.service.ts
index ae13f192..a6bcb08b 100644
--- a/src/app/@core/data/state.service.ts
+++ b/src/app/@core/data/state.service.ts
@@ -10,23 +10,18 @@ export class StateService {
   protected layouts: any = [
     {
       name: 'One Column',
-      icon: 'ion ion-grid',
+      icon: 'nb-layout-default',
       id: 'one-column',
       selected: true,
     },
     {
       name: 'Two Column',
-      icon: 'ion ion-grid',
+      icon: 'nb-layout-two-column',
       id: 'two-column',
     },
-    {
-      name: 'Three Column',
-      icon: 'ion ion-grid',
-      id: 'three-column',
-    },
     {
       name: 'Center Column',
-      icon: 'ion ion-grid',
+      icon: 'nb-layout-centre',
       id: 'center-column',
     },
   ];
@@ -34,13 +29,13 @@ export class StateService {
   protected sidebars: any = [
     {
       name: 'Left Sidebar',
-      icon: 'ion ion-grid',
+      icon: 'nb-layout-sidebar-left',
       id: 'left',
       selected: true,
     },
     {
       name: 'Right Sidebar',
-      icon: 'ion ion-grid',
+      icon: 'nb-layout-sidebar-right',
       id: 'right',
     },
   ];
diff --git a/src/app/@theme/components/theme-settings/theme-settings.component.scss b/src/app/@theme/components/theme-settings/theme-settings.component.scss
index 823d537c..12c6d732 100644
--- a/src/app/@theme/components/theme-settings/theme-settings.component.scss
+++ b/src/app/@theme/components/theme-settings/theme-settings.component.scss
@@ -1,21 +1,36 @@
 @import '../../styles/themes';
 
 @include nb-install-component() {
+  h5 {
+    margin-bottom: 1.5rem;
+  }
+
   .settings-row {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding-bottom: 0.5rem;
+    align-items: center;
     flex-wrap: wrap;
 
+    width: 90%;
+    margin: 0 auto 3rem;
+
     a {
-      font-size: 2rem;
-      margin-right: 1rem;
-      color: nb-theme(color-white);
+      text-decoration: none;
+      font-size: 1.75rem;
+      margin-bottom: 0.5rem;
+
+      color: nb-theme(color-fg);
 
       &.selected {
         color: nb-theme(color-success);
       }
+
+      @include nb-for-theme(cosmic) {
+        &.selected {
+          color: nb-theme(link-color-active);
+        }
+      }
     }
   }
 }
diff --git a/src/app/@theme/components/theme-settings/theme-settings.component.ts b/src/app/@theme/components/theme-settings/theme-settings.component.ts
index 6ce1d3bd..60694d97 100644
--- a/src/app/@theme/components/theme-settings/theme-settings.component.ts
+++ b/src/app/@theme/components/theme-settings/theme-settings.component.ts
@@ -6,7 +6,7 @@ import { StateService } from '../../../@core/data/state.service';
   selector: 'ngx-theme-settings',
   styleUrls: ['./theme-settings.component.scss'],
   template: `
-    <strong class="small">LAYOUTS</strong>
+    <h5>LAYOUTS</h5>
     <div class="settings-row">
       <a *ngFor="let layout of layouts"
          href="#"
@@ -16,7 +16,7 @@ import { StateService } from '../../../@core/data/state.service';
         <i [attr.class]="layout.icon"></i>
       </a>
     </div>
-    <strong class="small">SIDEBAR</strong>
+    <h5>SIDEBAR</h5>
     <div class="settings-row">
       <a *ngFor="let sidebar of sidebars"
          href="#"
diff --git a/src/app/@theme/layouts/sample/sample.layout.scss b/src/app/@theme/layouts/sample/sample.layout.scss
index a23fa3ef..66d28994 100644
--- a/src/app/@theme/layouts/sample/sample.layout.scss
+++ b/src/app/@theme/layouts/sample/sample.layout.scss
@@ -1,22 +1,26 @@
 @import '../../styles/themes';
 
 @include nb-install-component() {
-
   nb-layout-column.small {
     flex: 0.15 !important;
   }
 
   nb-sidebar.settings-sidebar {
-    width: 7rem;
-    /deep/ .main-container {
-      width: 7rem;
-      background: #3a3850;
-    }
+    $sidebar-width: 7.5rem;
+
+    transition: width 0.3s ease;
+    width: $sidebar-width;
 
     &.collapsed {
       width: 0;
-      /deep/ .main-container {
-        width: 0;
+    }
+
+    /deep/ .main-container {
+      width: $sidebar-width;
+      background: nb-theme(color-bg);
+
+      @include nb-for-theme(cosmic) {
+        background: nb-theme(layout-bg);
       }
     }
   }