Fix panel header styles

[adekbadek]

Description

af3153a & 3ca05a7 have effectively updated the color of any .components-button button placed in the side panel.
This selector should however affect only the button in the panel title. Otherwise, it also affects any .components-button placed in the side panel.

How has this been tested?

by changing the selector in Chrome devtools

Screenshots

before:

after:

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR. .

[adekbadek]

It looks like the CI failed for an unrelated reason: https://travis-ci.com/WordPress/gutenberg/jobs/279276806
A rerun should fix that

[ItsJonQ]

@adekbadek Hi there 👋

Thank you for catching this one :). I took a look and was able to replicate the issue and can confirm that your update fixes it.

In taking a look at the panel/style.scss file, I noticed that there were <Button /> styles defined later on the file. It specifically targeted the <Button /> component that renders within a Panel Body Title.

gutenberg/packages/components/src/panel/style.scss

Line 89 in f413851

color: $dark-gray-900;

I did a quick test by removing the CSS rules from the .components-panel__body entirely.

-	// panel section header
-	&-title > .components-button {
-		color: $dark-gray-900;
-	}

It looked like that did it!

@adekbadek Does the change I proposed above make sense?

Thanks again!

[adekbadek]

@ItsJonQ That's true, I didn't check that. So the rule can be removed altogether: adekbadek@61c5b69

[ItsJonQ]

🚀 from me! The changes look good. The code works as expected when testing locally

[youknowriad]

Good job on your first contribution.