Improve UX when user wants to add first MC.

Add new button to import the MC directly.
Update the information on the main label.
Improve the css style.

Issue-ID: SDC-2312
Signed-off-by: Krystian Kedron <k.kedron@partner.samsung.com>
Change-Id: I31352e56fb032092dcbae209e6bae8af6d09ac6c

2 files changed, 48 insertions, 13 deletions

diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html
index fe20ab6..6b7d6a9 100644
--- a/public/src/app/home/home.component.html
+++ b/public/src/app/home/home.component.html
@@ -11,6 +11,7 @@
                   height: 100%;
                   display: flex;
                   justify-content: center;
+                  color: #00c100;
                   align-items: center;"
           [innerHTML]="'download' | feather:20"></span>
       </button>
@@ -123,19 +124,35 @@
       <div style="font-size: 18px;">
         Monitoring Configuration does not Exist
       </div>
-      <div style="padding: 0.5em; padding-top: 1em; font-size: 13px;" data-tests-id="new-monitoring-title">
+      <div style="padding: 1em 0.5em 0.5em; font-size: 13px;" data-tests-id="new-monitoring-title">
         A Monitoring Configuration (MC) was not yet created
       </div>
       <div style="font-size: 13px;">
         Please create a new MC to monitor the service
       </div>
-      <div class="wrapper-btn-add-mc">
-        <button mat-mini-fab color="primary" (click)="createScreen()" data-tests-id="btn-fab-create-mc" [disabled]="!checkCanCreate()">
-          <span [innerHTML]="'plus' | feather:24"></span>
-        </button>
-        <span style="margin-top: 10px; font-size: 14px; " [style.color]="!checkCanCreate() ? '#ebebe4' : '#009FDB'">
-          <p data-tests-id="btn-span-create-mc">Add First MC</p>
-        </span>
+      <div style="padding-top: 0.5em; font-size: 13px;">
+        Or import any existing VFCMT present
+      </div>
+      <div style="font-size: 13px;">
+        in the DCAE-DS catalog as the MC
+      </div>
+      <div style="margin-top: 46px;">
+        <div class="wrapper-btn-mc">
+          <button mat-mini-fab color="primary" (click)="createScreen()" data-tests-id="btn-fab-create-mc" [disabled]="!checkCanCreate()">
+            <span [innerHTML]="'plus' | feather:24"></span>
+          </button>
+          <span style="margin-top: 10px; font-size: 14px; " [style.color]="!checkCanCreate() ? '#ebebe4' : '#009FDB'">
+            <p data-tests-id="btn-span-create-mc">Add First MC</p>
+          </span>
+        </div>
+        <div class="wrapper-btn-mc" style="margin-left: 40px">
+          <button mat-mini-fab color="success" (click)="importScreen()" data-tests-id="btn-fab-create-mc" [disabled]="!checkCanCreate()">
+            <span [innerHTML]="'plus' | feather:24"></span>
+          </button>
+          <span style="margin-top: 10px; font-size: 16px; " [style.color]="!checkCanCreate() ? '#ebebe4' : '#5cb85c'">
+            <p data-tests-id="btn-span-create-mc">Import MC</p>
+          </span>
+        </div>
       </div>
     </div>
   </ng-template>
diff --git a/public/src/app/home/home.component.scss b/public/src/app/home/home.component.scss
index 63d0544..890d463 100644
--- a/public/src/app/home/home.component.scss
+++ b/public/src/app/home/home.component.scss
@@ -1,16 +1,20 @@
 @import '~@swimlane/ngx-datatable/release/themes/material.css';
+
+$success-color-main: #5cb85c;
+$success-color-hover: #9ed29e;
+$primary-color-hover: #7bd0f1;
+
 .home-container {
   display: flex;
   flex-direction: column;
   height: 100%;
-  margin: 15px 20px;
-  margin-left: 15px;
-  margin-right: 15px;
-  .wrapper-btn-add-mc {
-    margin-top: 46px;
+  margin: 15px;
+
+  .wrapper-btn-mc {
     display: flex;
     flex-direction: column;
     align-items: center;
+    float: left;
   }
   .btn-create {
     width: 150px;
@@ -18,6 +22,20 @@
   }
 }
 
+.mat-success {
+  background-color: $success-color-main;
+  border-color: #4cae4c;
+  color: #fff;
+}
+
+button.mat-success:not([disabled]):hover {
+  background-color: $success-color-hover;
+}
+
+button.mat-primary:not([disabled]):hover {
+  background-color: $primary-color-hover;
+}
+
 .my-confrim-dialog .mat-dialog-container {
   max-width: 600px;
   width: 500px;