From d6f09ff42c407cfb569d9957192522c0823ed52e Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Sun, 8 Oct 2023 13:50:54 +0100
Subject: [PATCH] Polish form editor icons

---
 .../form-components/FormAboutSubmission.vue       |  7 ++-----
 .../components/form-components/FormCustomCode.vue | 15 ++-------------
 .../components/form-components/FormCustomSeo.vue  |  8 +++++---
 .../form-components/FormCustomization.vue         |  7 ++-----
 .../form-components/FormInformation.vue           |  7 ++-----
 .../form-components/FormIntegrations.vue          | 13 +++----------
 .../form-components/FormNotifications.vue         | 12 +++---------
 .../form-components/FormSecurityPrivacy.vue       | 13 ++-----------
 .../components/form-components/FormStructure.vue  | 15 ++-------------
 9 files changed, 23 insertions(+), 74 deletions(-)

diff --git a/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue b/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue
index 7780735..7878908 100644
--- a/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue
+++ b/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue
@@ -1,9 +1,9 @@
 <template>
-  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
+  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
     <template #title>
       <h3 class="font-semibold text-lg relative">
         <svg
-          class="h-5 w-5 inline mr-2 -mt-0.5" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
+          class="h-5 w-5 inline mr-2 -mt-0.5 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
           viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
             d="M4.83333 6.08333H9M4.83333 9H11.5M4.83333 14V15.9463C4.83333 16.3903 4.83333 16.6123 4.92436 16.7263C5.00352 16.8255 5.12356 16.8832 5.25045 16.8831C5.39636 16.8829 5.56973 16.7442 5.91646 16.4668L7.90434 14.8765C8.31043 14.5517 8.51347 14.3892 8.73957 14.2737C8.94017 14.1712 9.15369 14.0963 9.37435 14.051C9.62306 14 9.88308 14 10.4031 14H12.5C13.9001 14 14.6002 14 15.135 13.7275C15.6054 13.4878 15.9878 13.1054 16.2275 12.635C16.5 12.1002 16.5 11.4001 16.5 10V5.5C16.5 4.09987 16.5 3.3998 16.2275 2.86502C15.9878 2.39462 15.6054 2.01217 15.135 1.77248C14.6002 1.5 13.9001 1.5 12.5 1.5H5.5C4.09987 1.5 3.3998 1.5 2.86502 1.77248C2.39462 2.01217 2.01217 2.39462 1.77248 2.86502C1.5 3.3998 1.5 4.09987 1.5 5.5V10.6667C1.5 11.4416 1.5 11.8291 1.58519 12.147C1.81635 13.0098 2.49022 13.6836 3.35295 13.9148C3.67087 14 4.05836 14 4.83333 14Z"
@@ -235,9 +235,6 @@ export default {
   },
 
   methods: {
-    onClickCollapse(e) {
-      this.isCollapseOpen = e
-    },
     onChangeConfettiOnSubmission(val) {
       this.$set(this.form, 'confetti_on_submission', val)
       if(this.isMounted && val){
diff --git a/resources/js/components/open/forms/components/form-components/FormCustomCode.vue b/resources/js/components/open/forms/components/form-components/FormCustomCode.vue
index 4c3cf1a..bada8b1 100644
--- a/resources/js/components/open/forms/components/form-components/FormCustomCode.vue
+++ b/resources/js/components/open/forms/components/form-components/FormCustomCode.vue
@@ -1,8 +1,8 @@
 <template>
-  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
+  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
     <template #title>
       <h3 class="font-semibold text-lg">
-        <svg class="h-5 w-5 inline mr-2 -mt-1"
+        <svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors"
              :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M14 17.5L16.5 15L14 12.5M10 12.5L7.5 15L10 17.5M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
@@ -48,16 +48,5 @@ export default {
       }
     }
   },
-
-  watch: {},
-
-  mounted () {
-  },
-
-  methods: {
-    onClickCollapse (e) {
-      this.isCollapseOpen = e
-    }
-  }
 }
 </script>
diff --git a/resources/js/components/open/forms/components/form-components/FormCustomSeo.vue b/resources/js/components/open/forms/components/form-components/FormCustomSeo.vue
index fcec4ea..9f1fea5 100644
--- a/resources/js/components/open/forms/components/form-components/FormCustomSeo.vue
+++ b/resources/js/components/open/forms/components/form-components/FormCustomSeo.vue
@@ -1,9 +1,9 @@
 <template>
-  <collapse class="p-5 w-full border-b" :default-value="false">
+  <collapse class="p-5 w-full border-b" v-model="isCollapseOpen">
     <template #title>
       <h3 id="v-step-2" class="font-semibold text-lg">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-             class="h-5 w-5 inline text-gray-500 mr-2 -mt-1"
+             class="h-5 w-5 inline -ml-1 mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
         >
           <path stroke-linecap="round" stroke-linejoin="round"
                 d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
@@ -37,7 +37,9 @@ export default {
   components: { Collapse, ProTag },
   props: {},
   data () {
-    return {}
+    return {
+      isCollapseOpen: false
+    }
   },
   computed: {
     form: {
diff --git a/resources/js/components/open/forms/components/form-components/FormCustomization.vue b/resources/js/components/open/forms/components/form-components/FormCustomization.vue
index 87feaea..99bcceb 100644
--- a/resources/js/components/open/forms/components/form-components/FormCustomization.vue
+++ b/resources/js/components/open/forms/components/form-components/FormCustomization.vue
@@ -1,8 +1,8 @@
 <template>
-  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
+  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
     <template #title>
       <h3 class="font-semibold text-lg">
-        <svg class="h-5 w-5 inline mr-2 -mt-1" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M1.66667 9.99984C1.66667 14.6022 5.39763 18.3332 10 18.3332C11.3807 18.3332 12.5 17.2139 12.5 15.8332V15.4165C12.5 15.0295 12.5 14.836 12.5214 14.6735C12.6691 13.5517 13.5519 12.6689 14.6737 12.5212C14.8361 12.4998 15.0297 12.4998 15.4167 12.4998H15.8333C17.214 12.4998 18.3333 11.3805 18.3333 9.99984C18.3333 5.39746 14.6024 1.6665 10 1.6665C5.39763 1.6665 1.66667 5.39746 1.66667 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
           <path d="M5.83333 10.8332C6.29357 10.8332 6.66667 10.4601 6.66667 9.99984C6.66667 9.5396 6.29357 9.1665 5.83333 9.1665C5.3731 9.1665 5 9.5396 5 9.99984C5 10.4601 5.3731 10.8332 5.83333 10.8332Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
           <path d="M13.3333 7.49984C13.7936 7.49984 14.1667 7.12674 14.1667 6.6665C14.1667 6.20627 13.7936 5.83317 13.3333 5.83317C12.8731 5.83317 12.5 6.20627 12.5 6.6665C12.5 7.12674 12.8731 7.49984 13.3333 7.49984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
@@ -112,9 +112,6 @@ export default {
       window.$crisp.push(['do', 'chat:show'])
       window.$crisp.push(['do', 'chat:open'])
     },
-    onClickCollapse (e) {
-      this.isCollapseOpen = e
-    }
   }
 }
 </script>
diff --git a/resources/js/components/open/forms/components/form-components/FormInformation.vue b/resources/js/components/open/forms/components/form-components/FormInformation.vue
index d5423ec..26a53f4 100644
--- a/resources/js/components/open/forms/components/form-components/FormInformation.vue
+++ b/resources/js/components/open/forms/components/form-components/FormInformation.vue
@@ -1,8 +1,8 @@
 <template>
-  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
+  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
     <template #title>
       <h3 id="v-step-0" class="font-semibold text-lg">
-        <svg class="h-5 w-5 inline mr-2 -mt-1" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M10 13.3332V9.99984M10 6.6665H10.0083M18.3333 9.99984C18.3333 14.6022 14.6024 18.3332 10 18.3332C5.39763 18.3332 1.66667 14.6022 1.66667 9.99984C1.66667 5.39746 5.39763 1.6665 10 1.6665C14.6024 1.6665 18.3333 5.39746 18.3333 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
 
@@ -158,9 +158,6 @@ export default {
         this.form[property] = copyForm[property]
       })
       this.showCopyFormSettingsModal = false
-    },
-    onClickCollapse (e) {
-      this.isCollapseOpen = e
     }
   }
 }
diff --git a/resources/js/components/open/forms/components/form-components/FormIntegrations.vue b/resources/js/components/open/forms/components/form-components/FormIntegrations.vue
index dd3c373..7d7ac77 100644
--- a/resources/js/components/open/forms/components/form-components/FormIntegrations.vue
+++ b/resources/js/components/open/forms/components/form-components/FormIntegrations.vue
@@ -1,8 +1,8 @@
 <template>
-  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
+  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
     <template #title>
       <h3 class="font-semibold text-lg">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2"
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2 transition-colors"
           :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
           fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -69,13 +69,6 @@ export default {
 
   watch: {},
 
-  mounted() {
-  },
-
-  methods: {
-    onClickCollapse (e) {
-      this.isCollapseOpen = e
-    }
-  }
+  mounted() {},
 }
 </script>
diff --git a/resources/js/components/open/forms/components/form-components/FormNotifications.vue b/resources/js/components/open/forms/components/form-components/FormNotifications.vue
index 03d813d..016e874 100644
--- a/resources/js/components/open/forms/components/form-components/FormNotifications.vue
+++ b/resources/js/components/open/forms/components/form-components/FormNotifications.vue
@@ -1,8 +1,8 @@
 <template>
-  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
+  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
     <template #title>
       <h3 id="v-step-2" class="font-semibold text-lg">
-        <svg class="h-5 w-5 inline mr-2"
+        <svg class="h-5 w-5 inline mr-2 transition-colors"
              :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6M22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6M22 6L12 13L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
@@ -12,7 +12,7 @@
       </h3>
     </template>
 
-    <form-notifications-option />
+    <form-notifications-option class="mt-2" />
     <form-notifications-submission-confirmation />
     <form-notifications-slack />
     <form-notifications-discord />
@@ -55,11 +55,5 @@ export default {
 
   mounted () {
   },
-
-  methods: {
-    onClickCollapse (e) {
-      this.isCollapseOpen = e
-    }
-  }
 }
 </script>
diff --git a/resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue b/resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue
index 718ab84..1c54110 100644
--- a/resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue
+++ b/resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue
@@ -1,8 +1,8 @@
 <template>
-  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
+  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
     <template #title>
       <h3 id="v-step-2" class="font-semibold text-lg">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2"
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2 transition-colors"
           :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
           fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
           <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
@@ -47,14 +47,5 @@ export default {
       }
     }
   },
-  watch: {
-  },
-  mounted () {
-  },
-  methods: {
-    onClickCollapse (e) {
-      this.isCollapseOpen = e
-    }
-  }
 }
 </script>
diff --git a/resources/js/components/open/forms/components/form-components/FormStructure.vue b/resources/js/components/open/forms/components/form-components/FormStructure.vue
index 5b8017b..70eee36 100644
--- a/resources/js/components/open/forms/components/form-components/FormStructure.vue
+++ b/resources/js/components/open/forms/components/form-components/FormStructure.vue
@@ -1,9 +1,9 @@
 <template>
-  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
+  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
     <template #title>
       <div class="flex">
         <h3 id="v-step-1" class="font-semibold block text-lg">
-          <svg class="h-5 w-5 inline mr-2 -mt-1" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M13.8333 7.33333C14.7668 7.33333 15.2335 7.33333 15.59 7.15168C15.9036 6.99189 16.1586 6.73692 16.3183 6.42332C16.5 6.0668 16.5 5.60009 16.5 4.66667V4.16667C16.5 3.23325 16.5 2.76654 16.3183 2.41002C16.1586 2.09641 15.9036 1.84145 15.59 1.68166C15.2335 1.5 14.7668 1.5 13.8333 1.5L4.16667 1.5C3.23325 1.5 2.76654 1.5 2.41002 1.68166C2.09641 1.84144 1.84144 2.09641 1.68166 2.41002C1.5 2.76654 1.5 3.23325 1.5 4.16667L1.5 4.66667C1.5 5.60009 1.5 6.0668 1.68166 6.42332C1.84144 6.73692 2.09641 6.99189 2.41002 7.15168C2.76654 7.33333 3.23325 7.33333 4.16667 7.33333L13.8333 7.33333Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
             <path d="M13.8333 16.5C14.7668 16.5 15.2335 16.5 15.59 16.3183C15.9036 16.1586 16.1586 15.9036 16.3183 15.59C16.5 15.2335 16.5 14.7668 16.5 13.8333V13.3333C16.5 12.3999 16.5 11.9332 16.3183 11.5767C16.1586 11.2631 15.9036 11.0081 15.59 10.8483C15.2335 10.6667 14.7668 10.6667 13.8333 10.6667L4.16667 10.6667C3.23325 10.6667 2.76654 10.6667 2.41002 10.8483C2.09641 11.0081 1.84144 11.2631 1.68166 11.5767C1.5 11.9332 1.5 12.3999 1.5 13.3333L1.5 13.8333C1.5 14.7668 1.5 15.2335 1.68166 15.59C1.84144 15.9036 2.09641 16.1586 2.41002 16.3183C2.76654 16.5 3.23325 16.5 4.16667 16.5H13.8333Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
           </svg> Form Structure
@@ -38,17 +38,6 @@ export default {
         this.$store.commit('open/working_form/set', value)
       }
     }
-  },
-
-  watch: {},
-
-  mounted () {
-  },
-
-  methods: {
-    onClickCollapse (e) {
-      this.isCollapseOpen = e
-    }
   }
 }
 </script>