Catalog alignment

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

14 files changed, 249 insertions, 194 deletions

diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json
index 72f320d5b4..aa6a088796 100644
--- a/catalog-ui/src/assets/languages/en_US.json
+++ b/catalog-ui/src/assets/languages/en_US.json
@@ -28,7 +28,7 @@
     "GENERAL_LABEL_SERVICE_TYPE": "Service Type:",
     "GENERAL_LABEL_SERVICE_ROLE": "Service Role:",
     "GENERAL_LABEL_STATUS": "Status:",
-    "GENERAL_LABEL_PROJECT_CODE": "Project Code:",
+    "GENERAL_LABEL_SERVICE_FUNCTION": "Service Function:",
     "GENERAL_LABEL_DESCRIPTION": "Description:",
     "GENERAL_LABEL_TAGS": "Tags:",
     "GENERAL_LABEL_RESOURCE_TYPE": "Resource Type:",
@@ -43,10 +43,12 @@
     "GENERAL_LABEL_SOURCE_SERVICE_NAME": "Source Service Name:",
     "GENERAL_LABEL_RESOURCE_CUSTOMIZATION_UUID": "Resource Customization UUID:",
 
+
     "=========== GENERAL_TAB ===========": "",
     "GENERAL_TAB_LABEL_RESOURCE_MODEL_NUMBER":"Vendor Model Number",
     "GENERAL_TAB_LABEL_SERVICE_TYPE": "Service Type",
     "GENERAL_TAB_LABEL_SERVICE_ROLE": "Service Role",
+    "GENERAL_TAB_LABEL_SERVICE_FUNCTION": "Service Function",
 
     "=========== GENERAL ERROR PAGES ===========": "",
     "GENERAL_ERROR_403_TITLE": "SDC Access Denied",
@@ -192,8 +194,6 @@
     "WELCOME_BTN_START_TUTORIAL": "Let's start",
     "WELCOME_BTN_SKIP": "skip for now",
     "WELCOME_BTN_ACTION_DESIGN_STUDIO": "Design Studio",
-    "WELCOME_BTN_ACTION_CERTIFICATION_STUDIO": "Tester's Workspace",
-    "WELCOME_BTN_ACTION_GOVERNOR_BOARD": "Governance Board",
     "WELCOME_BTN_ACTION_DISTRIBUTION_STUDIO": "Distribution Studio",
     "WELCOME_BTN_ACTION_CATALOG": "Catalog",
 
@@ -216,8 +216,6 @@
     "NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS": "Name already exists.",
     "NEW_SERVICE_RESOURCE_ERROR_SPECIAL_CHARS": "Special characters not allowed.",
     "NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED": "category is required.",
-    "NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_REQUIRED": "Project code is required.",
-    "NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_NOT_VALID": "Project code is not valid.",
     "NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED": "Contact is required.",
     "NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID": "Contact is not valid.",
     "NEW_SERVICE_RESOURCE_ERROR_SERVICE_DESCRIPTION_REQUIRED": "Service description is required.",
@@ -304,6 +302,7 @@
 
     "=========== ATTRIBUTE VIEW ===========": "",
     "ATTRIBUTE_VIEW_DELETE_MODAL_TITLE": "Delete Attribute Confirmation",
+    "ATTRIBUTE_DETAILS_MODAL_TITLE": "Attribute Details",
     "ATTRIBUTE_VIEW_DELETE_MODAL_TEXT": "Are you sure you want to delete '{{name}}'?",
     "ATTRIBUTE_EDIT_PATTERN": "Invalid value.",
     "NEW_ATTRIBUTE_ERROR_NAME_EXISTS":"Name already exists.",
@@ -335,7 +334,6 @@
     "WHATS_NEW_4_TITLE": "App Navigation",
     "WHATS_NEW_4_BODY": "This release introduces View and Edit modes<ol><li>Use the view mode when:<ul><li>User does not have authorization to edit an Asset</li><li>Asset is in Check-In Mode</li></ul></li><li>Use the Edit Mode when:<ul><li>User has authorization to edit an Asset</li><li>Asset is in Check-out Mode</li></ul></li></ol>",
     "WHATS_NEW_5_TITLE": "Certification Studio",
-    "WHATS_NEW_5_BODY": "Tester, Governor and Ops roles can view VF and Service Composition.<br/>They can also download the asset’s artifacts, and download the asset’s resource instance artifacts",
     "WHATS_NEW_6_TITLE": "Composition: Virtual Link",
     "WHATS_NEW_6_BODY": "The ability to link VFs via a Virtual link has been expanded. Now a Virtual link can be defined as having either Point-to-Point connectivity or Multi-point connectivity. Additionally from within a Virtual Link, Point-to-Point connectivity can be dynamically changed to Multi-Point connectivity.",
     "WHATS_NEW_7_TITLE": "Distribution",
@@ -357,11 +355,8 @@
     "NEW_USER_ERROR_USER_ID_NOT_VALID": "User id not valid.",
     "NEW_USER_ERROR_ROLE_REQUIRED": "User role is required.",
 
-    "=========== EMAIL_MODAL ===========": "",
-    "EMAIL_MODAL_TITLE": "Submit For Testing",
-    "EMAIL_MODAL_SUBJECT": "{{entityName}}; version {{entityVersion}}",
-    "EMAIL_MODAL_MESSAGE": "Enter your message here...",
-    "EMAIL_OUTLOOK_MESSAGE": "mailto:{{to}}?subject={{subject}} is now ready for testing&body={{message}}%0D%0A%0D%0AClick on the link below to open {{entityNameAndVersion}} that is ready for testing. %0D%0A{{link}}%0D%0A",
+    "=========== CONFIRMATION_MODAL ===========": "",
+    "CONFIRMATION_MODAL_PLACEHOLDER": "Comment...",
 
     "=========== CATEGORY_MANAGEMENT SCREEN ===========": "",
     "RESOURCE_CATEGORY_HEADER": "Resource Category",
@@ -390,7 +385,7 @@
     "DEPLOYMENT_ARTIFACT_BUTTON_ADD_OTHER": "Add Other Artifact",
     "DEPLOYMENT_ARTIFACT_GAB_NO_CONFIG": "Generic Artifact Browser has no columns configured"
 
-,"=========== IMPORT VF ===========": "",
+    ,"=========== IMPORT VF ===========": "",
     "IMPORT_VF_MESSAGE_CREATE_TAKES_LONG_TIME_TITLE": "Create VF",
     "IMPORT_VF_MESSAGE_CREATE_TAKES_LONG_TIME_DESCRIPTION": "Your VF is being created.<br/>It can take up to 10 minutes.<br/>When done, you can view it in SDC Catalog.",
     "IMPORT_VF_MESSAGE_CREATE_FINISHED_TITLE": "Create/Update",
@@ -412,16 +407,6 @@
     "CHECKOUT_SUCCESS_MESSAGE_TITLE": "Check out",
     "DELETE_SUCCESS_MESSAGE_TEXT": "Deleted successfully",
     "DELETE_SUCCESS_MESSAGE_TITLE": "Delete",
-    "SUBMIT_FOR_TESTING_SUCCESS_MESSAGE_TEXT": "Submitted successfully for testing",
-    "SUBMIT_FOR_TESTING_SUCCESS_MESSAGE_TITLE": "Submit For Testing",
-    "START_TESTING_SUCCESS_MESSAGE_TEXT": "Tested successfully",
-    "START_TESTING_SUCCESS_MESSAGE_TITLE": "Start Testing",
-    "CANCEL_TESTING_SUCCESS_MESSAGE_TEXT": "Cancelled successfully",
-    "CANCEL_TESTING_SUCCESS_MESSAGE_TITLE": "Cancel",
-    "REJECT_SUCCESS_MESSAGE_TEXT": "Rejected successfully",
-    "REJECT_SUCCESS_MESSAGE_TITLE": "Reject",
-    "ACCEPT_TESTING_SUCCESS_MESSAGE_TEXT": "Accepted successfully",
-    "ACCEPT_TESTING_SUCCESS_MESSAGE_TITLE": "Accept",
     "APPROVE_SUCCESS_MESSAGE_TEXT": "Approved successfully",
     "APPROVE_SUCCESS_MESSAGE_TITLE": "Approve",
     "DISTRIBUTE_SUCCESS_MESSAGE_TEXT": "Distributed successfully",
@@ -431,10 +416,11 @@
     "ARCHIVE_SUCCESS_MESSAGE_TITLE":"Archive",
     "ARCHIVE_SUCCESS_MESSAGE_TEXT":"successfully archived",
 
-    "=========== ON BOARDING MODAL INFO MESSAGES ===========": "",
-    "ON_BOARDING_GENERAL_INFO": "Displays a table of VSPs created using Onboarding.<br/> Each row displays details for a single VSP.<br/> When expanded you can either import CSAR files that are yet to  be imported or update CSAR files that were previously imported.",
-    "ON_BOARDING_IMPORT_INFO": "Displays the Onboarding repository and supports importing on-boarded CSAR files.<br/>  Select  an imported CSAR file to create a VF from the on-boarded and imported  information.",
-    "ON_BOARDING_UPDATE_INFO": "Displays the Onboarding repository and supports updating on-boarded and previously imported CSAR files.<br/> Clicking Update, updates the existing VF with information available from a new version of the CSAR file.",
+    "=========== ON BOARDING MODAL ===========": "",
+    "ON_BOARDING_MODAL_SUB_TITLE": "Select one of the software product component below:",
+    "ON_BOARDING_GENERAL_INFO": "Displays a table of VSPs created using Onboarding.\nEach row displays details for a single VSP.\nWhen expanded you can either import CSAR files that are yet to  be imported or update CSAR files that were previously imported.",
+    "ON_BOARDING_IMPORT_INFO": "Displays the Onboarding repository and supports importing on-boarded CSAR files.\nSelect  an imported CSAR file to create a VF from the on-boarded and imported  information.",
+    "ON_BOARDING_UPDATE_INFO": "Displays the Onboarding repository and supports updating on-boarded and previously imported CSAR files.\nClicking Update, updates the existing VF with information available from a new version of the CSAR file.",
 
     "=========== HEAT PARAMETERS MODAL INFO MESSAGES ===========": "",
     "DEFAULT_VALUE_INFO": "This column indicates all the default values that were declared in the Main Heat ",
@@ -450,6 +436,7 @@
     "=========== SERVICE PATH SELECTOR ===========": "",
     "SERVICE_PATH_SELECTOR_HIDE_ALL_VALUE" : "⚊ Hide all ⚊",
     "SERVICE_PATH_SELECTOR_SHOW_ALL_VALUE" : "⚊ Show all ⚊",
+    "SERVICE_OPERATION_PROPERTY_TOOLTIP_TEXT": "Service properties are defined by the input parameter type. In case you can't find a certain parameter, it might be due to a wrong type selection.",
 
     "=========== INTERFACE OPERATION ==========": "",
     "INTERFACE_ADD_OPERATION": "Add Operation",
@@ -499,7 +486,6 @@
 
     "PARAM_NONE_OF_TYPE": "No available properties of this type.",
 
-
     "=========== PLUGIN NOT CONNECTED ===========": "",
     "PLUGIN_NOT_CONNECTED_ERROR_MAIN": "The \"{{pluginName}}\" plugin is currently unavailable.",
     "PLUGIN_NOT_CONNECTED_ERROR_SUB": "Please try again later.",
@@ -531,9 +517,11 @@
     "MODAL_CREATE" : "Create",
     "MODAL_CANCEL" : "Cancel",
     "MODAL_DELETE" : "Delete",
+
     "=========== POLICY AND GROUPS ===========": "",
     "ADD_TARGETS" : "Add Targets",
     "ADD_MEMBERS" : "Add Members",
+
     "=========== PROPERTIES ASSIGNMENT DECLARE AS POLICY ===========": "",
     "DELETE_POLICY_TITLE": "Delete Policy",
     "DELETE_POLICY_MSG": "Are you sure you want to delete policy '{{policyName}}'?",
@@ -553,21 +541,31 @@
     "RESOURCE_UPGRADE_STATUS_FAIL": "Automated service upgrade failed.",
     "SERVICE_UPGRADE_STATUS_SUCCESS": "Automated service upgrade was completed and successful.<br/>The services which are successfully upgraded are in checked-in state with version displayed below. Please close this popup window and proceed with design completion on the services",
     "SERVICE_UPGRADE_STATUS_FAIL": "Automated service upgrade failed.",
-    "SERVICE_CERTIFICATION_STATUS_TEXT": "Service {{serviceName}} was successfully certified",
+    "SERVICE_CERTIFICATION_STATUS_TEXT": "Service successfully certified",
+    "SERVICE_CERTIFICATION_STATUS_TITLE": "Service Certification",
     "SERVICE_AUTOMATED_UPGRADE_WITH_COMPONENTS_TO_UPGRADE":  "The following services reference <b>{{vspName}}</b>.<br/> One or more of the services were not yet upgraded with the most recently certified version of <b>{{vspName}}</b>.</br>Select services from the list to upgrade them with <b>{{vspName}} {{vspVersion}}</b>.",
     "SERVICE_AUTOMATED_UPGRADE_ALL_COMPONENTS_LOCKED": "The listed services reference <b>{{vspName}}</b>.<br/> These services were not upgraded with the most recently certified version of <b>{{vspName}}</b>. Currently they are locked from being upgraded with <b>{{vspName}} {{vspVersion}}</b>",
-  "SERVICE_AUTOMATED_UPGRADE_ALL_COMPONENTS_UPGRADED": "The listed services each reference <b>{{vspName}}</b> and have already been updated with the most recently certified version of  the <b>{{vspName}} {{vspVersion}}</b>",
-  "=========== REQUIREMENTS AND CAPABILITIES ===========": "",
-  "REQ_NAME": "Requirement Name",
-  "REQ_RELATED_CAPABILITY": "Related Capability",
-  "REQ_NODE": "Node",
-  "REQ_RELATIONSHIP": "Relationship",
-  "REQ_CAP_OCCURRENCES": "Occurrences",
-  "REQ_CAP_OCCURRENCES_UNBOUNDED": "UNBOUNDED",
-  "REQ_CAP_OCCURRENCES_MIN": "Min",
-  "REQ_CAP_OCCURRENCES_MAX": "Max",
-  "CAP_NAME": "Capability Name",
-  "CAP_TYPE": "Capability Type",
-  "CAP_DESCRIPTION": "Description",
-  "CAP_VALID_SOURCE": "Valid Sources"
+    "SERVICE_AUTOMATED_UPGRADE_ALL_COMPONENTS_UPGRADED": "The listed services each reference <b>{{vspName}}</b> and have already been updated with the most recently certified version of  the <b>{{vspName}} {{vspVersion}}</b>",
+
+    "=========== ERROR_MODAL ===========": "",
+    "ERROR_MODAL_TEXT": "Error code: {{messageId}} <br/> Status code: {{status}} <br/> {{message}}",
+    "DEFAULT_ERROR_MESSAGE": "Error getting response from server",
+
+    "=========== CONFORMANCE_LEVEL_MODAL ===========": "",
+    "CONFORMANCE_LEVEL_MODAL_TITLE": "Warning",
+    "CONFORMANCE_LEVEL_MODAL_TEXT": "<p>You are about to distribute a service with models and artifacts created with an <b>older version of the platform</b>.For such service, new properties, metadata and requirements needed by ECOMP components will not be available.</p><p>It is highly recommended that you upgrade the service models and artifacts.</p><p>Click \"Continue\" if you need to distribute the current service version.<br />Click \"Reject\" if you need to stop the distribution and manually upgrade the service.</p>",
+
+    "=========== REQUIREMENTS AND CAPABILITIES ===========": "",
+    "REQ_NAME": "Requirement Name",
+    "REQ_RELATED_CAPABILITY": "Related Capability",
+    "REQ_NODE": "Node",
+    "REQ_RELATIONSHIP": "Relationship",
+    "REQ_CAP_OCCURRENCES": "Occurrences",
+    "REQ_CAP_OCCURRENCES_UNBOUNDED": "UNBOUNDED",
+    "REQ_CAP_OCCURRENCES_MIN": "Min",
+    "REQ_CAP_OCCURRENCES_MAX": "Max",
+    "CAP_NAME": "Capability Name",
+    "CAP_TYPE": "Capability Type",
+    "CAP_DESCRIPTION": "Description",
+    "CAP_VALID_SOURCE": "Valid Sources"
 }
diff --git a/catalog-ui/src/assets/preloading.css b/catalog-ui/src/assets/preloading.css
new file mode 100644
index 0000000000..1f0c2c6c3a
--- /dev/null
+++ b/catalog-ui/src/assets/preloading.css
@@ -0,0 +1,69 @@
+html {
+    height: 100%;
+}
+body {
+    height: 100%;
+    width: 100%;
+    margin: 0px;
+    padding: 0px;
+    overflow:hidden;
+}
+
+.preloading-page {
+    height: 100%;
+    width: 100%;
+    margin: 0px;
+    overflow:hidden;
+    background-image: linear-gradient(to bottom right, rgba(30, 36, 48, 1), rgba(59, 74, 93, 1));
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: #FFFFFF;
+}
+
+ .project-icon {
+    width: 200px;
+    height: 210px;
+    margin-top: 0%;
+    background-repeat: no-repeat;
+}
+
+.preloading-page-loading {
+    font-size: 24px;
+    line-height: 44px;
+    font-family: Arial,  Helvetica, sans-serif;
+    color: #1EB9F3;
+    margin-top: 10%;
+    margin-left: 3%;
+}
+
+.preloading-page-loading span {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 50px;
+    animation-name: blink;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+}
+
+.preloading-page-loading span:nth-child(2) {
+    animation-delay: .5s;
+}
+
+.preloading-page-loading span:nth-child(3) {
+    animation-delay: 1.0s;
+}
+
+@keyframes blink {
+    0% {
+        opacity: .2;
+    }
+    20% {
+        opacity: 1;
+    }
+    100% {
+        opacity: .2;
+    }
+}
\ No newline at end of file
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