From c7458373b482ce7e00dad201a52a063c05310178 Mon Sep 17 00:00:00 2001
From: Yin Zhang <yinzz@google.com>
Date: Mon, 18 Sep 2023 13:27:41 -0700
Subject: [PATCH] Migration to use the new MDC-based Angular Components.
 Components migrated: slide-toggle

PiperOrigin-RevId: 566397432
---
 frontend/app/common/angular/BUILD                         | 2 +-
 frontend/app/components/op_profile/BUILD                  | 2 +-
 frontend/app/components/op_profile/op_profile_common.scss | 3 ++-
 frontend/app/components/op_profile/op_profile_module.ts   | 4 ++--
 frontend/styles.scss                                      | 1 +
 5 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/app/common/angular/BUILD b/frontend/app/common/angular/BUILD
index d06a95bd..5440319f 100644
--- a/frontend/app/common/angular/BUILD
+++ b/frontend/app/common/angular/BUILD
@@ -139,7 +139,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_slide_toggle",
+    name = "angular_material_slide_toggle",
     srcs = [],
     deps = [
         "@npm//@angular/material",
diff --git a/frontend/app/components/op_profile/BUILD b/frontend/app/components/op_profile/BUILD
index 01ad7982..6877e33b 100644
--- a/frontend/app/components/op_profile/BUILD
+++ b/frontend/app/components/op_profile/BUILD
@@ -23,9 +23,9 @@ xprof_ng_module(
         "@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_slide_toggle",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
+        "@org_xprof//frontend/app/common/angular:angular_material_slide_toggle",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/components/op_profile/op_table",
         "@org_xprof//frontend/app/services/data_service",
diff --git a/frontend/app/components/op_profile/op_profile_common.scss b/frontend/app/components/op_profile/op_profile_common.scss
index 41cf9765..a7c04bb5 100644
--- a/frontend/app/components/op_profile/op_profile_common.scss
+++ b/frontend/app/components/op_profile/op_profile_common.scss
@@ -15,7 +15,8 @@
 
 .control-container {
   display: flex;
-  padding-top: 32px;
+  align-items: center;
+  margin-top: 32px;
 }
 
 .control {
diff --git a/frontend/app/components/op_profile/op_profile_module.ts b/frontend/app/components/op_profile/op_profile_module.ts
index 53a3288b..6aae79e6 100644
--- a/frontend/app/components/op_profile/op_profile_module.ts
+++ b/frontend/app/components/op_profile/op_profile_module.ts
@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
-import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 
@@ -16,7 +16,7 @@ import {OpTableModule} from './op_table/op_table_module';
     MatFormFieldModule,
     MatInputModule,
     MatLegacySliderModule,
-    MatLegacySlideToggleModule,
+    MatSlideToggleModule,
     OpTableModule,
     MatIconModule,
     MatLegacyTooltipModule,
diff --git a/frontend/styles.scss b/frontend/styles.scss
index cb493153..90e8b848 100644
--- a/frontend/styles.scss
+++ b/frontend/styles.scss
@@ -39,6 +39,7 @@ $theme: mat.define-light-theme(
 @include mat.dialog-theme($theme);
 @include mat.progress-spinner-theme($theme);
 @include mat.progress-bar-theme($theme);
+@include mat.slide-toggle-theme(map-merge($theme, (density: -5)));
 @include mat.radio-theme($theme);
 
 html, body {