Added colour picker to signup embed - AdminX (#18037)

refs https://github.com/TryGhost/Product/issues/3819

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 9e5d762</samp>

This pull request adds a color picker feature to the membership
settings, which lets the user customize the appearance of the embed
signup form. It modifies the `EmbedSignupFormModal` and
`EmbedSignupSidebar` components and uses the `ColorPicker` component
from the admin-x-ds library.

apps/admin-x-settings/src/components/settings/membership/embedSignup/EmbedSignupFormModal.tsx

@@ -26,6 +26,7 @@ const EmbedSignupFormModal = NiceModal.create(() => {
     const {localSettings, siteData} = useSettingGroup();
     const [accentColor, title, description, locale, labs, icon] = getSettingValues<string>(localSettings, ['accent_color', 'title', 'description', 'locale', 'labs', 'icon']);
     const {data: labels} = useBrowseLabels();
+    const [customColor, setCustomColor] = useState<{active: boolean}>({active: false});
 
     if (labs) {
         i18nEnabled = JSON.parse(labs).i18n;
@@ -103,6 +104,7 @@ const EmbedSignupFormModal = NiceModal.create(() => {
                 />
                 <EmbedSignupSidebar
                     accentColor={accentColor}
+                    customColor={customColor}
                     embedScript={embedScript}
                     handleColorToggle={handleColorToggle}
                     handleCopyClick={handleCopyClick}
@@ -113,6 +115,7 @@ const EmbedSignupFormModal = NiceModal.create(() => {
                     selectedColor={selectedColor}
                     selectedLabels={selectedLabels}
                     selectedLayout={selectedLayout}
+                    setCustomColor={setCustomColor}
                 />
             </div>
         </Modal>

apps/admin-x-settings/src/components/settings/membership/embedSignup/EmbedSignupSidebar.tsx

@@ -1,5 +1,6 @@
 import Button from '../../../../admin-x-ds/global/Button';
 import ColorIndicator from '../../../../admin-x-ds/global/form/ColorIndicator';
+import ColorPicker from '../../../../admin-x-ds/global/form/ColorPicker';
 import Form from '../../../../admin-x-ds/global/form/Form';
 import Heading from '../../../../admin-x-ds/global/Heading';
 import MultiSelect, {MultiSelectOption} from '../../../../admin-x-ds/global/form/MultiSelect';
@@ -26,6 +27,8 @@ type SidebarProps = {
     selectedLayout : string;
     handleCopyClick: () => void;
     isCopied: boolean;
+    setCustomColor?: React.Dispatch<React.SetStateAction<{active: boolean}>>;
+    customColor?: {active: boolean};
 };
 
 const EmbedSignupSidebar: React.FC<SidebarProps> = ({selectedLayout, 
@@ -38,6 +41,8 @@ const EmbedSignupSidebar: React.FC<SidebarProps> = ({selectedLayout,
     embedScript, 
     handleLayoutSelect,
     handleCopyClick,
+    customColor,
+    setCustomColor,
     isCopied}) => {
     const labelOptions = labels ? labels.map((l) => {
         return {
@@ -90,13 +95,34 @@ const EmbedSignupSidebar: React.FC<SidebarProps> = ({selectedLayout,
                             title='Background color'
                             value={selectedColor}
                             onSwatchChange={(e) => {
-                                if (e) {
+                                if (e && setCustomColor) {
+                                    handleColorToggle(e);
+                                    setCustomColor({active: false});
+                                }
+                            }}
+                            onTogglePicker={() => {
+                                if (setCustomColor) {
+                                    setCustomColor({active: true});
+                                }
+                            }}
+                        />
+                    }
+
+                    {
+                        selectedLayout === 'all-in-one' && customColor?.active &&
+                        <ColorPicker 
+                            clearButtonValue={'#d74780'}
+                            eyedropper={false}
+                            hexValue={selectedColor || '#d74780'}
+                            onChange={(e) => {
+                                if (setCustomColor && e) {
+                                    setCustomColor({active: true});
                                     handleColorToggle(e);
                                 }
                             }}
-                            onTogglePicker={() => {}}
                         />
                     }
+
                     <MultiSelect
                         hint='Will be applied to all members signing up via this form'
                         options={labelOptions}