Fix the Pinned Plugins button styles when toggled

[afercia]

After the changes to the header Settings button in #14475 (my bad) the Pinned Plugins button styles are broken when the button is toggled:

• the different left margin makes the buttons "jump"
• colors of the SVG icon are inverted

The Settings button and the Pinned Plugins button inherit some common styles from packages/edit-post/src/components/header/style.scss but then the Pinned Plugins one has a few specific rules that need to be updated after the changes in #14475.

To reproduce:

• install a plugin that provides its own Sidebar
• open the Plugin sidebar from the More menu
• click the "Pin to toolbar" button in the plugin Sidebar
• observe the pinned button styles when clicking on ti

Animated GIF:

[simison]

This got reported here too Automattic/jetpack#13212 (comment)

Looked broken in Gutenberg 6.2.0 and 6.3.0 — this should be fixed in future versions, correct?

From a quick glance it looked like these margin styles are conflicting & causing the jump:

gutenberg/packages/edit-post/src/components/header/style.scss

Lines 70 to 75 in 1731607

	.edit-post-header .components-button {
	// Header toggle buttons.
	&.is-toggled {
	color: $white;
	background: $dark-gray-500;
	margin: 1px;

gutenberg/packages/edit-post/src/components/header/pinned-plugins/style.scss

Lines 8 to 9 in f6d816d

	.components-icon-button {
	margin-left: 4px;

— but I didn't look closer so I might be wrong.