Skip to content

fix: Checkbox background not styling correctly

Dylan Bernardi requested to merge db/fix-checkboxes-ui-color into main

Description

This changes the background-color of the checkboxes for the Feedback Modal to match the background for the button features in the webview. This fixes the same color background issue and also leads to a seamless match between all buttons on the modal that pops up for feedback.

While there are --vscode-checkbox-selectedBackground and --vscode-checkbox-foreground variables available in the VSCode theme API, those colors render and cause the same issues as users are currently experiencing.

As well for background-color on checkboxes, the border-radius was being overwritten and the checkboxes (when checked) were displaying the color as a square. This MR introduces that border-radius to persist regardless of when the checkbox is checked or not.

Note on Checkboxes

In a recent VSCode update the support for checkboxes has changed (still trying to pin point which release) which was causing differing results for this branch before adding mask-image: none;. The mask image creates a checkbox svg image that overlays over the checkbox to solve for high contrast themes where the actual checkmark renders as not white. As a result, mask-image: none; was added to ensure this change renders properly across all themes.

Related Issues

Resolves part of DuoChat Feedback form not working in VsCode Ext... (gitlab#444328 - closed).

How has this been tested?

Checkout the branch and run the extension in VSCode to test the new behavior.

Screenshots (if appropriate)

Pre-Fix Post-Fix
Dark Theme image image
Light Theme image image

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Documentation
  • Chore (Related to CI or Packaging to platforms)
  • Test gap
Edited by Dylan Bernardi

Merge request reports