From 52bddd763f59310a40972647dcad951c80efd730 Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta@mailpoet.com>
Date: Thu, 5 Mar 2020 11:06:42 +0100
Subject: [PATCH] Apply input styles styles for custom textareas in editor

[MAILPOET-2599]
---
 .../blocks/custom_textarea/edit.jsx           | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx b/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
index 2b567c5c6e..a8570f6a7d 100644
--- a/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
+++ b/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
@@ -107,15 +107,34 @@ const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
     </InspectorControls>
   );
 
+  const labelStyles = {
+    fontWeight: attributes.styles.bold ? 'bold' : 'inherit',
+  };
+
+  const inputStyles = {
+    borderRadius: attributes.styles.borderRadius ? `${attributes.styles.borderRadius}px` : 0,
+    borderWidth: attributes.styles.borderSize ? `${attributes.styles.borderSize}px` : '1px',
+    borderColor: attributes.styles.borderColor || 'initial',
+  };
+
+  if (attributes.styles.fullWidth) {
+    inputStyles.width = '100%';
+  }
+
+  if (attributes.styles.backgroundColor) {
+    inputStyles.backgroundColor = attributes.styles.backgroundColor;
+  }
+
   const getTextArea = (placeholder) => (
     <textarea
-      id="custom_text"
+      id={clientId}
       className="mailpoet_textarea"
       name="custom_text"
       disabled
-      data-automation-id="editor_custom_text_input"
+      data-automation-id="editor_custom_textarea_input"
       value={placeholder}
       rows={attributes.lines}
+      style={inputStyles}
     />
   );
 
@@ -125,7 +144,7 @@ const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
       {attributes.labelWithinInput ? (getTextArea(formatLabel(attributes))
       ) : (
         <>
-          <label className="mailpoet_textarea_label" data-automation-id="editor_custom_text_label" htmlFor="custom_text">
+          <label className="mailpoet_textarea_label" data-automation-id="editor_custom_text_label" htmlFor={clientId} style={labelStyles}>
             {formatLabel(attributes.label, attributes.mandatory)}
           </label>
           {getTextArea('')}