From 83267a7e284900923771450213a023af145bd501 Mon Sep 17 00:00:00 2001
From: Carlos <carloszamora270398@gmail.com>
Date: Wed, 13 Mar 2019 13:09:37 +0100
Subject: [PATCH] Checkbox text alignment and override checkboxes reorganized

---
 client/src/campaigns/CUD.js           |  9 ++++-----
 client/src/lib/form.js                | 22 ++++++++++++++++++----
 client/src/lib/styles.scss            | 10 ++++++++++
 client/src/send-configurations/CUD.js |  8 ++++----
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/client/src/campaigns/CUD.js b/client/src/campaigns/CUD.js
index 22039c16..cedecc4b 100644
--- a/client/src/campaigns/CUD.js
+++ b/client/src/campaigns/CUD.js
@@ -609,21 +609,20 @@ export default class CUD extends Component {
 
                 const addOverridable = (id, label) => {
                     if(this.state.sendConfiguration[id + '_overridable'] == 1){
-                        sendSettings.push(<CheckBox key={id + '_overriden'} id={id + '_overriden'} label={label} text={t('override')}/>);
                         if (this.getFormValue(id + '_overriden')) {
-                            sendSettings.push(<InputField key={id + '_override'} id={id + '_override'}/>);
+                            sendSettings.push(<InputField label={t(label)} key={id + '_override'} id={id + '_override'}/>);
                         } else {
                             sendSettings.push(
-                                <StaticField key={id + '_original'} id={id + '_original'} className={styles.formDisabled}>
+                                <StaticField key={id + '_original'} label={t(label)} id={id + '_original'} className={styles.formDisabled}>
                                     {this.state.sendConfiguration[id]}
                                 </StaticField>
                             );
                         }
+                        sendSettings.push(<CheckBox key={id + '_overriden'} id={id + '_overriden'}  text={t('override')} overrideFormat={true}/>);
                     }
                     else{
-                        sendSettings.push(<AlignedRow label={t(id)}></AlignedRow>);
                         sendSettings.push(
-                            <StaticField key={id + '_original'} id={id + '_original'} className={styles.formDisabled}>
+                            <StaticField key={id + '_original'} label={t(label)} id={id + '_original'} className={styles.formDisabled}>
                                 {this.state.sendConfiguration[id]}
                             </StaticField>
                         );
diff --git a/client/src/lib/form.js b/client/src/lib/form.js
index d14b63fd..85c9a2d5 100644
--- a/client/src/lib/form.js
+++ b/client/src/lib/form.js
@@ -339,7 +339,8 @@ class CheckBox extends Component {
         text: PropTypes.string.isRequired,
         label: PropTypes.string,
         help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-        format: PropTypes.string
+        format: PropTypes.string,
+        overrideFormat: PropTypes.bool
     }
 
     render() {
@@ -347,15 +348,28 @@ class CheckBox extends Component {
         const owner = this.getFormStateOwner();
         const id = this.props.id;
         const htmlId = 'form_' + id;
+        const overrideFormat = this.props.overrideFormat;
 
         const className = owner.addFormValidationClass('form-check-input', id);
 
-        return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
+        if(overrideFormat){
+            return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
+            <div className={styles.overrideCheckboxForm}>
+                <input className={className} type="checkbox" checked={owner.getFormValue(id)} id={htmlId} aria-describedby={htmlId + '_help'} onChange={evt => owner.updateFormValue(id, !owner.getFormValue(id))}/>
+                <label className={styles.checkboxText} htmlFor={htmlId}>{props.text}</label>
+            </div>
+            );
+        }
+        else{
+            return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
             <div className="form-group form-check my-2">
                 <input className={className} type="checkbox" checked={owner.getFormValue(id)} id={htmlId} aria-describedby={htmlId + '_help'} onChange={evt => owner.updateFormValue(id, !owner.getFormValue(id))}/>
-                <label className="form-check-label" htmlFor={htmlId}>{props.text}</label>
+                <label className={styles.checkboxText} htmlFor={htmlId}>{props.text}</label>
             </div>
-        );
+            );
+        }
+
+        
     }
 }
 
diff --git a/client/src/lib/styles.scss b/client/src/lib/styles.scss
index 6a9db9ff..59b6a676 100644
--- a/client/src/lib/styles.scss
+++ b/client/src/lib/styles.scss
@@ -124,6 +124,16 @@
   text-align: right;
 }
 
+.checkboxText{
+  padding-top: 3px;
+}
+.overrideCheckboxForm{
+  position: relative;
+  margin-top: -15px;
+  margin-bottom: 30px;
+  margin-left: 20px;
+}
+
 .dropZone{
   padding-top: 20px;
   padding-bottom: 20px;
diff --git a/client/src/send-configurations/CUD.js b/client/src/send-configurations/CUD.js
index eff2b161..35b7ebec 100644
--- a/client/src/send-configurations/CUD.js
+++ b/client/src/send-configurations/CUD.js
@@ -231,13 +231,13 @@ export default class CUD extends Component {
 
                     <Fieldset label={t('emailHeader')}>
                         <InputField id="from_email" label={t('defaultFromEmail')}/>
-                        <CheckBox id="from_email_overridable" text={t('overridable')}/>
+                        <CheckBox id="from_email_overridable" text={t('overridable')} overrideFormat={true}/>
                         <InputField id="from_name" label={t('defaultFromName')}/>
-                        <CheckBox id="from_name_overridable" text={t('overridable')}/>
+                        <CheckBox id="from_name_overridable" text={t('overridable')} overrideFormat={true}/>
                         <InputField id="reply_to" label={t('defaultReplytoEmail')}/>
-                        <CheckBox id="reply_to_overridable" text={t('overridable')}/>
+                        <CheckBox id="reply_to_overridable" text={t('overridable')} overrideFormat={true}/>
                         <InputField id="subject" label={t('subject')}/>
-                        <CheckBox id="subject_overridable" text={t('overridable')}/>
+                        <CheckBox id="subject_overridable" text={t('overridable')} overrideFormat={true}/>
                         <InputField id="x_mailer" label={t('xMailer')}/>
                     </Fieldset>