From 11da3d2af7d890b928ea0baf699b5df1605ee142 Mon Sep 17 00:00:00 2001
From: Brian Dubois <bdubois@google.com>
Date: Wed, 4 Oct 2023 12:27:10 -0400
Subject: [PATCH] MDCMigration: Style Settings button and Plugin picker for MDC
 migration.

---
 .../webapp/theme/_tb_theme.template.scss      | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss
index 9c921ec0fc..9f4066f3b7 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -294,30 +294,32 @@ $tb-dark-theme: map_merge(
   body,
   body.dark-mode {
     a,
-    button {
+    button.mat-mdc-button-base {
+      --tb-icon-size: 24px;
+      --mdc-typography-button-letter-spacing: normal;
+
       &[mat-icon-button].mat-mdc-icon-button {
         width: 40px;
         height: 40px;
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        --tb-icon-size: 24px;
 
         .mat-mdc-button-touch-target {
           height: 100%;
           width: 100%;
         }
+      }
 
-        mat-icon.mat-icon {
-          flex-shrink: 0;
-        }
+      mat-icon.mat-icon {
+        flex-shrink: 0;
+      }
 
-        mat-icon.mat-icon,
-        svg {
-          width: var(--tb-icon-size);
-          height: var(--tb-icon-size);
-          line-height: var(--tb-icon-size);
-        }
+      mat-icon.mat-icon,
+      svg {
+        width: var(--tb-icon-size);
+        height: var(--tb-icon-size);
+        line-height: var(--tb-icon-size);
       }
     }
   }