From 317bed32b16c18be7395c63b68d323529a303cb7 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Tue, 25 Feb 2020 14:47:03 +0100
Subject: [PATCH] Add component for background colour

[MAILPOET-2600]
---
 .../components/form_background.jsx            |  0
 .../form_settings/styles_settings_panel.jsx   | 32 +++++++++++++++++--
 views/form/editor.html                        |  1 +
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 assets/js/src/form_editor/components/form_background.jsx

diff --git a/assets/js/src/form_editor/components/form_background.jsx b/assets/js/src/form_editor/components/form_background.jsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx b/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
index 2500548f38..00b4eefd5c 100644
--- a/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
+++ b/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>
   );
diff --git a/views/form/editor.html b/views/form/editor.html
index 0dfb30dff8..f3b1edbdb5 100644
--- a/views/form/editor.html
+++ b/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'),