design

@overflow/discovery/component/request-summary.component.html

@@ -9,8 +9,20 @@
                 <span *ngIf="discoverZone.discoverHost.discoverPort.includeUDP">UDP</span>
             </span>
         </div>
+        <div *ngIf="services && services.length > 0" class="of-key-value-div">
+            <p-overlayPanel #op>
+                <div *ngFor="let service of services">
+                    {{service}}
+                </div>
+            </p-overlayPanel>
 
+            <span>Services</span>
+            <span class="ng-star-inserted ui-nopad">
+                <a style="cursor: pointer" (click)="op.toggle($event)">{{services.length}} services has selected.</a>
+            </span>
+        </div>
 
+        <!--
         <div *ngIf="services && services.length > 0" class="ui-g-12 ui-top-border-1" style="text-align: right">
             <p-overlayPanel #op>
                 <div *ngFor="let service of services">
@@ -20,5 +32,6 @@
 
             <a style="cursor: pointer" (click)="op.toggle($event)">{{services.length}} services has selected.</a>
         </div>
+-->
     </div>
 </div>

@overflow/discovery/component/search-result.component.html

@@ -1,5 +1,6 @@
 <of-block-progressbar [target]="content" [pending]="!finished"></of-block-progressbar>
 
+<div class="ui-discovery">
     <p-panel #content [showHeader]="false" class="block-panel">
 
         <p-messages [(value)]="msgs"></p-messages>
@@ -48,6 +49,7 @@
             label="Save" icon="ui-icon-close" pButton (click)="saveTargets()"></button>
 
     </p-panel>
+</div>
 
 
 <p-dialog header="Title" [(visible)]="targetSaved" [modal]="true" [responsive]="true" [width]="600" [minWidth]="200" [minY]="70"

@overflow/discovery/component/service-selector.component.html

@@ -10,7 +10,7 @@
         </div>
 
         <p-table selectionMode="multiple" [scrollable]="true" scrollHeight="200px" [value]="metaCrawlers" [(selection)]="includeServices"
-            dataKey="id" (onRowSelect)="onSelect($event.data)" (onRowUnselect)="onUnselect($event.data)">
+            dataKey="id" (onRowSelect)="onSelect($event.data)" (onRowUnselect)="onUnselect($event.data)" class="ui-unbg-table">
             <ng-template pTemplate="body" let-rowData let-columns="columns">
                 <tr [pSelectableRow]="rowData">
                     <!-- <td>

@overflow/noauth-probe/component/noauth-probe-general.component.html

@@ -1,10 +1,9 @@
-<div class="ui-g">
+<div class="ui-g ui-bottom-space-10">
   <div class="ui-g-6 ui-nopad">
     <h3>General</h3>
   </div>
 
   <!-- info -->
-  <div class="ui-g ui-bottom-space-10">
   <div class="ui-g-12 ui-nopad">
     <p-panel [showHeader]="false">
       <div *ngIf="noAuthProbe">
@@ -33,4 +32,3 @@
     </p-panel>
   </div>
 </div>
-</div>

@overflow/probe/component/probe-host.component.html

@@ -3,7 +3,7 @@
 
 <p-panel #content [showHeader]="false" class="block-panel">
 
-  <div class="ui-g">
+  <div class="ui-g ui-bottom-space-10">
     <div class="ui-g-6 ui-nopad">
       <h3>Host</h3>
     </div>
@@ -13,7 +13,7 @@
   </div>
 
   <!-- Host info -->
-  <div class="ui-g ui-bottom-space-10">
+  <div class="ui-g">
     <div class="ui-g-12 ui-nopad">
       <p-panel [showHeader]="false">
         <div *ngIf="infraHost">

src/styles.scss

@@ -1903,3 +1903,38 @@ body .ui-progressbar .ui-progressbar-value {
 .ui-confirmdialog-message {
     white-space: pre-line;
 }
+.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;
+
+        .fa {
+            color: #ffffff;
+        }
+
+    }
+    .ui-table .ui-table-tbody > tr:nth-child(odd) .ui-state-active, .ui-state-highlight .ui-chkbox .ui-chkbox-box.ui-state-active {
+        border-color: #3e464c!important;
+        background-color: #3e464c!important;
+    }
+    .ui-table .ui-table-tbody > tr:nth-child .ui-state-active, .ui-state-highlight {
+    background-color: #ffffff !important;
+    color: #203976 !important;
+
+        .fa {
+            color: #ffffff;
+        }
+    }
+}
+//ui-togglebutton
+body .ui-discovery .ui-button, .ui-togglebutton {
+    background-color: #f1f1f1 !important;
+    border: 1px solid #bdbdbd !important;
+    color: #212121 !important;
+}
+body .ui-discovery .ui-button, .ui-togglebutton:not(.ui-state-active):not(.ui-state-disabled):hover {
+background-color: #e2e2e2 !important; }
+body .ui-discovery .ui-button, .ui-togglebutton.ui-state-active {
+background-color: #5180ce !important;
+color: #ffffff !important; }