[YUNIKORN-2609] Improve visual style of the Web UI

angular.json

@@ -42,6 +42,7 @@
             "styles": [
               "src/styles.scss",
               "node_modules/@fontsource/roboto/index.css",
+              "node_modules/@fontsource/roboto/500.css",
               "node_modules/@fortawesome/fontawesome-free/css/all.css"
             ],
             "scripts": [],

src/app/app.component.html

@@ -26,48 +26,42 @@
   <ul class="navigation-primary">
     <li routerLinkActive="active">
       <a routerLink="/dashboard">
-        <i class="fa fa-caret-right fa-2x"></i>
-        <i class="fa fa-th-large"></i>
-        <span>Dashboard</span>
+        <i class="fa fa-th-large text-center"></i>
+        <span *ngIf="isNavOpen">Dashboard</span>
       </a>
     </li>
     <li routerLinkActive="active">
       <a routerLink="/queues">
-        <i class="fa fa-caret-right"></i>
-        <i class="fa fa-sitemap" style="width: 16px"></i>
-        <span>Queues</span>
+        <i class="fa fa-sitemap text-center" style="width: 16px"></i>
+        <span *ngIf="isNavOpen">Queues</span>
       </a>
     </li>
     <li routerLinkActive="active">
       <a routerLink="/queues-v2">
-        <i class="fa fa-caret-right"></i>
         <i class="fa fa-sitemap" style="width: 16px"></i>
-        <span>Queues V2</span>
-        <div class="beta-tag">
+        <span *ngIf="isNavOpen">Queues V2</span>
+        <div class="beta-tag text-center" *ngIf="isNavOpen">
           <i class="fa fa-flask"></i>
           Beta
         </div> 
       </a>
     </li>
     <li routerLinkActive="active">
       <a routerLink="/applications">
-        <i class="fa fa-caret-right"></i>
-        <i class="fa fa-indent"></i>
-        <span>Applications</span>
+        <i class="fa fa-indent text-center"></i>
+        <span *ngIf="isNavOpen">Applications</span>
       </a>
     </li>
     <li routerLinkActive="active">
       <a routerLink="/nodes">
-        <i class="fa fa-caret-right"></i>
-        <i class="fa fa-server"></i>
-        <span>Nodes</span>
+        <i class="fa fa-server text-center"></i>
+        <span *ngIf="isNavOpen">Nodes</span>
       </a>
     </li>
     <li routerLinkActive="active">
       <a routerLink="/status">
-        <i class="fa fa-caret-right"></i>
-        <i class="fa fa-thermometer-full"></i>
-        <span>Status</span>
+        <i class="fa fa-thermometer-full text-center"></i>
+        <span *ngIf="isNavOpen">Status</span>
       </a>
     </li>
   </ul>
@@ -93,7 +87,7 @@
             matTooltipShowDelay="500"
             [matMenuTriggerFor]="helpMenu"
           >
-            <i class="fa fa-question"></i>
+            <img src="../assets/images/config.svg">
           </button>
           <mat-menu #helpMenu="matMenu" xPosition="before">
             <button mat-menu-item (click)="openYuniKornHelp('/')">Apache YuniKorn</button>

src/app/app.component.scss

@@ -25,20 +25,20 @@
   color: #b8bec4;
   font-size: 16px;
   z-index: 1;
-  -webkit-transition: width 0.8s ease;
-  -moz-transition: width 0.8s ease;
-  -o-transition: width 0.8s ease;
-  transition: width 0.8s ease;
+  -webkit-transition: width 0.4s ease;
+  -moz-transition: width 0.4s ease;
+  -o-transition: width 0.4s ease;
+  transition: width 0.4s ease;
   -webkit-font-smoothing: antialiased;
 }
 
 .navigation.open {
   width: 250px;
   font-size: 16px;
-  -webkit-transition: width 0.8s ease;
-  -moz-transition: width 0.8s ease;
-  -o-transition: width 0.8s ease;
-  transition: width 0.8s ease;
+  -webkit-transition: width 0.4s ease;
+  -moz-transition: width 0.4s ease;
+  -o-transition: width 0.4s ease;
+  transition: width 0.4s ease;
 }
 
 .navigation.open a > .fa {
@@ -47,19 +47,19 @@
 
 .navigation + .wrapper {
   margin-left: 50px;
-  -webkit-transition: margin-left 0.8s ease;
-  -moz-transition: margin-left 0.8s ease;
-  -o-transition: margin-left 0.8s ease;
-  transition: margin-left 0.8s ease;
+  -webkit-transition: margin-left 0.4s ease;
+  -moz-transition: margin-left 0.4s ease;
+  -o-transition: margin-left 0.4s ease;
+  transition: margin-left 0.4s ease;
   -webkit-font-smoothing: antialiased;
 }
 
 .navigation.open + .wrapper {
   margin-left: 250px;
-  -webkit-transition: margin-left 0.8s ease;
-  -moz-transition: margin-left 0.8s ease;
-  -o-transition: margin-left 0.8s ease;
-  transition: margin-left 0.8s ease;
+  -webkit-transition: margin-left 0.4s ease;
+  -moz-transition: margin-left 0.4s ease;
+  -o-transition: margin-left 0.4s ease;
+  transition: margin-left 0.4s ease;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -70,10 +70,10 @@
   background: #313d54;
   height: 60px;
   overflow: hidden;
-  -webkit-transition: padding-left 0.8s ease, padding-top 0.8s ease;
-  -moz-transition: padding-left 0.8s ease, padding-top 0.8s ease;
-  -o-transition: padding-left 0.8s ease, padding-top 0.8s ease;
-  transition: padding-left 0.8s ease, padding-top 0.8s ease;
+  -webkit-transition: padding-left 0.4s ease, padding-top 0.4s ease;
+  -moz-transition: padding-left 0.4s ease, padding-top 0.4s ease;
+  -o-transition: padding-left 0.4s ease, padding-top 0.4s ease;
+  transition: padding-left 0.4s ease, padding-top 0.4s ease;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -89,10 +89,10 @@
 .logo img {
   float: left;
   width: 38px;
-  -webkit-transition: width 0.8s ease;
-  -moz-transition: width 0.8s ease;
-  -o-transition: width 0.8s ease;
-  transition: width 0.8s ease;
+  -webkit-transition: width 0.4s ease;
+  -moz-transition: width 0.4s ease;
+  -o-transition: width 0.4s ease;
+  transition: width 0.4s ease;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -131,7 +131,7 @@
 }
 
 .navigation .fa + span {
-  margin-left: 20px;
+  margin-left: 16px;
   flex: 1;
 }
 
@@ -148,39 +148,52 @@ ul.navigation-primary {
 }
 
 .navigation > ul {
+  padding: 12px 5px;
   margin-top: 10px;
+
   &:first-of-type {
     margin-top: 0;
   }
 }
 
+.navigation.open > ul {
+  padding: 12px;
+}
+
+.navigation li {
+  margin-bottom: 8px;
+}
+
 .navigation li:hover > a {
   color: #fff;
   background: #4d5258;
 }
 
 .navigation li a {
   display: flex;
-  padding: 15px;
+  padding: 12px;
   white-space: nowrap;
   color: inherit;
   text-decoration: none;
   color: #fff;
-  -webkit-transition: padding 0.8s ease;
-  -moz-transition: padding 0.8s ease;
-  -o-transition: padding 0.8s ease;
-  transition: padding 0.8s ease;
+  -webkit-transition: 0.4s ease;
+  -moz-transition: 0.4s ease;
+  -o-transition: 0.4s ease;
+  transition: 0.4s ease;
   -webkit-font-smoothing: antialiased;
+  border-radius: 50%;
+  justify-content: center;
 }
 
 .navigation.open li a {
   padding-left: 25px;
+  border-radius: 24px;
 }
 
 .navigation li.active > a,
 .navigation li.active:hover > a {
   color: #fff;
-  background: #4d5258;
+  background: #4E5258;
 }
 
 .navigation li.active > a > .fa-caret-right {
@@ -216,7 +229,7 @@ ul.navigation-primary {
 }
 
 .container-fluid {
-  padding-top: 61px;
+  padding-top: 58px;
 }
 
 //  remove the beta tag when the feature is ready for production
@@ -227,7 +240,7 @@ ul.navigation-primary {
 }
 
 .header {
-  height: 61px;
+  height: 58px;
   background: #fff;
   padding: 0 20px;
   border-bottom: 1px solid #e3e3e3;
@@ -236,10 +249,10 @@ ul.navigation-primary {
   right: 0;
   top: 0;
   z-index: 100;
-  -webkit-transition: left 0.8s ease;
-  -moz-transition: left 0.8s ease;
-  -o-transition: left 0.8s ease;
-  transition: left 0.8s ease;
+  -webkit-transition: left 0.4s ease;
+  -moz-transition: left 0.4s ease;
+  -o-transition: left 0.4s ease;
+  transition: left 0.4s ease;
 }
 
 .navigation.open + * .header {
@@ -255,19 +268,18 @@ ul.navigation-primary {
 .help-menu > .menu-trigger {
   background: transparent;
   font-size: 14px;
-  color: #666;
-  border: 1px solid #666;
+  background: #ddd;
   outline: none;
   cursor: pointer;
 
   &:hover {
-    background: #666;
-    color: #fff;
+    background: #ccc;
   }
 }
 
 ul.breadcrumb {
   font-size: 20px;
+  line-height: 26px;
   display: flex;
   list-style: none;
   margin: 0;
@@ -276,8 +288,8 @@ ul.breadcrumb {
 
 ul.breadcrumb > li {
   margin-right: 5px;
-  margin-top: 18px;
-  margin-bottom: 20px;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 
 ul.breadcrumb a {

src/app/components/app-node-utilizations/app-node-utilizations.component.html

@@ -15,16 +15,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  -->
-
-<mat-card appearance="outlined" class="box-card">
-  <mat-card-header>
-    <mat-card-title>Node Resource Utilization</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <div class="status-wrapper flex-grid">
-      <div class="chart-wrapper flex-primary">
-        <app-vertical-bar-chart [bucketList]="bucketList" [barChartDataSets]="barChartDataSets" />
-      </div>
-    </div>
-  </mat-card-content>
-</mat-card>
+<div class="app-node-utilizations">
+  <mat-card-title class="title">Node Resource Utilization</mat-card-title>
+  <div class="mat-elevation-z8">
+    <mat-card appearance="outlined" class="box-card">
+      <mat-card-content>
+        <div class="status-wrapper flex-grid">
+          <div class="chart-wrapper flex-primary">
+            <app-vertical-bar-chart [bucketList]="bucketList" [barChartDataSets]="barChartDataSets" />
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>

src/app/components/app-node-utilizations/app-node-utilizations.component.scss

@@ -14,4 +14,15 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
+ */
+
+ .app-node-utilizations {
+
+    .title {
+        margin-bottom: 28px;
+    }
+
+    .mat-mdc-card-content {
+        padding: 30px 30px;
+    }
+ }

src/app/components/app-status/app-status.component.html

@@ -20,7 +20,7 @@
   <mat-card-header>
     <mat-card-title>Application Status</mat-card-title>
   </mat-card-header>
-  <mat-card-content>
+  <mat-card-content class="thin-card-content">
     <div class="status-wrapper flex-grid">
       <div class="chart-wrapper flex-primary">
         <app-donut-chart [data]="chartData"></app-donut-chart>

src/app/components/app-status/app-status.component.scss

@@ -18,6 +18,7 @@
 
 .status-wrapper {
   align-items: center;
+  gap: 8px;
   height: 220px;
 }
 .chart-wrapper {
@@ -30,7 +31,7 @@
   overflow: auto;
   margin: 0 auto;
   font-size: 0.8em;
-  font-weight: bold;
+  font-weight: 500;
   color: #666;
   > div {
     margin: 12px 0;