Need to fix contribute page checkbox design issue

[divyeshk71]

Hello Team

I’ve noticed a design issue in the Contribute form where the checkmark inside the checkbox isn’t clearly visible. This could impact user experience, and I believe we can improve it for better clarity. Please see the attached screenshot for reference.

​https://nimb.ws/19O2Dkv

Thanks.

[dd32]

Affected URL: ​https://make.wordpress.org/contribute/ (The Contributor orientation wizard thing)

Looks like it's a Gutenberg style issue, as the styles used on that checkbox are entirely from the checkbox control.

See the source on GitHub for the block: ​https://github.com/WordPress/wporg-contributor-orientation where you'll also find screenshots of what it should look like (and previously did)

[dd32]

screenshot from OP.

[divyeshk71]

Hello @dd32

What will be the next step? Should i pull the code for this page and fix this issue?

Let me know.Thanks

[enrico.sorcinelli]

I noticed the same problem. This rule:

span.components-checkbox-control__input-container {
   height: var(--checkbox-input-size);
}

seems to fix both on desktop and mobile.

But I wouldn't be too sure about adding it in the plugin as perhaps it's better to understand and fix it in Gutenberg.

[Joen]

Good ticket. Seems like there's a quick win in just aligning the checkmark correctly.

Longer term, I'd expect these pages to migrate to the new componentry, which in this case could mean this checkbox:
​https://www.figma.com/design/e4tLacmlPuZV47l7901FEs/WordPress-Design-Library?node-id=28524-24057&t=KC4vx7vEeeoSG0Fu-1