From 9ff99066700f4499111bc20be85525091b6e9e8c Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Fri, 2 Jun 2023 09:45:17 +0200
Subject: [PATCH] Added transparent background pattern to minimal signup form
 preview

refs https://github.com/TryGhost/Team/issues/3340
---
 .../modals/settings/signup-form-embed.js      | 21 +++++++++++++------
 .../settings/signup-form/style-select.js      | 12 +++--------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/ghost/admin/app/components/modals/settings/signup-form-embed.js b/ghost/admin/app/components/modals/settings/signup-form-embed.js
index 193a61815b..e0818fc904 100644
--- a/ghost/admin/app/components/modals/settings/signup-form-embed.js
+++ b/ghost/admin/app/components/modals/settings/signup-form-embed.js
@@ -100,7 +100,11 @@ export default class SignupFormEmbedModal extends Component {
         }
 
         if (preview) {
-            style = 'height: 100vh';
+            if (this.style === 'minimal') {
+                style = 'max-width: 500px;position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);';
+            } else {
+                style = 'height: 100vh';
+            }
         }
 
         let dataOptionsString = '';
@@ -108,18 +112,23 @@ export default class SignupFormEmbedModal extends Component {
             dataOptionsString += ` data-${key}="${escapeHtml(value)}"`;
         }
 
-        return `<div style="${escapeHtml(style)}"><script src="${encodeURI(scriptUrl)}"${dataOptionsString}></script></div>`;
+        const code = `<div style="${escapeHtml(style)}"><script src="${encodeURI(scriptUrl)}"${dataOptionsString}></script></div>`;
+
+        if (preview && this.style === 'minimal') {
+            // Add background
+            return `<div style="position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);background-size: 16px 16px;background-position: 0 0, 8px 8px;;"></div>${code}`;
+        }
+
+        return code;
     }
 
     @task
     *copyText() {
         // Copy this.generatedCode tp the clipboard
-        const el = document.createElement('textarea');
-        el.value = this.generatedCode;
-        document.body.appendChild(el);
+        const el = document.getElementById('gh-signup-form-embed-code-input');
         el.select();
         document.execCommand('copy');
-        document.body.removeChild(el);
+        this.notifications.showNotification('Code copied to clipboard!');
 
         yield true;
         return true;
diff --git a/ghost/admin/app/components/settings/signup-form/style-select.js b/ghost/admin/app/components/settings/signup-form/style-select.js
index 46d5690ba0..c0061c9d5f 100644
--- a/ghost/admin/app/components/settings/signup-form/style-select.js
+++ b/ghost/admin/app/components/settings/signup-form/style-select.js
@@ -4,17 +4,11 @@ import {action} from '@ember/object';
 export default class StyleSelect extends Component {
     get options() {
         return [{
-            name: 'All in one',
-            description: 'A branded form ready to be dropped into any site.',
-            value: 'all-in-one',
-            icon: 'members-post',
-            icon_color: 'blue'
+            name: 'Branded',
+            value: 'all-in-one'
         }, {
             name: 'Minimal',
-            description: 'A simple form with just an email field.',
-            value: 'minimal',
-            icon: 'members-all',
-            icon_color: 'pink'
+            value: 'minimal'
         }];
     }