Style posts/pages HelpCenterButton in Yoast Components

[IreneStr]

Currently, the HelpCenterButton that's on the post and page pages is styled in wordpress-seo. We should move the styling to Yoast Components.

Copied from https://github.com/Yoast/wordpress-seo/issues/8001#issuecomment-334722250:

Ok so the button is meant to have a different style in the edit post screen and in the plugin admin pages. However, I'd argue that adding a class yoast-help-center__button and then style the button from the Plugin scss files defeats a bit the purpose of using styled components.

Regardless, this is probably wrong in the plugin js/src/wp-seo-help-center.js

     * Renders the HelpCenter.
     *
     * @returns {ReactElement} The HelpCenter component.
     */
    render() {
        return (
            <div classID="yoast-help-center">
                <HelpCenterYC
                ... 

not sure what classID is. It produces the following output:

    <div class="yoast-help-center sc-hSdWYo haidUt">
    ...

worth noting the inner div is the HelpCenter component and already has a yoast-help-center class.

Not sure the component needs a wrapper div in the first place, it's a single component.

[afercia]

To recap, the Help Center button has 3 different stylings:

on My Yoast:

on the Plugin settings pages:

on the Plugin post meta box:

I'm not sure passing tons of props to have the 3 different stylings is the best option. Maybe implementing a buttonTheme prop that completely switches the button style? On the plugin, there should also be a way to distinguish the settings pages from the metabox and pass this to the HelpCenter component.