Moved the audience feedback setting into the footer

refs https://github.com/TryGhost/Team/issues/2191

ghost/admin/app/components/modals/newsletters/edit/design.hbs

@@ -173,6 +173,24 @@
             {{#liquid-if isOpen}}
                 <div class="modal-fullsettings-tab-expanded">
                     <div class="gh-stack">
+
+                        {{#if (feature "audienceFeedback")}}
+                            <GhFormGroup @classNames="gh-stack-item gh-setting gh-setting-extra">
+                                <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Ask your readers for feedback</label>
+                                <div class="for-switch small">
+                                    <div class="container">
+                                        <input
+                                            type="checkbox"
+                                            id="capture-feedback"
+                                            checked={{@newsletter.feedbackEnabled}}
+                                            {{on "change" (fn this.onCheckboxChange "feedbackEnabled")}}
+                                        >
+                                        <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "feedbackEnabled")}}></button>
+                                    </div>
+                                </div>
+                            </GhFormGroup>
+                        {{/if}}
+
                         <GhFormGroup @classNames="gh-stack-item">
                             <label class="modal-fullsettings-title">Email footer</label>
                             <KoenigBasicHtmlInput

ghost/admin/app/components/modals/newsletters/edit/design.js

@@ -8,6 +8,16 @@ export default class EditNewsletterDesignForm extends Component {
 
     imageExtensions = IMAGE_EXTENSIONS;
 
+    @action
+    onCheckboxChange(property, event) {
+        this.args.newsletter[property] = event.target.checked;
+    }
+
+    @action
+    toggleProperty(property) {
+        this.args.newsletter[property] = !this.args.newsletter[property];
+    }
+
     @action
     imageUploaded(property, images) {
         if (images[0]) {

ghost/admin/app/components/modals/newsletters/edit/settings.hbs

@@ -114,23 +114,6 @@
                                 </div>
                             </div>
                         </GhFormGroup>
-
-                        {{#if (feature "audienceFeedback")}}
-                            <GhFormGroup @classNames="gh-stack-item gh-setting">
-                                <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Ask your readers for feedback</label>
-                                <div class="for-switch small">
-                                    <div class="container">
-                                        <input
-                                            type="checkbox"
-                                            id="capture-feedback"
-                                            checked={{@newsletter.feedbackEnabled}}
-                                            {{on "change" (fn this.onCheckboxChange "feedbackEnabled")}}
-                                        >
-                                        <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "feedbackEnabled")}}></button>
-                                    </div>
-                                </div>
-                            </GhFormGroup>
-                        {{/if}}
                     </div>
                 </div>
             {{/liquid-if}}

ghost/admin/app/styles/components/modals.css

@@ -694,6 +694,10 @@
     padding: 12px 0;
 }
 
+.modal-fullsettings-tab-expanded .gh-setting.gh-setting-extra {
+    padding-bottom: 24px;
+}
+
 .modal-fullsettings-form-labs .for-checkbox .input-toggle-component {
     background: var(--white);
 }