From 5e7b1359987f766a7aa6f851088aae988ad17b3b Mon Sep 17 00:00:00 2001
From: Riley Jones <rileyjones@google.com>
Date: Thu, 28 Sep 2023 23:17:10 +0000
Subject: [PATCH 1/5] globally restyle mat-icon-button

---
 tensorboard/webapp/metrics/views/_common.scss |  4 +++
 .../webapp/theme/_tb_theme.template.scss      | 27 ++++++++++++++
 .../data_table/header_cell_component.scss     | 22 ++++++------
 .../sub_view/line_chart_axis_view.ng.html     |  2 +-
 .../sub_view/line_chart_axis_view.scss        | 36 +++++++++----------
 5 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/tensorboard/webapp/metrics/views/_common.scss b/tensorboard/webapp/metrics/views/_common.scss
index 9416052bf7..87025e52a9 100644
--- a/tensorboard/webapp/metrics/views/_common.scss
+++ b/tensorboard/webapp/metrics/views/_common.scss
@@ -61,6 +61,10 @@ $metrics-min-card-height: 320px;
 @mixin metrics-card-controls {
   @include tb-theme-foreground-prop(color, secondary-text);
   white-space: nowrap;
+
+  ::ng-deep button[mat-icon-button] {
+    font-size: 16px;
+  }
 }
 
 @mixin metrics-empty-message {
diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss
index 60a85d5da0..9b3acef6a9 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -291,6 +291,33 @@ $tb-dark-theme: map_merge(
     }
   }
 
+  body,
+  body.dark-mode {
+    button[mat-icon-button].mat-mdc-icon-button {
+      width: unset;
+      height: unset;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+
+      .mat-mdc-button-touch-target {
+        height: 100%;
+        width: 100%;
+      }
+
+      mat-icon.mat-icon {
+        min-width: 1em;
+      }
+
+      mat-icon.mat-icon,
+      svg {
+        width: 1em;
+        height: 1em;
+      }
+    }
+  }
+
   // Cannot use `tb-dark-theme` as :host-context in the global stylesheet is
   // meaningless.
   body.dark-mode {
diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.scss b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
index 704f98ccda..f6e3f32025 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
@@ -40,16 +40,6 @@ $_icon_size: 12px;
   }
 }
 
-.sorting-icon-container,
-.context-menu-container {
-  width: $_icon_size + 4px;
-  height: $_icon_size + 4px;
-  border-radius: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .cell {
   align-items: center;
   display: flex;
@@ -60,6 +50,18 @@ $_icon_size: 12px;
     line-height: 1;
   }
 
+  button.sorting-icon-container,
+  button.context-menu-container {
+    width: $_icon_size + 4px;
+    height: $_icon_size + 4px;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    padding: 4px;
+  }
+
   .sorting-icon-container {
     ::ng-deep path {
       fill: unset;
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html
index d60fe1c6d1..1a5c34f7cc 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html
@@ -33,7 +33,7 @@
       </g>
     </svg>
     <button
-      [class.extent-edit-button]="true"
+      class="extent-edit-button"
       [class.extent-edit-menu-opened]="editMenuOpened"
       mat-icon-button
       #matMenuTrigger="matMenuTrigger"
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
index 0030b9aa3b..b248a05d69 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
@@ -32,6 +32,24 @@ text {
   display: flex;
   height: 100%;
   width: 100%;
+
+  .extent-edit-button {
+    font-size: 16px;
+    height: 24px;
+    line-height: 24px;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    visibility: hidden;
+    width: 24px;
+    padding: 0;
+
+    mat-icon {
+      height: 16px;
+      width: 16px;
+      line-height: 16px;
+    }
+  }
 }
 
 .major,
@@ -112,24 +130,6 @@ text {
   }
 }
 
-.extent-edit-button {
-  background-color: mat.get-color-from-palette(mat.$gray-palette, 200);
-  font-size: 0;
-  height: 24px;
-  line-height: 24px;
-  position: absolute;
-  right: 5px;
-  top: 5px;
-  visibility: hidden;
-  width: 24px;
-
-  mat-icon {
-    height: 16px;
-    width: 16px;
-    line-height: 16px;
-  }
-}
-
 .extent-edit-input {
   align-items: center;
   column-gap: 5px;

From e0bace3ae28be9cad1b7d2a60bcf466cd846b011 Mon Sep 17 00:00:00 2001
From: Riley Jones <rileyjones@google.com>
Date: Fri, 29 Sep 2023 20:45:45 +0000
Subject: [PATCH 2/5] change icon size, and use css variable over em

---
 tensorboard/webapp/metrics/views/_common.scss |  6 +--
 .../webapp/theme/_tb_theme.template.scss      | 45 ++++++++++---------
 .../data_table/header_cell_component.scss     | 24 +++++-----
 3 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/tensorboard/webapp/metrics/views/_common.scss b/tensorboard/webapp/metrics/views/_common.scss
index 87025e52a9..b86987c41d 100644
--- a/tensorboard/webapp/metrics/views/_common.scss
+++ b/tensorboard/webapp/metrics/views/_common.scss
@@ -62,9 +62,9 @@ $metrics-min-card-height: 320px;
   @include tb-theme-foreground-prop(color, secondary-text);
   white-space: nowrap;
 
-  ::ng-deep button[mat-icon-button] {
-    font-size: 16px;
-  }
+  // ::ng-deep button[mat-icon-button] {
+  //   font-size: 16px;
+  // }
 }
 
 @mixin metrics-empty-message {
diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss
index 9b3acef6a9..53d1fa71aa 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -293,27 +293,30 @@ $tb-dark-theme: map_merge(
 
   body,
   body.dark-mode {
-    button[mat-icon-button].mat-mdc-icon-button {
-      width: unset;
-      height: unset;
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      flex-wrap: wrap;
-
-      .mat-mdc-button-touch-target {
-        height: 100%;
-        width: 100%;
-      }
-
-      mat-icon.mat-icon {
-        min-width: 1em;
-      }
-
-      mat-icon.mat-icon,
-      svg {
-        width: 1em;
-        height: 1em;
+    a,
+    button {
+      &[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,
+        svg {
+          width: var(--tb-icon-size);
+          height: var(--tb-icon-size);
+        }
       }
     }
   }
diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.scss b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
index f6e3f32025..0ace70cc10 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
@@ -18,6 +18,7 @@ limitations under the License.
 
 $_accent: map-get(mat.get-color-config($tb-theme), accent);
 $_icon_size: 12px;
+$_icon_padding: 4px;
 
 :host {
   display: table-cell;
@@ -50,16 +51,19 @@ $_icon_size: 12px;
     line-height: 1;
   }
 
-  button.sorting-icon-container,
-  button.context-menu-container {
-    width: $_icon_size + 4px;
-    height: $_icon_size + 4px;
-    border-radius: 5px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 12px;
-    padding: 4px;
+  button[mat-icon-button].mat-mdc-icon-button {
+    &.sorting-icon-container,
+    &.context-menu-container {
+      width: $_icon_size + $_icon_padding;
+      height: $_icon_size + $_icon_padding;
+      --tb-icon-size: #{$_icon_size};
+      border-radius: 5px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      padding: $_icon_padding;
+    }
   }
 
   .sorting-icon-container {

From 12c46a18e1a60a195d5defd946b565f753372fc9 Mon Sep 17 00:00:00 2001
From: Riley Jones <rileyjones@google.com>
Date: Fri, 29 Sep 2023 20:46:29 +0000
Subject: [PATCH 3/5] remove redundant properties

---
 .../webapp/widgets/data_table/header_cell_component.scss       | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.scss b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
index 0ace70cc10..8288acb0b4 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
@@ -58,9 +58,6 @@ $_icon_padding: 4px;
       height: $_icon_size + $_icon_padding;
       --tb-icon-size: #{$_icon_size};
       border-radius: 5px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
       font-size: 12px;
       padding: $_icon_padding;
     }

From 6543acac74502d2d08480de90063a1d0504e681d Mon Sep 17 00:00:00 2001
From: Riley Jones <rileyjones@google.com>
Date: Fri, 29 Sep 2023 20:48:26 +0000
Subject: [PATCH 4/5] fix extent button

---
 .../line_chart_v2/sub_view/line_chart_axis_view.scss   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
index b248a05d69..d5bdd1b42b 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
@@ -28,13 +28,15 @@ text {
   user-select: none;
 }
 
+$_icon_size: 16px;
+
 .axis {
   display: flex;
   height: 100%;
   width: 100%;
 
   .extent-edit-button {
-    font-size: 16px;
+    --tb-icon-size: #{$_icon_size};
     height: 24px;
     line-height: 24px;
     position: absolute;
@@ -45,9 +47,9 @@ text {
     padding: 0;
 
     mat-icon {
-      height: 16px;
-      width: 16px;
-      line-height: 16px;
+      height: $_icon_size;
+      width: $_icon_size;
+      line-height: $_icon_size;
     }
   }
 }

From d839bbad27c1cf5528ab3ac6236addc96fb33ac4 Mon Sep 17 00:00:00 2001
From: Riley Jones <rileyjones@google.com>
Date: Tue, 3 Oct 2023 20:13:19 +0000
Subject: [PATCH 5/5] address pr comments

---
 tensorboard/webapp/metrics/views/_common.scss         |  4 ----
 .../card_renderer/histogram_card_component.ng.html    |  1 -
 .../views/card_renderer/histogram_card_component.scss |  4 ----
 .../views/card_renderer/image_card_component.ng.html  |  1 -
 .../views/card_renderer/image_card_component.scss     |  4 ----
 .../views/card_renderer/scalar_card_component.ng.html |  1 -
 .../views/card_renderer/scalar_card_component.scss    |  4 ----
 tensorboard/webapp/theme/_tb_theme.template.scss      |  1 +
 .../line_chart_v2/sub_view/line_chart_axis_view.scss  | 11 +----------
 9 files changed, 2 insertions(+), 29 deletions(-)

diff --git a/tensorboard/webapp/metrics/views/_common.scss b/tensorboard/webapp/metrics/views/_common.scss
index b86987c41d..9416052bf7 100644
--- a/tensorboard/webapp/metrics/views/_common.scss
+++ b/tensorboard/webapp/metrics/views/_common.scss
@@ -61,10 +61,6 @@ $metrics-min-card-height: 320px;
 @mixin metrics-card-controls {
   @include tb-theme-foreground-prop(color, secondary-text);
   white-space: nowrap;
-
-  // ::ng-deep button[mat-icon-button] {
-  //   font-size: 16px;
-  // }
 }
 
 @mixin metrics-empty-message {
diff --git a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ng.html b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ng.html
index 78e3e143cc..e3dc2f57ed 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ng.html
@@ -32,7 +32,6 @@
   <span class="controls">
     <button
       mat-icon-button
-      class="pin-button"
       i18n-aria-label="A button to pin a card."
       aria-label="Pin card"
       [attr.title]="isPinned ? 'Unpin card' : 'Pin card'"
diff --git a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss
index 7341ba8411..d76360a2b6 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss
@@ -55,10 +55,6 @@ $_title-to-heading-gap: 12px;
   }
 }
 
-.pin-button mat-icon {
-  height: 18px;
-}
-
 .run {
   grid-area: run;
   display: flex;
diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ng.html b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ng.html
index 8cd5bb626c..6279cc4acb 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ng.html
@@ -30,7 +30,6 @@
     <span class="controls">
       <button
         mat-icon-button
-        class="pin-button"
         i18n-aria-label="A button to pin a card."
         aria-label="Pin card"
         [attr.title]="isPinned ? 'Unpin card' : 'Pin card'"
diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
index 677d3bf5c3..99f6477de8 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
@@ -70,10 +70,6 @@ $_tick_width: 14px;
   overflow: hidden;
 }
 
-.pin-button mat-icon {
-  height: 18px;
-}
-
 .run {
   align-self: baseline;
   display: flex;
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
index adcceda332..11113af833 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
@@ -44,7 +44,6 @@
       </button>
       <button
         mat-icon-button
-        class="pin-button"
         i18n-aria-label="A button to pin a card."
         aria-label="Pin card"
         [attr.title]="isPinned ? 'Unpin card' : 'Pin card'"
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
index 13939a426f..93213ec306 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
@@ -79,10 +79,6 @@ $_data_table_initial_height: 100px;
   overflow: hidden;
 }
 
-.pin-button mat-icon {
-  height: 18px;
-}
-
 .controls {
   @include metrics-card-controls;
   flex-shrink: 0;
diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss
index 53d1fa71aa..9c921ec0fc 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -316,6 +316,7 @@ $tb-dark-theme: map_merge(
         svg {
           width: var(--tb-icon-size);
           height: var(--tb-icon-size);
+          line-height: var(--tb-icon-size);
         }
       }
     }
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
index d5bdd1b42b..5e0383f0bc 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
@@ -28,29 +28,20 @@ text {
   user-select: none;
 }
 
-$_icon_size: 16px;
-
 .axis {
   display: flex;
   height: 100%;
   width: 100%;
 
   .extent-edit-button {
-    --tb-icon-size: #{$_icon_size};
+    --tb-icon-size: 16px;
     height: 24px;
-    line-height: 24px;
     position: absolute;
     right: 5px;
     top: 5px;
     visibility: hidden;
     width: 24px;
     padding: 0;
-
-    mat-icon {
-      height: $_icon_size;
-      width: $_icon_size;
-      line-height: $_icon_size;
-    }
   }
 }