From 6ce8553967a3a0408836cf1308cb72dfad8e0188 Mon Sep 17 00:00:00 2001
From: Yin Zhang <yinzz@google.com>
Date: Wed, 13 Sep 2023 16:22:01 -0700
Subject: [PATCH] Migration to use the new MDC-based Angular Components.
 Components migrated: core, autocomplete, form-field, input, select

PiperOrigin-RevId: 565192687
---
 frontend/app/common/angular/BUILD                | 10 +++++-----
 frontend/app/components/capture_profile/BUILD    |  2 +-
 .../capture_profile/capture_profile_dialog/BUILD |  8 ++++----
 .../capture_profile_dialog.ng.html               |  6 +++---
 .../capture_profile_dialog_module.ts             | 12 ++++++------
 frontend/app/components/chart/table/BUILD        |  6 +++---
 .../app/components/chart/table/table.ng.html     |  2 +-
 .../app/components/chart/table/table_module.ts   | 12 ++++++------
 .../components/controls/category_filter/BUILD    |  6 +++---
 .../category_filter/category_filter.ng.html      |  2 +-
 .../category_filter/category_filter_module.ts    | 12 ++++++------
 .../app/components/controls/string_filter/BUILD  |  4 ++--
 .../controls/string_filter/string_filter.ng.html |  4 ++--
 .../controls/string_filter/string_filter.scss    |  9 ++++++++-
 .../string_filter/string_filter_module.ts        |  8 ++++----
 frontend/app/components/diagnostics_view/BUILD   |  1 -
 frontend/app/components/graph_viewer/BUILD       |  2 +-
 .../components/graph_viewer/graph_config/BUILD   |  8 ++++----
 .../graph_config/graph_config.ng.html            |  4 ++--
 .../graph_viewer/graph_config/graph_config.scss  |  4 ----
 .../graph_config/graph_config_module.ts          | 16 ++++++++--------
 .../components/graph_viewer/graph_viewer.ng.html |  2 +-
 .../components/graph_viewer/graph_viewer.scss    | 14 +++++++-------
 .../graph_viewer/graph_viewer_module.ts          |  4 ++--
 .../kernel_stats/kernel_stats_table/BUILD        |  4 ++--
 .../kernel_stats_table_module.ts                 |  8 ++++----
 frontend/app/components/memory_profile/BUILD     |  4 ++--
 .../memory_profile/memory_breakdown_table/BUILD  |  4 ++--
 .../memory_breakdown_table_module.ts             |  8 ++++----
 .../memory_profile/memory_profile.ng.html        |  2 +-
 .../memory_profile/memory_profile_common.scss    |  2 +-
 .../memory_profile/memory_profile_module.ts      |  8 ++++----
 .../memory_profile/memory_profile_summary/BUILD  |  4 ++--
 .../memory_profile_summary_module.ts             |  4 ++--
 .../memory_profile/memory_timeline_graph/BUILD   |  4 ++--
 .../memory_timeline_graph_module.ts              |  4 ++--
 .../memory_viewer/buffer_details/BUILD           |  4 ++--
 .../buffer_details/buffer_details_module.ts      |  4 ++--
 frontend/app/components/op_profile/BUILD         |  4 ++--
 .../app/components/op_profile/op_details/BUILD   |  4 ++--
 .../op_profile/op_details/op_details.scss        |  4 +++-
 .../op_profile/op_details/op_details_module.ts   |  4 ++--
 .../app/components/op_profile/op_profile.ng.html | 15 ++++-----------
 .../components/op_profile/op_profile_module.ts   |  8 ++++----
 frontend/app/components/overview/BUILD           |  1 -
 .../overview/performance_summary/BUILD           |  4 ++--
 .../performance_summary_module.ts                |  4 ++--
 .../overview/recommendation_result_view/BUILD    |  4 ++--
 .../recommendation_result_view_module.ts         |  4 ++--
 .../overview/run_environment_view/BUILD          |  4 ++--
 .../run_environment_view_module.ts               |  4 ++--
 .../components/overview/step_time_graph/BUILD    |  4 ++--
 .../step_time_graph/step_time_graph_module.ts    |  4 ++--
 .../pod_viewer/pod_viewer_details/BUILD          |  4 ++--
 .../pod_viewer_details_module.ts                 |  4 ++--
 .../components/pod_viewer/topology_graph/BUILD   |  4 ++--
 .../topology_graph/topology_graph.ng.html        |  3 ++-
 .../topology_graph/topology_graph_module.ts      |  8 ++++----
 frontend/app/components/sidenav/BUILD            |  6 +++---
 frontend/app/components/sidenav/sidenav.ng.html  |  6 +++---
 .../app/components/sidenav/sidenav_module.ts     | 12 ++++++------
 frontend/app/components/tensorflow_stats/BUILD   |  2 +-
 .../tensorflow_stats/flop_rate_chart/BUILD       |  1 -
 .../tensorflow_stats/stats_table/BUILD           |  4 ++--
 .../stats_table/stats_table.ng.html              | 12 ++++++------
 .../stats_table/stats_table_module.ts            |  8 ++++----
 frontend/app/styles/common.scss                  |  5 +++++
 frontend/styles.scss                             |  8 +++++++-
 68 files changed, 194 insertions(+), 187 deletions(-)

diff --git a/frontend/app/common/angular/BUILD b/frontend/app/common/angular/BUILD
index 7ee3b073e..e39a08087 100644
--- a/frontend/app/common/angular/BUILD
+++ b/frontend/app/common/angular/BUILD
@@ -35,7 +35,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_form_field",
+    name = "angular_material_form_field",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -51,7 +51,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_input",
+    name = "angular_material_input",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -131,7 +131,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_card",
+    name = "angular_material_card",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -163,7 +163,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_core",
+    name = "angular_material_core",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -171,7 +171,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_select",
+    name = "angular_material_select",
     srcs = [],
     deps = [
         "@npm//@angular/material",
diff --git a/frontend/app/components/capture_profile/BUILD b/frontend/app/components/capture_profile/BUILD
index b5aedb77b..45d0cde24 100644
--- a/frontend/app/components/capture_profile/BUILD
+++ b/frontend/app/components/capture_profile/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
index 515975328..3c1d471d7 100644
--- a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
+++ b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
@@ -20,12 +20,12 @@ xprof_ng_module(
         "@npm//@angular/platform-browser",
         "@org_xprof//frontend/app/common/angular:angular_material_button",
         "@org_xprof//frontend/app/common/angular:angular_material_expansion",
+        "@org_xprof//frontend/app/common/angular:angular_material_form_field",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_dialog",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_radio",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
+        "@org_xprof//frontend/app/common/angular:angular_material_select",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )
diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html
index ecd13e0ae..13b492930 100644
--- a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html
+++ b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html
@@ -39,7 +39,7 @@
   </div>
 
   <div>
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Host Trace (TraceMe) Level</mat-label>
       <mat-select
         matTooltip="{{ hostTracerTooltip }}"
@@ -55,7 +55,7 @@
   </div>
 
   <div>
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Device Trace Level</mat-label>
       <mat-select [(ngModel)]="deviceTracerLevel">
         <mat-option value="0">disable</mat-option>
@@ -65,7 +65,7 @@
   </div>
 
   <div>
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Python Trace Level</mat-label>
       <mat-select [(ngModel)]="pythonTracerLevel">
         <mat-option value="0">disable</mat-option>
diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts
index cfa0c9512..a8651940c 100644
--- a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts
+++ b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts
@@ -4,10 +4,10 @@ import {FormsModule} from '@angular/forms';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatSelectModule} from '@angular/material/select';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 import {BrowserModule} from '@angular/platform-browser';
 
@@ -23,10 +23,10 @@ import {CaptureProfileDialog} from './capture_profile_dialog';
     MatButtonModule,
     MatLegacyDialogModule,
     MatExpansionModule,
-    MatLegacyFormFieldModule,
-    MatLegacyInputModule,
+    MatFormFieldModule,
+    MatInputModule,
     MatLegacyRadioModule,
-    MatLegacySelectModule,
+    MatSelectModule,
     MatLegacyTooltipModule,
   ],
   exports: [CaptureProfileDialog]
diff --git a/frontend/app/components/chart/table/BUILD b/frontend/app/components/chart/table/BUILD
index e63d79102..c119dd83c 100644
--- a/frontend/app/components/chart/table/BUILD
+++ b/frontend/app/components/chart/table/BUILD
@@ -16,9 +16,9 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
+        "@org_xprof//frontend/app/common/angular:angular_material_core",
+        "@org_xprof//frontend/app/common/angular:angular_material_form_field",
+        "@org_xprof//frontend/app/common/angular:angular_material_select",
     ],
 )
 
diff --git a/frontend/app/components/chart/table/table.ng.html b/frontend/app/components/chart/table/table.ng.html
index 190c310fa..1e84654b1 100644
--- a/frontend/app/components/chart/table/table.ng.html
+++ b/frontend/app/components/chart/table/table.ng.html
@@ -1,5 +1,5 @@
 <div [style.height]="height">
-  <mat-form-field *ngIf="displayPageSizeSelector()">
+  <mat-form-field *ngIf="displayPageSizeSelector()" appearance="outline">
     <mat-label>Rows per Page: </mat-label>
     <mat-select (selectionChange)="drawTable()" [(value)]="pageSize">
       <mat-option *ngFor="let option of pageSizeOptions" [value]="option">{{option}}</mat-option>
diff --git a/frontend/app/components/chart/table/table_module.ts b/frontend/app/components/chart/table/table_module.ts
index cdf63d878..e6d310ca5 100644
--- a/frontend/app/components/chart/table/table_module.ts
+++ b/frontend/app/components/chart/table/table_module.ts
@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyOptionModule} from '@angular/material/legacy-core';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatOptionModule} from '@angular/material/core';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
 
 import {Table} from './table';
 
@@ -11,9 +11,9 @@ import {Table} from './table';
   declarations: [Table],
   imports: [
     CommonModule,
-    MatLegacyOptionModule,
-    MatLegacySelectModule,
-    MatLegacyFormFieldModule,
+    MatOptionModule,
+    MatSelectModule,
+    MatFormFieldModule,
   ],
   exports: [Table],
 })
diff --git a/frontend/app/components/controls/category_filter/BUILD b/frontend/app/components/controls/category_filter/BUILD
index 712eb0489..a66af0024 100644
--- a/frontend/app/components/controls/category_filter/BUILD
+++ b/frontend/app/components/controls/category_filter/BUILD
@@ -17,9 +17,9 @@ xprof_ng_module(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
+        "@org_xprof//frontend/app/common/angular:angular_material_core",
+        "@org_xprof//frontend/app/common/angular:angular_material_form_field",
+        "@org_xprof//frontend/app/common/angular:angular_material_select",
     ],
 )
 
diff --git a/frontend/app/components/controls/category_filter/category_filter.ng.html b/frontend/app/components/controls/category_filter/category_filter.ng.html
index d2b878a97..93d23713f 100644
--- a/frontend/app/components/controls/category_filter/category_filter.ng.html
+++ b/frontend/app/components/controls/category_filter/category_filter.ng.html
@@ -1,4 +1,4 @@
-<mat-form-field class="control" *ngIf="columnLabel">
+<mat-form-field class="control" *ngIf="columnLabel" appearance="outline">
   <mat-label>{{columnLabel}}</mat-label>
   <mat-select (selectionChange)="updateFilter()" [(value)]="value">
     <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
diff --git a/frontend/app/components/controls/category_filter/category_filter_module.ts b/frontend/app/components/controls/category_filter/category_filter_module.ts
index d9c62ebaf..c503f65c2 100644
--- a/frontend/app/components/controls/category_filter/category_filter_module.ts
+++ b/frontend/app/components/controls/category_filter/category_filter_module.ts
@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyOptionModule} from '@angular/material/legacy-core';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatOptionModule} from '@angular/material/core';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
 
 import {CategoryFilter} from './category_filter';
 
@@ -11,9 +11,9 @@ import {CategoryFilter} from './category_filter';
   declarations: [CategoryFilter],
   imports: [
     CommonModule,
-    MatLegacyOptionModule,
-    MatLegacyFormFieldModule,
-    MatLegacySelectModule,
+    MatOptionModule,
+    MatFormFieldModule,
+    MatSelectModule,
   ],
   exports: [CategoryFilter],
 })
diff --git a/frontend/app/components/controls/string_filter/BUILD b/frontend/app/components/controls/string_filter/BUILD
index dfec1b4dd..25992b4fe 100644
--- a/frontend/app/components/controls/string_filter/BUILD
+++ b/frontend/app/components/controls/string_filter/BUILD
@@ -17,9 +17,9 @@ xprof_ng_module(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
+        "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
     ],
 )
 
diff --git a/frontend/app/components/controls/string_filter/string_filter.ng.html b/frontend/app/components/controls/string_filter/string_filter.ng.html
index 6e673feda..d454a4f28 100644
--- a/frontend/app/components/controls/string_filter/string_filter.ng.html
+++ b/frontend/app/components/controls/string_filter/string_filter.ng.html
@@ -1,7 +1,7 @@
-<mat-form-field class="input-control" *ngIf="columnLabel">
+<mat-form-field class="control" *ngIf="columnLabel" style="margin-right:8px;">
+  <mat-label>{{columnLabel}}</mat-label>
   <input
     matInput
-    [placeholder]="columnLabel"
     [value]="value"
     (input)="value = $event.target.value; updateFilter()"
   />
diff --git a/frontend/app/components/controls/string_filter/string_filter.scss b/frontend/app/components/controls/string_filter/string_filter.scss
index ae2a78ccb..48aad8e9f 100644
--- a/frontend/app/components/controls/string_filter/string_filter.scss
+++ b/frontend/app/components/controls/string_filter/string_filter.scss
@@ -1,4 +1,4 @@
-/** CSS for a stats table component. */
+/** CSS for string filter component. */
 
 @import 'frontend/app/styles/common';
 
@@ -6,3 +6,10 @@ mat-icon {
   color: $button-focus-color;
   vertical-align: bottom;
 }
+
+// This control class never works for unknown reason
+// added inline style instead
+.control {
+  width: 240px;
+  margin-right: 8px;
+}
diff --git a/frontend/app/components/controls/string_filter/string_filter_module.ts b/frontend/app/components/controls/string_filter/string_filter_module.ts
index c97cc4a68..a53a78168 100644
--- a/frontend/app/components/controls/string_filter/string_filter_module.ts
+++ b/frontend/app/components/controls/string_filter/string_filter_module.ts
@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 
 import {StringFilter} from './string_filter';
 
@@ -11,9 +11,9 @@ import {StringFilter} from './string_filter';
   declarations: [StringFilter],
   imports: [
     CommonModule,
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
   ],
   exports: [StringFilter],
 })
diff --git a/frontend/app/components/diagnostics_view/BUILD b/frontend/app/components/diagnostics_view/BUILD
index 6525ad0ea..1a1503c66 100644
--- a/frontend/app/components/diagnostics_view/BUILD
+++ b/frontend/app/components/diagnostics_view/BUILD
@@ -15,7 +15,6 @@ xprof_ng_module(
     ],
     deps = [
         "@npm//@angular/core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )
diff --git a/frontend/app/components/graph_viewer/BUILD b/frontend/app/components/graph_viewer/BUILD
index 552e60f9c..2a9f19a66 100644
--- a/frontend/app/components/graph_viewer/BUILD
+++ b/frontend/app/components/graph_viewer/BUILD
@@ -19,7 +19,7 @@ xprof_ng_module(
         "@npm//@angular/router",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
+        "@org_xprof//frontend/app/common/angular:angular_material_core",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_bar",
         "@org_xprof//frontend/app/common/angular:angular_material_sidenav",
         "@org_xprof//frontend/app/common/constants",
diff --git a/frontend/app/components/graph_viewer/graph_config/BUILD b/frontend/app/components/graph_viewer/graph_config/BUILD
index 4d67e0bff..63201ee15 100644
--- a/frontend/app/components/graph_viewer/graph_config/BUILD
+++ b/frontend/app/components/graph_viewer/graph_config/BUILD
@@ -19,13 +19,13 @@ xprof_ng_module(
         "@npm//@angular/forms",
         "@npm//rxjs",
         "@org_xprof//frontend/app/common/angular:angular_material_button",
+        "@org_xprof//frontend/app/common/angular:angular_material_core",
+        "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_checkbox",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
+        "@org_xprof//frontend/app/common/angular:angular_material_select",
         "@org_xprof//frontend/app/common/angular:angular_material_sidenav",
         "@org_xprof//frontend/app/common/interfaces",
     ],
diff --git a/frontend/app/components/graph_viewer/graph_config/graph_config.ng.html b/frontend/app/components/graph_viewer/graph_config/graph_config.ng.html
index 284a99eb0..c7bd2fa1f 100644
--- a/frontend/app/components/graph_viewer/graph_config/graph_config.ng.html
+++ b/frontend/app/components/graph_viewer/graph_config/graph_config.ng.html
@@ -1,11 +1,11 @@
-<div class="item-container">
+<div class="form-container">
   <form (ngSubmit)="onSubmit()">
     <div class="row" *ngIf="!isHloOssTool" id="xla-module-list-header">
       <div [ngClass]="{ 'mat-subheading-2': true }">
         XLA Modules ({{ moduleList.length }})
       </div>
     </div>
-    <mat-form-field class="full-width" *ngIf="!isHloOssTool" id="xla-module-list-selector">
+    <mat-form-field class="full-width" *ngIf="!isHloOssTool" id="xla-module-list-selector" appearance="outline">
       <mat-select
         name="selectedModule"
         panelClass="panel-override"
diff --git a/frontend/app/components/graph_viewer/graph_config/graph_config.scss b/frontend/app/components/graph_viewer/graph_config/graph_config.scss
index e7894593d..f95e86839 100644
--- a/frontend/app/components/graph_viewer/graph_config/graph_config.scss
+++ b/frontend/app/components/graph_viewer/graph_config/graph_config.scss
@@ -2,10 +2,6 @@
 
 @import 'frontend/app/styles/common';
 
-.item-container {
-  padding: 20px 20px 0;
-}
-
 .mat-subheading-2 {
   margin-bottom: 0;
 }
diff --git a/frontend/app/components/graph_viewer/graph_config/graph_config_module.ts b/frontend/app/components/graph_viewer/graph_config/graph_config_module.ts
index 84c721615..34cc6681e 100644
--- a/frontend/app/components/graph_viewer/graph_config/graph_config_module.ts
+++ b/frontend/app/components/graph_viewer/graph_config/graph_config_module.ts
@@ -4,10 +4,10 @@ import {FormsModule} from '@angular/forms';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyOptionModule} from '@angular/material/legacy-core';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatOptionModule} from '@angular/material/core';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 import {MatSidenavModule} from '@angular/material/sidenav';
 
@@ -19,11 +19,11 @@ import {GraphConfig} from './graph_config';
     FormsModule,
     MatButtonModule,
     MatLegacyCheckboxModule,
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
-    MatLegacyOptionModule,
-    MatLegacySelectModule,
+    MatInputModule,
+    MatOptionModule,
+    MatSelectModule,
     MatSidenavModule,
     MatLegacyTooltipModule,
   ],
diff --git a/frontend/app/components/graph_viewer/graph_viewer.ng.html b/frontend/app/components/graph_viewer/graph_viewer.ng.html
index 33de13925..ce7fe9870 100644
--- a/frontend/app/components/graph_viewer/graph_viewer.ng.html
+++ b/frontend/app/components/graph_viewer/graph_viewer.ng.html
@@ -1,6 +1,6 @@
 <mat-sidenav-container>
   <mat-sidenav mode="side" opened>
-    <div class="row">
+    <div class="item-container">
       <graph-config [initialInputs]="initialParams" [moduleList]="moduleList" [isHloOssTool]="true" (plot)="onPlot()" (update)="onUpdateParam($event)"></graph-config>
     </div>
   </mat-sidenav>
diff --git a/frontend/app/components/graph_viewer/graph_viewer.scss b/frontend/app/components/graph_viewer/graph_viewer.scss
index 71f237361..65866d35c 100644
--- a/frontend/app/components/graph_viewer/graph_viewer.scss
+++ b/frontend/app/components/graph_viewer/graph_viewer.scss
@@ -6,14 +6,14 @@
   padding: 20px 20px 0;
 }
 
-.row {
-  display: flex;
-}
-
 mat-sidenav {
-  @include border-right-gray;
   background: transparent;
-  width: 340px;
+  width: 25%;
+  min-width: 350px;
+}
+
+mat-sidenav-content {
+  width: 75%;
 }
 
 mat-sidenav-container {
@@ -25,7 +25,7 @@ iframe {
   top: 0;
   width: 100%;
   height: 100%;
-  box-sizing: border-box;
+  border: none;
 }
 
 mat-progress-bar {
diff --git a/frontend/app/components/graph_viewer/graph_viewer_module.ts b/frontend/app/components/graph_viewer/graph_viewer_module.ts
index 80fe213ba..ab6355c82 100644
--- a/frontend/app/components/graph_viewer/graph_viewer_module.ts
+++ b/frontend/app/components/graph_viewer/graph_viewer_module.ts
@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyOptionModule} from '@angular/material/legacy-core';
+import {MatOptionModule} from '@angular/material/core';
 import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {DiagnosticsViewModule} from 'org_xprof/frontend/app/components/diagnostics_view/diagnostics_view_module';
@@ -13,7 +13,7 @@ import {GraphViewer} from './graph_viewer';
   imports: [
     CommonModule,
     DiagnosticsViewModule,
-    MatLegacyOptionModule,
+    MatOptionModule,
     MatLegacyProgressBarModule,
     MatSidenavModule,
     PipesModule,
diff --git a/frontend/app/components/kernel_stats/kernel_stats_table/BUILD b/frontend/app/components/kernel_stats/kernel_stats_table/BUILD
index c5dd757f0..2fbea08e6 100644
--- a/frontend/app/components/kernel_stats/kernel_stats_table/BUILD
+++ b/frontend/app/components/kernel_stats/kernel_stats_table/BUILD
@@ -16,9 +16,9 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
+        "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )
diff --git a/frontend/app/components/kernel_stats/kernel_stats_table/kernel_stats_table_module.ts b/frontend/app/components/kernel_stats/kernel_stats_table/kernel_stats_table_module.ts
index 5b27fe337..6ce0ea9d5 100644
--- a/frontend/app/components/kernel_stats/kernel_stats_table/kernel_stats_table_module.ts
+++ b/frontend/app/components/kernel_stats/kernel_stats_table/kernel_stats_table_module.ts
@@ -1,16 +1,16 @@
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 
 import {KernelStatsTable} from './kernel_stats_table';
 
 @NgModule({
   declarations: [KernelStatsTable],
   imports: [
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
   ],
   exports: [KernelStatsTable]
 })
diff --git a/frontend/app/components/memory_profile/BUILD b/frontend/app/components/memory_profile/BUILD
index 258db015d..fc3efa286 100644
--- a/frontend/app/components/memory_profile/BUILD
+++ b/frontend/app/components/memory_profile/BUILD
@@ -20,10 +20,10 @@ xprof_ng_module(
         "@npm//@angular/router",
         "@npm//@ngrx/store",
         "@npm//rxjs",
+        "@org_xprof//frontend/app/common/angular:angular_material_core",
         "@org_xprof//frontend/app/common/angular:angular_material_divider",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
+        "@org_xprof//frontend/app/common/angular:angular_material_select",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/components/memory_profile/memory_breakdown_table",
         "@org_xprof//frontend/app/components/memory_profile/memory_profile_summary",
diff --git a/frontend/app/components/memory_profile/memory_breakdown_table/BUILD b/frontend/app/components/memory_profile/memory_breakdown_table/BUILD
index b03d42b82..db0971f18 100644
--- a/frontend/app/components/memory_profile/memory_breakdown_table/BUILD
+++ b/frontend/app/components/memory_profile/memory_breakdown_table/BUILD
@@ -16,9 +16,9 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
+        "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/interfaces:memory_profile_proto_defs",
         "@org_xprof//frontend/app/common/utils",
diff --git a/frontend/app/components/memory_profile/memory_breakdown_table/memory_breakdown_table_module.ts b/frontend/app/components/memory_profile/memory_breakdown_table/memory_breakdown_table_module.ts
index aab29844a..5dbd902c8 100644
--- a/frontend/app/components/memory_profile/memory_breakdown_table/memory_breakdown_table_module.ts
+++ b/frontend/app/components/memory_profile/memory_breakdown_table/memory_breakdown_table_module.ts
@@ -1,16 +1,16 @@
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 
 import {MemoryBreakdownTable} from './memory_breakdown_table';
 
 @NgModule({
   declarations: [MemoryBreakdownTable],
   imports: [
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
   ],
   exports: [MemoryBreakdownTable]
 })
diff --git a/frontend/app/components/memory_profile/memory_profile.ng.html b/frontend/app/components/memory_profile/memory_profile.ng.html
index 350fa28f0..29c0edb2f 100644
--- a/frontend/app/components/memory_profile/memory_profile.ng.html
+++ b/frontend/app/components/memory_profile/memory_profile.ng.html
@@ -15,7 +15,7 @@
                   <div class="description">show memory profile for selected device</div>
                 </td>
                 <td class="item-value">
-                  <mat-form-field>
+                  <mat-form-field appearance="outline">
                     <mat-select [(value)]="selectedMemoryId">
                       <mat-option *ngFor="let id of memoryIds" [value]="id">
                         {{ id }}
diff --git a/frontend/app/components/memory_profile/memory_profile_common.scss b/frontend/app/components/memory_profile/memory_profile_common.scss
index 925b37700..42b640d17 100644
--- a/frontend/app/components/memory_profile/memory_profile_common.scss
+++ b/frontend/app/components/memory_profile/memory_profile_common.scss
@@ -62,6 +62,6 @@ mat-form-field {
   margin-bottom: 0;
 }
 
-.mat-form-field {
+.mat-mdc-form-field {
   padding-left: 10px;
 }
diff --git a/frontend/app/components/memory_profile/memory_profile_module.ts b/frontend/app/components/memory_profile/memory_profile_module.ts
index 31ef4a5d0..1e3a0d9cc 100644
--- a/frontend/app/components/memory_profile/memory_profile_module.ts
+++ b/frontend/app/components/memory_profile/memory_profile_module.ts
@@ -2,8 +2,8 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyOptionModule} from '@angular/material/legacy-core';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatOptionModule} from '@angular/material/core';
+import {MatSelectModule} from '@angular/material/select';
 import {MemoryBreakdownTableModule} from 'org_xprof/frontend/app/components/memory_profile/memory_breakdown_table/memory_breakdown_table_module';
 import {MemoryProfileSummaryModule} from 'org_xprof/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module';
 import {MemoryTimelineGraphModule} from 'org_xprof/frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph_module';
@@ -17,8 +17,8 @@ import {MemoryProfile} from './memory_profile';
     CommonModule,
     MatDividerModule,
     MatIconModule,
-    MatLegacySelectModule,
-    MatLegacyOptionModule,
+    MatSelectModule,
+    MatOptionModule,
     MemoryProfileSummaryModule,
     MemoryTimelineGraphModule,
     MemoryBreakdownTableModule,
diff --git a/frontend/app/components/memory_profile/memory_profile_summary/BUILD b/frontend/app/components/memory_profile/memory_profile_summary/BUILD
index 6568796b7..2f68bd07a 100644
--- a/frontend/app/components/memory_profile/memory_profile_summary/BUILD
+++ b/frontend/app/components/memory_profile/memory_profile_summary/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
@@ -15,7 +15,7 @@ xprof_ng_module(
     ],
     deps = [
         "@npm//@angular/core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
diff --git a/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts b/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts
index c1af1159c..54865bcb7 100644
--- a/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts
+++ b/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts
@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 
 import {MemoryProfileSummary} from './memory_profile_summary';
@@ -9,7 +9,7 @@ import {MemoryProfileSummary} from './memory_profile_summary';
   declarations: [MemoryProfileSummary],
   imports: [
     CommonModule,
-    MatLegacyCardModule,
+    MatCardModule,
     MatLegacyTooltipModule,
   ],
   exports: [MemoryProfileSummary]
diff --git a/frontend/app/components/memory_profile/memory_timeline_graph/BUILD b/frontend/app/components/memory_profile/memory_timeline_graph/BUILD
index f419515ec..ffa9becee 100644
--- a/frontend/app/components/memory_profile/memory_timeline_graph/BUILD
+++ b/frontend/app/components/memory_profile/memory_timeline_graph/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
@@ -16,7 +16,7 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
     ],
diff --git a/frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph_module.ts b/frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph_module.ts
index 005f3be7e..b7d8ad902 100644
--- a/frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph_module.ts
+++ b/frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph_module.ts
@@ -1,11 +1,11 @@
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {MemoryTimelineGraph} from './memory_timeline_graph';
 
 @NgModule({
   declarations: [MemoryTimelineGraph],
-  imports: [MatLegacyCardModule],
+  imports: [MatCardModule],
   exports: [MemoryTimelineGraph]
 })
 export class MemoryTimelineGraphModule {
diff --git a/frontend/app/components/memory_viewer/buffer_details/BUILD b/frontend/app/components/memory_viewer/buffer_details/BUILD
index 3766a9e2e..f097c502c 100644
--- a/frontend/app/components/memory_viewer/buffer_details/BUILD
+++ b/frontend/app/components/memory_viewer/buffer_details/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
@@ -17,7 +17,7 @@ xprof_ng_module(
         "@npm//@angular/core",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
         "@org_xprof//frontend/app/store",
diff --git a/frontend/app/components/memory_viewer/buffer_details/buffer_details_module.ts b/frontend/app/components/memory_viewer/buffer_details/buffer_details_module.ts
index 0cce9dd69..55f6d2d35 100644
--- a/frontend/app/components/memory_viewer/buffer_details/buffer_details_module.ts
+++ b/frontend/app/components/memory_viewer/buffer_details/buffer_details_module.ts
@@ -1,12 +1,12 @@
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {BufferDetails} from './buffer_details';
 
 /** A buffer details view module. */
 @NgModule({
   declarations: [BufferDetails],
-  imports: [MatLegacyCardModule],
+  imports: [MatCardModule],
   exports: [BufferDetails]
 })
 export class BufferDetailsModule {
diff --git a/frontend/app/components/op_profile/BUILD b/frontend/app/components/op_profile/BUILD
index 9a40cdac2..01ad7982b 100644
--- a/frontend/app/components/op_profile/BUILD
+++ b/frontend/app/components/op_profile/BUILD
@@ -20,9 +20,9 @@ xprof_ng_module(
         "@npm//@angular/router",
         "@npm//@ngrx/store",
         "@npm//rxjs",
+        "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_slide_toggle",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
diff --git a/frontend/app/components/op_profile/op_details/BUILD b/frontend/app/components/op_profile/op_details/BUILD
index 38dc5a17f..66fbc49a8 100644
--- a/frontend/app/components/op_profile/op_details/BUILD
+++ b/frontend/app/components/op_profile/op_details/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
@@ -19,8 +19,8 @@ xprof_ng_module(
         "@npm//@ngrx/store",
         "@npm//rxjs",
         "@org_xprof//frontend/app/common/angular:angular_material_button",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/interfaces:op_metrics_proto_defs",
         "@org_xprof//frontend/app/common/interfaces:op_profile_proto_defs",
         "@org_xprof//frontend/app/common/utils",
diff --git a/frontend/app/components/op_profile/op_details/op_details.scss b/frontend/app/components/op_profile/op_details/op_details.scss
index f6f683ec0..e57b89f32 100644
--- a/frontend/app/components/op_profile/op_details/op_details.scss
+++ b/frontend/app/components/op_profile/op_details/op_details.scss
@@ -70,6 +70,7 @@ mat-card {
 .bar {
   height: 24px;
   line-height: 24px;
+  max-width: 100%;
 }
 
 .expression {
@@ -97,7 +98,8 @@ mat-card {
   display: table-cell;
 }
 
-.size, .size-x {
+.size,
+.size-x {
   text-align: center;
   width: 20%;
 }
diff --git a/frontend/app/components/op_profile/op_details/op_details_module.ts b/frontend/app/components/op_profile/op_details/op_details_module.ts
index ffcec6a48..6d79e2304 100644
--- a/frontend/app/components/op_profile/op_details/op_details_module.ts
+++ b/frontend/app/components/op_profile/op_details/op_details_module.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {OpDetails} from './op_details';
 
@@ -10,7 +10,7 @@ import {OpDetails} from './op_details';
 @NgModule({
   declarations: [OpDetails],
   imports:
-      [CommonModule, MatLegacyCardModule, MatIconModule, MatButtonModule],
+      [CommonModule, MatCardModule, MatIconModule, MatButtonModule],
   exports: [OpDetails]
 })
 export class OpDetailsModule {
diff --git a/frontend/app/components/op_profile/op_profile.ng.html b/frontend/app/components/op_profile/op_profile.ng.html
index e7618aaf2..4ad127a59 100644
--- a/frontend/app/components/op_profile/op_profile.ng.html
+++ b/frontend/app/components/op_profile/op_profile.ng.html
@@ -32,27 +32,20 @@
     <div class="ops-control">
       <div class="ops-control-title">
         Show top&nbsp;
-        <mat-form-field class="children-count-input">
+        <mat-form-field class="children-count-input" appearance="outline">
+          <mat-label>#</mat-label>
           <input
                  matInput
                  type="number"
+                 matTooltip="10 ~ 100 with increment of 10, numbers will be rounded"
                  [min]="10"
                  [max]="100"
                  [step]="10"
                  [value]="childrenCount"
-                 (input)="updateChildrenCount($event.target.value)" />
+                 (change)="updateChildrenCount($event.target.value)" />
         </mat-form-field>
         &nbsp;ops
       </div>
-      <div>
-        <mat-slider
-                    [min]="10"
-                    [max]="100"
-                    [step]="10"
-                    [value]="childrenCount"
-                    (change)="updateChildrenCount($event.value)">
-        </mat-slider>
-      </div>
     </div>
     <div class="control">
       <div class="control-title">Sort by wasted time
diff --git a/frontend/app/components/op_profile/op_profile_module.ts b/frontend/app/components/op_profile/op_profile_module.ts
index 5b538a7fa..53a3288be 100644
--- a/frontend/app/components/op_profile/op_profile_module.ts
+++ b/frontend/app/components/op_profile/op_profile_module.ts
@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
 import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
@@ -13,8 +13,8 @@ import {OpTableModule} from './op_table/op_table_module';
 @NgModule({
   declarations: [OpProfile],
   imports: [
-    MatLegacyFormFieldModule,
-    MatLegacyInputModule,
+    MatFormFieldModule,
+    MatInputModule,
     MatLegacySliderModule,
     MatLegacySlideToggleModule,
     OpTableModule,
diff --git a/frontend/app/components/overview/BUILD b/frontend/app/components/overview/BUILD
index ba5ae8eed..a95026076 100644
--- a/frontend/app/components/overview/BUILD
+++ b/frontend/app/components/overview/BUILD
@@ -21,7 +21,6 @@ xprof_ng_module(
         "@npm//@ngrx/store",
         "@npm//@types/google.visualization",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
         "@org_xprof//frontend/app/components/diagnostics_view",
diff --git a/frontend/app/components/overview/performance_summary/BUILD b/frontend/app/components/overview/performance_summary/BUILD
index 4f0c31a59..2a2bd19dd 100644
--- a/frontend/app/components/overview/performance_summary/BUILD
+++ b/frontend/app/components/overview/performance_summary/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
@@ -16,8 +16,8 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/common",
         "@npm//@angular/core",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
         "@org_xprof//frontend/app/common/interfaces",
     ],
diff --git a/frontend/app/components/overview/performance_summary/performance_summary_module.ts b/frontend/app/components/overview/performance_summary/performance_summary_module.ts
index a64c670eb..b7d2a7825 100644
--- a/frontend/app/components/overview/performance_summary/performance_summary_module.ts
+++ b/frontend/app/components/overview/performance_summary/performance_summary_module.ts
@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 
 import {PerformanceSummary} from './performance_summary';
@@ -10,7 +10,7 @@ import {PerformanceSummary} from './performance_summary';
   declarations: [PerformanceSummary],
   imports: [
     CommonModule,
-    MatLegacyCardModule,
+    MatCardModule,
     MatIconModule,
     MatLegacyTooltipModule,
   ],
diff --git a/frontend/app/components/overview/recommendation_result_view/BUILD b/frontend/app/components/overview/recommendation_result_view/BUILD
index b3bbbc2ce..d81754afb 100644
--- a/frontend/app/components/overview/recommendation_result_view/BUILD
+++ b/frontend/app/components/overview/recommendation_result_view/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
@@ -20,7 +20,7 @@ xprof_ng_module(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@ngrx/store",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
         "@org_xprof//frontend/app/store",
diff --git a/frontend/app/components/overview/recommendation_result_view/recommendation_result_view_module.ts b/frontend/app/components/overview/recommendation_result_view/recommendation_result_view_module.ts
index 6192aaa2a..d2ec01f52 100644
--- a/frontend/app/components/overview/recommendation_result_view/recommendation_result_view_module.ts
+++ b/frontend/app/components/overview/recommendation_result_view/recommendation_result_view_module.ts
@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {RecommendationResultView} from './recommendation_result_view';
 
@@ -8,7 +8,7 @@ import {RecommendationResultView} from './recommendation_result_view';
   declarations: [RecommendationResultView],
   imports: [
     CommonModule,
-    MatLegacyCardModule,
+    MatCardModule,
   ],
   exports: [RecommendationResultView]
 })
diff --git a/frontend/app/components/overview/run_environment_view/BUILD b/frontend/app/components/overview/run_environment_view/BUILD
index e476abe64..817c96c19 100644
--- a/frontend/app/components/overview/run_environment_view/BUILD
+++ b/frontend/app/components/overview/run_environment_view/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
@@ -15,7 +15,7 @@ xprof_ng_module(
     ],
     deps = [
         "@npm//@angular/core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )
diff --git a/frontend/app/components/overview/run_environment_view/run_environment_view_module.ts b/frontend/app/components/overview/run_environment_view/run_environment_view_module.ts
index 492e3b08e..8fa8491a9 100644
--- a/frontend/app/components/overview/run_environment_view/run_environment_view_module.ts
+++ b/frontend/app/components/overview/run_environment_view/run_environment_view_module.ts
@@ -1,11 +1,11 @@
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {RunEnvironmentView} from './run_environment_view';
 
 @NgModule({
   declarations: [RunEnvironmentView],
-  imports: [MatLegacyCardModule],
+  imports: [MatCardModule],
   exports: [RunEnvironmentView]
 })
 export class RunEnvironmentViewModule {
diff --git a/frontend/app/components/overview/step_time_graph/BUILD b/frontend/app/components/overview/step_time_graph/BUILD
index c02c7b2fc..3aee8c54e 100644
--- a/frontend/app/components/overview/step_time_graph/BUILD
+++ b/frontend/app/components/overview/step_time_graph/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
@@ -16,7 +16,7 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )
diff --git a/frontend/app/components/overview/step_time_graph/step_time_graph_module.ts b/frontend/app/components/overview/step_time_graph/step_time_graph_module.ts
index fa04e45f2..f03570868 100644
--- a/frontend/app/components/overview/step_time_graph/step_time_graph_module.ts
+++ b/frontend/app/components/overview/step_time_graph/step_time_graph_module.ts
@@ -1,11 +1,11 @@
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {StepTimeGraph} from './step_time_graph';
 
 @NgModule({
   declarations: [StepTimeGraph],
-  imports: [MatLegacyCardModule],
+  imports: [MatCardModule],
   exports: [StepTimeGraph]
 })
 export class StepTimeGraphModule {
diff --git a/frontend/app/components/pod_viewer/pod_viewer_details/BUILD b/frontend/app/components/pod_viewer/pod_viewer_details/BUILD
index ad90db571..62c5055cd 100644
--- a/frontend/app/components/pod_viewer/pod_viewer_details/BUILD
+++ b/frontend/app/components/pod_viewer/pod_viewer_details/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
@@ -18,7 +18,7 @@ xprof_ng_module(
         "@npm//@angular/core",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
diff --git a/frontend/app/components/pod_viewer/pod_viewer_details/pod_viewer_details_module.ts b/frontend/app/components/pod_viewer/pod_viewer_details/pod_viewer_details_module.ts
index f099d7eab..4f8ce5f3d 100644
--- a/frontend/app/components/pod_viewer/pod_viewer_details/pod_viewer_details_module.ts
+++ b/frontend/app/components/pod_viewer/pod_viewer_details/pod_viewer_details_module.ts
@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {PodViewerDetails} from './pod_viewer_details';
 
@@ -9,7 +9,7 @@ import {PodViewerDetails} from './pod_viewer_details';
   declarations: [PodViewerDetails],
   imports: [
     CommonModule,
-    MatLegacyCardModule,
+    MatCardModule,
   ],
   exports: [PodViewerDetails]
 })
diff --git a/frontend/app/components/pod_viewer/topology_graph/BUILD b/frontend/app/components/pod_viewer/topology_graph/BUILD
index 390592597..c6a215198 100644
--- a/frontend/app/components/pod_viewer/topology_graph/BUILD
+++ b/frontend/app/components/pod_viewer/topology_graph/BUILD
@@ -19,9 +19,9 @@ xprof_ng_module(
         "@npm//@ngrx/store",
         "@npm//rxjs",
         "@org_xprof//frontend/app/common/angular:angular_material_button",
+        "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_menu",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider",
         "@org_xprof//frontend/app/common/constants",
diff --git a/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html b/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html
index b0452f145..09bf07e47 100644
--- a/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html
+++ b/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html
@@ -29,7 +29,8 @@
         [value]="selectedChannelIndex"
         (change)="updateChannelIndex($event.value)">
       </mat-slider>
-      <mat-form-field class="channel-input">
+      <mat-form-field class="channel-input" appearance="outline">
+        <mat-label>Channel id</mat-label>
         <input
           matInput
           type="number"
diff --git a/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts b/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts
index 10e34ced0..7cbdfa081 100644
--- a/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts
+++ b/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts
@@ -2,8 +2,8 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
 import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 
@@ -15,9 +15,9 @@ import {TopologyGraph} from './topology_graph';
   imports: [
     CommonModule,
     MatButtonModule,
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
     MatLegacyMenuModule,
     MatLegacySliderModule,
   ],
diff --git a/frontend/app/components/sidenav/BUILD b/frontend/app/components/sidenav/BUILD
index f4a26ecbd..21496bd40 100644
--- a/frontend/app/components/sidenav/BUILD
+++ b/frontend/app/components/sidenav/BUILD
@@ -18,9 +18,9 @@ xprof_ng_module(
         "@npm//@angular/router",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
+        "@org_xprof//frontend/app/common/angular:angular_material_core",
+        "@org_xprof//frontend/app/common/angular:angular_material_form_field",
+        "@org_xprof//frontend/app/common/angular:angular_material_select",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
diff --git a/frontend/app/components/sidenav/sidenav.ng.html b/frontend/app/components/sidenav/sidenav.ng.html
index bf658d149..edb94607c 100644
--- a/frontend/app/components/sidenav/sidenav.ng.html
+++ b/frontend/app/components/sidenav/sidenav.ng.html
@@ -7,7 +7,7 @@
     Runs ({{runs.length}})
   </div>
 
-  <mat-form-field class="full-width">
+  <mat-form-field class="full-width" appearance="outline">
     <mat-select panelClass="panel-override" [(value)]="selectedRun" [disabled]="!runs.length" (selectionChange)="afterUpdateRun()">
       <mat-option *ngFor="let run of runs" [value]="run">
         {{run}}
@@ -21,7 +21,7 @@
     Tools ({{tags.length}})
   </div>
 
-  <mat-form-field class="full-width">
+  <mat-form-field class="full-width" appearance="outline">
     <mat-select panelClass="panel-override" [(value)]="selectedTag" [disabled]="!tags.length" (selectionChange)="afterUpdateTag()">
       <mat-option *ngFor="let tag of tags" [value]="tag">
         {{getDisplayTagName(tag)}}
@@ -35,7 +35,7 @@
     {{hostSelectorDisplayName}}
   </div>
 
-  <mat-form-field class="full-width">
+  <mat-form-field class="full-width" appearance="outline">
     <mat-select panelClass="panel-override" [(value)]="selectedHost" [disabled]="!hosts.length" (selectionChange)="afterUpdateHost()">
       <mat-option *ngFor="let host of hosts" [value]="host">
         {{host}}
diff --git a/frontend/app/components/sidenav/sidenav_module.ts b/frontend/app/components/sidenav/sidenav_module.ts
index 78942ab23..3855f480e 100644
--- a/frontend/app/components/sidenav/sidenav_module.ts
+++ b/frontend/app/components/sidenav/sidenav_module.ts
@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyOptionModule} from '@angular/material/legacy-core';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatOptionModule} from '@angular/material/core';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
 import {CaptureProfileModule} from 'org_xprof/frontend/app/components/capture_profile/capture_profile_module';
 import {BufferDetailsModule} from 'org_xprof/frontend/app/components/memory_viewer/buffer_details/buffer_details_module';
 import {OpDetailsModule} from 'org_xprof/frontend/app/components/op_profile/op_details/op_details_module';
@@ -15,9 +15,9 @@ import {SideNav} from './sidenav';
   declarations: [SideNav],
   imports: [
     CommonModule,
-    MatLegacyFormFieldModule,
-    MatLegacySelectModule,
-    MatLegacyOptionModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatOptionModule,
     BufferDetailsModule,
     CaptureProfileModule,
     OpDetailsModule,
diff --git a/frontend/app/components/tensorflow_stats/BUILD b/frontend/app/components/tensorflow_stats/BUILD
index 876679fbb..293d3fb2b 100644
--- a/frontend/app/components/tensorflow_stats/BUILD
+++ b/frontend/app/components/tensorflow_stats/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
diff --git a/frontend/app/components/tensorflow_stats/flop_rate_chart/BUILD b/frontend/app/components/tensorflow_stats/flop_rate_chart/BUILD
index 03ba5fe5c..503ea7525 100644
--- a/frontend/app/components/tensorflow_stats/flop_rate_chart/BUILD
+++ b/frontend/app/components/tensorflow_stats/flop_rate_chart/BUILD
@@ -15,7 +15,6 @@ xprof_ng_module(
     ],
     deps = [
         "@npm//@angular/core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/interfaces:chart",
         "@org_xprof//frontend/app/components/chart",
diff --git a/frontend/app/components/tensorflow_stats/stats_table/BUILD b/frontend/app/components/tensorflow_stats/stats_table/BUILD
index 414767bc7..589afe842 100644
--- a/frontend/app/components/tensorflow_stats/stats_table/BUILD
+++ b/frontend/app/components/tensorflow_stats/stats_table/BUILD
@@ -16,9 +16,9 @@ xprof_ng_module(
     deps = [
         ":stats_table_data_provider",
         "@npm//@angular/core",
+        "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/interfaces:chart",
         "@org_xprof//frontend/app/components/chart",
diff --git a/frontend/app/components/tensorflow_stats/stats_table/stats_table.ng.html b/frontend/app/components/tensorflow_stats/stats_table/stats_table.ng.html
index 556c3fa29..fb458eb19 100644
--- a/frontend/app/components/tensorflow_stats/stats_table/stats_table.ng.html
+++ b/frontend/app/components/tensorflow_stats/stats_table/stats_table.ng.html
@@ -1,27 +1,27 @@
 <div>
   <div class="mat-headline">TensorFlow operations</div>
   <mat-form-field>
+    <mat-label>Host/device</mat-label>
     <input
            matInput
-           placeholder="Host/device"
            [value]="filterExecutor"
-           (input)="filterExecutor = $event.target.value; updateFilters();">
+           (change)="filterExecutor = $event.target.value; updateFilters();">
     <mat-icon matSuffix>search</mat-icon>
   </mat-form-field>
   <mat-form-field>
+    <mat-label>Type</mat-label>
     <input
            matInput
-           placeholder="Type"
            [value]="filterType"
-           (input)="filterType = $event.target.value; updateFilters();">
+           (change)="filterType = $event.target.value; updateFilters();">
     <mat-icon matSuffix>search</mat-icon>
   </mat-form-field>
   <mat-form-field>
+    <mat-label>Operation</mat-label>
     <input
            matInput
-           placeholder="Operation"
            [value]="filterOperation"
-           (input)="filterOperation = $event.target.value; updateFilters();">
+           (change)="filterOperation = $event.target.value; updateFilters();">
     <mat-icon matSuffix>search</mat-icon>
   </mat-form-field>
 </div>
diff --git a/frontend/app/components/tensorflow_stats/stats_table/stats_table_module.ts b/frontend/app/components/tensorflow_stats/stats_table/stats_table_module.ts
index 23a6d33b4..ec6557b36 100644
--- a/frontend/app/components/tensorflow_stats/stats_table/stats_table_module.ts
+++ b/frontend/app/components/tensorflow_stats/stats_table/stats_table_module.ts
@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart';
 
 import {StatsTable} from './stats_table';
@@ -11,9 +11,9 @@ import {StatsTable} from './stats_table';
   declarations: [StatsTable],
   imports: [
     CommonModule,
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
     ChartModule,
   ],
   exports: [StatsTable],
diff --git a/frontend/app/styles/common.scss b/frontend/app/styles/common.scss
index 59b510354..81d3c6a6c 100644
--- a/frontend/app/styles/common.scss
+++ b/frontend/app/styles/common.scss
@@ -48,6 +48,11 @@ $dark-theme-card-title-color: #fff;
   padding: 20px 20px 0;
 }
 
+.row {
+  display: flex;
+  align-items: center;
+}
+
 mat-card {
   // MDC mat-card does not have padding by default
   // Add padding to keep style persistent during migration
diff --git a/frontend/styles.scss b/frontend/styles.scss
index 42be730fc..9ca8ef4e5 100644
--- a/frontend/styles.scss
+++ b/frontend/styles.scss
@@ -28,6 +28,12 @@ $theme: mat.define-light-theme(
 @include mat.fab-theme($theme);
 @include mat.button-theme($theme);
 @include mat.icon-button-theme($theme);
+@include mat.card-theme($theme);
+@include mat.autocomplete-theme($theme);
+@include mat.core-theme($theme);
+@include mat.input-theme($theme);
+@include mat.form-field-theme($theme);
+@include mat.select-theme($theme);
 
 html, body {
   height: 100%;
@@ -103,7 +109,7 @@ sidenav mat-form-field .mat-select-value {
   color: #777;
 }
 
-op-profile .ops-control .mat-form-field {
+op-profile .ops-control .mat-mdc-form-field {
   text-align: center !important;
 }