From: Sarkar, Anand (as0481) <as0481@att.com>
Date: Mon, 17 Jun 2019 14:50:17 +0000 (-0400)
Subject: Align page titles to top left,decrease font size
X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=commitdiff_plain;h=refs%2Fchanges%2F50%2F350%2F2;p=portal%2Fric-dashboard.git

Align page titles to top left,decrease font size

Signed-off-by: Sarkar, Anand (as0481) <as0481@att.com>
Issue-Id: RICPLT-1497
Change-Id: I563691a1e786415a106830541640867b89145d91
---

diff --git a/docs/release-notes.rst b/docs/release-notes.rst
index 458a4ec4..b696ceac 100644
--- a/docs/release-notes.rst
+++ b/docs/release-notes.rst
@@ -33,6 +33,7 @@ Version 1.0.4, 17 June 2019
 * Revise config property keys to use URL (not basepath)
 * Left menu overlap main content fix
 * Extend back-end controllers to return error details
+* Rework screen titles to be top left and modest font size
 
 Version 1.0.3, 28 May 2019
 --------------------------
diff --git a/webapp-frontend/src/app/admin/admin.component.css b/webapp-frontend/src/app/admin/admin.component.css
index 380dd352..a108a312 100644
--- a/webapp-frontend/src/app/admin/admin.component.css
+++ b/webapp-frontend/src/app/admin/admin.component.css
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -21,9 +21,8 @@
 }
 
 .admin__header {
-    text-align: center;
     color: #432c85;
-    font-size: 50px;
+    font-size: 35px;
     font-weight: 200;
     letter-spacing: .1em;
     transform: translate(149 56);
diff --git a/webapp-frontend/src/app/admin/admin.component.html b/webapp-frontend/src/app/admin/admin.component.html
index 1cc91738..fcf463bd 100644
--- a/webapp-frontend/src/app/admin/admin.component.html
+++ b/webapp-frontend/src/app/admin/admin.component.html
@@ -7,9 +7,9 @@
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
-  
+
        http://www.apache.org/licenses/LICENSE-2.0
-  
+
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,7 +18,9 @@
   ========================LICENSE_END===================================
 -->
 <div class="admin__section">
-    <h3 class="admin__header">Users</h3>
+    <mat-card-header>
+      <mat-card-title>Users</mat-card-title>
+    </mat-card-header>
     <ng2-smart-table [settings]="usersettings" [source]="usersource" (deleteConfirm)="onDeleteUserConfirm($event)">
     </ng2-smart-table>
 </div>
diff --git a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html
index 09e676d4..0c352374 100644
--- a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html
+++ b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html
@@ -9,7 +9,7 @@
   You may obtain a copy of the License at
 
        http://www.apache.org/licenses/LICENSE-2.0
- 
+
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,8 +18,9 @@
   ========================LICENSE_END===================================
 -->
 <div class="anr__section">
-  <h3 class="anr__header">ANR xApp Neighbor Cell Relation Table</h3>
-
+  <mat-card-header>
+    <mat-card-title>ANR xApp Neighbor Cell Relation Table</mat-card-title>
+  </mat-card-header>
   <mat-form-field class="input-width">
     <mat-label>GgNodeB</mat-label>
     <!-- use a native selection widget -->
@@ -50,7 +51,7 @@
         <mat-header-cell *matHeaderCellDef mat-sort-header>Neighbor Cell NRPCI</mat-header-cell>
         <mat-cell *matCellDef="let ncr">{{ncr.neighborCellNrpci}}</mat-cell>
     </ng-container>
- 
+
     <ng-container matColumnDef="neighborCellNrcgi">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Neighbor Cell NRCGI</mat-header-cell>
         <mat-cell *matCellDef="let ncr">{{ncr.neighborCellNrcgi}}</mat-cell>
diff --git a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.scss b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.scss
index 094a32da..f3baf431 100644
--- a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.scss
+++ b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.scss
@@ -21,9 +21,8 @@
 }
 
 .anr__header {
-    text-align: center;
     color: #432c85;
-    font-size: 50px;
+    font-size: 35px;
     font-weight: 200;
     letter-spacing: .1em;
     transform: translate(149 56);
diff --git a/webapp-frontend/src/app/catalog/catalog.component.css b/webapp-frontend/src/app/catalog/catalog.component.css
index 91510bb9..8a6b7716 100644
--- a/webapp-frontend/src/app/catalog/catalog.component.css
+++ b/webapp-frontend/src/app/catalog/catalog.component.css
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -21,9 +21,8 @@
 }
 
 .catalog__header {
-    text-align: center;
     color: #432c85;
-    font-size: 50px;
+    font-size: 35px;
     font-weight: 200;
     letter-spacing: .1em;
     transform: translate(149 56);
diff --git a/webapp-frontend/src/app/catalog/catalog.component.html b/webapp-frontend/src/app/catalog/catalog.component.html
index 2277bb7f..0a688df6 100644
--- a/webapp-frontend/src/app/catalog/catalog.component.html
+++ b/webapp-frontend/src/app/catalog/catalog.component.html
@@ -18,7 +18,9 @@
   ========================LICENSE_END===================================
   -->
 <div class="catalog__section">
-  <h3 class="catalog__header">xApp Catalog</h3>
+  <mat-card-header>
+    <mat-card-title>xApp Catalog</mat-card-title>
+  </mat-card-header>
   <div class="spinner-container" *ngIf="dataSource.loading$ | async">
     <mat-spinner></mat-spinner>
   </div>
diff --git a/webapp-frontend/src/app/control/control.component.css b/webapp-frontend/src/app/control/control.component.css
index d90ce2e4..94321257 100644
--- a/webapp-frontend/src/app/control/control.component.css
+++ b/webapp-frontend/src/app/control/control.component.css
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -21,9 +21,8 @@
 }
 
 .control__header {
-    text-align: center;
     color: #432c85;
-    font-size: 50px;
+    font-size: 35px;
     font-weight: 200;
     letter-spacing: .1em;
     transform: translate(149 56);
@@ -40,7 +39,7 @@
 }
 
 .control-table {
-  width: 99%; 
+  width: 99%;
   min-height: 150px;
   margin-top: 10px;
   background-color: transparent;
diff --git a/webapp-frontend/src/app/control/control.component.html b/webapp-frontend/src/app/control/control.component.html
index 5ae35aa0..1becb353 100644
--- a/webapp-frontend/src/app/control/control.component.html
+++ b/webapp-frontend/src/app/control/control.component.html
@@ -18,7 +18,9 @@
   ========================LICENSE_END===================================
   -->
 <div class="control__section">
-  <h3 class="control__header">xApp Control</h3>
+  <mat-card-header>
+    <mat-card-title>xApp Control</mat-card-title>
+  </mat-card-header>
   <div class="spinner-container" *ngIf="dataSource.loading$ | async">
     <mat-spinner></mat-spinner>
   </div>
diff --git a/webapp-frontend/src/app/ran-connection/ran-connection.component.html b/webapp-frontend/src/app/ran-connection/ran-connection.component.html
index 565b326c..9405480d 100644
--- a/webapp-frontend/src/app/ran-connection/ran-connection.component.html
+++ b/webapp-frontend/src/app/ran-connection/ran-connection.component.html
@@ -7,9 +7,9 @@
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
-  
+
        http://www.apache.org/licenses/LICENSE-2.0
-  
+
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,8 +18,9 @@
   ========================LICENSE_END===================================
 -->
 <div class="ranconnect__section">
-  <h3 class="ranconnect__header">RAN Connections</h3>
-
+  <mat-card-header>
+    <mat-card-title>RAN Connections</mat-card-title>
+  </mat-card-header>
   <button mat-raised-button (click)="setupRANConnection()">Setup Connection..</button>
   <button mat-raised-button color="warn" class="disconnect-all-button"
     (click)="disconnectAllRANConnections()">Disconnect All</button>
diff --git a/webapp-frontend/src/app/ran-connection/ran-connection.component.scss b/webapp-frontend/src/app/ran-connection/ran-connection.component.scss
index 72db5c36..ad42aa35 100644
--- a/webapp-frontend/src/app/ran-connection/ran-connection.component.scss
+++ b/webapp-frontend/src/app/ran-connection/ran-connection.component.scss
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -21,9 +21,8 @@
 }
 
 .ranconnect__header {
-    text-align: center;
     color: #432c85;
-    font-size: 50px;
+    font-size: 35px;
     font-weight: 200;
     letter-spacing: .1em;
     transform: translate(149 56);
diff --git a/webapp-frontend/src/app/stats/stats.component.html b/webapp-frontend/src/app/stats/stats.component.html
index 54c606b1..dad77983 100644
--- a/webapp-frontend/src/app/stats/stats.component.html
+++ b/webapp-frontend/src/app/stats/stats.component.html
@@ -7,9 +7,9 @@
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
-  
+
        http://www.apache.org/licenses/LICENSE-2.0
-  
+
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,9 +18,9 @@
   ========================LICENSE_END===================================
   -->
 <div class="stats__section">
-
-    <h3 class="stats__header">Platform stats</h3>
-
+    <mat-card-header>
+		<mat-card-title>Platform stats</mat-card-title>
+    </mat-card-header>
      <mat-card class="bar-chart-card">
         <mat-card-header>
             <mat-card-title>RIC Total Load</mat-card-title>
@@ -39,7 +39,7 @@
     </mat-card>
 <mat-divider></mat-divider>
             <mat-tab-group>
-			  <mat-tab label="Pendulum xApp">  
+			  <mat-tab label="Pendulum xApp">
 				    <mat-grid-list cols="3" rowHeight="3:2">
 					    <mat-grid-tile>
 					    	<mat-card>
@@ -91,7 +91,7 @@
 				    </mat-grid-list>
 
 			  </mat-tab>
-			  <mat-tab label="Reporting xApp">  
+			  <mat-tab label="Reporting xApp">
 			  	<mat-grid-list cols="3" rowHeight="3:2">
 				    <mat-grid-tile>
 
@@ -108,7 +108,7 @@
 
 				    </mat-grid-tile>
 				</mat-grid-list>
-			  	
+
 			  </mat-tab>
 			</mat-tab-group>
 
diff --git a/webapp-frontend/src/app/stats/stats.component.scss b/webapp-frontend/src/app/stats/stats.component.scss
index 9ba1bada..69ee34ab 100644
--- a/webapp-frontend/src/app/stats/stats.component.scss
+++ b/webapp-frontend/src/app/stats/stats.component.scss
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -21,9 +21,8 @@
 }
 
 .stats__header {
-    text-align: center;
     color: #432c85;
-    font-size: 40px;
+    font-size: 35px;
     font-weight: 200;
     letter-spacing: .1em;
     transform: translate(149 56);