Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

12 files changed, 140 insertions, 152 deletions

diff --git a/catalog-ui/src/assets/styles/app.less b/catalog-ui/src/assets/styles/app.less
index 0738c460e7..26ddc4677f 100644
--- a/catalog-ui/src/assets/styles/app.less
+++ b/catalog-ui/src/assets/styles/app.less
@@ -2,15 +2,11 @@
   width: 100%;
   height: 100%;
 }
-
 @import 'variables.less';
 @import 'variables-old.less';
 @import 'mixins.less';
 @import 'mixins_old.less';
 @import 'global.less';
-@import '../../../node_modules/sdc-ui/css/style.css';
-/* @import '../../../node_modules/sdc-ui/css/theme_1802.css'; */
-
 @import 'sprite-old.less';
 @import 'sprite.less';
 @import 'sprite-resource-icons.less';
@@ -18,7 +14,6 @@
 @import 'sprite-group-icons.less';
 @import 'sprite-policy-icons.less';
 @import 'archive-resouce.less';
-
 @import 'animation.less';
 @import 'buttons.less';
 @import 'dark-header.less';
@@ -38,7 +33,7 @@
 @import 'tooltips.less';
 @import 'welcome-sprite.less';
 @import 'welcome-style.less';
-@import 'notification-template.less';
+@import '../../app/view-models/shared/notification-template.less';
 @import 'tables.less';
 
 // Less insides specific files.
@@ -48,9 +43,6 @@
 @import '../../app/directives/elements/radiobutton/radiobutton.less';
 @import '../../app/directives/ellipsis/ellipsis-directive.less';
 @import '../../app/directives/file-upload/file-upload.less';
-@import '../../app/directives/graphs-v2/composition-graph/composition-graph.less';
-@import '../../app/directives/graphs-v2/deployment-graph/deployment-graph.less';
-@import '../../app/directives/graphs-v2/palette/palette.less';
 @import '../../app/directives/capabilities-and-requirements/capabilities-requirements-list.less';
 @import '../../app/directives/info-tooltip/info-tooltip.less';
 @import '../../app/directives/inputs-and-properties/inputs/input-row.less';
@@ -77,45 +69,14 @@
 @import '../../app/view-models/admin-dashboard/admin-dashboard.less';
 @import '../../app/view-models/admin-dashboard/category-management/category-management.less';
 @import '../../app/view-models/admin-dashboard/user-management/user-management.less';
-@import '../../app/view-models/catalog/catalog.less';
-@import '../../app/view-models/dashboard/dashboard.less';
 @import '../../app/view-models/dcae-app/dcae-app.less';
-@import '../../app/view-models/forms/artifact-form/artifact-form.less';
-@import '../../app/view-models/forms/env-parameters-form/env-parameters-form.less';
 @import '../../app/view-models/forms/property-forms/base-property-form/property-form-base.less';
 @import '../../app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less';
-@import '../../app/view-models/forms/resource-instance-name-form/resource-instance-name.less';
-@import '../../app/view-models/modals/confirmation-modal/confirmation-modal.less';
-@import '../../app/view-models/modals/email-modal/email-modal.less';
 @import '../../app/view-models/modals/error-modal/error.less';
-@import '../../app/view-models/modals/message-modal/message-client-modal/client-message-modal.less';
-@import '../../app/view-models/modals/message-modal/message-server-modal/server-message-modal.less';
-@import '../../app/view-models/modals/onboarding-modal/onboarding-modal.less';
 @import '../../app/view-models/modals/icons-modal/icons-modal-view.less';
 @import '../../app/view-models/onboard-vendor/onboard-vendor.less';
-@import '../../app/view-models/plugins/plugins-tab.less';
-@import '../../app/view-models/support/support.less';
-@import '../../app/view-models/tabs/general-tab.less';
-@import '../../app/view-models/tabs/hierarchy/hierarchy.less';
-@import '../../app/view-models/tutorial-end/tutorial-end.less';
-@import '../../app/view-models/workspace/tabs/activity-log/activity-log.less';
-@import '../../app/view-models/workspace/tabs/attributes/attributes.less';
-@import '../../app/view-models/workspace/tabs/composition/composition.less';
-@import '../../app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less';
-@import '../../app/view-models/workspace/tabs/composition/tabs/details/details.less';
-@import '../../app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less';
-@import '../../app/view-models/workspace/tabs/composition/tabs/relations/relations.less';
-@import '../../app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less';
-@import '../../app/view-models/workspace/tabs/deployment/deployment.less';
-@import '../../app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less';
-@import '../../app/view-models/workspace/tabs/distribution/distribution.less';
 @import '../../app/view-models/workspace/tabs/general/general.less';
-@import '../../app/view-models/workspace/tabs/information-artifacts/information-artifacts.less';
-@import '../../app/view-models/workspace/tabs/inputs/inputs.less';
 @import '../../app/view-models/workspace/tabs/properties/properties.less';
-@import '../../app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less';
-@import '../../app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less';
 @import '../../app/view-models/workspace/tabs/interface-operation/interface-operation.less';
 @import '../../app/view-models/workspace/workspace.less';
-@import '../../app/view-models/workspace/tabs/plugins/plugins-context.less';
 @import 'override.less';
diff --git a/catalog-ui/src/assets/styles/global.less b/catalog-ui/src/assets/styles/global.less
index 29e244e1a0..f70fc441b4 100644
--- a/catalog-ui/src/assets/styles/global.less
+++ b/catalog-ui/src/assets/styles/global.less
@@ -51,3 +51,12 @@ html {
     }
 
 }
+
+*[hidden] {
+    display: none !important;
+}
+
+.sdc-tooltip {
+    max-width: 300px;
+    word-wrap: break-word;
+}
diff --git a/catalog-ui/src/assets/styles/images/favicon.png b/catalog-ui/src/assets/styles/images/favicon.png
new file mode 100644
index 0000000000..6e9f04df69
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/favicon.png
diff --git a/catalog-ui/src/assets/styles/images/splashScreen/splashscreen_logo_and_text.png b/catalog-ui/src/assets/styles/images/splashScreen/splashscreen_logo_and_text.png
new file mode 100644
index 0000000000..27d4b7b94a
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/splashScreen/splashscreen_logo_and_text.png
diff --git a/catalog-ui/src/assets/styles/layout/main.less b/catalog-ui/src/assets/styles/layout/main.less
index 4dfeb8b46d..0d21cf5e7c 100644
--- a/catalog-ui/src/assets/styles/layout/main.less
+++ b/catalog-ui/src/assets/styles/layout/main.less
@@ -62,6 +62,7 @@
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
+
 }
 
 .sdc-loading-page {
@@ -159,3 +160,9 @@
     }
 
 }
+//temporary fix. should be removed after converting all the modals to onap-ui modals
+sdc-modal{
+    .sdc-modal, .modal-background{
+        z-index: 1050;
+    }
+}
diff --git a/catalog-ui/src/assets/styles/mixins.less b/catalog-ui/src/assets/styles/mixins.less
index 43bd2a5f44..5938b82245 100644
--- a/catalog-ui/src/assets/styles/mixins.less
+++ b/catalog-ui/src/assets/styles/mixins.less
@@ -246,7 +246,6 @@
     }
 }
 
-
 .square-icon() {
     display: inline-block;
     background-color: @main_color_a;
@@ -279,3 +278,6 @@
         font-size: 30px;
     }
 }
+
+ /* Added by ikram - */
+//  .s_1 {.font-color > .s; .font-type > ._1;}
diff --git a/catalog-ui/src/assets/styles/mixins_old.less b/catalog-ui/src/assets/styles/mixins_old.less
index 0e32684282..3f9a970d84 100644
--- a/catalog-ui/src/assets/styles/mixins_old.less
+++ b/catalog-ui/src/assets/styles/mixins_old.less
@@ -1,3 +1,4 @@
+@import "variables-old";
 @import "variables";
 
 .font-color {
@@ -246,8 +247,8 @@
 .s_1 {.font-color > .s; .font-type > ._1;}
 
 .s_10 {
-  .font-color > .s;
-  .font-type > ._10;
+    .font-color > .s;
+    .font-type > ._10;
 }
 .s_12 {.font-color > .s; .font-type > ._12;}
 
diff --git a/catalog-ui/src/assets/styles/notification-template.less b/catalog-ui/src/assets/styles/notification-template.less
deleted file mode 100644
index 5baf10d411..0000000000
--- a/catalog-ui/src/assets/styles/notification-template.less
+++ /dev/null
@@ -1,53 +0,0 @@
-.notification-container{
-    display: flex;
-    padding: 15px 11px;
-    float: left;
-    .icon-container{
-        flex-grow: 1;
-        margin-right: 20px;
-        .icon-circle{
-            background-color: black;
-            height: 40px;
-            width: 40px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            margin-right: 0;
-            background-color: rgba(255, 255, 255, 0.3);
-            .icon{
-                margin: 0 auto;
-                display: block;
-            }
-        }
-    }
-    .msg-content{
-        flex-grow: 3;
-        h3{
-            border-bottom: none;
-            font-weight: 400;
-            .f-type._18_m;
-        }
-        .message{
-            font-weight: 300;
-            .f-type._14_m;
-        }
-    }
-}
-.ui-notification.success{
-    background-color: @main_color_d;
-    .icon{
-        .notification-success-icon;
-    }
-}
-.ui-notification.error{
-    background-color: @func_color_q;
-    .icon{
-        .notification-error-icon;
-    }
-}
-.ui-notification.info{
-    background-color: @main_color_a;
-    .icon{
-        .notification-process-icon;
-    }
-}
diff --git a/catalog-ui/src/assets/styles/override.less b/catalog-ui/src/assets/styles/override.less
index 960be234f9..ae8fc4219e 100644
--- a/catalog-ui/src/assets/styles/override.less
+++ b/catalog-ui/src/assets/styles/override.less
@@ -22,51 +22,18 @@
 @sdcui_color_purple: #9063cd;
 @sdcui_color_light-purple: #caa2dd;
 
-/* override sdc-ui library tabs */
-body.composition {
-
-    .sdc-tabs {
-        .sdc-tab {
-            background-color: @sdcui_color_white;
-            border: 1px solid @sdcui_color_silver;
-            border-left: none;
-            display: inline-block;
-            height: 36px;
-            text-align: center;
-            cursor: pointer;
-            padding: 2px 10px 0 10px;
-            margin: 0;
-    
-    
-            &:first-child {
-                border-left: 1px solid @sdcui_color_silver;
-            }
-            &.sdc-tab-active {
-                background-color: @sdcui_color_silver;
-            }
-            &[disabled] {
-                opacity: 0.3;
-                cursor: default;
-            }
-        }
-        &.sdc-tabs-header {
-            .sdc-tab {
-                font-size: 24px;
-            }
-        }
-        &.sdc-tabs-menu {
-            .sdc-tab {
-                font-size: 14px;
-                padding: 0px 10px 4px 10px;
-            }
-        }
-        .sdc-tab-content {
-            margin-top: 0;
-        }
-    }
-    
+.sdc-modal .sdc-modal__wrapper .sdc-modal__header {
+    height:auto;
 }
 //override sdc-ui version 53 css, used by onboarding. This can be removed after we update past version 42
 sdc-modal {
     position: static !important;
 }
+
+.sdc-modal .sdc-modal__wrapper .sdc-modal__header {
+    height: auto;
+}
+
+.sdc-menu-list {
+    z-index: 9999999;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/sprite-resource-icons.less b/catalog-ui/src/assets/styles/sprite-resource-icons.less
index 0ada1c8711..1c5c852ef0 100644
--- a/catalog-ui/src/assets/styles/sprite-resource-icons.less
+++ b/catalog-ui/src/assets/styles/sprite-resource-icons.less
@@ -155,10 +155,10 @@
 .sprite-resource-icons.cp.medium                { background-position: -151px -4048px; width: 21px; height: 21px;}
 .sprite-resource-icons.cp.large                 { background-position: -194px -4034px; width: 60px; height: 60px;}
 
-.sprite-resource-icons.vl                       { background-position: -210px -2591px; width: 28px; height: 28px;}
-.sprite-resource-icons.vl.small                 { background-position: -210px -2591px; width: 28px; height: 28px;}
-.sprite-resource-icons.vl.medium                { background-position: -141px -2579px; width: 40px; height: 40px;}
-.sprite-resource-icons.vl.large                 { background-position: -70px -2560px; width: 60px; height: 60px;}
+.sprite-resource-icons.vl                       { background-position: -90px -4328px; width: 28px; height: 28px;}
+.sprite-resource-icons.vl.small                 { background-position: -90px -4328px; width: 28px; height: 28px;}
+.sprite-resource-icons.vl.medium                { background-position: -151px -4338px; width: 40px; height: 40px;}
+.sprite-resource-icons.vl.large                 { background-position: -214px -4344px; width: 60px; height: 60px;}
 
 .sprite-resource-icons.cloudep                  { background-position: -282px -2225px; width: 63px; height: 43px;}
 .sprite-resource-icons.cloudep.small            { background-position: -209px -2241px; width: 28px; height: 28px;}
diff --git a/catalog-ui/src/assets/styles/table-flex.less b/catalog-ui/src/assets/styles/table-flex.less
index 19355ddd80..3ac014cc1b 100644
--- a/catalog-ui/src/assets/styles/table-flex.less
+++ b/catalog-ui/src/assets/styles/table-flex.less
@@ -118,32 +118,37 @@
 
             line-height: 0px;
             text-align: center;
-
-            button {
+            .table-delete-btn {
                 background-color: transparent;
                 border: none;
                 .sprite;
-                opacity: 0.8;
-            }
-            .table-delete-btn {
                 .sprite.e-sdc-small-icon-delete;
+                opacity: 0.8;
 
             }
             .table-edit-btn {
+                background-color: transparent;
+                border: none;
+                .sprite;
                 .e-sdc-small-icon-pencil;
+                opacity: 0.8;
                 margin-right: 10px;
             }
             .table-save-btn {
+                background-color: transparent;
+                border: none;
+                .sprite;
                 .sprite.e-sdc-green-save;
             }
             .table-download-btn {
+                background-color: transparent;
+                border: none;
+                .hand;
                 margin-left: 10px;
+                opacity: 0.8;
+                .sprite;
                 .sprite.e-sdc-small-download;
             }
-            .table-magnifier-btn {
-                margin-left: 10px;
-                .sprite.magnification-glass;
-            }
         }
 
     }
diff --git a/catalog-ui/src/assets/styles/table-style.less b/catalog-ui/src/assets/styles/table-style.less
new file mode 100644
index 0000000000..fa61a669b0
--- /dev/null
+++ b/catalog-ui/src/assets/styles/table-style.less
@@ -0,0 +1,89 @@
+@import "./override";
+
+:host ::ng-deep {
+
+  .externalActionLabel {
+      color: @sdcui_color_blue;
+  }
+
+  .ngx-datatable {
+    border: 1px solid @sdcui_color_light-gray;
+    > div {
+      height: 100%;
+      min-height: 500px;
+      datatable-body {
+        height: calc(100% - 50px) !important;
+        overflow-y: auto;
+        overflow-x: hidden;
+        max-height: 500px;
+      }
+    }
+    //*********************************************
+
+    .datatable-header {
+      background-color: @sdcui_color_silver;
+      border-bottom: 1px solid @sdcui_color_light-gray;
+
+      .datatable-header-inner {
+        height: 100%;
+        align-items: center;
+
+        .datatable-header-cell {
+          box-sizing: border-box;
+          color: @sdcui_color_dark-gray;
+          border-right: 1px solid @sdcui_color_light-gray;
+          font-weight: bold;
+          text-align: center;
+          padding: 10px;
+
+          .datatable-icon-up {
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-bottom: 5px solid @sdcui_color_dark-gray;
+          }
+
+          .datatable-icon-down {
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 5px solid @sdcui_color_dark-gray;
+          }
+        }
+      }
+    }
+
+    .datatable-body-cell {
+      padding: 5px 20px;
+      border-bottom: 1px solid @sdcui_color_light-gray;
+      border-right: 1px solid @sdcui_color_light-gray;
+      font-family: OpenSans-Regular, sans-serif;
+      font-size: 13px;
+      font-weight: normal;
+      .label {
+        font-family: OpenSans-Regular, sans-serif;
+        font-size: 13px;
+        color: @sdcui_color_gray;
+      }
+    }
+    .datatable-body-row:hover {
+      background-color: @sdcui_color_light-silver;
+    }
+
+  }
+  .datatable-row-detail {
+    padding: 10px 25px;
+    border-bottom: 1px solid @sdcui_color_light-gray;
+  }
+
+  .empty-row {
+    padding: 10px;
+  }
+
+}
+
+.expand-collapse-cell {
+  display: flex;
+  align-items: center;
+  .expand-collapse-icon {
+    padding-right: 10px;
+  }
+}
\ No newline at end of file