NG-UI Design Changes

 * Drop-down action design changes to the display="dynamic" and
 container="body"
 * SDN/WIM State label color changed.
 * Dynamic Metric graph color is implemented.

Change-Id: If40f3f087286c8f8a36a0a5702e0116c95ecd956
Signed-off-by: Barath Kumar R <barath.r@tataelxsi.co.in>
diff --git a/src/app/utilities/netslice-instances-action/NetsliceInstancesActionComponent.html b/src/app/utilities/netslice-instances-action/NetsliceInstancesActionComponent.html
index 7fcc812..0f38cea 100644
--- a/src/app/utilities/netslice-instances-action/NetsliceInstancesActionComponent.html
+++ b/src/app/utilities/netslice-instances-action/NetsliceInstancesActionComponent.html
@@ -24,11 +24,11 @@
         container="body" ngbTooltip="{{'DELETE' | translate}}">
         <i class="far fa-trash-alt icons"></i>
     </button>
-    <div ngbDropdown class="btn-group">
+    <div class="btn-group" ngbDropdown display="dynamic" container="body">
         <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
             {{'ACTION' | translate}}
         </button>
-        <div class="dropdown-menu" ngbDropdownMenu>
+        <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
             <button type="button" class="btn btn-primary dropdown-item" (click)="historyOfOperations()" placement="left"
                 container="body" ngbTooltip="{{'HISTORYOFOPERATIONS' | translate}}">
                 <i class="fas fa-history"></i> {{'HISTORYOFOPERATIONS' | translate}}
diff --git a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
index 41a58f5..2879d8b 100644
--- a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
+++ b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
@@ -28,11 +28,11 @@
         ngbTooltip="{{'DELETE' | translate}}">
         <i class="far fa-trash-alt icons"></i>
     </button>
-    <div ngbDropdown class="btn-group">
+    <div class="btn-group" ngbDropdown display="dynamic" container="body">
         <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
             {{'ACTION' | translate}}
         </button>
-        <div class="dropdown-menu" ngbDropdownMenu>
+        <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
             <button type="button" class="btn btn-primary dropdown-item" (click)="infoNs()" placement="left"
                 container="body" ngbTooltip="{{'INFO' | translate}}">
                 <i class="fas fa-info icons list" title="info"></i> {{'INFO' | translate}}
diff --git a/src/app/utilities/ns-packages-action/NsPackagesActionComponent.html b/src/app/utilities/ns-packages-action/NsPackagesActionComponent.html
index 6e33d0d..b6c0fe7 100644
--- a/src/app/utilities/ns-packages-action/NsPackagesActionComponent.html
+++ b/src/app/utilities/ns-packages-action/NsPackagesActionComponent.html
@@ -28,11 +28,11 @@
     ngbTooltip="{{'DELETE' | translate}}">
     <i class="far fa-trash-alt icons"></i>
   </button>
-  <div ngbDropdown class="btn-group">
+  <div class="btn-group" ngbDropdown display="dynamic" container="body">
     <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
       {{'ACTION' | translate}}
     </button>
-    <div class="dropdown-menu" ngbDropdownMenu>
+    <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
       <button type="button" class="btn btn-primary dropdown-item" (click)="nsdEdit()" placement="left"
         container="body" ngbTooltip="{{'EDIT' | translate}}">
         <i class="fa fa-edit icons"></i> {{'EDIT' | translate}}
diff --git a/src/app/utilities/projects-action/ProjectsActionComponent.html b/src/app/utilities/projects-action/ProjectsActionComponent.html
index a5d4d4e..d105846 100644
--- a/src/app/utilities/projects-action/ProjectsActionComponent.html
+++ b/src/app/utilities/projects-action/ProjectsActionComponent.html
@@ -16,11 +16,11 @@
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
 <div class="btn-group list action" role="group">
-    <div ngbDropdown class="btn-group">
+    <div class="btn-group" ngbDropdown display="dynamic" container="body">
         <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
             {{'ACTION' | translate}}
         </button>
-        <div class="dropdown-menu" ngbDropdownMenu>
+        <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
             <button type="button" class="btn btn-primary dropdown-item" (click)="projectEdit()" placement="left"
                 container="body" ngbTooltip="{{'RENAME' | translate}}">
                 <i class="fa fa-edit icons"></i> {{'RENAME' | translate}}
diff --git a/src/app/utilities/roles-action/RolesActionComponent.html b/src/app/utilities/roles-action/RolesActionComponent.html
index 5a7453d..522ba83 100644
--- a/src/app/utilities/roles-action/RolesActionComponent.html
+++ b/src/app/utilities/roles-action/RolesActionComponent.html
@@ -16,11 +16,11 @@
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
 <div class="btn-group list action" role="group">
-  <div ngbDropdown class="btn-group">
+  <div class="btn-group" ngbDropdown display="dynamic" container="body">
       <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
           {{'ACTION' | translate}}
       </button>
-      <div class="dropdown-menu" ngbDropdownMenu>
+      <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
           <button type="button" class="btn btn-primary dropdown-item" (click)="editRole()" placement="left"
               container="body" ngbTooltip="{{'EDIT' | translate}}">
               <i class="fa fa-edit icons"></i> {{'EDIT' | translate}}
diff --git a/src/app/utilities/users-action/UsersActionComponent.html b/src/app/utilities/users-action/UsersActionComponent.html
index 9ce546e..90559f9 100644
--- a/src/app/utilities/users-action/UsersActionComponent.html
+++ b/src/app/utilities/users-action/UsersActionComponent.html
@@ -16,11 +16,11 @@
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
 <div class="btn-group list action" role="group">
-    <div ngbDropdown class="btn-group">
+    <div class="btn-group" ngbDropdown display="dynamic" container="body">
         <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
             {{'ACTION' | translate}}
         </button>
-        <div class="dropdown-menu" ngbDropdownMenu>
+        <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
             <button type="button" class="btn btn-primary dropdown-item" (click)="editUserModal('editPassword')" placement="left" container="body"
                 ngbTooltip="{{'PAGE.USERS.EDITCREDENTIALS' | translate}}">
                 <i class="fa fa-edit icons"></i> {{'PAGE.USERS.EDITCREDENTIALS' | translate}}
diff --git a/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.html b/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.html
index df3aa52..0f46919 100644
--- a/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.html
+++ b/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.html
@@ -24,11 +24,11 @@
     ngbTooltip="{{'DELETE' | translate}}">
     <i class="far fa-trash-alt icons"></i>
   </button>
-  <div ngbDropdown class="btn-group">
+  <div class="btn-group" ngbDropdown display="dynamic" container="body">
     <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
       {{'ACTION' | translate}}
     </button>
-    <div class="dropdown-menu" ngbDropdownMenu>
+    <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
       <button type="button" class="btn btn-primary dropdown-item" (click)="vnfdEdit()" placement="left"
         container="body" ngbTooltip="{{'EDIT' | translate}}">
         <i class="fa fa-edit icons"></i> {{'EDIT' | translate}}