1 files changed, 47 insertions, 79 deletions
diff --git a/public/src/app/home/home.component.scss b/public/src/app/home/home.component.scss
index 583705f..2217b7d 100644
--- a/public/src/app/home/home.component.scss
+++ b/public/src/app/home/home.component.scss
@@ -1,110 +1,78 @@
-.container {
+@import '~@swimlane/ngx-datatable/release/themes/material.css';
+.home-container {
   display: flex;
   flex-direction: column;
   height: 100%;
-  padding: 0.5em;
+  margin: 15px 20px;
   margin-left: 15px;
   margin-right: 15px;
   .wrapper-btn-add-mc {
-    margin-top: 3em;
+    margin-top: 46px;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
-}
-
-.table-Monitoring-Component {
-  &:hover {
-    color: #009fdb;
-    text-decoration: underline;
-    cursor: pointer;
+  .btn-create {
+    width: 150px;
+    height: 36px;
   }
 }
 
-.table-wrapper {
-  display: flex;
-  justify-content: center;
-  flex: 1;
-  margin-bottom: 2em;
-  flex-direction: column;
-  display: block;
+.my-confrim-dialog .mat-dialog-container {
+  max-width: 600px;
+  width: 500px;
+  height: 200px;
+  padding: 0;
 }
 
-table.mcTable {
-  display: flex;
-  flex-flow: column;
-  height: calc(100vh - 150px);
-  width: 100%;
-  background-color: #ffffff;
-  color: #5a5a5a;
-}
-table.mcTable thead {
-  /* head takes the height it requires,
-  and it's not scaled when table.mcTable is resized */
-  flex: 0 0 auto;
-  // width: calc(100% - 17px);
-  width: 100%;
-}
-table.mcTable tbody {
-  /* body takes all the remaining available space */
-  flex: 1 1 auto;
-  display: block;
-  overflow-y: scroll;
-}
-table.mcTable tbody tr {
-  width: 100%;
-}
-
-table.mcTable thead,
-table.mcTable tbody tr {
-  display: table;
-  table-layout: fixed;
+/deep/ .ui-tooltip .ui-tooltip-text {
+  font-size: 0.8em;
+  padding: 0.7em;
 }
 
-table.mcTable {
-  border-collapse: collapse;
-  border-spacing: 0px;
+/deep/ .ui-tooltip {
+  max-width: 400px;
 }
 
-table.mcTable tr.active td {
-  background-color: #e6f6fb !important;
-  color: #5a5a5a;
+.ngx-datatable-monitoring-name {
+  &:hover {
+    color: #009fdb;
+    text-decoration: underline;
+    cursor: pointer;
+  }
 }
 
-table.mcTable th {
+.ngx-datatable.material .datatable-header .datatable-header-cell {
   background: #f4f4f4;
-  color: #191919;
-  text-align: left;
-}
 
-table.mcTable tr {
-  &:hover {
-    background-color: #f8f8f8;
-    color: #5a5a5a;
+  span {
+    font-weight: bold;
+    font-size: 13px;
+    font-family: 'Open Sans', sans-serif !important;
   }
 }
 
-table.mcTable table,
-table.mcTable th,
-table.mcTable td {
-  padding: 5px 10px;
-  border: 0.5px solid #d2d2d2;
-  border-bottom: none;
-  height: 40px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+.ngx-datatable .datatable-body-cell,
+.ngx-datatable .datatable-header-cell {
+  border: 0.1px solid #d2d2d2;
 }
 
-table.mcTable tr:last-child {
-  border-bottom: 0.5px solid #d2d2d2;
-}
-
-/deep/ .ui-tooltip .ui-tooltip-text {
-  font-size: 0.8em;
-  padding: 0.7em;
+.ngx-datatable.material.single-selection .datatable-body-row.active,
+.ngx-datatable.material.single-selection
+  .datatable-body-row.active
+  .datatable-row-group,
+.ngx-datatable.material.multi-selection .datatable-body-row.active,
+.ngx-datatable.material.multi-selection
+  .datatable-body-row.active
+  .datatable-row-group,
+.ngx-datatable.material.multi-click-selection .datatable-body-row.active,
+.ngx-datatable.material.multi-click-selection
+  .datatable-body-row.active
+  .datatable-row-group {
+  background-color: #e6f6fb !important;
+  color: #5a5a5a;
 }
 
-/deep/ .ui-tooltip {
-  max-width: 400px;
+.ngx-datatable.material {
+  box-shadow: none;
 }