WordPress Editor Color Picker Style Issue

call-to-action.js

const { __ } = wp.i18n;

const { MediaUpload,
        MediaUploadCheck,
        RichText,
        InspectorControls,
        ColorPalette,
        BlockControls,
        AlignmentToolbar,
        BlockAlignmentToolbar,
        URLInputButton,
        URLInput,
} = wp.blockEditor;

const { registerBlockType } = wp.blocks;

const { Button,
        PanelBody,
        PanelRow,
        TextControl,
        Toolbar,
        ToolbarButton,
        Tooltip,
        ColorPicker,
        IconButton,
        Popover,
} = wp.components;

registerBlockType( "grofftech/call-to-action", {
    title: "Call To Action",
    description: "Creates a full width background image with a call to action button",
    icon: "heart", // TODO: Make custom SVG
    category: "common",
    supports: {
        align: [ "wide", "full" ],
    },

    attributes: {
        headingText: {
            type: "array",
            source: "children",
            selector: ".call-to-action__heading-text",
        },
        buttonText: {
            type: "array",
            source: "children",
            selector: ".call-to-action__button-text",
        },
        fontColor: {
            type: "string",
            default: "black",
        },
        overlayColor: {
            type: "string",
            default: "none",
        },
        overlayOpacity: {
            type: "string",
            default: "0",
        },
        backgroundImage: {
            type: "string",
            default: null,
        },
        textAlignment: {
            type: "string",
        },
        url: {
            type: "string",
        },
        height: {
            type: "string",
        },
        urlPickerDisplayed: {
            type: "boolean",
            default: false,
        },
    },

    edit: ( props ) => {
        const {
            className,
            attributes: {
                headingText,
                buttonText,
                fontColor,
                overlayColor,
                overlayOpacity,
                backgroundImage,
                textAlignment,
                urlPickerDisplayed,
                url,
                height,
            },
            setAttributes,
        } = props;

        const textAlignmentClass = textAlignment ? " align-" + textAlignment : "";

        const onImageSelect = ( imageObject ) => {
            setAttributes( {
                backgroundImage: imageObject.sizes.full.url,
            } );
        };

        const onHeadingTextChange = ( changed ) => {
            setAttributes( {
                headingText: changed,
            } );
        };

        const onButtonTextChange = ( changed ) => {
            setAttributes( {
                buttonText: changed,
            } );
        };

        const onTextColorChange = ( colorChange ) => {
            setAttributes( {
                fontColor: colorChange,
            } );
        };

        const onOverlayColorChange = ( colorChange ) => {
            setAttributes( {
                overlayColor: colorChange.hex,
            } );
        };

        return (
            <>
                <InspectorControls>
                    <PanelBody title={ __( "Block Settings", "custom-blocks" ) }>
                        <PanelRow>
                            <TextControl
                                label={ __( "Height", "custom-blocks" ) }
                                value={ height }
                                onChange={ ( heightChange ) => setAttributes( { height: heightChange } ) }
                            />
                        </PanelRow>
                    </PanelBody>
                    <PanelBody title={ __( "Font Color" ) }>
                        <PanelRow>
                            <ColorPalette
                                value={ fontColor }
                                onChange={ onTextColorChange }
                            />
                        </PanelRow>
                    </PanelBody>
                    <PanelBody title={ __( "Overlay" ) }>
                        <h3>Color</h3>
                        <PanelRow>
                            <ColorPicker
                                color={ overlayColor }
                                onChangeComplete={ onOverlayColorChange }
                                disableAlpha
                            />
                        </PanelRow>
                        <PanelRow>
                            <TextControl
                                label={ __( "Opacity", "custom-blocks" ) }
                                value={ overlayOpacity }
                                onChange={ ( opacityChange ) => setAttributes( { overlayOpacity: opacityChange } ) }
                            />
                        </PanelRow>
                    </PanelBody>
                    <PanelBody title={ __( "Background Image" ) }>
                        <PanelRow>
                            <MediaUploadCheck>
                                <MediaUpload
                                    onSelect={ onImageSelect }
                                    type="image"
                                    value={ backgroundImage }
                                    render={ ( { open } ) => (
                                        <Button
                                            className="is-secondary"
                                            onClick={ open }>
                                            <span>Upload Image</span>
                                        </Button>
                                    ) }
                                />
                            </MediaUploadCheck>
                        </PanelRow>
                    </PanelBody>
                </InspectorControls>
                <BlockControls>
                    <AlignmentToolbar
                        value={ textAlignment }
                        onChange={ ( alignChange ) => setAttributes( { textAlignment: alignChange } ) }
                    />
                    <Toolbar label="Custom">
                        <ToolbarButton
                            label={ __( "Button Link", "custom-blocks" ) }
                            icon="edit"
                            className="call-to-action__button-link"
                            onClick={ () => setAttributes( { urlPickerDisplayed: true } ) }
                        />
                    </Toolbar>
                </BlockControls>
                <div
                    className={ className }
                    style={ {
                        backgroundImage: `url( ${ backgroundImage } )`,
                        backgroundSize: `cover`,
                        backgroundPosition: `center`,
                        height: `${ height }px`,
                    } } >
                    <div
                        className="call-to-action__overlay"
                        style={ {
                            backgroundColor: overlayColor,
                            opacity: overlayOpacity,
                        } }>
                    </div>
                    <div className="call-to-action__container">
                        <RichText
                            tagName="p"
                            className={ `call-to-action__heading-text${ textAlignmentClass }` }
                            value={ headingText }
                            onChange={ onHeadingTextChange }
                            placeholder="Enter text here"
                            keepPlaceholderOnFocus={ true }
                            style={ { color: fontColor } }
                        />
                        <button className={ `btn btn-primary btn-medium${ textAlignmentClass }` }>
                            <RichText
                                tagName="span"
                                className="call-to-action__button-text"
                                value={ buttonText }
                                onChange={ onButtonTextChange }
                                placeholder="Enter button text"
                                keepPlaceholderOnFocus={ false }
                                allowedFormats={ [] }
                            />
                        </button>
                        { urlPickerDisplayed
                            ? (
                                <Popover
                                    position="bottom center"
                                    children={
                                        <form
                                            className="button-url-form"
                                            style={ { display: `flex` } }
                                            onSubmit={ ( event ) => {
                                                event.preventDefault();
                                                setAttributes( { urlPickerDisplayed: false } );
                                            } }
                                        >
                                            <URLInput
                                                className="url"
                                                value={ url }
                                                onChange={ ( buttonUrl ) => setAttributes( { url: buttonUrl } ) }
                                            />
                                            <Button
                                                icon="editor-break"
                                                label={ __( "Apply", "custom-blocks" ) }
                                                type="submit"
                                            />
                                        </form>
                                    }
                                    onClose={ () => setAttributes( { urlPickerDisplayed: false } ) }
                                />
                            )
                            : null
                        }
                    </div>
                </div>
            </>
        );
    },
    save: ( props ) => {
        const {
            className,
            attributes: {
                backgroundImage,
                overlayColor,
                overlayOpacity,
                headingText,
                buttonText,
                fontColor,
                textAlignment,
                url,
                height,
            },
        } = props;

        const textAlignmentClass = textAlignment ? " align-" + textAlignment : "";

        return (
            <div
                className={ className }
                style={ {
                    backgroundImage: `url( ${ backgroundImage } )`,
                    backgroundSize: `cover`,
                    backgroundPosition: `center`,
                    height: `${ height }px`,
                } }
            >
                <div
                    className="call-to-action__overlay"
                    style={ {
                        backgroundColor: overlayColor,
                        opacity: overlayOpacity,
                    } }>
                </div>
                <div className="call-to-action__container">
                    <RichText.Content
                        tagName="p"
                        className={ `call-to-action__heading-text${ textAlignmentClass }` }
                        value={ headingText }
                        style={ { color: fontColor } }
                    />
                    <a className={ `button-link ${ textAlignmentClass }` } href={ url }>
                        <button className={ `btn btn-primary btn-medium` }>
                            <RichText.Content
                                tagName="span"
                                className="call-to-action__button-text"
                                value={ buttonText }
                                style={ { color: fontColor } }
                            />
                        </button>
                    </a>
                </div>
            </div>
        );
    },
} );