From 33ad2d41b88bf3dd5ef4a41703facee042d7973e Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Fri, 20 Sep 2024 11:02:06 +0100
Subject: [PATCH] form color reset (#577)

* form color reset

* fix link color

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 .../form-components/FormCustomization.vue      | 18 ++++++++++++++++--
 client/composables/forms/initForm.js           |  3 ++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/client/components/open/forms/components/form-components/FormCustomization.vue b/client/components/open/forms/components/form-components/FormCustomization.vue
index 8ddfc1ab..71cc976f 100644
--- a/client/components/open/forms/components/form-components/FormCustomization.vue
+++ b/client/components/open/forms/components/form-components/FormCustomization.vue
@@ -141,8 +141,20 @@
     <color-input
       name="color"
       :form="form"
-      label="Color (for buttons & inputs border)"
-    />
+      >
+      <template #help>
+        <InputHelp>
+          <span class="text-gray-500">
+            Color (for buttons & inputs border) - <a
+              class="text-blue-500"
+              href="#"
+              @click.prevent="form.color = DEFAULT_COLOR"
+            >Reset</a>
+          </span>
+        </InputHelp>
+      </template>
+    </color-input>
+
     <toggle-switch-input
       name="hide_title"
       :form="form"
@@ -204,6 +216,8 @@ import { useWorkingFormStore } from "../../../../../stores/working_form"
 import EditorOptionsPanel from "../../../editors/EditorOptionsPanel.vue"
 import GoogleFontPicker from "../../../editors/GoogleFontPicker.vue"
 import ProTag from "~/components/global/ProTag.vue"
+import { DEFAULT_COLOR } from "@/composables/forms/initForm"
+
 
 const workingFormStore = useWorkingFormStore()
 const subscriptionModalStore = useSubscriptionModalStore()
diff --git a/client/composables/forms/initForm.js b/client/composables/forms/initForm.js
index 6d1f8a7a..ff8c5291 100644
--- a/client/composables/forms/initForm.js
+++ b/client/composables/forms/initForm.js
@@ -1,4 +1,5 @@
 import { generateUUID } from "~/lib/utils.js"
+export const DEFAULT_COLOR = '#3B82F6'
 
 export const initForm = (defaultValue = {}, withDefaultProperties = false) => {
   return useForm({
@@ -13,7 +14,7 @@ export const initForm = (defaultValue = {}, withDefaultProperties = false) => {
     theme: "default",
     width: "centered",
     dark_mode: "auto",
-    color: "#3B82F6",
+    color: DEFAULT_COLOR,
     hide_title: false,
     no_branding: false,
     uppercase_labels: false,