Add component for background colour

[MAILPOET-2600]

assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx

@@ -1,16 +1,44 @@
+import React, { useState } from 'react';
 import {
+  ColorIndicator,
+  ColorPalette,
   Panel,
   PanelBody,
 } from '@wordpress/components';
-import React from 'react';
 import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
+import { useSelect } from '@wordpress/data';
 
 const BasicSettingsPanel = ({ onToggle, isOpened }) => {
+  const [selectedColor, setSelectedColor] = useState(undefined);
+  const settingsColors = useSelect(
+    (select) => {
+      const { getSettings } = select('core/block-editor');
+      return getSettings().colors;
+    },
+    []
+  );
   return (
     <Panel>
       <PanelBody title={MailPoet.I18n.t('formSettingsStyles')} opened={isOpened} onToggle={onToggle}>
-        Styles
+        <div className="block-editor-panel-color-gradient-settings">
+          <span className="components-base-control__label">
+            {MailPoet.I18n.t('formSettingsStylesBackgroundColor')}
+            {
+              selectedColor !== undefined
+              && (
+                <ColorIndicator
+                  colorValue={selectedColor}
+                />
+              )
+            }
+          </span>
+          <ColorPalette
+            value={selectedColor}
+            onChange={setSelectedColor}
+            colors={settingsColors}
+          />
+        </div>
       </PanelBody>
     </Panel>
   );

views/form/editor.html

@@ -35,6 +35,7 @@
   'form': __('Form'),
   'formSettings': _x('Settings', 'A settings section heading'),
   'formSettingsStyles': __('Styles'),
+  'formSettingsStylesBackgroundColor': __('Background Color'),
   'customFieldSettings': _x('Custom field settings', 'A settings section heading'),
   'customFieldsFormSettings': _x('Form settings', 'A settings section heading'),
   'formPlacement': _x('Form Placement', 'A settings section heading'),