form color reset (#577)

* form color reset * fix link color --------- Co-authored-by: Julien Nahum <[email protected]>
JhumanJ · Sep 20, 2024 · 33ad2d4 · 33ad2d4
1 parent 5ab3477
commit 33ad2d4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -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,