From 9a5edcfbd87075a2ffda4899ced4d4c34913e5b1 Mon Sep 17 00:00:00 2001
From: jh245g <jh245g@att.com>
Date: Thu, 17 Oct 2019 13:36:16 -0400
Subject: [PATCH] Align page titles to top left,decrease font size

Set global style for page titles
update the style for page titles

Change-Id: Ib2f1fd256ceac73193bf72dcde26971347ab0bc3
Issue-Id: RICPLT-1497
Signed-off-by: Jun (Nicolas) Hu <jh245g@att.com>
---
 docs/release-notes.rst                                           | 4 +++-
 webapp-frontend/src/app/ac-xapp/ac-xapp.component.html           | 2 +-
 webapp-frontend/src/app/ac-xapp/ac-xapp.component.scss           | 9 ---------
 webapp-frontend/src/app/anr-xapp/anr-xapp.component.html         | 2 +-
 webapp-frontend/src/app/anr-xapp/anr-xapp.component.scss         | 9 ---------
 webapp-frontend/src/app/app-control/app-control.component.html   | 2 +-
 webapp-frontend/src/app/app-control/app-control.component.scss   | 8 --------
 webapp-frontend/src/app/caas-ingress/caas-ingress.component.html | 2 +-
 webapp-frontend/src/app/caas-ingress/caas-ingress.component.scss | 9 ---------
 webapp-frontend/src/app/catalog/catalog.component.html           | 2 +-
 webapp-frontend/src/app/catalog/catalog.component.scss           | 9 ---------
 webapp-frontend/src/app/ran-control/ran-control.component.html   | 2 +-
 webapp-frontend/src/app/ran-control/ran-control.component.scss   | 9 ---------
 webapp-frontend/src/app/stats/stats.component.html               | 2 +-
 webapp-frontend/src/app/stats/stats.component.scss               | 9 ---------
 webapp-frontend/src/app/user/user.component.html                 | 2 +-
 webapp-frontend/src/app/user/user.component.scss                 | 9 ---------
 webapp-frontend/src/styles.scss                                  | 7 +++++++
 18 files changed, 18 insertions(+), 80 deletions(-)

diff --git a/docs/release-notes.rst b/docs/release-notes.rst
index aec43e61..a672a8da 100644
--- a/docs/release-notes.rst
+++ b/docs/release-notes.rst
@@ -19,7 +19,7 @@
 RIC Dashboard Release Notes
 ===========================
 
-Version 1.2.4, 18 Oct 2019
+Version 1.2.4, 21 Oct 2019
 --------------------------
 * Revise a1-med-client to use API spec in new submodule ric-plt/a1;
   removed cached copy
@@ -28,6 +28,8 @@ Version 1.2.4, 18 Oct 2019
 * Add Platform page showing Kubernetes pods in aux and platform obtained from CAAS-Ingress
 * Update Angular libraries to recent stable versions
 * Revise user controller to answer data sent by portal, drop the mock implementation
+* Set global style for page titles
+* Align page titles to top left,decrease font size
 
 Version 1.2.3, 4 Oct 2019
 -------------------------
diff --git a/webapp-frontend/src/app/ac-xapp/ac-xapp.component.html b/webapp-frontend/src/app/ac-xapp/ac-xapp.component.html
index f311ecf9..08b6a1ef 100644
--- a/webapp-frontend/src/app/ac-xapp/ac-xapp.component.html
+++ b/webapp-frontend/src/app/ac-xapp/ac-xapp.component.html
@@ -18,7 +18,7 @@
   ========================LICENSE_END===================================
   -->
 <div class="ac__section">
-  <h3 class="ac__header">AC xApp Policy</h3>
+  <h3 class="rd-global-page-title">AC xApp Policy</h3>
 
   <form [formGroup]="acForm" novalidate autocomplete="off" (ngSubmit)="updateAc(acForm.value)">
     <div name="enforce">
diff --git a/webapp-frontend/src/app/ac-xapp/ac-xapp.component.scss b/webapp-frontend/src/app/ac-xapp/ac-xapp.component.scss
index 42ea9071..185a48f4 100644
--- a/webapp-frontend/src/app/ac-xapp/ac-xapp.component.scss
+++ b/webapp-frontend/src/app/ac-xapp/ac-xapp.component.scss
@@ -21,15 +21,6 @@
  .ac__section {
 }
 
-.ac__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
  /* used to place form fields on separate lines/rows */
 .input-display-block {
   display: block;
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 914aeb79..def032e4 100644
--- a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html
+++ b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html
@@ -18,7 +18,7 @@
   ========================LICENSE_END===================================
 -->
 <div class="anr__section">
-  <h3 class="anr__header">ANR xApp Neighbor Cell Relation Table</h3>
+  <h3 class="rd-global-page-title">ANR xApp Neighbor Cell Relation Table</h3>
 
   <mat-form-field class="input-width">
     <mat-label>GgNodeB</mat-label>
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 983fb529..2307f8c5 100644
--- a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.scss
+++ b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.scss
@@ -20,15 +20,6 @@
  .anr__section {
 }
 
-.anr__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
 .spinner-container {
     height: 100px;
     width: 100px;
diff --git a/webapp-frontend/src/app/app-control/app-control.component.html b/webapp-frontend/src/app/app-control/app-control.component.html
index 003f2a2d..ec802f47 100644
--- a/webapp-frontend/src/app/app-control/app-control.component.html
+++ b/webapp-frontend/src/app/app-control/app-control.component.html
@@ -19,7 +19,7 @@
   -->
 
 <div class="app-control__section">
-  <h3 class="app-control__header">xApp Control</h3>
+  <h3 class="rd-global-page-title">xApp Control</h3>
 
   <table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows class="app-control-table mat-elevation-z8">
 
diff --git a/webapp-frontend/src/app/app-control/app-control.component.scss b/webapp-frontend/src/app/app-control/app-control.component.scss
index 179b608f..232562f4 100644
--- a/webapp-frontend/src/app/app-control/app-control.component.scss
+++ b/webapp-frontend/src/app/app-control/app-control.component.scss
@@ -20,14 +20,6 @@
  .app-control__section {
 }
 
-.app-control__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
 
 .spinner-container {
   height: 100px;
diff --git a/webapp-frontend/src/app/caas-ingress/caas-ingress.component.html b/webapp-frontend/src/app/caas-ingress/caas-ingress.component.html
index fd228025..0799ec66 100644
--- a/webapp-frontend/src/app/caas-ingress/caas-ingress.component.html
+++ b/webapp-frontend/src/app/caas-ingress/caas-ingress.component.html
@@ -19,7 +19,7 @@
 -->
 
 <div class="caas-ingress__section">
-  <h3 class="caas-ingress__header">{{cluster}} Cluster Pods View</h3>
+  <h3 class="rd-global-page-title">{{cluster}} Cluster Pods View</h3>
 
   <table mat-table [dataSource]="dataSource" matSort class="caas-ingress-table mat-elevation-z8">
 
diff --git a/webapp-frontend/src/app/caas-ingress/caas-ingress.component.scss b/webapp-frontend/src/app/caas-ingress/caas-ingress.component.scss
index f977be78..770fcf5d 100644
--- a/webapp-frontend/src/app/caas-ingress/caas-ingress.component.scss
+++ b/webapp-frontend/src/app/caas-ingress/caas-ingress.component.scss
@@ -21,15 +21,6 @@
  .caas-ingress__section {
 }
 
-.caas-ingress__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
 .spinner-container {
   height: 100px;
   width: 100px;
diff --git a/webapp-frontend/src/app/catalog/catalog.component.html b/webapp-frontend/src/app/catalog/catalog.component.html
index fd58336d..78d525ce 100644
--- a/webapp-frontend/src/app/catalog/catalog.component.html
+++ b/webapp-frontend/src/app/catalog/catalog.component.html
@@ -18,7 +18,7 @@
   ========================LICENSE_END===================================
   -->
 <div class="catalog__section">
-  <h3 class="catalog__header">xApp Catalog</h3>
+  <h3 class="rd-global-page-title">xApp Catalog</h3>
 
   <table mat-table [dataSource]="dataSource" matSort class="catalog-table mat-elevation-z8">
 
diff --git a/webapp-frontend/src/app/catalog/catalog.component.scss b/webapp-frontend/src/app/catalog/catalog.component.scss
index 7a98d790..49195a44 100644
--- a/webapp-frontend/src/app/catalog/catalog.component.scss
+++ b/webapp-frontend/src/app/catalog/catalog.component.scss
@@ -20,15 +20,6 @@
  .catalog__section {
 }
 
-.catalog__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
 .spinner-container {
   height: 100px;
   width: 100px;
diff --git a/webapp-frontend/src/app/ran-control/ran-control.component.html b/webapp-frontend/src/app/ran-control/ran-control.component.html
index a4ab4ceb..01dd2929 100644
--- a/webapp-frontend/src/app/ran-control/ran-control.component.html
+++ b/webapp-frontend/src/app/ran-control/ran-control.component.html
@@ -19,7 +19,7 @@
 -->
 
 <div class="ran-control__section">
-  <h3 class="ran-control__header">RAN Connections</h3>
+  <h3 class="rd-global-page-title">RAN Connections</h3>
 
   <button mat-raised-button (click)="setupRANConnection()">Setup Connection..</button>
   <button mat-raised-button color="warn" class="disconnect-all-button"
diff --git a/webapp-frontend/src/app/ran-control/ran-control.component.scss b/webapp-frontend/src/app/ran-control/ran-control.component.scss
index 74cd790d..c86d0629 100644
--- a/webapp-frontend/src/app/ran-control/ran-control.component.scss
+++ b/webapp-frontend/src/app/ran-control/ran-control.component.scss
@@ -20,15 +20,6 @@
  .ran-control__section {
 }
 
-.ran-control__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
 .disconnect-all-button {
     float: right;
 }
diff --git a/webapp-frontend/src/app/stats/stats.component.html b/webapp-frontend/src/app/stats/stats.component.html
index c3f11075..8975c5f0 100644
--- a/webapp-frontend/src/app/stats/stats.component.html
+++ b/webapp-frontend/src/app/stats/stats.component.html
@@ -19,7 +19,7 @@
   -->
 <div class="stats__section">
 
-	<h3 class="stats__header">Platform stats</h3>
+	<h3 class="rd-global-page-title">Platform stats</h3>
 
 	<mat-card class="bar-chart-card">
 		<mat-card-header>
diff --git a/webapp-frontend/src/app/stats/stats.component.scss b/webapp-frontend/src/app/stats/stats.component.scss
index d8310c19..5cfc7ab9 100644
--- a/webapp-frontend/src/app/stats/stats.component.scss
+++ b/webapp-frontend/src/app/stats/stats.component.scss
@@ -20,15 +20,6 @@
  .stats__section {
 }
 
-.stats__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 40px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
 .bar-chart-card {
     height: 100%;
     width: 100%;
diff --git a/webapp-frontend/src/app/user/user.component.html b/webapp-frontend/src/app/user/user.component.html
index 69a94e65..5bffc796 100644
--- a/webapp-frontend/src/app/user/user.component.html
+++ b/webapp-frontend/src/app/user/user.component.html
@@ -18,7 +18,7 @@
   ========================LICENSE_END===================================
 -->
 <div class="user__section">
-  <h3 class="user__header">Users</h3>
+  <h3 class="rd-global-page-title">Users</h3>
   <button mat-raised-button (click)="addUser()">Add User</button>
   <div class="spinner-container" *ngIf="dataSource.loading$ | async">
     <mat-spinner></mat-spinner>
diff --git a/webapp-frontend/src/app/user/user.component.scss b/webapp-frontend/src/app/user/user.component.scss
index 6d63dd9a..f3a5d893 100644
--- a/webapp-frontend/src/app/user/user.component.scss
+++ b/webapp-frontend/src/app/user/user.component.scss
@@ -20,15 +20,6 @@
 .user__section {
 }
 
-.user__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
 .spinner-container {
     height: 360px;
     width: 390px;
diff --git a/webapp-frontend/src/styles.scss b/webapp-frontend/src/styles.scss
index 7f1a0b8e..fc7a29e3 100644
--- a/webapp-frontend/src/styles.scss
+++ b/webapp-frontend/src/styles.scss
@@ -16,3 +16,10 @@ html, body {
   text-align: center;
   font-size: 20px;
 }
+
+.rd-global-page-title {
+  margin-left: 0.5%;
+  color: #432c85;
+  font-size: 25px;
+  font-weight: 100;
+}
\ No newline at end of file
-- 
2.16.6