fix: no button outline

[wenfangdu]

Fix

Button outline looks bad, not sure why it's added:

iShot_2024-07-29_19.47.21.mp4

Test

1. Click the note entry
2. No button outline

iShot_2024-07-29_19.54.45.mp4

Release

Removed button outline.

[roundhill]

Thanks for the PR @wenfangdu! Agreed, that looks weird when you click on the rows. Unfortunately this change will remove the outline for keyboard navigation. I think we can use the modern focus-visible CSS selector though to fix this so it doesn't show the outline for mouse clicks. Something like:

button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  appearance: none;
  vertical-align: baseline;
  outline: none;

  svg {
    cursor: pointer;
  }

  &:focus-visible {
    outline: $focus-outline;
  }
}

And then we'd want to remove the focus-visible package from package.json and remove all of the @extend %smart-focus-outline; lines along with the smart-focus-outline styles themselves. Are you up for making this change?

[wenfangdu]

@roundhill Sorry, haven't got time recently, I'm currently using custom css to hide the outlines, it's good for now, if anyone steps into this PR, you can refer to @roundhill's comment for guidance.