Add material style overrides

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

@@ -0,0 +1,77 @@
+@import '../../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  nb-card {
+    background-color: transparent;
+    border-width: 0;
+    box-shadow: none;
+    margin: 0;
+    height: 100%;
+  }
+
+  nb-card-header {
+    border-color: transparent;
+  }
+
+  svg {
+    width: 100%;
+  }
+
+  .stroke-pattern {
+    fill: none;
+    stroke: #bdc4cd;
+    stroke-miterlimit: 10;
+    opacity: 0.1;
+    stroke-width: 1px;
+  }
+
+  .stroked-element {
+    stroke-width: 4px;
+    stroke: #bdc4cd;
+    stroke-miterlimit: 10;
+  }
+
+  .room-border {
+    stroke-width: 4px;
+    stroke: #bdc4cd;
+    stroke-miterlimit: 10;
+    fill: none;
+  }
+
+  .room-bg {
+    fill: nb-theme(card-background-color);
+    stroke: transparent;
+    cursor: pointer;
+    stroke-width: 4px;
+  }
+
+  .room-bg-border-grad {
+    fill: none;
+    stroke: none;
+    stroke-width: 4px;
+  }
+
+  .room-text {
+    cursor: pointer;
+    user-select: none;
+    pointer-events: none;
+    fill: nb-theme(text-hint-color);
+  }
+
+  .selected-room {
+    z-index: 40;
+
+    .room-text {
+      fill: nb-theme(text-basic-color);
+    }
+    .room-border {
+      stroke: nb-theme(color-primary-default);
+    }
+  }
+
+  .header {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+}

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

@@ -0,0 +1,114 @@
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+@import '~bootstrap/scss/mixins/breakpoints';
+
+@include nb-install-component() {
+
+  nb-card-header {
+    display: flex;
+    align-items: center;
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+  }
+
+  .single-view-button {
+    .nb-square {
+      font-size: 1rem;
+    }
+
+    @include nb-ltr {
+      margin-left: auto;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    @include nb-rtl {
+      margin-right: auto;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .grid-view-button {
+    ::ng-deep svg {
+      vertical-align: top;
+    }
+
+    @include nb-ltr {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    @include nb-rtl {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .grid-container {
+    height: 100%;
+    display: flex;
+  }
+
+  .single-view,
+  .grid-view {
+    flex: 1 0 100%;
+  }
+
+  .grid-view {
+    display: flex;
+    flex-wrap: wrap;
+
+    .camera {
+      flex: 1 0 50%;
+    }
+  }
+
+  .single-view .camera {
+    width: 100%;
+    height: 100%;
+  }
+
+  .camera {
+    background-position: center;
+    background-size: cover;
+    position: relative;
+
+    &::before {
+      background-color: rgba(255, 255, 255, 0.1);
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      opacity: 1;
+    }
+
+    &:hover::before {
+      opacity: 0;
+    }
+  }
+
+  .camera-name {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    color: white;
+    background: nb-theme(overlay-backdrop-background-color);
+    padding: 0.5rem 1rem;
+  }
+
+  nb-action {
+    nb-icon {
+      @include nb-ltr(margin-right, 0.5rem);
+      @include nb-rtl(margin-left, 0.5rem);
+    }
+
+    ::ng-deep svg {
+      vertical-align: top;
+    }
+  }
+
+  @include media-breakpoint-down(xl) {
+    nb-action {
+      padding: 0;
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+@import '../../../@theme/styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  position: relative;
+  display: block;
+
+  nb-card {
+    position: relative;
+    overflow: hidden;
+  }
+
+  nb-card-header {
+    border-bottom: none;
+  }
+
+  .subtitle {
+    color: nb-theme(text-hint-color);
+  }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .chart-container {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 2.125rem;
+  }
+
+  @include media-breakpoint-down(is) {
+    ngx-legend-chart {
+      ::ng-deep .legends {
+        padding-left: 0;
+      }
+    }
+  }
+}