Make the aesthetics as consistent as possible

Issue-ID: NONRTRIC-424
Signed-off-by: ychacon <yennifer.chacon@est.tech>
Change-Id: I1dbb994d783736f73e58638bb88ce2700a5c9dfa

diff --git a/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.html b/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.html
index 81df840..5605271 100644 (file)
--- a/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.html
+++ b/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.html
@@ -19,7 +19,7 @@
   -->
 
 <div class="text-muted logo" fxLayout="row" fxLayoutGap="50px" fxLayoutAlign="space-around center">
-    <div *ngIf="policyInstanceId">[{{this.ric}}] {{policyInstanceId}}</div>
+    <div *ngIf="policyInstanceId">[{{this.ric}}] Instance ID: {{policyInstanceId}}</div>
 </div>
 <div class="mat-elevation-z8 header row" [ngClass]="{'header-dark': darkMode}">
     <div class="logo">
@@ -27,6 +27,7 @@
         <svg class="logo__icon" viewBox="150.3 22.2 1000 50">
             <text class="logo__text" [ngClass]="{'logo__text-dark': darkMode}" font-size="30" font-weight="600"
                 letter-spacing=".1em" transform="translate(149 56)">
+                <tspan *ngIf="!this.policyInstanceId">Create new policy instance of </tspan>
                 <tspan>< No type></tspan>
             </text>
         </svg>
@@ -37,7 +38,7 @@
     fxLayoutAlign.lt-sm="flex-start center">
 
     <mat-card class="card" [ngClass]="{'card-dark': darkMode}">
-        <mat-form-field *ngIf="!this.policyInstanceId">
+        <mat-form-field *ngIf="!this.policyInstanceId" appearance="fill">
             <mat-select id="ricSelector" formControlName="ricSelector" matInput required [(value)]="this.ric"
                 placeholder="Target"
                 matTooltip="Element where the policy instance resides, e.g. a gNodeB or Near-RT RIC">
@@ -57,7 +58,7 @@
         <h4>
             Properties
         </h4>
-        <mat-form-field style="width: 800px;">
+        <mat-form-field style="width: 800px;"  appearance="fill">
             <textarea id="policyJsonTextArea" formControlName="policyJsonTextArea" matInput cdkTextareaAutosize
                 cdkAutosizeMinRows="10" required [(value)]="this.policyJson" placeholder="Policy properties"
                 matTooltip="The properties of the policy instance, in JSON format" matTooltipPosition="before">

diff --git a/webapp-frontend/src/app/policy-control/policy-control.component.scss b/webapp-frontend/src/app/policy-control/policy-control.component.scss
index cc424b3..13a5d23 100644 (file)
--- a/webapp-frontend/src/app/policy-control/policy-control.component.scss
+++ b/webapp-frontend/src/app/policy-control/policy-control.component.scss
@@ -37,7 +37,7 @@
 
 .action-cell {
   display: flex;
-  justify-content: flex-end;
+  padding-left: 2px;
 }
 
 .display-none {

diff --git a/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html b/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html
index fea3e84..a533ed0 100644 (file)
--- a/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html
+++ b/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html
@@ -19,7 +19,7 @@
   -->
 
 <div class="text-muted logo" fxLayout="row" fxLayoutGap="50px" fxLayoutAlign="space-around center">
-    <div *ngIf="policyInstanceId">[{{this.ric}}] {{policyInstanceId}}</div>
+    <div *ngIf="policyInstanceId">[{{this.ric}}] Instance ID: {{policyInstanceId}}</div>
 </div>
 <div class="mat-elevation-z8 header row" [ngClass]="{'header-dark': darkMode}">
     <div class="logo">
@@ -27,6 +27,7 @@
         <svg class="logo__icon" viewBox="150.3 22.2 1000 50">
             <text class="logo__text" [ngClass]="{'logo__text-dark': darkMode}" font-size="30" font-weight="600"
                 letter-spacing=".1em" transform="translate(149 56)">
+                <tspan *ngIf="!this.policyInstanceId">Create new policy instance of type </tspan>
                 <tspan *ngIf="jsonSchemaObject.title"> {{this.jsonSchemaObject.title}}</tspan>
                 <tspan *ngIf="!jsonSchemaObject.title"> {{this.policyTypeName}}</tspan>
             </text>
@@ -40,7 +41,7 @@
     fxLayoutAlign.lt-sm="flex-start center">
 
     <mat-card class="card" [ngClass]="{'card-dark': darkMode}">
-        <mat-form-field *ngIf="!this.policyInstanceId">
+        <mat-form-field *ngIf="!this.policyInstanceId" appearance="fill">
             <mat-select id="ricSelector" formControlName="ricSelector" matInput required [(value)]="this.ric"
                 placeholder="Target"
                 matTooltip="Element where the policy instance resides, e.g. a gNodeB or Near-RT RIC">

diff --git a/webapp-frontend/src/app/policy-control/policy-instance.component.scss b/webapp-frontend/src/app/policy-control/policy-instance.component.scss
index 6a18c34..7f0ba47 100644 (file)
--- a/webapp-frontend/src/app/policy-control/policy-instance.component.scss
+++ b/webapp-frontend/src/app/policy-control/policy-instance.component.scss
@@ -18,9 +18,12 @@
  * ========================LICENSE_END===================================
  */
 
+:host{
+  min-width: 100%;
+}
+
 .instances-table {
-  width: 90%;
-  min-width: 1200px;
+  width: 100%;
   margin-top: 10px;
   margin-bottom: 10px;
   background-color: grayscale($color: #eeeaea);
@@ -40,7 +43,7 @@
 
 .action-cell {
   display: flex;
-  justify-content: flex-end;
+  padding-left: 2px;
 }
 
 .display-none {

diff --git a/webapp-frontend/src/app/ui/ei-card/ei-card.component.html b/webapp-frontend/src/app/ui/ei-card/ei-card.component.html
index 9d3a35f..ccbbb41 100644 (file)
--- a/webapp-frontend/src/app/ui/ei-card/ei-card.component.html
+++ b/webapp-frontend/src/app/ui/ei-card/ei-card.component.html
@@ -19,7 +19,7 @@
   -->
 <div class="ei__card" routerLink="/ei-coordinator" [ngClass]="{'add__card-dark': darkMode}">
   <div class="header__container">
-    <span class="card__title">Enrichment Information Coordinator</span><br><br><br>
+    <span class="card__title">Enrichment Information Coordinator</span>
   <div class="body__container">
     <img src="assets/oran-logo.png" width="250px"/>
   </div>