From eaa16c2f75c7206793405ede500dd15cc5851332 Mon Sep 17 00:00:00 2001
From: Jono Mingard <reason.koan@gmail.com>
Date: Fri, 2 Jun 2023 11:33:08 +1200
Subject: [PATCH] Added simple colour picker to change signup embed background

refs https://github.com/TryGhost/Team/issues/3338
---
 .../components/settings/signup-form-embed.hbs | 11 +++++++-
 .../components/settings/signup-form-embed.js  | 28 +++++++++++++++++--
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/ghost/admin/app/components/settings/signup-form-embed.hbs b/ghost/admin/app/components/settings/signup-form-embed.hbs
index 7ca405cc42..bc61447891 100644
--- a/ghost/admin/app/components/settings/signup-form-embed.hbs
+++ b/ghost/admin/app/components/settings/signup-form-embed.hbs
@@ -4,7 +4,7 @@
         <div class="gh-expandable-block">
             <div class="gh-expandable-header">
                 <div>
-                    <h4 class="gh-expandable-title">Embeddable Sigup Form</h4>
+                    <h4 class="gh-expandable-title">Embeddable Signup Form</h4>
                     <p class="gh-expandable-description">Grow your audience from anywhere on the web</p>
                 </div>
                 <button type="button" class="gh-btn" {{on "click" (toggle "opened" this)}}>
@@ -39,6 +39,15 @@
                                     <p>Members who sign up via the form will have these labels.</p>
                                 </div>
                             </div>
+
+                            <div class="form-group gh-stack-item row">
+                                <label class="fw6 f8">Background color</label>
+                                <Modals::Newsletters::Components::ColorPicker
+                                    @color={{this.backgroundColor}}
+                                    @presetColors={{this.backgroundPresetColors}}
+                                    @onColorChange={{this.setBackgroundColor}}
+                                />
+                            </div>
                         </div>
                     </div>
 
diff --git a/ghost/admin/app/components/settings/signup-form-embed.js b/ghost/admin/app/components/settings/signup-form-embed.js
index b867bbf5e4..455778c77e 100644
--- a/ghost/admin/app/components/settings/signup-form-embed.js
+++ b/ghost/admin/app/components/settings/signup-form-embed.js
@@ -24,6 +24,7 @@ export default class SignupFormEmbed extends Component {
     @tracked opened = false;
     @tracked style = 'all-in-one';
     @tracked labels = [];
+    @tracked backgroundColor = '#f9f9f9';
     @inject config;
     @service notifications;
 
@@ -37,6 +38,28 @@ export default class SignupFormEmbed extends Component {
         this.labels = labels;
     }
 
+    @action
+    setBackgroundColor(backgroundColor) {
+        this.backgroundColor = backgroundColor;
+    }
+
+    get backgroundPresetColors() {
+        return [
+            {
+                value: '#f9f9f9',
+                name: 'Light grey',
+                class: '',
+                style: 'background: #f9f9f9 !important;'
+            },
+            {
+                value: '#000000',
+                name: 'Black',
+                class: '',
+                style: 'background: #000000 !important;'
+            }
+        ];
+    }
+
     get generatedCode() {
         const siteUrl = this.config.blogUrl;
         const scriptUrl = this.config.signupForm.url.replace('{version}', this.config.signupForm.version);
@@ -58,9 +81,8 @@ export default class SignupFormEmbed extends Component {
             options.title = this.settings.title;
             options.description = this.settings.description;
 
-            const backgroundColor = '#f9f9f9';
-            options['background-color'] = backgroundColor;
-            options['text-color'] = textColorForBackgroundColor(backgroundColor).hex();
+            options['background-color'] = this.backgroundColor;
+            options['text-color'] = textColorForBackgroundColor(this.backgroundColor).hex();
 
             style = 'height: 40vmin; min-height: 360px;';
         }