fix: button consistency in logs panel #9945

[Marvin9]

Fixes #9945

Note on DCO:

If the DCO action in the integration test fails, one or more of your commits are not signed off. Please click on the Details link next to the DCO action for instructions on how to resolve this.

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• Optional. My organization is added to USERS.md.
• I have signed off all my commits as required by DCO
• I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
• My build is green (troubleshooting builds).

[codecov]

Codecov Report

Base: 45.76% // Head: 45.76% // No change to project coverage 👍

Coverage data is based on head (bac975a) compared to base (49487ea).
Patch has no changes to coverable lines.

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #10016   +/-   ##
=======================================
  Coverage   45.76%   45.76%           
=======================================
  Files         236      236           
  Lines       28529    28529           
=======================================
  Hits        13055    13055           
  Misses      13669    13669           
  Partials     1805     1805           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[crenshaw-dev]

Thanks, @Marvin9!

What if, instead of darkening the "active" buttons and adding a small green checkmark, we just added a proper square checkbox to the left of each icon (inside the button) which will become checked when activated.

That would allow these boxes to remain "bright" (not confusing them with the darker "action" buttons) and very clearly mark them as either active or inactive.

[Marvin9]

Thanks for the suggestion @crenshaw-dev. I will change the design

[Marvin9]

With new changes

Screen.Recording.2022-07-24.at.3.44.01.PM.mov

[crenshaw-dev]

I like it! Will wait for UI folks to weigh in. :-)

[Marvin9]

Thanks @crenshaw-dev. Can you please mention here who should review and approve?

[crenshaw-dev]

Added @rbreeze as a review. Remington, feel free to punt to another UI-capable person. :-)

[rbreeze]

I think the consistency improvements are great, and agree that each button should have consistent behavior and a fixed width. This feels like a big improvement already, but I see 2 different options that could make it look even better:

1. All buttons, even the ones with checkboxes, should be the same dark color

OR

2. We remove the checkbox paradigm from all buttons. Buttons that can be enabled / disabled would be hollow when disabled and filled in when enabled.

Option 1 is more explicit and a smaller change to the current state of this PR. Personally I think Option 2 would look cleaner, but may be more confusing. @alexec or @alexmt do you have an opinion here?

[Marvin9]

Thanks for the suggestion @rbreeze. The reason to avoid dark colour for toggles is that it confuses with static dark buttons (eg. copy, download). As soon as both groups have same color (darker one), they seem to loose the context, unless they have checkbox. Let me know what you think on it.

[jsoref]

Fwiw, I agree that option 2 is slightly better, but I'm happy with the current improvement over the previous state.