Add material style overrides

src/app/@theme/styles/_overrides.scss

@@ -8,4 +8,8 @@
       right: 0.41rem !important;
     }
   }
+
+  .table {
+    color: nb-theme(text-basic-color) !important;
+  }
 }

src/app/@theme/styles/material/_material-dark.scss

@@ -275,7 +275,7 @@ $theme: (
 
   background-basic-color-1: color-basic-800,
   background-basic-color-2: color-basic-900,
-  background-basic-color-3: color-basic-1000,
+  background-basic-color-3: color-basic-800,
   background-basic-color-4: color-basic-1100,
 
   background-alternative-color-1: color-basic-100,
@@ -361,7 +361,8 @@ $theme: (
   text-danger-active-color: color-danger-active,
   text-danger-disabled-color: color-danger-400,
 
-  shadow: '0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2)',
+  shadow: unquote("0 2px 10px rgba(0, 0, 0, 0.24), 0 0 20px rgba(0, 0, 0, 0.12)"),
+  header-shadow: unquote("0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)"),
   outline-color: color-basic-700,
 
   font-family-primary: unquote('Roboto, sans-serif')

src/app/@theme/styles/material/_material-light.scss

@@ -274,8 +274,8 @@ $theme: (
   color-control-transparent-disabled-border: color-basic-transparent-300,
 
   background-basic-color-1: color-basic-100,
-  background-basic-color-2: color-basic-200,
+  background-basic-color-2: color-basic-300,
-  background-basic-color-3: color-basic-300,
+  background-basic-color-3: color-basic-100,
   background-basic-color-4: color-basic-400,
 
   background-alternative-color-1: color-basic-800,
@@ -361,7 +361,8 @@ $theme: (
   text-danger-active-color: color-danger-active,
   text-danger-disabled-color: color-danger-400,
 
-  shadow: '0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2)',
+  shadow: unquote("0 2px 10px rgba(0, 0, 0, 0.12), 0 0 20px rgba(0, 0, 0, 0.06)"),
+  header-shadow: unquote("0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)"),
   outline-color: color-basic-transparent-200,
 
   font-family-primary: unquote('Roboto, sans-serif')

src/app/@theme/styles/material/_material.scss

@@ -0,0 +1,32 @@
+@import './ripple';
+
+@include nb-install() {
+  @include ngx-ripple();
+
+  @include nb-for-themes(material-dark, material-light) {
+    nb-layout-header {
+      box-shadow: nb-theme(header-shadow) !important;
+      background-color: nb-theme(color-primary-default) !important;
+
+      .logo-container, nb-action {
+        a, nb-icon, .user-name {
+          color: nb-theme(text-control-color) !important;
+        }
+      }
+    }
+
+    nb-sidebar {
+      background-color: nb-theme(background-basic-color-2) !important;
+      transition: width 0.3s;
+
+      .main-container {
+        transition: width 0.3s;
+      }
+    }
+
+    nb-card, nb-reveal-card {
+      border: none !important;
+      box-shadow: nb-theme(shadow) !important;
+    }
+  }
+}

src/app/@theme/styles/styles.scss

@@ -18,7 +18,7 @@
 
 @import './layout';
 @import './overrides';
-@import './ripple';
+@import './material/material';
 
 // install the framework and custom global styles
 @include nb-install() {
@@ -32,5 +32,4 @@
   @include ngx-pace-theme();
 
   @include nb-overrides();
-  @include ngx-ripple();
 };

src/app/@theme/styles/themes.scss

@@ -3,8 +3,8 @@
 // @nebular out of the box themes
 @import '~@nebular/theme/styles/themes';
 // material themes
-@import './material-dark';
+@import './material/material-dark';
-@import './material-light';
+@import './material/material-light';
 
 $nb-themes: nb-register-theme((
   layout-padding-top: 2.25rem,
@@ -128,6 +128,6 @@ $nb-themes: nb-register-theme((
   select-min-width: 6rem,
 
   slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
-  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,У
   slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
 ), material-dark, material-dark);

src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss

@@ -7,6 +7,7 @@
     border-width: 0;
     box-shadow: none;
     margin: 0;
+    height: 100%;
   }
 
   nb-card-header {

src/app/pages/dashboard/security-cameras/security-cameras.component.scss

@@ -13,7 +13,7 @@
 
   .single-view-button {
     .nb-square {
-      font-size: 1.25rem;
+      font-size: 1rem;
     }
 
     @include nb-ltr {

src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss

@@ -5,10 +5,10 @@
 @include nb-install-component() {
   position: relative;
   display: block;
-  overflow: hidden;
 
   nb-card {
     position: relative;
+    overflow: hidden;
   }
 
   nb-card-header {