Buttons in the logs page should get grayed out when they are disabled

Summary

Buttons in the logs page should get grayed out when they are disabled.

Steps to reproduce

  1. Go to a Pipeline https://gitlab.com/gitlab-org/gitlab/pipelines
  2. Click on a pipeline job e.g. https://gitlab.com/gitlab-org/gitlab/-/jobs/335680805
  3. Scroll up and down in the page
  4. Pay attention to the buttons

Example Project

https://gitlab.com/gitlab-org/gitlab has this behavior

What is the current bug behavior?

Buttons are disabled but appear to have a black color.

image

What is the expected correct behavior?

When buttons are disabled they should be grayed out.

At the top of the page:

Screen_Shot_2019-10-29_at_12.13.18_PM

At the bottom of the page:

Screen_Shot_2019-10-29_at_12.13.25_PM

Relevant logs and/or screenshots

2019-10-29_12.05.50

Output of checks

This bug happens on GitLab.com

Possible fixes

SVGs in the buttons should inherit the color of the text. This is currently not possible.

  • Fill of SVGs is hardcoded in the build-controllers mixin to fill: $gl-text-color, so the state of the button will not affect this color.
  • btn-transparent class prevents the buttons from having the same color as the rest of the text (#2e2e2e). Perhaps the buttons text color should be set to $gl-text-color
  • This hack can force the correct behavior to be visible.
.btn:disabled svg {
  color: inherit;
  fill: currentColor;
}