Skip to content

Commit

Permalink
MDCMigration: Fix prev and next buttons for dark mode (tensorflow#6663)
Browse files Browse the repository at this point in the history
## Motivation for features / changes
The new mat-button uses different colors in it's styling. This caused a
readability problem with our Next and Prev buttons when enabled. This
fixes the buttons to be readable and look nice. We decided the
transparent background looked nice in dark mode but not in light mode.

This was brought to our attention in tensorflow#6651.

## Screenshots of UI changes (or N/A)
Before:
<img width="905" alt="Screenshot 2023-10-20 at 11 22 09 AM"
src="https://github.com/tensorflow/tensorboard/assets/8672809/ffad969c-4fa0-4f45-af80-0975a5ad2756">
<img width="897" alt="Screenshot 2023-10-20 at 11 22 17 AM"
src="https://github.com/tensorflow/tensorboard/assets/8672809/5fc01f59-7e6c-407d-929b-aac6bdcf0ac6">

After:
<img width="868" alt="Screenshot 2023-10-20 at 11 00 38 AM"
src="https://github.com/tensorflow/tensorboard/assets/8672809/e8000574-910e-4fef-bb44-26b4faeb5966">
<img width="887" alt="Screenshot 2023-10-20 at 11 13 09 AM"
src="https://github.com/tensorflow/tensorboard/assets/8672809/18b821d0-1942-43cd-a501-5d5b7549a8a6">

## Alternate designs / implementations considered (or N/A)
Also considered having a transparent background in light mode.
  • Loading branch information
JamesHollyer authored and bmd3k committed Nov 2, 2023
1 parent 27409c5 commit e6355e8
Showing 1 changed file with 2 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -92,10 +92,8 @@ card-view {
}

.pagination-button {
@include tb-theme-foreground-prop(color, secondary-text);
background-color: $metrics-button-background-color-on-gray;

&:disabled {
@include tb-theme-foreground-prop(color, disabled-text);
@include tb-dark-theme {
background-color: transparent;
}
}

0 comments on commit e6355e8

Please sign in to comment.