E45fd new UI form editor (#17)

* New UI - Form Editor

* edit & create save form changes

* form editor changes

* form editor changes

* last updated human readable

* change nt-blue to blue for icon

* change icons color if block collapse open/close

* Working on form editor

* More polishing

* Finished working on the new form editor design

Co-authored-by: Chirag Chhatrala <chirag@notionforms.io>
Co-authored-by: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>

app/Http/Resources/FormResource.php

@@ -45,7 +45,8 @@ class FormResource extends JsonResource
             'visibility' => $this->visibility,
             'notification_emails' => $this->notification_emails,
             'slack_webhook_url' => $this->slack_webhook_url,
-            'removed_properties' => $this->removed_properties 
+            'removed_properties' => $this->removed_properties, 
+            'last_edited_human' => $this->updated_at->diffForHumans()
         ] : [];
 
         $baseData = $this->getFilteredFormData(parent::toArray($request), $this->userIsFormOwner());

package.json

@@ -65,7 +65,7 @@
     "resolve-url-loader": "^3.1.4",
     "sass": "^1.37.5",
     "sass-loader": "^10.2.0",
-    "tailwindcss": "^3.1.8",
+    "tailwindcss": "^3.2.0",
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.14"
   }

resources/js/components/Modal.vue

@@ -23,7 +23,7 @@
                     leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         >
           <div v-if="show"
-               class="modal-content bg-white dark:bg-notion-dark rounded-lg overflow-y-scroll shadow-xl transform transition-all sm:w-full"
+               class="modal-content bg-white dark:bg-notion-dark rounded-lg overflow-y-auto shadow-xl transform transition-all sm:w-full"
                :class="maxWidthClass"
           >
             <div class="bg-white relative dark:bg-notion-dark p-4 md:p-6">

resources/js/components/Navbar.vue

@@ -9,7 +9,7 @@
               class="ml-2 text-md hidden sm:inline text-black dark:text-white"
             >
               {{ appName }}</span><span
-            class="bg-gray-100 text-gray-600 font-semibold inline-block mb-4 ml-1 px-3 rounded-full text-black text-xs tracking-wider"
+            class="bg-gray-100 text-gray-600 font-semibold inline-block ml-1 px-2 rounded-full text-black text-xs tracking-wider"
           >BETA</span>
           </router-link>
           <workspace-dropdown class="ml-6"/>

resources/js/components/common/Button.vue

@@ -87,12 +87,60 @@ export default {
         }
       } else if (this.color === 'outline-blue') {
         return {
-          main: 'bg-transparent border-2 border-blue-600',
+          main: 'bg-transparent border border-blue-600',
           hover: 'hover:bg-blue-600',
           ring: 'focus:ring-blue-500',
           'ring-offset': 'focus:ring-offset-blue-200',
           text: 'text-blue-600 hover:text-white',
         }
+      } else if (this.color === 'red') {
+        return {
+          main: 'bg-red-600',
+          hover: 'hover:bg-red-700',
+          ring: 'focus:ring-red-500',
+          'ring-offset': 'focus:ring-offset-red-200',
+          text: 'text-white',
+        }
+      } else if (this.color === 'gray') {
+        return {
+          main: 'bg-gray-600',
+          hover: 'hover:bg-gray-700',
+          ring: 'focus:ring-gray-500',
+          'ring-offset': 'focus:ring-offset-gray-200',
+          text: 'text-white',
+        }
+      } else if (this.color === 'light-gray') {
+        return {
+          main: 'bg-gray-50 border border-gray-300',
+          hover: 'hover:bg-gray-100',
+          ring: 'focus:ring-gray-500',
+          'ring-offset': 'focus:ring-offset-gray-300',
+          text: 'text-gray-700',
+        }
+      } else if (this.color === 'green') {
+        return {
+          main: 'bg-green-600',
+          hover: 'hover:bg-green-700',
+          ring: 'focus:ring-green-500',
+          'ring-offset': 'focus:ring-offset-green-200',
+          text: 'text-white',
+        }
+      } else if (this.color === 'yellow') {
+        return {
+          main: 'bg-yellow-600',
+          hover: 'hover:bg-yellow-700',
+          ring: 'focus:ring-yellow-500',
+          'ring-offset': 'focus:ring-offset-yellow-200',
+          text: 'text-white',
+        }
+      } else if (this.color === 'white') {
+        return {
+          main: 'bg-transparent border border-gray-300',
+          hover: 'hover:bg-gray-200',
+          ring: 'focus:ring-white-500',
+          'ring-offset': 'focus:ring-offset-white-200',
+          text: 'text-gray-700',
+        }
       }
       console.error('Unknown color')
     },

resources/js/components/common/Collapse.vue

@@ -5,8 +5,8 @@
         <slot name="title" />
       </div>
       <div class="text-gray-400 hover:text-gray-600 absolute -right-2 -top-1 cursor-pointer p-2" @click="trigger">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition transform duration-500" :class="{'rotate-180':showContent}" viewBox="0 0 20 20" fill="currentColor">
+        <svg class="h-3 w-3 transition transform duration-500" :class="{'rotate-180':showContent}" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clip-rule="evenodd" />
+          <path d="M1 1L7 7L13 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
     </div>
@@ -34,6 +34,7 @@ export default {
   methods: {
     trigger () {
       this.showContent = !this.showContent
+      this.$emit('click', this.showContent)
     }
   }
 }

resources/js/components/forms/CheckboxInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="wrapperClass">
-    <v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled" :name="name" @input="$emit('input',$event)" :size="size">
+    <v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled" :name="name" @input="$emit('input',$event)">
       <slot name="label">
         {{ label }} <span v-if="required" class="text-red-500 required-dot">*</span>
       </slot>

resources/js/components/open/forms/OpenCompleteForm.vue

@@ -101,7 +101,7 @@
           <a href="https://opnform.com"
              class="text-gray-400 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-500 cursor-pointer hover:underline text-xs"
              target="_blank"
-          >Powered by OpnForm</a>
+          >Powered by <span class="font-semibold">OpnForm</span></a>
         </p>
       </div>
       <div v-else key="submitted" class="px-2">

resources/js/components/open/forms/components/FormEditor.vue

@@ -1,23 +1,46 @@
 <template>
-  <div v-if="form" id="form-editor" class="w-full flex border-t flex-grow relative overflow-x-hidden">
+  <div v-if="form" id="form-editor" class="w-full flex flex-grow relative overflow-x-hidden">
     <!-- Form fields selection -->
-    <v-tour name="tutorial" :steps="steps" />
+    <v-tour name="tutorial" :steps="steps"/>
     <div class="w-full md:w-1/2 lg:w-2/5 border-r relative overflow-y-scroll md:max-w-sm flex-shrink-0">
-      <div class="p-5 bg-blue-50 border-b text-nt-blue-dark md:hidden">
+      <div class="p-4 bg-blue-50 border-b text-nt-blue-dark md:hidden">
         We suggest you create this form on a device with a larger screen such as computed. That will allow you
         to preview your form changes.
       </div>
-      <form-information />
+      <div class="p-4 pb-0">
-      <form-structure />
+        <a href="#" @click.prevent="$router.back()" class="flex text-blue mb-2 font-semibold text-sm">
-      <form-customization />
+          <svg class="w-3 h-3 text-blue mt-1 mr-1" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <form-about-submission />
+            <path d="M5 9L1 5L5 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
-      <form-notifications />
+                  stroke-linejoin="round"/>
-      <form-security-privacy />
+          </svg>
-      <form-custom-code />
+          Go back
-      <form-integrations />
+        </a>
+        <h3 class="font-semibold text-lg">{{ form.title }}</h3>
+        <small v-if="isEdit" class="text-gray-500">Edited {{ form.last_edited_human }}</small>
+      </div>
+
+      <div class="p-4 border-b sticky top-0 z-10 bg-white">
+        <v-button v-track.save_form_click class="hidden md:block w-full" :loading="updateFormLoading"
+                  @click="saveForm">
+          <svg class="w-4 h-4 text-white inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M17 21V13H7V21M7 3V8H15M19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16L21 8V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+
+          Save changes
+        </v-button>
+      </div>
+
+      <form-information/>
+      <form-structure/>
+      <form-customization/>
+      <form-about-submission/>
+      <form-notifications/>
+      <form-security-privacy/>
+      <form-custom-code/>
+      <form-integrations/>
     </div>
 
-    <form-editor-preview />
+    <form-editor-preview/>
 
     <!-- Form Error Modal -->
     <form-error-modal :show="showFormErrorModal"
@@ -26,12 +49,12 @@
     />
   </div>
   <div v-else class="flex justify-center items-center">
-    <loader class="w-6 h-6" />
+    <loader class="w-6 h-6"/>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import {mapGetters} from 'vuex'
 import FormErrorModal from './form-components/FormErrorModal'
 import FormInformation from './form-components/FormInformation'
 import FormStructure from './form-components/FormStructure'
@@ -42,6 +65,7 @@ import FormNotifications from './form-components/FormNotifications'
 import FormIntegrations from './form-components/FormIntegrations'
 import FormEditorPreview from './form-components/FormEditorPreview'
 import FormSecurityPrivacy from './form-components/FormSecurityPrivacy'
+import saveUpdateAlert from '../../../../mixins/forms/saveUpdateAlert'
 
 export default {
   name: 'FormEditor',
@@ -57,16 +81,21 @@ export default {
     FormErrorModal,
     FormSecurityPrivacy
   },
+  mixins: [saveUpdateAlert],
   props: {
-    validationErrorResponse: {
+    isEdit: {
       required: false,
-      type: Object
+      type: Boolean,
+      default: false
     },
   },
 
-  data () {
+  data() {
     return {
-      showFormErrorModal: false
+      showFormErrorModal: false,
+      validationErrorResponse: null,
+      updateFormLoading: false,
+      createdFormId: null
     }
   },
 
@@ -75,15 +104,21 @@ export default {
       user: 'auth/user'
     }),
     form: {
-      get () {
+      get() {
         return this.$store.state['open/working_form'].content
       },
       /* We add a setter */
-      set (value) {
+      set(value) {
         this.$store.commit('open/working_form/set', value)
       }
     },
-    steps () {
+    createdForm() {
+      return this.$store.getters['open/forms/getById'](this.createdFormId)
+    },
+    workspace() {
+      return this.$store.getters['open/workspaces/getCurrent']()
+    },
+    steps() {
       return [
         {
           target: '#v-step-0',
@@ -123,19 +158,78 @@ export default {
 
   watch: {},
 
-  mounted () {
+  mounted() {
     this.$emit('mounted')
     this.startTour()
   },
 
   methods: {
-    startTour () {
+    startTour() {
       if (!this.user.has_forms) {
         this.$tours.tutorial.start()
       }
     },
-    showValidationErrors () {
+    showValidationErrors() {
       this.showFormErrorModal = true
+    },
+    saveForm() {
+      if (this.isEdit) {
+        this.saveFormEdit()
+      } else {
+        this.saveFormCreate()
+      }
+    },
+    saveFormEdit() {
+      if (this.updateFormLoading) return
+
+      this.updateFormLoading = true
+      this.validationErrorResponse = null
+      this.form.put('/api/open/forms/{id}/'.replace('{id}', this.form.id)).then((response) => {
+        const data = response.data
+        this.$store.commit('open/forms/addOrUpdate', data.form)
+        this.$router.push({name: 'forms.show', params: {slug: this.form.slug}})
+        this.$logEvent('form_saved', {form_id: this.form.id, form_slug: this.form.slug})
+        this.displayFormModificationAlert(data)
+      }).catch((error) => {
+        if (error.response.status === 422) {
+          this.validationErrorResponse = error.response.data
+          this.showValidationErrors()
+        }
+      }).finally(() => {
+        this.updateFormLoading = false
+      })
+    },
+    saveFormCreate() {
+      if (this.updateFormLoading) return
+      this.form.workspace_id = this.workspace.id
+      this.validationErrorResponse = null
+
+      this.updateFormLoading = true
+      this.form.post('/api/open/forms').then((response) => {
+        this.$store.commit('open/forms/addOrUpdate', response.data.form)
+        this.createdFormId = response.data.form.id
+
+        this.$logEvent('form_created', {form_id: response.data.form.id, form_slug: response.data.form.slug})
+        this.$getCrisp().push(['set', 'session:event', [[['form_created', {
+          form_id: response.data.form.id,
+          form_slug: response.data.form.slug
+        }, 'blue']]]])
+        this.displayFormModificationAlert(response.data)
+        this.$router.push({
+          name: 'forms.show',
+          params: {
+            slug: this.createdForm.slug,
+            new_form: response.data.users_first_form
+          }
+        })
+      }).catch((error) => {
+        if (error.response && error.response.status === 422) {
+          this.validationErrorResponse = error.response.data
+          this.showValidationErrors()
+        }
+      }).finally(() => {
+        this.updateFormLoading = false
+      })
     }
   }
 }

resources/js/components/open/forms/components/FormFieldsEditor.vue

@@ -1,8 +1,5 @@
 <template>
   <div>
-    <v-button class="w-full mb-5" @click="showAddBlock=true">
-      Add Block
-    </v-button>
     <add-form-block-modal :form-blocks="formFields" :show="showAddBlock" @block-added="blockAdded"
                           @close="showAddBlock=false"
     />
@@ -16,28 +13,25 @@
       <form-block-options-modal :field="formFields[selectedFieldIndex]"
                                 :show="isNotAFormField(formFields[selectedFieldIndex]) && showEditFieldModal"
                                 :form="form"
-                                @remove-block="removeBlock(selectedFieldIndex)" 
+                                @remove-block="removeBlock(selectedFieldIndex)"
                                 @duplicate-block="duplicateBlock(selectedFieldIndex)" @close="closeInputOptionModal"
       />
     </template>
 
     <draggable v-model="formFields"
-               class="border bg-white dark:bg-notion-dark-light border-nt-blue-light shadow rounded-md w-full mx-auto transition-colors overflow-hidden"
+               class="bg-white overflow-hidden dark:bg-notion-dark-light rounded-md w-full mx-auto border transition-colors"
-               ghost-class="bg-nt-blue-lighter" handle=".draggable" :animation="200"
+               ghost-class="bg-gray-50" handle=".draggable" :animation="200"
     >
       <div v-for="(field,index) in formFields" :key="field.id"
-           class="border-nt-blue-light w-full mx-auto transition-colors bg-white dark:bg-notion-dark-light"
+           class="w-full mx-auto transition-colors bg-white dark:bg-notion-dark-light"
            :class="{'bg-gray-200 dark:bg-gray-800':field.hidden, 'border-b': (index!== formFields.length -1), 'bg-blue-50 dark:bg-blue-900':field && field.type==='nf-page-break'}"
       >
-        <div v-if="field" class="flex items-center space-x-1 group py-2 pr-4">
+        <div v-if="field" class="flex items-center space-x-1 group py-2 pr-4 relative">
           <!-- Drag handler -->
           <div class="cursor-move draggable p-2 -mr-2">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24"
+            <svg class="h-4 w-4 text-gray-400" viewBox="0 0 18 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-                 stroke="currentColor"
+              <path d="M1.5 1.0835H16.5M1.5 6.91683H16.5" stroke="currentColor" stroke-width="1.67"
-            >
+                    stroke-linecap="round" stroke-linejoin="round"/>
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-              />
             </svg>
           </div>
           <!-- Field name and type -->
@@ -69,61 +63,105 @@
           </div>
           <!-- Field options -->
 
-          <div class="flex-grow" v-if="['files'].includes(field.type) || field.type.startsWith('nf-')">
+          <!--          <div class="flex-grow" v-if="['files'].includes(field.type) || field.type.startsWith('nf-')">-->
-            <pro-tag/>
+          <!--            <pro-tag/>-->
-          </div>
+          <!--          </div>-->
 
-          <button v-if="!field.type.startsWith('nf-')"
+          <template v-if="removing == field.id">
-                  class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-1 hidden md:group-hover:block"
+            <div class="flex text-sm items-center">
-                  :class="{'text-blue-500': !field.hidden, 'text-gray-500': field.hidden}"
+            Remove block? <v-button class="inline ml-1" color="red" size="small" @click="removeBlock(index)">Yes</v-button> <v-button @click="removing=false" class="inline ml-1" color="light-gray" size="small">No</v-button>
-                  @click="toggleHidden(field)"
-          >
-            <template v-if="!field.hidden">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
-                <path fill-rule="evenodd"
-                      d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
-                      clip-rule="evenodd"
-                />
-              </svg>
-            </template>
-            <template v-else>
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd"
-                      d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
-                      clip-rule="evenodd"
-                />
-                <path
-                  d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"
-                />
-              </svg>
-            </template>
-          </button>
-          <button v-if="!field.type.startsWith('nf-')"
-                  class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-1 hidden md:group-hover:block"
-                  @click="toggleRequired(field)"
-          >
-            <div class="w-6 h-6 text-center font-bold text-3xl"
-                 :class="{'text-red-500': field.required, 'text-gray-500': !field.required}"
-            >
-              *
             </div>
-          </button>
+          </template>
-          <button class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-1"
+          <template v-else>
-                  @click="editOptions(index)"
+            <button v-if="!field.type.startsWith('nf-')"
-          >
+                    class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2 hidden group-hover:md:block"
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-nt-blue" viewBox="0 0 20 20"
+                    :class="{'text-blue-500': !field.hidden, 'text-gray-500': field.hidden}"
-                 fill="currentColor"
+                    @click="toggleHidden(field)"
             >
-              <path fill-rule="evenodd"
+              <template v-if="!field.hidden">
-                    d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
+                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    clip-rule="evenodd"
+                  <path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" stroke="currentColor"
-              />
+                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
+                  <path
-          </button>
+                    d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </template>
+              <template v-else>
+                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <g clip-path="url(#clip0_1027_7292)">
+                    <path
+                      d="M9.9 4.24C10.5883 4.07888 11.2931 3.99834 12 4C19 4 23 12 23 12C22.393 13.1356 21.6691 14.2047 20.84 15.19M14.12 14.12C13.8454 14.4147 13.5141 14.6512 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1752 15.0074 10.8016 14.8565C10.4281 14.7056 10.0887 14.481 9.80385 14.1962C9.51897 13.9113 9.29439 13.5719 9.14351 13.1984C8.99262 12.8248 8.91853 12.4247 8.92563 12.0219C8.93274 11.6191 9.02091 11.2218 9.18488 10.8538C9.34884 10.4859 9.58525 10.1546 9.88 9.88M1 1L23 23M17.94 17.94C16.2306 19.243 14.1491 19.9649 12 20C5 20 1 12 1 12C2.24389 9.6819 3.96914 7.65661 6.06 6.06L17.94 17.94Z"
+                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_1027_7292">
+                      <rect width="24" height="24" fill="white"/>
+                    </clipPath>
+                  </defs>
+                </svg>
+
+              </template>
+            </button>
+            <button v-if="!field.type.startsWith('nf-')"
+                    class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2 hidden md:group-hover:block"
+                    @click="toggleRequired(field)"
+            >
+              <div class="w-4 h-4 text-center font-bold text-3xl"
+                   :class="{'text-red-500': field.required, 'text-gray-500': !field.required}"
+              >
+                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M12 2V12M12 12V22M12 12L4.93 4.93M12 12L19.07 19.07M12 12H2M12 12H22M12 12L4.93 19.07M12 12L19.07 4.93"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+            </button>
+            <button
+              class="hover:bg-red-50 text-gray-500 hover:text-red-600 rounded transition-colors cursor-pointer p-2 hidden md:group-hover:block"
+              @click="removing=field.id"
+            >
+              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+
+            </button>
+            <button class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2"
+                    @click="editOptions(index)">
+              <svg class="h-4 w-4 text-blue-600" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                   xmlns="http://www.w3.org/2000/svg">
+                <g clip-path="url(#clip0_1027_7210)">
+                  <path
+                    d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path
+                    d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </g>
+                <defs>
+                  <clipPath id="clip0_1027_7210">
+                    <rect width="24" height="24" fill="white"/>
+                  </clipPath>
+                </defs>
+              </svg>
+            </button>
+          </template>
         </div>
       </div>
     </draggable>
+
+    <v-button
+      class="w-full mt-4" color="light-gray"
+      @click="showAddBlock=true">
+      <svg class="w-4 h-4 text-nt-blue inline mr-1 -mt-1" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7.00001 1.1665V12.8332M1.16667 6.99984H12.8333" stroke="currentColor" stroke-width="1.67"
+              stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      Add block
+    </v-button>
+
   </div>
 </template>
 
@@ -135,10 +173,12 @@ import FormBlockOptionsModal from '../fields/FormBlockOptionsModal'
 import ProTag from '../../../common/ProTag'
 import clonedeep from 'clone-deep'
 import EditableDiv from '../../../common/EditableDiv'
+import VButton from "../../../common/Button";
 
 export default {
   name: 'FormFieldsEditor',
   components: {
+    VButton,
     ProTag,
     FormBlockOptionsModal,
     AddFormBlockModal,
@@ -152,7 +192,8 @@ export default {
       formFields: [],
       selectedFieldIndex: null,
       showEditFieldModal: false,
-      showAddBlock: false
+      showAddBlock: false,
+      removing: null
     }
   },
 
@@ -226,7 +267,7 @@ export default {
     },
     init() {
       if (this.$route.name === 'forms.create') {  // Set Default fields
-        this.formFields = (this.form.properties.length > 0) ? clonedeep(this.form.properties): this.getDefaultFields()
+        this.formFields = (this.form.properties.length > 0) ? clonedeep(this.form.properties) : this.getDefaultFields()
       } else {
         this.formFields = clonedeep(this.form.properties).map((field) => {
           // Add more field properties

resources/js/components/open/forms/components/FormSubmissions.vue

@@ -129,7 +129,7 @@ export default {
       this.formInitDone = true
 
       this.properties = clonedeep(this.form.properties)
-      this.removed_properties = clonedeep(this.form.removed_properties)
+      this.removed_properties = (this.form.removed_properties) ? clonedeep(this.form.removed_properties) : []
 
       // Get display columns from local storage
       const tmpColumns = window.localStorage.getItem('display-columns-formid-'+this.form.id)

resources/js/components/open/forms/components/form-components/AddFormBlockModal.vue

@@ -198,12 +198,6 @@
       </div>
 
     </div>
-
-    <div class="flex justify-end mt-4">
-      <v-button color="gray" shade="light" @click="close">
-        Close
-      </v-button>
-    </div>
   </modal>
 </template>
 

resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue

@@ -1,17 +1,22 @@
 <template>
-  <collapse class="p-5 w-full" :default-value="true">
+  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
     <template #title>
       <h3 class="font-semibold text-lg relative">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline text-gray-500 mr-2 -mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <svg
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+          class="h-5 w-5 inline mr-2 -mt-0.5" :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"
+            stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
-        About Submission
+
+        About Submissions
       </h3>
     </template>
 
     <text-input name="submit_button_text" class="mt-4"
                 :form="form"
-                label="Text of submit button"
+                label="Text of Submit Button"
                 :required="true"
     />
 
@@ -24,13 +29,13 @@
       <template #selected="{option,optionName}">
         <div class="flex items-center truncate mr-6">
           {{ optionName }}
-          <pro-tag v-if="option === 'update'" class="ml-2" />
+          <pro-tag v-if="option === 'update'" class="ml-2"/>
         </div>
       </template>
       <template #option="{option, selected}">
         <span class="flex hover:text-white">
           <p class="flex-grow hover:text-white">
-            {{ option.name }} <template v-if="option.value === 'update'"><pro-tag /></template>
+            {{ option.name }} <template v-if="option.value === 'update'"><pro-tag/></template>
           </p>
           <span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-4 dark:text-white">
             <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -53,7 +58,9 @@
         <div class="-mt-3 mb-3 text-gray-400 dark:text-gray-500">
           <small>If the submission has the same value(s) as a previous one for the selected
             column(s), we will update it, instead of creating a new one.
-            <a href="#" @click.prevent="$getCrisp().push(['do', 'helpdesk:article:open', ['en', 'how-to-update-a-page-on-form-submission-1t1jwmn']])">More info here.</a>
+            <a href="#"
+               @click.prevent="$getCrisp().push(['do', 'helpdesk:article:open', ['en', 'how-to-update-a-page-on-form-submission-1t1jwmn']])">More
+              info here.</a>
           </small>
         </div>
       </div>
@@ -68,13 +75,13 @@
       <template #selected="{option,optionName}">
         <div class="flex items-center truncate mr-6">
           {{ optionName }}
-          <pro-tag v-if="option === 'redirect'" class="ml-2" />
+          <pro-tag v-if="option === 'redirect'" class="ml-2"/>
         </div>
       </template>
       <template #option="{option, selected}">
         <span class="flex hover:text-white">
           <p class="flex-grow hover:text-white">
-            {{ option.name }} <template v-if="option.value === 'redirect'"><pro-tag /></template>
+            {{ option.name }} <template v-if="option.value === 'redirect'"><pro-tag/></template>
           </p>
           <span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-4">
             <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -95,11 +102,7 @@
       />
     </template>
     <template v-else>
-      <pro-tag class="float-right" />
+      <pro-tag class="float-right"/>
-      <checkbox-input name="use_captcha" :form="form" class="mt-4"
-                      label="Protect your form with a Captcha"
-                      help="If enabled we will make sure respondant is a human"
-      />
       <checkbox-input name="re_fillable" :form="form" class="mt-4"
                       label="Allow users to fill the form again"
       />
@@ -110,12 +113,12 @@
       />
       <rich-text-area-input name="submitted_text"
                             :form="form"
-                            label="Text after submission"
+                            label="Text After Submission"
                             :required="false"
       />
       <date-input :with-time="true" name="closes_at"
                   :form="form"
-                  label="Closing date"
+                  label="Closing Date"
                   help="If filled, then the form won't accept submissions after the given date"
                   :required="false"
       />
@@ -126,11 +129,12 @@
                             :required="false"
       />
       <text-input name="max_submissions_count" native-type="number" :min="1" :form="form"
-                  label="Max number of submissions"
+                  label="Max. Number of Submissions"
                   help="If filled, the form will only accept X number of submissions"
                   :required="false"
       />
-      <rich-text-area-input v-if="form.max_submissions_count && form.max_submissions_count > 0" name="max_submissions_reached_text"
+      <rich-text-area-input v-if="form.max_submissions_count && form.max_submissions_count > 0"
+                            name="max_submissions_reached_text"
                             :form="form"
                             label="Max Submissions reached text"
                             help="This message will be shown when the form will have the maximum number of submissions"
@@ -146,22 +150,22 @@ import ProTag from '../../../../common/ProTag'
 import VTransition from '../../../../common/transitions/VTransition'
 
 export default {
-  components: { Collapse, ProTag, VTransition },
+  components: {Collapse, ProTag, VTransition},
-  props: {
+  props: {},
-  },
+  data() {
-  data () {
     return {
-      submissionOptions: {}
+      submissionOptions: {},
+      isCollapseOpen: true
     }
   },
 
   computed: {
     form: {
-      get () {
+      get() {
         return this.$store.state['open/working_form'].content
       },
       /* We add a setter */
-      set (value) {
+      set(value) {
         this.$store.commit('open/working_form/set', value)
       }
     },
@@ -169,7 +173,7 @@ export default {
      * Used for the update record on submission. Lists all visible fields on which you can filter records to update
      * on submission instead of creating
      */
-    filterableFields () {
+    filterableFields() {
       if (this.submissionOptions.databaseAction !== 'update') return []
       return this.form.properties.filter((field) => {
         return !field.hidden && window.config.notion.database_filterable_types.includes(field.type)
@@ -185,7 +189,7 @@ export default {
 
   watch: {
     form: {
-      handler  () {
+      handler() {
         if (this.form) {
           this.submissionOptions = {
             submissionMode: this.form.redirect_url ? 'redirect' : 'default',
@@ -209,11 +213,13 @@ export default {
     }
   },
 
-  mounted () {
+  mounted() {
   },
 
   methods: {
-
+    onClickCollapse(e) {
+      this.isCollapseOpen = e
+    }
   }
 }
 </script>

resources/js/components/open/forms/components/form-components/FormCustomCode.vue

@@ -1,16 +1,18 @@
 <template>
-  <collapse class="p-5 w-full border-b" :default-value="false">
+  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
     <template #title>
       <h3 class="font-semibold text-lg">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline text-gray-500 mr-2 -mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <svg class="h-5 w-5 inline mr-2 -mt-1"
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+             :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>
+
         Custom Code
         <pro-tag />
       </h3>
     </template>
     <p class="mt-4">
-      The code will be injected in the <b>head</b> section of your form page. <a href="#" class="text-gray-500"
+      The code will be injected in the <span class="font-semibold">head</span> section of your form page. <a href="#" class="text-gray-500"
                                                                                  @click.prevent="$getCrisp().push(['do', 'helpdesk:article:open', ['en', 'how-to-inject-custom-code-in-my-form-1amadj3']])"
       >Click
         here to get an example CSS code.</a>
@@ -34,6 +36,7 @@ export default {
   },
   data () {
     return {
+      isCollapseOpen: false
     }
   },
 
@@ -55,6 +58,9 @@ export default {
   },
 
   methods: {
+    onClickCollapse (e) {
+      this.isCollapseOpen = e
+    }
   }
 }
 </script>

resources/js/components/open/forms/components/form-components/FormCustomization.vue

@@ -1,10 +1,14 @@
 <template>
-  <collapse class="p-5 w-full border-b" :default-value="true">
+  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
     <template #title>
       <h3 class="font-semibold text-lg">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline text-gray-500 mr-2 -mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <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">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+          <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"/>
+          <path d="M8.33333 6.6665C8.79357 6.6665 9.16667 6.29341 9.16667 5.83317C9.16667 5.37293 8.79357 4.99984 8.33333 4.99984C7.8731 4.99984 7.5 5.37293 7.5 5.83317C7.5 6.29341 7.8731 6.6665 8.33333 6.6665Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
+
         Customization
         <pro-tag />
       </h3>
@@ -80,6 +84,7 @@ export default {
   },
   data () {
     return {
+      isCollapseOpen: true
     }
   },
 
@@ -104,6 +109,9 @@ export default {
     openChat () {
       window.$crisp.push(['do', 'chat:show'])
       window.$crisp.push(['do', 'chat:open'])
+    },
+    onClickCollapse (e) {
+      this.isCollapseOpen = e
     }
   }
 }

resources/js/components/open/forms/components/form-components/FormEditorPreview.vue

@@ -1,15 +1,14 @@
 <template>
   <!--   Form Preview (desktop only)   -->
   <div
-    class="bg-gray-100 dark:bg-notion-dark-light hidden md:flex flex-grow p-5 flex-col items-center overflow-y-scroll shadow-inner"
+    class="bg-gray-50 dark:bg-notion-dark-light hidden md:flex flex-grow p-5 flex-col items-center overflow-y-scroll"
   >
-    <p class="mb-4 mt-2 text-center text-gray-400">
+    <p class="mb-2 text-center text-gray-700">
       Preview Full Page
       <v-switch v-model="previewEmbed" class="inline px-2" />
       Preview Embed
     </p>
     <p class="font-semibold">
-      <span v-if="creating" class="font-normal text-gray-400">Answers won't really be saved</span>
       <span v-if="previewFormSubmitted && !form.re_fillable">
         <a href="#" @click.prevent="$refs['form-preview'].restart()">Restart Form
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-nt-blue inline" viewBox="0 0 20 20"
@@ -23,7 +22,7 @@
         </a>
       </span>
     </p>
-    <div class="border rounded-lg bg-white dark:bg-notion-dark w-full block shadow-sm transition-all"
+    <div class="border rounded-lg bg-white dark:bg-notion-dark w-full block transition-all"
          :class="{'max-w-lg':previewEmbed,'max-w-5xl':!previewEmbed}"
     >
       <transition enter-active-class="linear duration-100 overflow-hidden"
@@ -58,6 +57,7 @@
                             @submitted="previewFormSubmitted=true"
       />
     </div>
+    <p v-if="creating" class=" w-full mt-2 font-normal text-center text-gray-400">Answers won't really be saved</p>
   </div>
 </template>
 

resources/js/components/open/forms/components/form-components/FormInformation.vue

@@ -1,20 +1,17 @@
 <template>
-  <collapse class="p-5 w-full border-b" :default-value="true">
+  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
     <template #title class="test">
       <h3 id="v-step-0" class="font-semibold text-lg">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline text-gray-500 mr-2 -mt-1" fill="none"
+        <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">
-             viewBox="0 0 24 24" stroke="currentColor"
+          <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"/>
-        >
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
         </svg>
+
         Information
       </h3>
     </template>
     <text-input name="title" class="mt-4"
                 :form="form"
-                label="Title of your form"
+                label="Form Title"
                 :required="true"
     />
     <rich-text-area-input name="description"
@@ -32,47 +29,40 @@
                 placeholder="Select Visibility" :required="true"
                 :options="visibilityOptions"
     />
-    <button
+    <v-button color="light-gray" class="w-full" v-if="copyFormOptions.length > 0" @click="showCopyFormSettingsModal=true">
-      v-if="copyFormOptions.length > 0"
+      <svg class="h-5 w-5 -mt-1 text-nt-blue inline mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      class="group mt-3 cursor-pointer relative w-full rounded-lg border-transparent flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full py-2 px-4 bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100"
+        <path d="M4.16667 12.4998C3.3901 12.4998 3.00182 12.4998 2.69553 12.373C2.28715 12.2038 1.9627 11.8794 1.79354 11.471C1.66667 11.1647 1.66667 10.7764 1.66667 9.99984V4.33317C1.66667 3.39975 1.66667 2.93304 1.84833 2.57652C2.00812 2.26292 2.26308 2.00795 2.57669 1.84816C2.93321 1.6665 3.39992 1.6665 4.33334 1.6665H10C10.7766 1.6665 11.1649 1.6665 11.4711 1.79337C11.8795 1.96253 12.204 2.28698 12.3731 2.69536C12.5 3.00165 12.5 3.38993 12.5 4.1665M10.1667 18.3332H15.6667C16.6001 18.3332 17.0668 18.3332 17.4233 18.1515C17.7369 17.9917 17.9919 17.7368 18.1517 17.4232C18.3333 17.0666 18.3333 16.5999 18.3333 15.6665V10.1665C18.3333 9.23308 18.3333 8.76637 18.1517 8.40985C17.9919 8.09625 17.7369 7.84128 17.4233 7.68149C17.0668 7.49984 16.6001 7.49984 15.6667 7.49984H10.1667C9.23325 7.49984 8.76654 7.49984 8.41002 7.68149C8.09642 7.84128 7.84145 8.09625 7.68166 8.40985C7.50001 8.76637 7.50001 9.23308 7.50001 10.1665V15.6665C7.50001 16.5999 7.50001 17.0666 7.68166 17.4232C7.84145 17.7368 8.09642 17.9917 8.41002 18.1515C8.76654 18.3332 9.23325 18.3332 10.1667 18.3332Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-      @click.prevent="showCopyFormSettingsModal=true"
-    >
-      Copy another form's settings
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 -mt-1 text-nt-blue inline" fill="none" viewBox="0 0 24 24"
-           stroke="currentColor" stroke-width="2"
-      >
-        <path stroke-linecap="round" stroke-linejoin="round"
-              d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
-        />
       </svg>
-    </button>
+      Copy another form's settings
+    </v-button>
 
-    <modal :show="showCopyFormSettingsModal" @close="showCopyFormSettingsModal=false">
+    <modal :show="showCopyFormSettingsModal" @close="showCopyFormSettingsModal=false" max-width="md">
-      <div class="-m-4 sm:-mx-6">
+      <template #icon>
-        <div class="p-4 border-b">
+        <svg class="w-10 h-10 text-blue" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <h2 class="text-2xl font-bold z-10 truncate -mt-2 text-nt-blue">
+          <path d="M17 27C16.0681 27 15.6022 27 15.2346 26.8478C14.7446 26.6448 14.3552 26.2554 14.1522 25.7654C14 25.3978 14 24.9319 14 24V17.2C14 16.0799 14 15.5198 14.218 15.092C14.4097 14.7157 14.7157 14.4097 15.092 14.218C15.5198 14 16.0799 14 17.2 14H24C24.9319 14 25.3978 14 25.7654 14.1522C26.2554 14.3552 26.6448 14.7446 26.8478 15.2346C27 15.6022 27 16.0681 27 17M24.2 34H30.8C31.9201 34 32.4802 34 32.908 33.782C33.2843 33.5903 33.5903 33.2843 33.782 32.908C34 32.4802 34 31.9201 34 30.8V24.2C34 23.0799 34 22.5198 33.782 22.092C33.5903 21.7157 33.2843 21.4097 32.908 21.218C32.4802 21 31.9201 21 30.8 21H24.2C23.0799 21 22.5198 21 22.092 21.218C21.7157 21.4097 21.4097 21.7157 21.218 22.092C21 22.5198 21 23.0799 21 24.2V30.8C21 31.9201 21 32.4802 21.218 32.908C21.4097 33.2843 21.7157 33.5903 22.092 33.782C22.5198 34 23.0799 34 24.2 34Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            Copy Settings from another form
+        </svg>
-          </h2>
+      </template>
-        </div>
+      <template #title>
-        <div class="p-4">
+        Copy Settings from another form
-          <p class="text-gray-600">
+      </template>
-            If you already have another form that you like to use as a base for this form, you can do that here.
+      <div class="p-4">
-            Select another form, confirm, and we will copy all of the other form settings (except the form structure)
+        <p class="text-gray-600">
-            to this form.
+          If you already have another form that you like to use as a base for this form, you can do that here.
-          </p>
+          Select another form, confirm, and we will copy all of the other form settings (except the form structure)
-          <select-input v-model="copyFormId" name="copy_form_id"
+          to this form.
-                        label="Copy settings from" class="mt-3 mb-6"
+        </p>
-                        placeholder="Choose a form" :searchable="copyFormOptions.length > 5"
+        <select-input v-model="copyFormId" name="copy_form_id"
-                        :options="copyFormOptions"
+                      label="Copy Settings From" class="mt-3 mb-6"
-          />
+                      placeholder="Choose a form" :searchable="copyFormOptions.length > 5"
-          <div class="flex justify-between">
+                      :options="copyFormOptions"
-            <v-button color="blue" shade="light" @click="copySettings">
+        />
-              Confirm & Copy settings
+        <div class="flex">
-            </v-button>
+          <v-button color="white" class="w-full mr-2" @click="showCopyFormSettingsModal=false">
-            <v-button color="gray" shade="light" class="ml-1" @click="showCopyFormSettingsModal=false">
+            Cancel
-              Close
+          </v-button>
-            </v-button>
+          <v-button color="blue" class="w-full" @click="copySettings">
-          </div>
+            Confirm & Copy
+          </v-button>
         </div>
       </div>
     </modal>
@@ -101,7 +91,8 @@ export default {
           name: "Draft (form won't be accessible)",
           value: "draft"
         }
-      ]
+      ],
+      isCollapseOpen: true
     }
   },
 
@@ -163,6 +154,9 @@ export default {
         this.form[property] = copyForm[property]
       })
       this.showCopyFormSettingsModal = false
+    },
+    onClickCollapse (e) {
+      this.isCollapseOpen = e
     }
   }
 }

resources/js/components/open/forms/components/form-components/FormIntegrations.vue

@@ -1,9 +1,10 @@
 <template>
-  <collapse class="p-5 w-full border-b">
+  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
     <template #title>
       <h3 class="font-semibold text-lg">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline text-gray-500 mr-2 -mt-1" fill="none"
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2"
-             viewBox="0 0 24 24" stroke="currentColor">
+          :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"
                 d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/>
         </svg>
@@ -47,7 +48,9 @@ export default {
   components: {Collapse, ProTag},
   props: {},
   data() {
-    return {}
+    return {
+      isCollapseOpen: false
+    }
   },
 
   computed: {
@@ -69,6 +72,10 @@ export default {
   mounted() {
   },
 
-  methods: {}
+  methods: {
+    onClickCollapse (e) {
+      this.isCollapseOpen = e
+    }
+  }
 }
 </script>

resources/js/components/open/forms/components/form-components/FormNotifications.vue

@@ -1,10 +1,12 @@
 <template>
-  <collapse class="p-5 w-full border-t border-b" :default-value="true">
+  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
     <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 text-gray-500 mr-2 -mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <svg class="h-5 w-5 inline mr-2"
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+             :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>
+
         Notifications
         <pro-tag />
       </h3>
@@ -25,7 +27,7 @@
         Receive slack message on each form submission. <a href="https://api.slack.com/messaging/webhooks" target="_blank">Click here</a> to learn how to get a slack webhook url
       </template>
     </text-input>
-    
+
     <checkbox-input :disabled="emailSubmissionConfirmationField===null" name="send_submission_confirmation"
                     :form="form" class="mt-4"
                     label="Send submission confirmation" :help="emailSubmissionConfirmationHelp"
@@ -59,6 +61,7 @@ export default {
   },
   data () {
     return {
+      isCollapseOpen: true
     }
   },
 
@@ -99,6 +102,9 @@ export default {
   },
 
   methods: {
+    onClickCollapse (e) {
+      this.isCollapseOpen = e
+    }
   }
 }
 </script>

resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue

@@ -1,17 +1,22 @@
 <template>
-  <collapse class="p-5 w-full border-b" :default-value="false">
+  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
     <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 text-gray-500 mr-2 -mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2"
+          :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" />
-        </svg>
+        </svg> Security & Privacy
-        Security & Privacy
       </h3>
     </template>
     <checkbox-input name="can_be_indexed" :form="form" class="mt-4"
                     label="Indexable by Google"
                     help="If enabled, your form can appear in the search results of Google"
     />
+    <checkbox-input name="use_captcha" :form="form" class="mt-4"
+                    label="Protect your form with a Captcha"
+                    help="If enabled we will make sure respondant is a human"
+    />
     <pro-tag class="float-right" />
     <text-input name="password" :form="form" class="mt-4"
                     label="Form Password" help="Leave empty to disable password"
@@ -29,6 +34,7 @@ export default {
   },
   data () {
     return {
+      isCollapseOpen: false
     }
   },
   computed: {
@@ -47,7 +53,9 @@ export default {
   mounted () {
   },
   methods: {
-
+    onClickCollapse (e) {
+      this.isCollapseOpen = e
+    }
   }
 }
 </script>

resources/js/components/open/forms/components/form-components/FormStructure.vue

@@ -1,10 +1,11 @@
 <template>
-  <collapse class="p-5 w-full border-b" :default-value="true">
+  <collapse class="p-4 w-full border-b" :default-value="isCollapseOpen" @click="onClickCollapse">
     <template #title>
       <div class="flex">
         <h3 id="v-step-1" class="font-semibold block text-lg">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline text-gray-500 mr-2 -mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <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">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            <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
         </h3>
       </div>
@@ -23,6 +24,7 @@ export default {
   },
   data () {
     return {
+      isCollapseOpen: true
     }
   },
 
@@ -44,6 +46,9 @@ export default {
   },
 
   methods: {
+    onClickCollapse (e) {
+      this.isCollapseOpen = e
+    }
   }
 }
 </script>

resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue

@@ -2,24 +2,35 @@
   <div v-if="logic" :key="resetKey" class="-mx-4 sm:-mx-6 p-5 border-b">
     <h3 class="font-semibold block text-lg">
       Logic
-      <pro-tag />
+      <pro-tag/>
     </h3>
     <p class="text-gray-400 mb-5">
       Add some logic to this block. Start by adding some conditions, and then add some actions.
     </p>
-    <div class="relative">
+    <div class="relative flex">
-      <v-button size="small" @click="showCopyFormModal=true">
+      <div>
-        Copy from...
+        <v-button color="light-gray" size="small" @click="showCopyFormModal=true">
-      </v-button>
+          <svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <v-button color="red" shade="light" size="small" class="ml-1" @click="clearAll">
+            <path d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        Clear All
+          </svg>
-      </v-button>
+          Copy from
+        </v-button>
+      </div>
+      <div>
+        <v-button color="light-gray" shade="light" size="small" class="ml-1" @click="clearAll">
+          <svg class="text-red-600 h-4 w-4 inline -mt-1 mr-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M18 9L12 15M12 9L18 15M21 4H8L1 12L8 20H21C21.5304 20 22.0391 19.7893 22.4142 19.4142C22.7893 19.0391 23 18.5304 23 18V6C23 5.46957 22.7893 4.96086 22.4142 4.58579C22.0391 4.21071 21.5304 4 21 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+
+          Clear All
+        </v-button>
+      </div>
     </div>
 
     <h5 class="font-semibold mt-4">
       1. Conditions
     </h5>
-    <condition-editor ref="filter-editor" v-model="logic.conditions" class="mt-4 border-t border" :form="form" />
+    <condition-editor ref="filter-editor" v-model="logic.conditions" class="mt-4 border-t border" :form="form"/>
 
     <h5 class="font-semibold mt-4">
       2. Actions
@@ -63,7 +74,7 @@ import clonedeep from 'clone-deep'
 
 export default {
   name: 'FormBlockLogicEditor',
-  components: { SelectInput, Modal, ProTag, ConditionEditor },
+  components: {SelectInput, Modal, ProTag, ConditionEditor},
   props: {
     field: {
       type: Object,
@@ -75,7 +86,7 @@ export default {
     }
   },
 
-  data () {
+  data() {
     return {
       resetKey: 0,
       logic: this.field.logic || {
@@ -88,32 +99,32 @@ export default {
   },
 
   computed: {
-    copyFromOptions () {
+    copyFromOptions() {
       return this.form.properties.filter((field) => {
         return field.id !== this.field.id
       }).map((field) => {
-        return { name: field.name, value: field.id }
+        return {name: field.name, value: field.id}
       })
     },
-    actionOptions () {
+    actionOptions() {
       if (['nf-text', 'nf-page-break', 'nf-divider', 'nf-image'].includes(this.field.type)) {
-        return [{ name: 'Hide Block', value: 'hide-block' }]
+        return [{name: 'Hide Block', value: 'hide-block'}]
       }
 
       if (this.field.hidden) {
         return [
-          { name: 'Show Block', value: 'show-block' },
+          {name: 'Show Block', value: 'show-block'},
-          { name: 'Require answer', value: 'require-answer' }
+          {name: 'Require answer', value: 'require-answer'}
         ]
       } else {
         return [
-          { name: 'Hide Block', value: 'hide-block' },
+          {name: 'Hide Block', value: 'hide-block'},
           (this.field.required
-            ? { name: 'Make it optional', value: 'make-it-optional' }
+            ? {name: 'Make it optional', value: 'make-it-optional'}
             : {
-                name: 'Require answer',
+              name: 'Require answer',
-                value: 'require-answer'
+              value: 'require-answer'
-              })
+            })
         ]
       }
     }
@@ -121,32 +132,32 @@ export default {
 
   watch: {
     logic: {
-      handler () {
+      handler() {
         this.$set(this.field, 'logic', this.logic)
       },
       deep: true
     },
     'field.required': {
-      handler () {
+      handler() {
         this.cleanConditions()
       },
       deep: true
     }
   },
 
-  mounted () {
+  mounted() {
     if (!this.field.hasOwnProperty('logic')) {
       this.$set(this.field, 'logic', this.logic)
     }
   },
 
   methods: {
-    clearAll () {
+    clearAll() {
       this.$set(this.logic, 'conditions', null)
       this.$set(this.logic, 'actions', [])
       this.refreshActions()
     },
-    onActionInput () {
+    onActionInput() {
       if (this.logic.actions.length >= 2) {
         if (this.logic.actions[1] === 'require-answer' && this.logic.actions[0] === 'hide-block') {
           this.$set(this.logic, 'actions', ['require-answer'])
@@ -156,7 +167,7 @@ export default {
         this.refreshActions()
       }
     },
-    cleanConditions () {
+    cleanConditions() {
       if (this.required && this.logic.actions.includes('require-answer')) {
         this.$set(this.logic, 'actions', this.logic.actions.filter((action) => action !== 'require-answer'))
       } else if (!this.required && this.logic.actions.includes('make-it-optional')) {
@@ -164,10 +175,10 @@ export default {
       }
       this.resetKey++
     },
-    refreshActions () {
+    refreshActions() {
       this.resetKey++
     },
-    copyLogic () {
+    copyLogic() {
       if (this.copyFrom) {
         const property = this.form.properties.find((property) => {
           return property.id === this.copyFrom

resources/js/components/open/forms/components/form-logic-components/GroupControlSlot.vue

@@ -10,7 +10,7 @@
     <v-button class="ml-1 mt-1" color="blue" size="small" :disabled="selectedRule === ''" @click="addRule">
       Add Condition
     </v-button>
-    <v-button class="ml-1 mt-1" color="green" size="small" @click="groupCtrl.newGroup">
+    <v-button class="ml-1 mt-1" color="outline-blue" size="small" @click="groupCtrl.newGroup">
       Add Group
     </v-button>
   </div>

resources/js/components/open/forms/fields/FormBlockOptionsModal.vue

@@ -2,16 +2,27 @@
   <modal :show="show" @close="close">
     <div v-if="field">
       <div class="flex">
-        <h2 class="text-2xl font-bold z-10 truncate mb-5 text-nt-blue flex-grow">
+        <h2 class="text-2xl font-semibold z-10 truncate mb-5 text-gray-900 flex-grow">
           Configure "<span class="truncate">{{ field.name }}</span>" block
         </h2>
-        <div>
+        <div class="flex mr-6">
-          <v-button color="red" size="small" @click="removeBlock">
+          <div>
-            Remove
+            <v-button color="light-gray" size="small" @click="removeBlock">
-          </v-button>
+              <svg class="h-4 w-4 text-red-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <v-button  size="small" @click="duplicateBlock">
+                <path d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            Duplicate
+              </svg>
-          </v-button>
+
+              Remove
+            </v-button>
+          </div>
+          <div class="ml-1">
+            <v-button size="small" color="light-gray" @click="duplicateBlock">
+              <svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              Duplicate
+            </v-button>
+          </div>
         </div>
       </div>
       <div v-if="field.type == 'nf-text'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
@@ -111,8 +122,8 @@
       <!--  Logic Block -->
       <form-block-logic-editor :form="form" :field="field" v-model="form"/>
 
-      <div class="pt-5 text-right">
+      <div class="pt-5 flex justify-end">
-        <v-button color="gray" shade="light" @click="close">
+        <v-button color="white" @click="close">
           Close
         </v-button>
       </div>

resources/js/components/open/forms/fields/FormFieldOptionsModal.vue

@@ -2,16 +2,27 @@
   <modal :show="show" @close="close">
     <div v-if="field">
       <div class="flex">
-        <h2 class="text-2xl font-bold z-10 truncate mb-5 text-nt-blue flex-grow">
+        <h2 class="text-2xl font-semibold z-10 truncate mb-5 text-gray-900 flex-grow">
           Configure "<span class="truncate">{{ field.name }}</span>" block
         </h2>
-        <div>
+        <div class="flex mr-6">
-          <v-button color="red" size="small" @click="removeBlock">
+          <div>
+          <v-button color="light-gray" size="small" @click="removeBlock">
+            <svg class="h-4 w-4 text-red-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+
             Remove
           </v-button>
-          <v-button  size="small" @click="duplicateBlock">
+          </div>
+          <div class="ml-1">
+          <v-button size="small" color="light-gray" @click="duplicateBlock">
+            <svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
             Duplicate
           </v-button>
+          </div>
         </div>
       </div>
 
@@ -310,8 +321,8 @@
       <!--  Logic Block -->
       <form-block-logic-editor v-model="form" :form="form" :field="field" />
 
-      <div class="pt-5 text-right">
+      <div class="pt-5 flex justify-end">
-        <v-button color="gray" shade="light" @click="close">
+        <v-button color="white" @click="close">
           Close
         </v-button>
       </div>

resources/js/pages/forms/create.vue

@@ -1,34 +1,12 @@
 <template>
   <div class="flex flex-wrap flex-col">
-    <!-- Step 1: Select Database -->
-    <div ref="progress" class="w-full px-4 " :class="{
-      'md:mx-auto md:max-w-5xl':currentStep===0}"
-    >
-      <div class="flex items-center justify-between pb-2">
-        <v-button v-if="currentStep>0" color="gray" shade="light" class="hidden md:block mx-4 flex-shrink-0"
-                  @click="goBack"
-        >
-          Previous
-        </v-button>
-        <v-button v-if="currentStep>0" :loading="loading || createFormLoading" color="nt-blue"
-                  class="v-last-step hidden md:block mx-4 flex-shrink-0"
-                  @click="nextStep"
-        >
-          {{ currentStep !== 1 ? 'Continue' : 'Create Form' }}
-        </v-button>
-      </div>
-
-    </div>
-
     <transition v-if="stateReady" name="fade" mode="out-in">
-      <!-- Step1: Form Customization -->
+      <div key="2">
-      <div v-if="currentStep===1" key="2">
         <form-editor v-if="!workspacesLoading" ref="editor"
-                     class="w-full flex border-t flex-grow"
+                     class="w-full flex flex-grow"
                      :style="{
                        'max-height': editorMaxHeight + 'px'
                      }" :error="error"
-                     :validation-error-response="validationErrorResponse"
                      @mounted="onResize"
         />
         <div v-else class="text-center mt-4 py-6">
@@ -36,17 +14,6 @@
         </div>
       </div>
     </transition>
-
-    <div v-if="currentStep===1" class="md:hidden pt-4 mb-16 px-6 border-t flex justify-between">
-      <v-button color="gray" shade="light" class="mt-2" @click="previousStep">
-        Previous
-      </v-button>
-      <v-button v-track.create_form_click :loading="createFormLoading" color="nt-blue" class="mt-2 px-5 v-last-step"
-                @click="nextStep"
-      >
-        Create Form
-      </v-button>
-    </div>
   </div>
 </template>
 
@@ -54,8 +21,6 @@
 import store from '~/store'
 import Form from 'vform'
 import {mapState, mapActions} from 'vuex'
-import saveUpdateAlert from '../../mixins/forms/saveUpdateAlert'
-import clonedeep from 'clone-deep'
 
 const FormEditor = () => import('../../components/open/forms/components/FormEditor')
 
@@ -76,8 +41,6 @@ export default {
     return {title: 'Create a new Form'}
   },
 
-  mixins: [saveUpdateAlert],
-
   beforeRouteEnter (to, from, next) {
     loadTemplates()
     next()
@@ -88,13 +51,8 @@ export default {
   data() {
     return {
       stateReady: false,
-      validationErrorResponse: null,
       loading: false,
-      createFormLoading: false,
       error: '',
-      createdFormId: null,
-      currentStep: 1,
-
       editorMaxHeight: 500
     }
   },
@@ -117,9 +75,6 @@ export default {
     workspace() {
       return this.$store.getters['open/workspaces/getCurrent']()
     },
-    createdForm() {
-      return this.$store.getters['open/forms/getById'](this.createdFormId)
-    },
     fromOnboarding() {
       return this.$route.params.from_onboarding
     },
@@ -211,59 +166,6 @@ export default {
         can_be_indexed: true
       })
     },
-    nextStep() {
-      this.error = ''
-      if (this.currentStep === 0) {
-        this.form.workspace = clonedeep(this.workspace)
-        // Init editor max height
-        this.currentStep++
-        this.$nextTick(() => {
-          this.editorMaxHeight = window.innerHeight - (this.$refs.progress.offsetTop + this.$refs.progress.offsetHeight)
-        })
-        return
-      } else if (this.currentStep === 1) {
-        return this.submit()
-      }
-      this.currentStep++
-    },
-    submit() {
-      if (this.loading) return
-      this.form.workspace_id = this.workspace.id
-      this.validationErrorResponse = null
-
-      this.createFormLoading = true
-      this.form.post('/api/open/forms').then((response) => {
-        this.$store.commit('open/forms/addOrUpdate', response.data.form)
-        this.createdFormId = response.data.form.id
-
-        this.$logEvent('form_created', {form_id:  response.data.form.id, form_slug:  response.data.form.slug})
-        this.$getCrisp().push(['set', 'session:event', [[['form_created', {
-          form_id:  response.data.form.id,
-          form_slug:  response.data.form.slug
-        }, 'blue']]]])
-        this.displayFormModificationAlert(response.data)
-        this.$router.push({
-          name: 'forms.show',
-          params: {
-            slug: this.createdForm.slug,
-            new_form: response.data.users_first_form
-          }
-        })
-      }).catch((error) => {
-        if (error.response && error.response.status === 422) {
-          this.validationErrorResponse = error.response.data
-          this.$refs.editor.showValidationErrors()
-        }
-      }).finally(() => {
-        this.createFormLoading = false
-      })
-    },
-    previousStep() {
-      if (this.currentStep > 0) {
-        this.currentStep--
-      }
-    },
-
     /**
      * Compute max height of editor
      */
@@ -271,9 +173,6 @@ export default {
       if (this.$refs.editor) {
         this.editorMaxHeight = window.innerHeight - this.$refs.editor.$el.offsetTop
       }
-    },
-    goBack() {
-      return this.$router.back();
     }
   }
 }

resources/js/pages/forms/edit.vue

@@ -1,21 +1,10 @@
 <template>
   <div class="w-full flex flex-col">
-    <div class="flex justify-center md:justify-between pb-2 px-2">
-      <div class="hidden md:block" />
-      <breadcrumb class="hidden md:flex sm:px-6 mx-auto max-w-lg" :path="breadcrumbs" />
-      <v-button v-if="!loading && updatedForm"
-                v-track.save_form_click
-                lass="hidden md:block"
-                :loading="updateFormLoading" @click="saveForm"
-      >
-        Save changes
-      </v-button>
-    </div>
     <form-editor v-if="pageLoaded" ref="editor"
                  :style="{
                    'max-height': editorMaxHeight + 'px'
                  }"
-                 :validation-error-response="validationErrorResponse"
+                 :isEdit="true"
                  @mounted="onResize"
     />
     <div v-else-if="!loading && error" class="mt-4 rounded-lg max-w-xl mx-auto p-6 bg-red-100 text-red-500">
@@ -34,7 +23,6 @@ import Breadcrumb from '../../components/common/Breadcrumb'
 
 import Form from 'vform'
 
-import saveUpdateAlert from '../../mixins/forms/saveUpdateAlert'
 import { mapState } from 'vuex'
 const FormEditor = () => import('../../components/open/forms/components/FormEditor')
 
@@ -48,7 +36,6 @@ const loadForms = function () {
 export default {
   name: 'EditForm',
   components: { Breadcrumb, FormEditor },
-  mixins: [saveUpdateAlert],
 
   beforeRouteEnter (to, from, next) {
     if (!store.getters['open/forms/getBySlug'](to.params.slug)) {
@@ -61,10 +48,7 @@ export default {
   data () {
     return {
       loading: false,
-      updateFormLoading: false,
       error: null,
-      validationErrorResponse: null,
-
       editorMaxHeight: 500
     }
   },
@@ -85,17 +69,6 @@ export default {
     form () {
       return this.$store.getters['open/forms/getBySlug'](this.$route.params.slug)
     },
-    breadcrumbs () {
-      if (!this.form) {
-        return [{ route: { name: 'home' }, label: 'Your Forms' }]
-      }
-      return [
-        { route: { name: 'home' }, label: 'Your Forms' },
-        { label: this.form ? this.form.title : 'Your Form', route: { name: 'forms.show', params: { slug: this.form.slug } } },
-        { label: 'Edit' }
-      ]
-    },
-    formEndpoint: () => '/api/open/forms/{id}/',
     pageLoaded () {
       return !this.loading && this.updatedForm !== null
     }
@@ -128,26 +101,6 @@ export default {
   },
 
   methods: {
-    saveForm () {
-      if (this.updateFormLoading) return
-
-      this.updateFormLoading = true
-      this.validationErrorResponse = null
-      this.updatedForm.put(this.formEndpoint.replace('{id}', this.form.id)).then((response) => {
-        const data = response.data
-        this.$store.commit('open/forms/addOrUpdate', data.form)
-        this.$router.push({ name: 'forms.show', params: { slug: this.form.slug } })
-        this.$logEvent('form_saved', { form_id: this.form.id, form_slug: this.form.slug })
-        this.displayFormModificationAlert(data)
-      }).catch((error) => {
-        if (error.response.status === 422) {
-          this.validationErrorResponse = error.response.data
-          this.$refs.editor.showValidationErrors()
-        }
-      }).finally(() => {
-        this.updateFormLoading = false
-      })
-    },
     /**
      * Compute max height of editor
      */

resources/js/pages/settings/admin.vue

@@ -25,7 +25,7 @@
       />
 
       <!-- Submit Button -->
-      <v-button :loading="loading" type="success" color="nt-blue" class="mt-4 w-full">
+      <v-button :loading="loading" class="mt-4 w-full">
         Impersonate User
       </v-button>
     </form>

resources/js/pages/settings/password.vue

@@ -14,7 +14,7 @@
       />
 
       <!-- Submit Button -->
-      <v-button :loading="form.busy" type="success" color="nt-blue" class="mt-4 w-full">
+      <v-button :loading="form.busy" class="mt-4 w-full">
         {{ $t('update') }}
       </v-button>
     </form>

resources/js/pages/settings/profile.vue

@@ -10,7 +10,7 @@
       <text-input name="email" :form="form" :label="$t('email')" :required="true" />
 
       <!-- Submit Button -->
-      <v-button :loading="form.busy" type="success" color="nt-blue" class="mt-4 w-full">
+      <v-button :loading="form.busy" class="mt-4 w-full">
         {{ $t('update') }}
       </v-button>
     </form>

resources/sass/app.scss

@@ -35,7 +35,7 @@ body.dark * {
   }
 
   a {
-    @apply text-nt-blue hover:underline;
+    @apply text-blue-600 hover:underline;
   }
 }
 

tailwind.config.js

@@ -49,8 +49,8 @@ module.exports = {
         'nt-blue': {
           lighter: colors.blue['100'],
           light: colors.blue['300'],
-          default: colors.blue['500'],
+          default: colors.blue['600'],
-          DEFAULT: colors.blue['500'],
+          DEFAULT: colors.blue['600'],
           dark: colors.blue['800']
         },
         'notion-dark': {