From c640857966471e4eedb7f81f1ac2dffc0b41631b Mon Sep 17 00:00:00 2001
From: Brian Dubois <bdubois@google.com>
Date: Wed, 4 Oct 2023 20:54:10 -0400
Subject: [PATCH] MDCMigration: Style Settings button and Plugin picker for MDC
 migration. (#6618)

Style the "settings" button and the "scalars | images | histograms"
plugin chooser button.

We can do this by adjusting the global styles we recently introduced,
meaning that other buttons we add in the future will also adhere to
these styles:
1. Set letter-spacing to normal for all button text.
2. Reuse the .mat-icon styling we introduced even for non icon-button
buttons.

Sample screenshot:

![image](https://github.com/tensorflow/tensorboard/assets/17152369/23c3ecda-93d3-4c73-8774-03379e2f802c)
---
 .../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 6efdd68158..5f41a23c85 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);
       }
     }
   }