Improve table styles

[julieg18]

1/2 main <- this <- #2198

• add vscode prefix to --checkbox-border variable
• keep cell spinners and unselected circles the same bg color as cells
• keep the sticky column from losing opacity on row hover

Example of cell spinners and unselected circles

Screen.Recording.2022-08-16.at.11.02.58.AM.mov

Example of now fully opaque experiment column

Screen.Recording.2022-08-16.at.12.55.31.PM.mov

Followup to #2133

[sroy3]

Should we change the border to be the same as the row background as well?

[julieg18]

Should we change the border to be the same as the row background as well?

Apologies, I'm not sure what border you're referring to?

[sroy3]

Should we change the border to be the same as the row background as well?

Apologies, I'm not sure what border you're referring to?

The black border on the spinner where the cursor is.

[julieg18]

The black border on the spinner where the cursor is.

Oh, I see what you're saying! I'll need to rethink this solution a bit more. Now that I'm looking at things a second time, I just noticed that our checkboxes are not visible on the default theme on hover as well:

We may need to rethink our hover background colors again 😅

[julieg18]

Properly fixed the background for spinners/bullets and made sure that the exp column always retains full opacity no matter the background color(some row background colors are partially transparent, causing this issue in some themes):

[shcheklein]

I think things like this should be fixed, folks. Unless I'm missing something and it's an actual edge case (e.g. there are places in VS Code with this theme where it breaks the interface).

I'm not sure why is it happening btw. @julieg18 could you give a bit more details. What variable do we use for background that causes this? In what case (hover, active, etc?)

[julieg18]

I think things like this should be fixed, folks. Unless I'm missing something and it's an actual edge case (e.g. there are places in VS Code with this theme where it breaks the interface).
I'm not sure why is it happening btw. @julieg18 could you give a bit more details. What variable do we use for background that causes this? In what case (hover, active, etc?)

The PR does indeed fix this bug if I wasn't clear before (I'll go ahead and add an extra video, showcasing this)! Here's how things look now:

As for why it's happening, the variable we are using for row hover is called --vscode-list-hoverBackground which depending on the theme, is sometimes using a color that is partially transparent. Due to the partially transparent color being used as a background on row hover, the sticky column becomes partially transparent and you can see the columns underneath, causing the bug.

I fixed the issue by keeping the background of the column the same color as the table (a color that is never transparent) and used an absolute :before element to change the background color, ensuring that the column always stays opaque.

[shcheklein]

Good, thanks @julieg18 !

[mattseddon]

Still a slight issue with the row being selected:

[mattseddon]

There is at least one more of these in this file. --button-primary-background

[julieg18]

Weird, that variable actually doesn't have a vscode prefixed version 🤔

[qlty-cloud-legacy]

Code Climate has analyzed commit 093905a and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (85% is the threshold).

This pull request will bring the total coverage in the repository to 96.7% (0.0% change).

View more on Code Climate.

[julieg18]

Still a slight issue with the row being selected:

Fixed!