From cd33613bc8c95ce1b76b6479e3942849eb429844 Mon Sep 17 00:00:00 2001
From: sunny <sunny@loafle.com>
Date: Fri, 3 Aug 2018 15:11:48 +0900
Subject: [PATCH] ing

---
 .../discovery-infra-tree.component.html       | 43 +++++++++---
 .../noauth-probe-list.component.html          |  2 -
 .../component/probe-download.component.html   |  5 +-
 .../probe/component/probe-list.component.html |  1 -
 .../component/probe-summary.component.html    |  4 +-
 .../layout/footer/app.footer.component.html   | 18 +++--
 .../layout/topbar/app.topbar.component.html   |  6 +-
 .../pages/account/account-page.component.html | 14 ++--
 .../profile/profile-page.component.html       |  6 +-
 .../settings/settings-page.component.html     |  6 +-
 src/app/pages/alert/alert-page.component.html |  4 +-
 .../dashboard/dashboard-page.component.html   |  4 +-
 .../discovery/discovery-page.component.html   |  4 +-
 src/app/pages/home/home-page.component.html   | 10 +--
 src/app/pages/infra/infra-page.component.html |  4 +-
 src/app/pages/log/log-page.component.html     |  4 +-
 .../notification-page.component.html          |  4 +-
 .../overview/overview-page.component.html     |  4 +-
 src/app/pages/pages.component.scss            |  6 +-
 src/app/pages/pages.component.ts              |  4 +-
 .../probes/probe-tab-page.component.html      | 14 ++--
 .../pages/report/report-page.component.html   |  4 +-
 .../sensors/sensor-tab-page.component.html    |  8 +--
 .../targets/target-detail-page.component.html |  6 +-
 .../targets/target-list-page.component.html   |  6 +-
 .../pages/targets/target-page.component.html  | 18 ++---
 src/assets/sass/_variables.scss               | 10 +--
 src/assets/sass/layout/_compact.scss          | 22 +++---
 src/assets/theme/theme-dark-blue.css          |  2 +-
 src/styles.scss                               | 68 ++++++++++++++++---
 30 files changed, 189 insertions(+), 122 deletions(-)

diff --git a/@overflow/discovery/component/discovery-infra-tree.component.html b/@overflow/discovery/component/discovery-infra-tree.component.html
index 111657d..d2798e8 100644
--- a/@overflow/discovery/component/discovery-infra-tree.component.html
+++ b/@overflow/discovery/component/discovery-infra-tree.component.html
@@ -10,8 +10,13 @@
         <ng-template let-node pTemplate="ZONE">
             <!-- 이미 저장된 Infra인 Node-->
             <div *ngIf="node.data.date">
-                <p-toggleButton [disabled]="node.data.target" onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square"
-                    [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton> {{node.data.date | date: 'yy/MM/dd'}}
+                <p-card>
+                    <div class="ui-discovery-new">NEW</div>
+                    <div class="ui-discovery-title">{{node.label}}</div>
+                    <div class="ui-discovery-date">{{node.data.date | date: 'yy/MM/dd'}}</div>
+                </p-card>
+                <!--p-toggleButton [disabled]="node.data.target" onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square"
+                    [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton> {{node.data.date | date: 'yy/MM/dd'}}-->
             </div>
         </ng-template>
 
@@ -19,14 +24,23 @@
         <ng-template let-node pTemplate="HOST">
             <!-- 이미 저장된 Infra인 Node-->
             <div *ngIf="node.data.date">
-                <p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" [disabled]="node.data.target"
-                    onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" (onChange)="onTargetSelect($event, node)"></p-toggleButton> {{node.data.date | date: 'yy/MM/dd'}}
+                <p-card class="ui-discovery-selected">
+                    <div class="ui-discovery-title">{{node.label}}</div>
+                    <div class="ui-discovery-date">{{node.data.date | date: 'yy/MM/dd'}}</div>
+                </p-card>
+                <!--p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" [disabled]="node.data.target"
+                    onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" (onChange)="onTargetSelect($event, node)"></p-toggleButton> {{node.data.date | date: 'yy/MM/dd'}} -->
             </div>
 
             <!-- 새로 Discovery된 Host -->
             <div *ngIf="!node.data.date" @discoveryResultAnim>
-                <p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" onLabel="{{node.label}}"
-                    offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton> New!!
+                <p-card>
+                    <div class="ui-discovery-new">NEW</div>
+                    <div class="ui-discovery-title">{{node.label}}</div>
+                    <div class="ui-discovery-date">{{node.data.date | date: 'yy/MM/dd'}}</div>
+                </p-card>
+                <!--p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" onLabel="{{node.label}}"
+                    offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton> New!!-->
             </div>
         </ng-template>
 
@@ -34,15 +48,24 @@
         <ng-template let-node pTemplate="SERVICE">
             <!-- 이미 저장된 Infra인 Node-->
             <div *ngIf="node.data.date">
-                <p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" [disabled]="node.data.target"
+                <p-card class="ui-discovery-disable">
+                    <div class="ui-discovery-title">{{node.label}}</div>
+                    <div class="ui-discovery-date">{{node.data.date | date: 'yy/MM/dd'}}</div>
+                </p-card>
+                <!--p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" [disabled]="node.data.target"
                     onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}"
-                    (onChange)="onTargetSelect($event, node)"></p-toggleButton> {{node.data.date | date: 'yy/MM/dd'}}
+                    (onChange)="onTargetSelect($event, node)"></p-toggleButton> {{node.data.date | date: 'yy/MM/dd'}} -->
             </div>
 
             <!-- 새로 Discovery된 Service -->
             <div *ngIf="!node.data.date" @discoveryResultAnim>
-                <p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" onLabel="{{node.label}}"
-                    offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton> New!!
+                <p-card>
+                    <div class="ui-discovery-new">NEW</div>
+                    <div class="ui-discovery-title">{{node.label}}</div>
+                    <div class="ui-discovery-date">{{node.data.date | date: 'yy/MM/dd'}}</div>
+                </p-card>
+                <!--p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" onLabel="{{node.label}}"
+                    offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton> New!! -->
             </div>
         </ng-template>
     </p-tree>
diff --git a/@overflow/noauth-probe/component/noauth-probe-list.component.html b/@overflow/noauth-probe/component/noauth-probe-list.component.html
index b82e5a1..d72d458 100644
--- a/@overflow/noauth-probe/component/noauth-probe-list.component.html
+++ b/@overflow/noauth-probe/component/noauth-probe-list.component.html
@@ -1,5 +1,3 @@
-<h1>Unauthorized</h1>
-
 <of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
 <of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
 
diff --git a/@overflow/probe/component/probe-download.component.html b/@overflow/probe/component/probe-download.component.html
index 244fab1..a6e111a 100644
--- a/@overflow/probe/component/probe-download.component.html
+++ b/@overflow/probe/component/probe-download.component.html
@@ -1,6 +1,5 @@
-<h1>Download</h1>
 <p-tabView orientation="left" (onChange)="onChange($event)" [activeIndex]="index" class="ui-tab-bgcolor">
-  <!-- 
+  <!--
     <p-tabPanel [header]="item.header" *ngFor="let item of items; let i = index" [selected]="i == 0">
         {{item.content}}
     </p-tabPanel>
@@ -10,7 +9,7 @@
       Complex Content to Lazy Load1
     </ng-template>
   </p-tabPanel>
-  <p-tabPanel header="Windows" >
+  <p-tabPanel header="Windows">
     <ng-template pTemplate="content">
       Complex Content to Lazy Load2
     </ng-template>
diff --git a/@overflow/probe/component/probe-list.component.html b/@overflow/probe/component/probe-list.component.html
index fb97126..b940d2f 100644
--- a/@overflow/probe/component/probe-list.component.html
+++ b/@overflow/probe/component/probe-list.component.html
@@ -1,4 +1,3 @@
-<h1>Probes</h1>
 <of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
 <of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
 
diff --git a/@overflow/probe/component/probe-summary.component.html b/@overflow/probe/component/probe-summary.component.html
index a19e6ef..cd5a4aa 100644
--- a/@overflow/probe/component/probe-summary.component.html
+++ b/@overflow/probe/component/probe-summary.component.html
@@ -1,10 +1,10 @@
 <p-panel [showHeader]="false" class="ui-top-space-10">
   <div *ngIf="probeHost" class="ui-g">
-    <div class="ui-g-12 ui-md-4 ui-key-value">
+    <div class="ui-g-12 ui-md-6 ui-key-value">
       <of-key-value [key]="'Status'" [value]="connectionStatus"></of-key-value>
       <of-key-value [key]="'CIDR'" [value]="probeHost.probe.cidr"></of-key-value>
     </div>
-    <div class="ui-g-12 ui-md-4 ui-key-value">
+    <div class="ui-g-12 ui-md-6 ui-key-value">
       <of-key-value [key]="'Name'" [value]="probeHost.probe.name"></of-key-value>
       <of-key-value *ngIf="probeHost.infraHost.infraHostOS" [key]="'OS'" [value]="probeHost.infraHost.infraHostOS.name"></of-key-value>
     </div>
diff --git a/src/app/commons/component/layout/footer/app.footer.component.html b/src/app/commons/component/layout/footer/app.footer.component.html
index 6098c54..d5602c4 100644
--- a/src/app/commons/component/layout/footer/app.footer.component.html
+++ b/src/app/commons/component/layout/footer/app.footer.component.html
@@ -1,13 +1,11 @@
-<div class="ui-g-12">
-    <div class="ui-g-12">
-        <div class="footer">
-            <div class="card clearfix">
-                <span class="footer-text-left">Loafle</span>
-                <span class="footer-text-right">
-                    <span class="material-icons ui-icon-copyright"></span>
-                    <span>All Rights Reserved</span>
-                </span>
-            </div>
+<div class="ui-g-12 ui-nopad">
+    <div class="footer">
+        <div class="card clearfix">
+            <span class="footer-text-left">Loafle</span>
+            <span class="footer-text-right">
+                <span class="material-icons ui-icon-copyright"></span>
+                <span>All Rights Reserved</span>
+            </span>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/commons/component/layout/topbar/app.topbar.component.html b/src/app/commons/component/layout/topbar/app.topbar.component.html
index 366e300..d8d2db7 100644
--- a/src/app/commons/component/layout/topbar/app.topbar.component.html
+++ b/src/app/commons/component/layout/topbar/app.topbar.component.html
@@ -16,7 +16,7 @@
             <i class="material-icons">expand_more</i>
         </a>
 
-        <ul class="topbar-items animated fadeInDown ultima-main-topmenu" [ngClass]="{'topbar-items-visible': app.topbarMenuActive}">
+        <ul class="topbar-items animated fadeInDown" [ngClass]="{'topbar-items-visible': app.topbarMenuActive}">
             <li #profile class="profile-item" *ngIf="app.profileMode==='top'||app.isHorizontal()" [ngClass]="{'active-top-menu':app.activeTopbarItem === profile}">
 
                 <a href="#" (click)="app.onTopbarItemClick($event,profile)">
@@ -24,7 +24,7 @@
                     <span class="topbar-item-name">Jane Williams</span>
                 </a>
 
-                <ul class="ultima-menu animated fadeInDown">
+                <ul class="ultima-menu animated fadeInDown ultima-main-topmenu">
                     <li role="menuitem">
                         <a href="#">
                             <i class="material-icons">person</i>
@@ -134,7 +134,7 @@
                     </span>
                     <span class="topbar-item-name">Notifications</span>
                 </a>
-                <ul class="ultima-menu animated fadeInDown">
+                <ul class="ultima-menu animated fadeInDown ultima-main-topmenu">
                     <!-- <of-notification-badge-container (select)="onNotificationSelect($event)" (viewAll)="onViewAllNotification($event)"></of-notification-badge-container> -->
                 </ul>
             </li>
diff --git a/src/app/pages/account/account-page.component.html b/src/app/pages/account/account-page.component.html
index 15f4e9a..df4508b 100644
--- a/src/app/pages/account/account-page.component.html
+++ b/src/app/pages/account/account-page.component.html
@@ -1,9 +1,9 @@
 <!--<div class="ui-fluid">-->
-  <!--<div class="ui-g">-->
-    <!--<div class="ui-g-12">-->
-      <!--<div class="card no-margin">-->
-        <router-outlet></router-outlet>
-      <!--</div>-->
-    <!--</div>-->
-  <!--</div>-->
+<!--<div class="ui-g">-->
+<!--<div class="ui-g-12">-->
+<!--<div class="card">-->
+<router-outlet></router-outlet>
 <!--</div>-->
+<!--</div>-->
+<!--</div>-->
+<!--</div>-->
\ No newline at end of file
diff --git a/src/app/pages/account/profile/profile-page.component.html b/src/app/pages/account/profile/profile-page.component.html
index a2a358e..23d2cfb 100644
--- a/src/app/pages/account/profile/profile-page.component.html
+++ b/src/app/pages/account/profile/profile-page.component.html
@@ -1,10 +1,10 @@
 <div class="ui-fluid">
     <div class="ui-g">
-        <div class="ui-g-12">
-            <div class="card no-margin">
+        <div class="ui-g-12 ui-nopad">
+            <div class="card">
                 <h1>Profile</h1>
                 <of-member-profile></of-member-profile>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/account/settings/settings-page.component.html b/src/app/pages/account/settings/settings-page.component.html
index 9991d98..8f29e9c 100644
--- a/src/app/pages/account/settings/settings-page.component.html
+++ b/src/app/pages/account/settings/settings-page.component.html
@@ -1,9 +1,9 @@
 <div class="ui-fluid">
     <div class="ui-g">
-        <div class="ui-g-12">
-            <div class="card no-margin">
+        <div class="ui-g-12 ui-nopad">
+            <div class="card">
                 <of-member-totp></of-member-totp>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/alert/alert-page.component.html b/src/app/pages/alert/alert-page.component.html
index 86608ed..6407018 100644
--- a/src/app/pages/alert/alert-page.component.html
+++ b/src/app/pages/alert/alert-page.component.html
@@ -1,7 +1,7 @@
 <div class="ui-fluid">
     <div class="ui-g">
-        <div class="ui-g-12">
-            <div class="card no-margin">
+        <div class="ui-g-12 ui-nopad">
+            <div class="card">
                 <h1>Alert</h1>
             </div>
         </div>
diff --git a/src/app/pages/dashboard/dashboard-page.component.html b/src/app/pages/dashboard/dashboard-page.component.html
index 5f6619b..85878c0 100644
--- a/src/app/pages/dashboard/dashboard-page.component.html
+++ b/src/app/pages/dashboard/dashboard-page.component.html
@@ -1,7 +1,7 @@
 <div class="ui-fluid">
     <div class="ui-g">
-        <div class="ui-g-12">
-            <div class="card no-margin">
+        <div class="ui-g-12 ui-nopad">
+            <div class="card">
                 <h1>Dashboard</h1>
             </div>
         </div>
diff --git a/src/app/pages/discovery/discovery-page.component.html b/src/app/pages/discovery/discovery-page.component.html
index b6cc073..f92a798 100644
--- a/src/app/pages/discovery/discovery-page.component.html
+++ b/src/app/pages/discovery/discovery-page.component.html
@@ -1,7 +1,7 @@
 <div class="ui-fluid">
     <div class="ui-g">
-        <div class="ui-g-12">
-            <div class="card no-margin">
+        <div class="ui-g-12 ui-nopad">
+            <div class="card">
                 <of-discovery [probeHostID]="probeHostID"></of-discovery>
             </div>
         </div>
diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html
index 274a118..bfcec70 100644
--- a/src/app/pages/home/home-page.component.html
+++ b/src/app/pages/home/home-page.component.html
@@ -1,9 +1,9 @@
 <div class="ui-fluid">
-        <div class="ui-g">
-            <div class="ui-g-12">
-                <div class="card no-margin">
-                    <h1>Home works</h1>
-                </div>
+    <div class="ui-g">
+        <div class="ui-g-12 ui-nopad">
+            <div class="card">
+                <h1>Home works</h1>
             </div>
         </div>
     </div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/infra/infra-page.component.html b/src/app/pages/infra/infra-page.component.html
index 9b90929..6482498 100644
--- a/src/app/pages/infra/infra-page.component.html
+++ b/src/app/pages/infra/infra-page.component.html
@@ -1,7 +1,7 @@
 <div class="ui-fluid">
     <div class="ui-g">
-        <div class="ui-g-12">
-            <div class="card no-margin">
+        <div class="ui-g-12 ui-nopad">
+            <div class="card">
                 <of-infra-map (discovery)="onDiscovery($event)"></of-infra-map>
             </div>
         </div>
diff --git a/src/app/pages/log/log-page.component.html b/src/app/pages/log/log-page.component.html
index 0636edd..f570b60 100644
--- a/src/app/pages/log/log-page.component.html
+++ b/src/app/pages/log/log-page.component.html
@@ -1,7 +1,7 @@
 <div class="ui-fluid">
     <div class="ui-g">
-        <div class="ui-g-12">
-            <div class="card no-margin">
+        <div class="ui-g-12 ui-nopad">
+            <div class="card">
                 <h1>Log page</h1>
             </div>
         </div>
diff --git a/src/app/pages/notification/notification-page.component.html b/src/app/pages/notification/notification-page.component.html
index d6b08eb..dc74912 100644
--- a/src/app/pages/notification/notification-page.component.html
+++ b/src/app/pages/notification/notification-page.component.html
@@ -1,7 +1,7 @@
 <div class="ui-fluid">
     <div class="ui-g">
-        <div class="ui-g-12">
-            <div class="card no-margin">
+        <div class="ui-g-12 ui-nopad">
+            <div class="card">
                 <of-notification-container (pageChange)="onPageChange($event)"></of-notification-container>
             </div>
         </div>
diff --git a/src/app/pages/overview/overview-page.component.html b/src/app/pages/overview/overview-page.component.html
index 793b15c..aeb167c 100644
--- a/src/app/pages/overview/overview-page.component.html
+++ b/src/app/pages/overview/overview-page.component.html
@@ -1,7 +1,7 @@
 <div class="ui-fluid">
     <div class="ui-g">
-        <div class="ui-g-12">
-            <div class="card no-margin">
+        <div class="ui-g-12 ui-nopad">
+            <div class="card">
                 <h1>Overview</h1>
             </div>
         </div>
diff --git a/src/app/pages/pages.component.scss b/src/app/pages/pages.component.scss
index 30cb9c4..620717b 100644
--- a/src/app/pages/pages.component.scss
+++ b/src/app/pages/pages.component.scss
@@ -3,9 +3,9 @@
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);
 
-    
+
     .sidenav,.drawer{
-        background: mat-color($primary,400);    
+        background: mat-color($primary,400);
         overflow: hidden;
         position: relative;
     }
@@ -13,7 +13,7 @@
         overflow: hidden;
     }
     .router-outlet{
-        position: relative;padding: 0px 5px;
+        position: relative;padding: 0px;
     }
     .spacer {
         width: 100%;
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index f14ff14..1364dca 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -24,7 +24,7 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
 
   darkMenu = false;
 
-  profileMode = 'inline';
+  profileMode = 'top'; //inline
 
   rotateMenuButton: boolean;
 
@@ -67,7 +67,7 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
       if (val instanceof NavigationStart) {
         breadcrumbService.setItems(null);
       }
-  });
+    });
   }
 
   ngOnInit() {
diff --git a/src/app/pages/probes/probe-tab-page.component.html b/src/app/pages/probes/probe-tab-page.component.html
index 9e8130b..6dc8757 100644
--- a/src/app/pages/probes/probe-tab-page.component.html
+++ b/src/app/pages/probes/probe-tab-page.component.html
@@ -1,12 +1,14 @@
 <div class="ui-fluid">
     <div class="ui-g">
-        <div class="ui-g-12">
-            <div class="card no-margin">
-                <of-tabbar [tabs]="tabs"></of-tabbar>
-            </div>
-            <div class="card no-margin">
+        <div class="ui-g-12 ui-nopad">
+            <div class="card">
+                <h1>Probes</h1>
+                <div class="ui-tabs-noborder">
+                    <of-tabbar [tabs]="tabs"></of-tabbar>
+                </div>
+                <br>
                 <router-outlet></router-outlet>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/report/report-page.component.html b/src/app/pages/report/report-page.component.html
index 509bf5a..ca027e1 100644
--- a/src/app/pages/report/report-page.component.html
+++ b/src/app/pages/report/report-page.component.html
@@ -1,7 +1,7 @@
 <div class="ui-fluid">
     <div class="ui-g">
-        <div class="ui-g-12">
-            <div class="card no-margin">
+        <div class="ui-g-12 ui-nopad">
+            <div class="card">
                 <h1>Report</h1>
             </div>
         </div>
diff --git a/src/app/pages/sensors/sensor-tab-page.component.html b/src/app/pages/sensors/sensor-tab-page.component.html
index 55b3c04..f42e912 100644
--- a/src/app/pages/sensors/sensor-tab-page.component.html
+++ b/src/app/pages/sensors/sensor-tab-page.component.html
@@ -1,12 +1,12 @@
 <div class="ui-fluid">
     <div class="ui-g">
-        <div class="ui-g-12">
-            <div *ngIf="tabs" class="card no-margin">
+        <div class="ui-g-12 ui-nopad">
+            <div *ngIf="tabs" class="card">
                 <of-tabbar [tabs]="tabs"></of-tabbar>
             </div>
-            <div class="card no-margin">
+            <div class="card">
                 <router-outlet></router-outlet>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/targets/target-detail-page.component.html b/src/app/pages/targets/target-detail-page.component.html
index 5cad108..c6c6763 100644
--- a/src/app/pages/targets/target-detail-page.component.html
+++ b/src/app/pages/targets/target-detail-page.component.html
@@ -1,10 +1,10 @@
 <div class="ui-fluid">
     <div class="ui-g">
         <div class="ui-g-12">
-            <div class="card no-margin">
+            <div class="card">
                 <!--<of-discovery [probeHostID]="probeHostID"></of-discovery>-->
-              <of-target-detail [targetID]="targetID"></of-target-detail>
+                <of-target-detail [targetID]="targetID"></of-target-detail>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/targets/target-list-page.component.html b/src/app/pages/targets/target-list-page.component.html
index 413995b..19a72aa 100644
--- a/src/app/pages/targets/target-list-page.component.html
+++ b/src/app/pages/targets/target-list-page.component.html
@@ -1,9 +1,9 @@
 <div class="ui-fluid">
     <div class="ui-g">
         <div class="ui-g-12">
-            <div class="card no-margin">
-              <of-target-list [probeID]="probeID" [pageIdx]="pageIdx" (pageChange)="onPageChange($event)" (targetSelect)="onTargetSelect($event)" ></of-target-list>
+            <div class="card">
+                <of-target-list [probeID]="probeID" [pageIdx]="pageIdx" (pageChange)="onPageChange($event)" (targetSelect)="onTargetSelect($event)"></of-target-list>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/targets/target-page.component.html b/src/app/pages/targets/target-page.component.html
index 8ad7d25..cb8a5f9 100644
--- a/src/app/pages/targets/target-page.component.html
+++ b/src/app/pages/targets/target-page.component.html
@@ -1,11 +1,11 @@
 <div class="ui-g">
-    <div class="ui-g-12">
-        <div class="card no-margin">
-          <!--<router-outlet *ngIf="probeID !== undefined" else complete></router-outlet>-->
-          <!--<ng-template #complete>-->
-            <!--<of-pages-target-list [probeID]="probeID" ></of-pages-target-list>-->
-          <!--</ng-template>-->
-          <router-outlet></router-outlet>
-        </div>
+  <div class="ui-g-12">
+    <div class="card">
+      <!--<router-outlet *ngIf="probeID !== undefined" else complete></router-outlet>-->
+      <!--<ng-template #complete>-->
+      <!--<of-pages-target-list [probeID]="probeID" ></of-pages-target-list>-->
+      <!--</ng-template>-->
+      <router-outlet></router-outlet>
     </div>
-</div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/assets/sass/_variables.scss b/src/assets/sass/_variables.scss
index 0c7bfba..20c76ef 100644
--- a/src/assets/sass/_variables.scss
+++ b/src/assets/sass/_variables.scss
@@ -1,7 +1,7 @@
 /* Common */
 $textColor:#212121;
 $textSecondaryColor:#757575;
-$fontSize:16px;
+$fontSize:13px; //16px;
 $lineHeight:1.5em;
 $transitionDuration:.3s;
 $borderRadius:3px;
@@ -41,8 +41,8 @@ $contentPadding:.625em 1em;
 $inputHeaderFontSize:1em;
 $inputHeaderPadding:.625em 1em;
 $inputBorderColor:#bdbdbd;
-$inputBorderErrorColor:#e62a10;  
-$inputErrorTextColor:#e62a10;  
+$inputBorderErrorColor:#e62a10;
+$inputErrorTextColor:#e62a10;
 $textboxBgColor:#f7f7f7;
 $inputFontSize:1em;
 $buttonFontSize:1em;
@@ -60,5 +60,5 @@ $activeMenuItemBadgeColor:#ffffff;
 $activeMenuItemBadgeTextColor:#212121;
 
 /* Compact */
-$c-fontSize:14px;
-$c-lineHeight:18px;
\ No newline at end of file
+$c-fontSize:13px; //14px;
+$c-lineHeight:1.5em; //18px;
\ No newline at end of file
diff --git a/src/assets/sass/layout/_compact.scss b/src/assets/sass/layout/_compact.scss
index 2e49f7e..bf1b973 100644
--- a/src/assets/sass/layout/_compact.scss
+++ b/src/assets/sass/layout/_compact.scss
@@ -2,16 +2,16 @@ body {
     .layout-wrapper.layout-compact {
         font-size: $c-fontSize;
         line-height: $c-lineHeight;
-        
+
         .layout-container {
             .ultima-menu {
                 li {
                     a {
                         i:last-child {
-                            font-size: $c-fontSize + 4;
+                            font-size: $c-fontSize; // + 4;
                         }
                     }
-                    
+
                     ul {
                         li {
                             a {
@@ -32,33 +32,33 @@ body {
                 }
             }
         }
-        
+
         .ui-radiobutton {
             .ui-radiobutton-box {
                 width: 18px;
                 height: 18px;
             }
         }
-        
+
         .ui-datepicker {
             tbody td a, body .ui-datepicker tbody td span {
                 padding-top: .25em;
             }
-        } 
+        }
     }
 }
 
 @media (min-width: 1025px) {
-    
+
     .layout-wrapper.layout-compact {
         .layout-container {
             &.menu-layout-horizontal {
-                .layout-menu {                            
-                    ul.ultima-menu {                    
+                .layout-menu {
+                    ul.ultima-menu {
                         > li {
                             > ul {
                                 top: 35px;
-                                
+
                                 li {
                                     span {
                                         font-size: $c-fontSize;
@@ -68,7 +68,7 @@ body {
                         }
                     }
                 }
-                
+
                 .layout-main {
                     padding-top: 110px;
                 }
diff --git a/src/assets/theme/theme-dark-blue.css b/src/assets/theme/theme-dark-blue.css
index 67ab086..a23b5b3 100644
--- a/src/assets/theme/theme-dark-blue.css
+++ b/src/assets/theme/theme-dark-blue.css
@@ -3161,7 +3161,7 @@
 
 body .ui-widget,
 body .ui-widget .ui-widget {
-  font-family: "Roboto","Helvetica Neue",sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, Roboto, sans-serif, sans-serif; /* "Roboto","Helvetica Neue",sans-serif;*/
   text-decoration: none; }
 body .ui-widget-content {
   background-color: #ffffff;
diff --git a/src/styles.scss b/src/styles.scss
index 6ecf190..21136c6 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -12,6 +12,9 @@
     background: url("/assets/layout/images/overFlow_CI_white_200_30.png") top left no-repeat !important;
     background-size: 200px 30px; }
 // Menu
+.layout-container .topbar-items > li.profile-item .profile-image {
+    width: 24px;
+    height: 24px; }
 .layout-container {
 
     .topbar {
@@ -467,7 +470,7 @@
         }
 
         &.ultima-main-menu {
-            margin-top: 16px;
+            margin-top: 0px; //16px;
             padding-bottom: 120px;
         }
 
@@ -475,7 +478,7 @@
             a {
                 font-size: 1em;
                 display: block;
-                padding: .5em 2.5em .5em 1em;
+                padding: 1em 2.5em 1em 1.2em;
                 //color: $textColor;
                 width: 100%;
                 box-sizing: border-box;
@@ -490,7 +493,7 @@
                     display: inline-block;
                     vertical-align: middle;
                     margin-right: .5em;
-                    font-size: 1.5em;
+                    font-size: 1em !important; //1.5em;
                 }
 
                 i:last-child {
@@ -514,7 +517,7 @@
                     background-color: #cdcdcd !important;
 
                     > i {
-                        background-color: #cdcdcd !important;
+                        //background-color: #cdcdcd !important;
                     }
 
                     &:hover {
@@ -550,7 +553,8 @@
 
                 li {
                     a {
-                        padding: .5em 2.5em .5em 2em;
+                        //padding: .5em 2.5em .5em 2em;
+                        padding: 1em 2.5em 1em 2.4em;
 
                         > span {
                             //font-size: $fontSize - 1;
@@ -628,7 +632,7 @@
     }
 
     .footer {
-        padding: .5em;
+        padding: 0px;
 
         .footer-text-left {
             float: left;
@@ -738,8 +742,8 @@
 
                 &.profile-item {
                     .profile-image {
-                        width: 30px !important;
-                        height: 30px !important;
+                        width: 24px !important;
+                        height: 24px !important;
                     }
                 }
 
@@ -1557,6 +1561,11 @@
     border-collapse: collapse;
     border-spacing: 0;
 }
+
+//.layout-container .layout-main .layout-content
+.layout-container .layout-main .layout-content {
+    padding: 0px !important;
+}
 .ui-button-secondary{
     background-color : #f5f6f8 !important;
     .ui-button-icon-left{
@@ -1906,8 +1915,8 @@ body .ui-progressbar .ui-progressbar-value {
 .ui-unbg-table{
     .ui-table .ui-table-tbody > tr:nth-child(odd) .ui-state-active, .ui-state-highlight {
         background-color: #f4f4f4 !important;
-        color: #203976 !important;
-        font-weight: bold;
+        color: #2449a7 !important;
+        font-weight: normal;
 
         .fa {
             color: #ffffff;
@@ -1927,6 +1936,11 @@ body .ui-progressbar .ui-progressbar-value {
         }
     }
 }
+.ui-tabs-noborder div.ui-tabmenu {
+    border-left: none !important;
+    border-right: none !important;
+    border-top: none !important;
+}
 //ui-togglebutton
 body .ui-discovery .ui-button, .ui-togglebutton {
     background-color: #f1f1f1 !important;
@@ -1938,3 +1952,37 @@ background-color: #e2e2e2 !important; }
 body .ui-discovery .ui-button, .ui-togglebutton.ui-state-active {
 background-color: #5180ce !important;
 color: #ffffff !important; }
+body .ui-discovery, .ui-card {
+    width: 200px;
+}
+body .ui-discovery, .ui-discovery-selected .ui-widget-content{
+        border-color: #5180ce !important;
+        background: #5180ce !important;
+        color: #ffffff !important;
+    }
+body .ui-discovery, .ui-discovery-disable .ui-widget-content{
+        border-color: #e3e4e6 !important;
+        background: #e3e4e6 !important;
+        color: #cac9c9 !important;
+    }
+body .ui-discovery, .ui-card-body {
+    padding: 0.5em !important;
+}
+body .ui-discovery, .ui-card-body .ui-discovery-title {
+    width: 100%;
+    font-size: 1em ;
+    font-weight: bold ;
+    margin-bottom: 0.2em ;
+}
+body .ui-discovery, .ui-card-body .ui-discovery-date {
+    width: 100%;
+    font-size: 0.8em;
+    text-align: right;
+}
+body .ui-discovery, .ui-card-body .ui-discovery-new {
+    float: right;
+    font-size: 0.8em;
+    font-weight: bold;
+    text-align: right;
+    color: #e62a10;
+}