Kf1.9(jupyter): fix style

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/form/section/section.component.html

@@ -1,5 +1,5 @@
 <div class="form--section-bottom">
-  <div class="mat-title header" data-cy-form-section-header>
+  <div class="mat-headline-6 header" data-cy-form-section-header>
     <lib-icon *ngIf="icon" [icon]="icon"></lib-icon>{{ title }}
     <mat-icon
       class="icon"

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/title-actions-toolbar/title-actions-toolbar.component.html

@@ -10,7 +10,7 @@
     <mat-icon>arrow_back</mat-icon>
   </button>
 
-  <div class="mat-headline title-margin" data-cy-toolbar-title>
+  <div class="mat-headline-5 title-margin" data-cy-toolbar-title>
     {{ title }}
   </div>
 

frontend/common/kubeflow-common-lib/projects/kubeflow/src/styles/styles.scss

@@ -5,6 +5,7 @@
 // Define the primary palette for the color that appears most
 // frequently throughout your application.
 $kubeflow-primary-palette: (
+  100: $kubeflow-blue-hue-1,
   400: $kubeflow-blue-hue-1,
   500: $kubeflow-blue-hue-2,
   600: $kubeflow-blue-hue-3,
@@ -55,12 +56,11 @@ $kubeflow-typography-config: mat.define-typography-config(
 // theming systems such as "color" or "typography".
 $kubeflow-theme: mat.define-light-theme(
   (
-    //TODO: AAW figure out why this breaks
-    // color: (
-    //   primary: mat.define-palette($kubeflow-primary-palette, 700),
-    //   accent: mat.define-palette(mat.$pink-palette, A200, A100, A400),
-    // ),
-    typography: $kubeflow-typography-config
+    color: (
+      primary: mat.define-palette($kubeflow-primary-palette, 700),
+      accent: mat.define-palette(mat.$pink-palette, A200, A100, A400),
+    ),
+    typography: $kubeflow-typography-config,
   )
 );
 
@@ -86,9 +86,7 @@ $kubeflow-theme: mat.define-light-theme(
 }
 
 // Use the material icons offline
-// AAW: Leaving this blank was the way to make this work
-// after angular version update without returning errors
-$material-icons-font-path: '';
+$material-icons-font-path: '~material-icons/iconfont/';
 @import 'node_modules/material-icons/iconfont/material-icons.scss';
 
 // Custom css

frontend/jupyter/src/app/pages/index/index-default/config.ts

@@ -152,7 +152,7 @@ export const defaultConfig: TableConfig = {
         new ActionIconValue({
           name: 'delete',
           tooltipReady: $localize`Delete this notebook server`,
-          color: '',
+          color: 'warn',
           field: 'deleteAction',
           iconReady: 'material:delete',
         }),

frontend/jupyter/src/app/pages/notebook-page/notebook-page.component.html

@@ -19,7 +19,7 @@
             [phase]="status.phase"
             data-cy-notebook-status
           ></lib-status-icon>
-          <div class="mat-title notebook-name">{{ notebookName }}</div>
+          <div class="mat-headline-6 notebook-name">{{ notebookName }}</div>
         </div>
         <div class="small-padding-up">
           <lib-status-info [status]="status"></lib-status-info>

frontend/jupyter/src/app/pages/volume-details-page/volume-details-page.component.html

@@ -19,7 +19,7 @@
             [phase]="status"
           ></lib-status-icon>
 
-          <div class="mat-title volume-name">{{ name }}</div>
+          <div class="mat-headline-6 volume-name">{{ name }}</div>
         </div>
       </div>
       <mat-tab-group

frontend/jupyter/src/styles.scss

@@ -4,7 +4,7 @@
 
 // Give some space after each input
 mat-form-field {
-  margin-bottom: 0.25rem;
+  margin-bottom: 0rem;
 }
 
 // Give some space