Merge branch 'new-ui' of https://github.com/JhumanJ/OpnForm into new-ui

app/Http/Controllers/Auth/RegisterController.php

@@ -9,6 +9,7 @@ use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Foundation\Auth\RegistersUsers;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Rule;
 
 class RegisterController extends Controller
 {
@@ -52,7 +53,10 @@ class RegisterController extends Controller
             'name' => 'required|max:255',
             'email' => 'required|email:filter|max:255|unique:users',
             'password' => 'required|min:6|confirmed',
-            'hear_about_us' => 'required|string'
+            'hear_about_us' => 'required|string',
+            'agree_terms' => ['required',Rule::in([true])]
+        ],[
+            'agree_terms' => 'Please agree with the terms and conditions.'
         ]);
     }
 

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">
-          <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" />
+        <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 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,7 +1,9 @@
 <template>
   <div :class="wrapperClass">
     <v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled" :name="name" @input="$emit('input',$event)">
-      {{ label }} <span v-if="required" class="text-red-500 required-dot">*</span>
+      <slot name="label">
+        {{ label }} <span v-if="required" class="text-red-500 required-dot">*</span>
+      </slot>
     </v-checkbox>
     <small v-if="help" :class="theme.default.help">
       <slot name="help">{{ help }}</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 />
-      <form-structure />
-      <form-customization />
-      <form-about-submission />
-      <form-notifications />
-      <form-security-privacy />
-      <form-custom-code />
-      <form-integrations />
+      <div class="p-4 pb-0">
+        <a href="#" @click.prevent="$router.back()" class="flex text-blue mb-2 font-semibold text-sm">
+          <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">
+            <path d="M5 9L1 5L5 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                  stroke-linejoin="round"/>
+          </svg>
+          Go back
+        </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"
-               ghost-class="bg-nt-blue-lighter" handle=".draggable" :animation="200"
+               class="bg-white overflow-hidden dark:bg-notion-dark-light rounded-md w-full mx-auto border transition-colors"
+               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"
-                 stroke="currentColor"
-            >
-              <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 class="h-4 w-4 text-gray-400" viewBox="0 0 18 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M1.5 1.0835H16.5M1.5 6.91683H16.5" stroke="currentColor" stroke-width="1.67"
+                    stroke-linecap="round" stroke-linejoin="round"/>
             </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-')">
-            <pro-tag/>
-          </div>
+          <!--          <div class="flex-grow" v-if="['files'].includes(field.type) || field.type.startsWith('nf-')">-->
+          <!--            <pro-tag/>-->
+          <!--          </div>-->
 
-          <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"
-                  :class="{'text-blue-500': !field.hidden, 'text-gray-500': field.hidden}"
-                  @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}"
-            >
-              *
+          <template v-if="removing == field.id">
+            <div class="flex text-sm items-center">
+            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>
             </div>
-          </button>
-          <button class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-1"
-                  @click="editOptions(index)"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-nt-blue" viewBox="0 0 20 20"
-                 fill="currentColor"
+          </template>
+          <template v-else>
+            <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"
+                    :class="{'text-blue-500': !field.hidden, 'text-gray-500': field.hidden}"
+                    @click="toggleHidden(field)"
             >
-              <path fill-rule="evenodd"
-                    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"
-                    clip-rule="evenodd"
-              />
-            </svg>
-          </button>
+              <template v-if="!field.hidden">
+                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <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"/>
+                  <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"/>
+                </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">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+        <svg
+          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" />
-      <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"/>
       <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 },
-  props: {
-  },
-  data () {
+  components: {Collapse, ProTag, VTransition},
+  props: {},
+  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">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+        <svg class="h-5 w-5 inline mr-2 -mt-1"
+             :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">
-          <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" />
+        <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 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"
-             viewBox="0 0 24 24" stroke="currentColor"
-        >
-          <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 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 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>
+
         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-if="copyFormOptions.length > 0"
-      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"
-      @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"
-        />
+    <v-button color="light-gray" class="w-full" v-if="copyFormOptions.length > 0" @click="showCopyFormSettingsModal=true">
+      <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">
+        <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"/>
       </svg>
-    </button>
+      Copy another form's settings
+    </v-button>
 
-    <modal :show="showCopyFormSettingsModal" @close="showCopyFormSettingsModal=false">
-      <div class="-m-4 sm:-mx-6">
-        <div class="p-4 border-b">
-          <h2 class="text-2xl font-bold z-10 truncate -mt-2 text-nt-blue">
-            Copy Settings from another form
-          </h2>
-        </div>
-        <div class="p-4">
-          <p class="text-gray-600">
-            If you already have another form that you like to use as a base for this form, you can do that here.
-            Select another form, confirm, and we will copy all of the other form settings (except the form structure)
-            to this form.
-          </p>
-          <select-input v-model="copyFormId" name="copy_form_id"
-                        label="Copy settings from" class="mt-3 mb-6"
-                        placeholder="Choose a form" :searchable="copyFormOptions.length > 5"
-                        :options="copyFormOptions"
-          />
-          <div class="flex justify-between">
-            <v-button color="blue" shade="light" @click="copySettings">
-              Confirm & Copy settings
-            </v-button>
-            <v-button color="gray" shade="light" class="ml-1" @click="showCopyFormSettingsModal=false">
-              Close
-            </v-button>
-          </div>
+    <modal :show="showCopyFormSettingsModal" @close="showCopyFormSettingsModal=false" max-width="md">
+      <template #icon>
+        <svg class="w-10 h-10 text-blue" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <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"/>
+        </svg>
+      </template>
+      <template #title>
+        Copy Settings from another form
+      </template>
+      <div class="p-4">
+        <p class="text-gray-600">
+          If you already have another form that you like to use as a base for this form, you can do that here.
+          Select another form, confirm, and we will copy all of the other form settings (except the form structure)
+          to this form.
+        </p>
+        <select-input v-model="copyFormId" name="copy_form_id"
+                      label="Copy Settings From" class="mt-3 mb-6"
+                      placeholder="Choose a form" :searchable="copyFormOptions.length > 5"
+                      :options="copyFormOptions"
+        />
+        <div class="flex">
+          <v-button color="white" class="w-full mr-2" @click="showCopyFormSettingsModal=false">
+            Cancel
+          </v-button>
+          <v-button color="blue" class="w-full" @click="copySettings">
+            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"
-             viewBox="0 0 24 24" stroke="currentColor">
+        <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">
           <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">
-          <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" />
+        <svg class="h-5 w-5 inline mr-2"
+             :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>
-        Security & Privacy
+        </svg> 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">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          <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 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">
-      <v-button size="small" @click="showCopyFormModal=true">
-        Copy from...
-      </v-button>
-      <v-button color="red" shade="light" size="small" class="ml-1" @click="clearAll">
-        Clear All
-      </v-button>
+    <div class="relative flex">
+      <div>
+        <v-button color="light-gray" size="small" @click="showCopyFormModal=true">
+          <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>
+          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: 'Require answer', value: 'require-answer' }
+          {name: 'Show Block', value: 'show-block'},
+          {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',
-                value: 'require-answer'
-              })
+              name: '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>
-          <v-button color="red" size="small" @click="removeBlock">
-            Remove
-          </v-button>
-          <v-button  size="small" @click="duplicateBlock">
-            Duplicate
-          </v-button>
+        <div class="flex mr-6">
+          <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>
+          </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">
-        <v-button color="gray" shade="light" @click="close">
+      <div class="pt-5 flex justify-end">
+        <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>
-          <v-button color="red" size="small" @click="removeBlock">
+        <div class="flex mr-6">
+          <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">
-        <v-button color="gray" shade="light" @click="close">
+      <div class="pt-5 flex justify-end">
+        <v-button color="white" @click="close">
           Close
         </v-button>
       </div>

resources/js/components/pages/welcome/Features.vue

@@ -90,40 +90,27 @@
 
     <div class="grid md:grid-cols-3 mt-20">
       <div class="mb-8 md:mr-10">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-             class="w-10 h-10 text-nt-blue">
-          <path stroke-linecap="round" stroke-linejoin="round"
-                d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"/>
+        <svg class="w-10 h-10 text-nt-blue" viewBox="0 0 44 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M26.0006 40H18.0006M2.58828 9.63978C2.55958 6.73709 4.12455 4.02649 6.6527 2.59999M41.405 9.6398C41.4337 6.7371 39.8687 4.0265 37.3406 2.60001M34.0006 14C34.0006 10.8174 32.7363 7.76516 30.4859 5.51472C28.2354 3.26428 25.1832 2 22.0006 2C18.818 2 15.7658 3.26428 13.5153 5.51472C11.2649 7.76516 10.0006 10.8174 10.0006 14C10.0006 20.1804 8.44154 24.4119 6.69993 27.2108C5.23085 29.5717 4.49631 30.7522 4.52325 31.0815C4.55307 31.4461 4.63032 31.5852 4.92415 31.8032C5.18951 32 6.38578 32 8.7783 32H35.2229C37.6154 32 38.8117 32 39.077 31.8032C39.3709 31.5852 39.4481 31.4461 39.4779 31.0815C39.5049 30.7522 38.7703 29.5718 37.3013 27.2108C35.5597 24.4119 34.0006 20.1804 34.0006 14Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
         <h3 class="my-3 font-semibold">Notifications</h3>
         <p>Receive notifications directly in Slack or in your mailbox whenever your from has a new submission (if you
           want to).</p>
       </div>
       <div class="mb-8 md:mr-10">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-             class="w-10 h-10 text-nt-blue">
-          <path stroke-linecap="round" stroke-linejoin="round"
-                d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
+        <svg class="w-10 h-10 text-nt-blue" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M21.6666 2H27.0666C30.4269 2 32.1071 2 33.3906 2.65396C34.5195 3.2292 35.4374 4.14708 36.0127 5.27606C36.6666 6.55953 36.6666 8.23969 36.6666 11.6V32.4C36.6666 35.7603 36.6666 37.4405 36.0127 38.7239C35.4374 39.8529 34.5195 40.7708 33.3906 41.346C32.1071 42 30.4269 42 27.0666 42H14.2666C10.9063 42 9.22615 42 7.94268 41.346C6.81371 40.7708 5.89583 39.8529 5.32059 38.7239C4.66663 37.4405 4.66663 35.7603 4.66663 32.4V31M28.6666 24H19.6666M28.6666 16H21.6666M28.6666 32H12.6666M8.66663 18V7C8.66663 5.34315 10.0098 4 11.6666 4C13.3235 4 14.6666 5.34315 14.6666 7V18C14.6666 21.3137 11.9803 24 8.66663 24C5.35292 24 2.66663 21.3137 2.66663 18V10" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
         <h3 class="my-3 font-semibold">File Uploads</h3>
         <p>Easily add file upload inputs to your forms. Uploaded files are securely stored for you. Up to 5mb!</p>
       </div>
       <div class="mb-8 md:mr-10">
-        <svg class="w-10 h-10 text-nt-blue" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M4.33331 24C4.33331 35.0457 13.2876 44 24.3333 44C27.647 44 30.3333 41.3137 30.3333 38V37C30.3333 36.0712 30.3333 35.6067 30.3846 35.2168C30.7391 32.5244 32.8578 30.4058 35.5502 30.0513C35.9401 30 36.4045 30 37.3333 30H38.3333C41.647 30 44.3333 27.3137 44.3333 24C44.3333 12.9543 35.379 4 24.3333 4C13.2876 4 4.33331 12.9543 4.33331 24Z"
-            stroke="#155EEF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path
-            d="M14.3333 26C15.4379 26 16.3333 25.1046 16.3333 24C16.3333 22.8954 15.4379 22 14.3333 22C13.2287 22 12.3333 22.8954 12.3333 24C12.3333 25.1046 13.2287 26 14.3333 26Z"
-            stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path
-            d="M32.3333 18C33.4379 18 34.3333 17.1046 34.3333 16C34.3333 14.8954 33.4379 14 32.3333 14C31.2287 14 30.3333 14.8954 30.3333 16C30.3333 17.1046 31.2287 18 32.3333 18Z"
-            stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path
-            d="M20.3333 16C21.4379 16 22.3333 15.1046 22.3333 14C22.3333 12.8954 21.4379 12 20.3333 12C19.2287 12 18.3333 12.8954 18.3333 14C18.3333 15.1046 19.2287 16 20.3333 16Z"
-            stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+        <svg class="w-10 h-10 text-nt-blue" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M2.33331 22C2.33331 33.0457 11.2876 42 22.3333 42C25.647 42 28.3333 39.3137 28.3333 36V35C28.3333 34.0712 28.3333 33.6067 28.3846 33.2168C28.7391 30.5244 30.8578 28.4058 33.5502 28.0513C33.9401 28 34.4045 28 35.3333 28H36.3333C39.647 28 42.3333 25.3137 42.3333 22C42.3333 10.9543 33.379 2 22.3333 2C11.2876 2 2.33331 10.9543 2.33331 22Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M12.3333 24C13.4379 24 14.3333 23.1046 14.3333 22C14.3333 20.8954 13.4379 20 12.3333 20C11.2287 20 10.3333 20.8954 10.3333 22C10.3333 23.1046 11.2287 24 12.3333 24Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M30.3333 16C31.4379 16 32.3333 15.1046 32.3333 14C32.3333 12.8954 31.4379 12 30.3333 12C29.2287 12 28.3333 12.8954 28.3333 14C28.3333 15.1046 29.2287 16 30.3333 16Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M18.3333 14C19.4379 14 20.3333 13.1046 20.3333 12C20.3333 10.8954 19.4379 10 18.3333 10C17.2287 10 16.3333 10.8954 16.3333 12C16.3333 13.1046 17.2287 14 18.3333 14Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
-
         <h3 class="my-3 font-semibold">Customize Everything</h3>
         <p>Change form themes, change texts, colors, add images, add custom thank you pages and much more.</p>
       </div>

resources/js/components/pages/welcome/MoreFeatures.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="bg-gray-50 dark:bg-notion-dark py-8">
+      <div class="md:max-w-5xl md:mx-auto w-full">
+        <div class="my-5 text-center">
+          <h3 class="font-semibold text-3xl">And many more features</h3>
+          <p class="w-full mt-2 mb-8">
+            OpnForm makes form building easy and comes with powerful features.
+          </p>
+          <div class="grid md:grid-cols-3 mt-10 mb-5">
+            <div class="flex font-semibold my-3">
+              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10.5 3.5H17.8C18.9201 3.5 19.4802 3.5 19.908 3.71799C20.2843 3.90973 20.5903 4.21569 20.782 4.59202C21 5.01984 21 5.57989 21 6.7V8C21 8.93188 21 9.39783 20.8478 9.76537C20.6448 10.2554 20.2554 10.6448 19.7654 10.8478C19.3978 11 18.9319 11 18 11M12.5 18.5H5.2C4.0799 18.5 3.51984 18.5 3.09202 18.282C2.71569 18.0903 2.40973 17.7843 2.21799 17.408C2 16.9802 2 16.4201 2 15.3V14C2 13.0681 2 12.6022 2.15224 12.2346C2.35523 11.7446 2.74458 11.3552 3.23463 11.1522C3.60218 11 4.06812 11 5 11M9.8 13.5H13.2C13.48 13.5 13.62 13.5 13.727 13.4455C13.8211 13.3976 13.8976 13.3211 13.9455 13.227C14 13.12 14 12.98 14 12.7V9.3C14 9.01997 14 8.87996 13.9455 8.773C13.8976 8.67892 13.8211 8.60243 13.727 8.5545C13.62 8.5 13.48 8.5 13.2 8.5H9.8C9.51997 8.5 9.37996 8.5 9.273 8.5545C9.17892 8.60243 9.10243 8.67892 9.0545 8.773C9 8.87996 9 9.01997 9 9.3V12.7C9 12.98 9 13.12 9.0545 13.227C9.10243 13.3211 9.17892 13.3976 9.273 13.4455C9.37996 13.5 9.51997 13.5 9.8 13.5ZM17.3 21H20.7C20.98 21 21.12 21 21.227 20.9455C21.3211 20.8976 21.3976 20.8211 21.4455 20.727C21.5 20.62 21.5 20.48 21.5 20.2V16.8C21.5 16.52 21.5 16.38 21.4455 16.273C21.3976 16.1789 21.3211 16.1024 21.227 16.0545C21.12 16 20.98 16 20.7 16H17.3C17.02 16 16.88 16 16.773 16.0545C16.6789 16.1024 16.6024 16.1789 16.5545 16.273C16.5 16.38 16.5 16.52 16.5 16.8V20.2C16.5 20.48 16.5 20.62 16.5545 20.727C16.6024 20.8211 16.6789 20.8976 16.773 20.9455C16.88 21 17.02 21 17.3 21ZM2.3 6H5.7C5.98003 6 6.12004 6 6.227 5.9455C6.32108 5.89757 6.39757 5.82108 6.4455 5.727C6.5 5.62004 6.5 5.48003 6.5 5.2V1.8C6.5 1.51997 6.5 1.37996 6.4455 1.273C6.39757 1.17892 6.32108 1.10243 6.227 1.0545C6.12004 1 5.98003 1 5.7 1H2.3C2.01997 1 1.87996 1 1.773 1.0545C1.67892 1.10243 1.60243 1.17892 1.5545 1.273C1.5 1.37996 1.5 1.51997 1.5 1.8V5.2C1.5 5.48003 1.5 5.62004 1.5545 5.727C1.60243 5.82108 1.67892 5.89757 1.773 5.9455C1.87996 6 2.01997 6 2.3 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              Form logic
+            </div>
+            <div class="flex font-semibold my-3">
+              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M1.5 11H21.5M1.5 11C1.5 16.5228 5.97715 21 11.5 21M1.5 11C1.5 5.47715 5.97715 1 11.5 1M21.5 11C21.5 16.5228 17.0228 21 11.5 21M21.5 11C21.5 5.47715 17.0228 1 11.5 1M11.5 1C14.0013 3.73835 15.4228 7.29203 15.5 11C15.4228 14.708 14.0013 18.2616 11.5 21M11.5 1C8.99872 3.73835 7.57725 7.29203 7.5 11C7.57725 14.708 8.99872 18.2616 11.5 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              URL pre-fill
+            </div>
+            <div class="flex font-semibold my-3">
+              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7.99999 1L4.99999 19M16 1L13 19M19 6H2M18 14H1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              Unique submission ID
+            </div>
+            <div class="flex font-semibold my-3">
+              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10.2429 3.09232C10.6494 3.03223 11.0686 3 11.5004 3C16.6054 3 19.9553 7.50484 21.0807 9.28682C21.2169 9.5025 21.285 9.61034 21.3231 9.77667C21.3518 9.90159 21.3517 10.0987 21.3231 10.2236C21.2849 10.3899 21.2164 10.4985 21.0792 10.7156C20.7793 11.1901 20.3222 11.8571 19.7165 12.5805M6.22432 4.71504C4.06225 6.1817 2.59445 8.21938 1.92111 9.28528C1.78428 9.50187 1.71587 9.61016 1.67774 9.77648C1.6491 9.9014 1.64909 10.0984 1.67771 10.2234C1.71583 10.3897 1.78393 10.4975 1.92013 10.7132C3.04554 12.4952 6.39541 17 11.5004 17C13.5588 17 15.3319 16.2676 16.7888 15.2766M2.50042 1L20.5004 19M9.3791 7.87868C8.8362 8.42157 8.50042 9.17157 8.50042 10C8.50042 11.6569 9.84356 13 11.5004 13C12.3288 13 13.0788 12.6642 13.6217 12.1213" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              Hidden fields
+            </div>
+            <div class="flex font-semibold my-3">
+              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M14.5 8V6C14.5 3.23858 12.2614 1 9.5 1C6.73858 1 4.5 3.23858 4.5 6V8M9.5 12.5V14.5M6.3 19H12.7C14.3802 19 15.2202 19 15.862 18.673C16.4265 18.3854 16.8854 17.9265 17.173 17.362C17.5 16.7202 17.5 15.8802 17.5 14.2V12.8C17.5 11.1198 17.5 10.2798 17.173 9.63803C16.8854 9.07354 16.4265 8.6146 15.862 8.32698C15.2202 8 14.3802 8 12.7 8H6.3C4.61984 8 3.77976 8 3.13803 8.32698C2.57354 8.6146 2.1146 9.07354 1.82698 9.63803C1.5 10.2798 1.5 11.1198 1.5 12.8V14.2C1.5 15.8802 1.5 16.7202 1.82698 17.362C2.1146 17.9265 2.57354 18.3854 3.13803 18.673C3.77976 19 4.61984 19 6.3 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              Form password
+            </div>
+            <div class="flex font-semibold my-3">
+              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M16.5 13C14.8431 13 13.5 14.3431 13.5 16C13.5 17.6569 14.8431 19 16.5 19C18.1569 19 19.5 17.6569 19.5 16C19.5 14.3431 18.1569 13 16.5 13ZM16.5 13V6C16.5 5.46957 16.2893 4.96086 15.9142 4.58579C15.5391 4.21071 15.0304 4 14.5 4H11.5M4.5 7C6.15685 7 7.5 5.65685 7.5 4C7.5 2.34315 6.15685 1 4.5 1C2.84315 1 1.5 2.34315 1.5 4C1.5 5.65685 2.84315 7 4.5 7ZM4.5 7V19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              Webhooks
+            </div>
+            <div class="flex font-semibold my-3">
+              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M13 13L16 10L13 7M8 7L5 10L8 13M6.3 19H14.7C16.3802 19 17.2202 19 17.862 18.673C18.4265 18.3854 18.8854 17.9265 19.173 17.362C19.5 16.7202 19.5 15.8802 19.5 14.2V5.8C19.5 4.11984 19.5 3.27976 19.173 2.63803C18.8854 2.07354 18.4265 1.6146 17.862 1.32698C17.2202 1 16.3802 1 14.7 1H6.3C4.61984 1 3.77976 1 3.13803 1.32698C2.57354 1.6146 2.1146 2.07354 1.82698 2.63803C1.5 3.27976 1.5 4.11984 1.5 5.8V14.2C1.5 15.8802 1.5 16.7202 1.82698 17.362C2.1146 17.9265 2.57354 18.3854 3.13803 18.673C3.77976 19 4.61984 19 6.3 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              Custom code
+            </div>
+            <div class="flex font-semibold my-3">
+              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M19.5 7H1.5M14.5 1V4M6.5 1V4M10.5 17V11M7.5 14H13.5M6.3 21H14.7C16.3802 21 17.2202 21 17.862 20.673C18.4265 20.3854 18.8854 19.9265 19.173 19.362C19.5 18.7202 19.5 17.8802 19.5 16.2V7.8C19.5 6.11984 19.5 5.27976 19.173 4.63803C18.8854 4.07354 18.4265 3.6146 17.862 3.32698C17.2202 3 16.3802 3 14.7 3H6.3C4.61984 3 3.77976 3 3.13803 3.32698C2.57354 3.6146 2.1146 4.07354 1.82698 4.63803C1.5 5.27976 1.5 6.11984 1.5 7.8V16.2C1.5 17.8802 1.5 18.7202 1.82698 19.362C2.1146 19.9265 2.57354 20.3854 3.13803 20.673C3.77976 21 4.61984 21 6.3 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              Closing date
+            </div>
+            <div class="flex font-semibold my-3">
+              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M9.5 3C10.0523 3 10.5 2.55228 10.5 2C10.5 1.44772 10.0523 1 9.5 1C8.94772 1 8.5 1.44772 8.5 2C8.5 2.55228 8.94772 3 9.5 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9.5 10C10.0523 10 10.5 9.55228 10.5 9C10.5 8.44772 10.0523 8 9.5 8C8.94772 8 8.5 8.44772 8.5 9C8.5 9.55228 8.94772 10 9.5 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9.5 17C10.0523 17 10.5 16.5523 10.5 16C10.5 15.4477 10.0523 15 9.5 15C8.94772 15 8.5 15.4477 8.5 16C8.5 16.5523 8.94772 17 9.5 17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M16.5 3C17.0523 3 17.5 2.55228 17.5 2C17.5 1.44772 17.0523 1 16.5 1C15.9477 1 15.5 1.44772 15.5 2C15.5 2.55228 15.9477 3 16.5 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M16.5 10C17.0523 10 17.5 9.55228 17.5 9C17.5 8.44772 17.0523 8 16.5 8C15.9477 8 15.5 8.44772 15.5 9C15.5 9.55228 15.9477 10 16.5 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M16.5 17C17.0523 17 17.5 16.5523 17.5 16C17.5 15.4477 17.0523 15 16.5 15C15.9477 15 15.5 15.4477 15.5 16C15.5 16.5523 15.9477 17 16.5 17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M2.5 3C3.05228 3 3.5 2.55228 3.5 2C3.5 1.44772 3.05228 1 2.5 1C1.94772 1 1.5 1.44772 1.5 2C1.5 2.55228 1.94772 3 2.5 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M2.5 10C3.05228 10 3.5 9.55228 3.5 9C3.5 8.44772 3.05228 8 2.5 8C1.94772 8 1.5 8.44772 1.5 9C1.5 9.55228 1.94772 10 2.5 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M2.5 17C3.05228 17 3.5 16.5523 3.5 16C3.5 15.4477 3.05228 15 2.5 15C1.94772 15 1.5 15.4477 1.5 16C1.5 16.5523 1.94772 17 2.5 17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              And much more...
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {},
+    data: () => ({}),
+    methods: {}
+}
+</script>

resources/js/pages/auth/login.vue

@@ -1,45 +1,82 @@
 <template>
   <div>
     <div class="flex mt-6 mb-10">
-      <div class="w-full md:w-2/3 md:mx-auto md:max-w-md px-4">
-        <h1 class="my-6">
-          {{ $t('login') }}
-        </h1>
-        <form @submit.prevent="login" @keydown="form.onKeydown($event)">
-          <!-- Email -->
-          <text-input name="email" :form="form" :label="$t('email')" :required="true" />
+      <div class="w-full md:max-w-6xl mx-auto px-4 flex md:flex-row-reverse flex-wrap">
+        <div class="w-full md:w-1/2 md:p-6">
+          <div class="border rounded-md p-6 shadow-md sticky top-4">
+            <h2 class="font-semibold text-2xl">
+              Login to OpnForm
+            </h2>
+            <small>Welcome back! Please enter your details.</small>
 
-          <!-- Password -->
-          <text-input class="mt-8" native-type="password"
-                      name="password" :form="form" :label="$t('password')" :required="true"
-          />
+            <form @submit.prevent="login" @keydown="form.onKeydown($event)" class="mt-4">
+              <!-- Email -->
+              <text-input name="email" :form="form" :label="$t('email')" :required="true" placeholder="Your email address" />
 
-          <!-- Remember Me -->
-          <div class="relative flex items-center mt-8 mb-6">
-            <v-checkbox v-model="remember" class="w-full md:w-1/2" name="remember">
-              {{ $t('remember_me') }}
-            </v-checkbox>
+              <!-- Password -->
+              <text-input native-type="password" placeholder="Your password"
+                          name="password" :form="form" :label="$t('password')" :required="true"
+              />
 
-            <div class="w-full md:w-1/2 text-right">
-              <router-link :to="{ name: 'password.request' }"
-                          class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700"
-              >
-                {{ $t('forgot_password') }}
-              </router-link>
-            </div>
+              <!-- Remember Me -->
+              <div class="relative flex items-center my-5">
+                <v-checkbox v-model="remember" class="w-full md:w-1/2" name="remember" size="small">
+                  {{ $t('remember_me') }}
+                </v-checkbox>
+
+                <div class="w-full md:w-1/2 text-right">
+                  <router-link :to="{ name: 'password.request' }" class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700">
+                    Forgot your password?
+                  </router-link>
+                </div>
+              </div>
+
+              <!-- Submit Button -->
+              <v-button dusk="btn_login" :loading="form.busy">Log in to continue</v-button>
+
+              <p class="text-gray-500 mt-4">
+                Don't have an account?  <router-link :to="{name:'register'}" class="font-semibold ml-1">Sign Up</router-link>
+              </p>
+            </form>
           </div>
-
-          <!-- Submit Button -->
-          <v-button class="w-full" dusk="btn_login" :loading="form.busy">
-            {{ $t('login') }}
-          </v-button>
-
-          <p class="text-center text-gray-500 mt-4">
-            No Account? <router-link :to="{name:'register'}">
-              Register
-            </router-link>
+        </div>
+        <div class="w-full md:w-1/2 md:p-6 mt-8 md:mt-0 ">
+          <h1 class="font-bold">
+            Create beautiful Notion forms and share them anywhere
+          </h1>
+          <p class="text-gray-900 my-4 text-lg">
+            It takes seconds, you don't need to know how to code and it's free.
           </p>
-        </form>
+          <div class="flex flex-wrap justify-center">
+            <p class="px-3 pb-3 text-sm text-gray-500">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              Unlimited forms
+            </p>
+            <p class="px-3 pb-3 text-sm text-gray-500">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              Unlimited fields
+            </p>
+            <p class="px-3 pb-3 text-sm text-gray-500">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              Unlimited submissions
+            </p>
+          </div>
+          <div class="mt-3 p-6">
+            <testimonials />
+          </div>
+        </div>
       </div>
     </div>
     <open-form-footer />
@@ -50,10 +87,12 @@
 import Form from 'vform'
 import Cookies from 'js-cookie'
 import OpenFormFooter from '../../components/pages/OpenFormFooter'
+import Testimonials from '../../components/pages/welcome/Testimonials'
 
 export default {
   components: {
-    OpenFormFooter
+    OpenFormFooter,
+    Testimonials
   },
 
   middleware: 'guest',

resources/js/pages/auth/register.vue

@@ -1,47 +1,90 @@
 <template>
   <div>
     <div class="flex mt-6 mb-10">
-      <div class="w-full md:w-2/3 md:mx-auto md:max-w-md px-4">
-        <template v-if="mustVerifyEmail">
-          <h1 class="my-6">
-            {{ $t('register') }}
-          </h1>
-          <div class="text-green-500">
-            {{ $t('verify_email_address') }}
+      <div class="w-full md:max-w-6xl mx-auto px-4 flex md:flex-row-reverse flex-wrap">
+        <div class="w-full md:w-1/2 md:p-6">
+          <div class="border rounded-md p-6 shadow-md sticky top-4">
+            <h2 class="font-semibold text-2xl">
+              Create an account
+            </h2>
+            <small>Sign up in less than 2 minutes.</small>
+
+            <form @submit.prevent="register" @keydown="form.onKeydown($event)" class="mt-4">
+              <!-- Name -->
+              <text-input name="name" :form="form" :label="$t('name')" placeholder="Your name" :required="true" />
+
+              <!-- Email -->
+              <text-input name="email" :form="form" :label="$t('email')" :required="true" placeholder="Your email address" />
+
+              <select-input name="hear_about_us" :options="hearAboutUsOptions" :form="form" placeholder="Select option"
+                            label="How did you hear about us?" :required="true"
+              />
+
+              <!-- Password -->
+              <text-input native-type="password" placeholder="Enter password"
+                          name="password" :form="form" :label="$t('password')" :required="true"
+              />
+
+              <!-- Password Confirmation-->
+              <text-input native-type="password" :form="form" :required="true" placeholder="Enter confirm password"
+                          name="password_confirmation"  :label="$t('confirm_password')"
+              />
+
+              <checkbox-input :form="form" name="agree_terms" :required="true">
+                <template #label>
+                  I agree with the <router-link :to="{name:'terms-conditions'}" target="_blank">Terms and conditions</router-link> and <router-link :to="{name:'privacy-policy'}" target="_blank">Privacy policy</router-link> of the website and I accept them.
+                </template>
+              </checkbox-input>
+
+              <!-- Submit Button -->
+              <v-button :loading="form.busy">Create an account</v-button>
+
+              <p class="text-gray-500 mt-4">
+                Already have an account?  <router-link :to="{name:'login'}" class="font-semibold ml-1">Log In</router-link>
+              </p>
+
+              <!-- GitHub Register Button -->
+              <login-with-github />
+            </form>
           </div>
-        </template>
-        <template v-else>
-          <h1 class="my-6">
-            {{ $t('register') }}
+        </div>
+        <div class="w-full md:w-1/2 md:p-6 mt-8 md:mt-0 ">
+          <h1 class="font-bold">
+            Create beautiful Notion forms and share them anywhere
           </h1>
-          <form @submit.prevent="register" @keydown="form.onKeydown($event)">
-            <!-- Name -->
-            <text-input name="name" :form="form" :label="$t('name')" :required="true" />
-
-            <!-- Email -->
-            <text-input name="email" :form="form" :label="$t('email')" :required="true" />
-
-            <select-input name="hear_about_us" :options="hearAboutUsOptions" :form="form" label="How did you hear about us?" :required="true" />
-
-            <!-- Password -->
-            <text-input native-type="password"
-                        name="password" :form="form" :label="$t('password')" :required="true"
-            />
-
-            <!-- Password Confirmation-->
-            <text-input class="mb-4" native-type="password"
-                        name="password_confirmation" :form="form" :label="$t('confirm_password')" :required="true"
-            />
-
-            <!-- Submit Button -->
-            <v-button class="w-full" :loading="form.busy">
-              {{ $t('register') }}
-            </v-button>
-
-            <!-- GitHub Register Button -->
-            <login-with-github />
-          </form>
-        </template>
+          <p class="text-gray-900 my-4 text-lg">
+            It takes seconds, you don't need to know how to code and it's free.
+          </p>
+          <div class="flex flex-wrap justify-center">
+            <p class="px-3 pb-3 text-sm text-gray-500">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              Unlimited forms
+            </p>
+            <p class="px-3 pb-3 text-sm text-gray-500">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              Unlimited fields
+            </p>
+            <p class="px-3 pb-3 text-sm text-gray-500">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              Unlimited submissions
+            </p>
+          </div>
+          <div class="mt-3 p-6">
+            <testimonials />
+          </div>
+        </div>
       </div>
     </div>
     <open-form-footer />
@@ -54,9 +97,11 @@ import LoginWithGithub from '~/components/LoginWithGithub'
 import SelectInput from '../../components/forms/SelectInput'
 import OpenFormFooter from '../../components/pages/OpenFormFooter'
 import { initCrisp } from '../../middleware/check-auth'
+import Testimonials from '../../components/pages/welcome/Testimonials'
 
 export default {
   components: {
+    Testimonials,
     SelectInput,
     LoginWithGithub,
     OpenFormFooter
@@ -73,7 +118,8 @@ export default {
       name: '',
       email: '',
       password: '',
-      password_confirmation: ''
+      password_confirmation: '',
+      agree_terms: false
     }),
     mustVerifyEmail: false
   }),

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 v-if="currentStep===1" key="2">
+      <div 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/js/pages/welcome.vue

@@ -59,90 +59,7 @@
         </div>
       </div>
 
-      <div class="bg-gray-50 dark:bg-notion-dark py-8">
-        <div class="md:max-w-5xl md:mx-auto w-full">
-          <div class="my-5 text-center">
-            <h3 class="font-semibold text-3xl">And many more features</h3>
-            <p class="w-full mt-2 mb-8">
-              OpnForm makes form building easy and comes with powerful features.
-            </p>
-            <div class="grid md:grid-cols-3 mt-10 mb-5">
-              <div class="flex font-semibold my-3">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                     stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                        d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"/>
-                </svg>
-                Form logic
-              </div>
-              <div class="flex font-semibold my-3">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                     stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                        d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"/>
-                </svg>
-                URL pre-fill
-              </div>
-              <div class="flex font-semibold my-3">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                     stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                        d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"/>
-                </svg>
-                Unique submission ID
-              </div>
-              <div class="flex font-semibold my-3">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                     stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                        d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"/>
-                </svg>
-                Hidden fields
-              </div>
-              <div class="flex font-semibold my-3">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                     stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                        d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"/>
-                </svg>
-                Form password
-              </div>
-              <div class="flex font-semibold my-3">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                     stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                        d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"/>
-                </svg>
-                Webhooks
-              </div>
-              <div class="flex font-semibold my-3">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                     stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                        d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"/>
-                </svg>
-                Custom code
-              </div>
-              <div class="flex font-semibold my-3">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                     stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                        d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"/>
-                </svg>
-                Closing date
-              </div>
-              <div class="flex font-semibold my-3">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                     stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                        d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"/>
-                </svg>
-                And much more...
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <more-features />
 
       <div class="pt-20 pb-5 text-center bg-white dark:bg-notion-dark-light">
         <h3 class="font-semibold text-3xl">See what people are saying</h3>
@@ -162,33 +79,18 @@
         </div>
         <div class="flex justify-center mt-6">
           <a target="_blank" href="" class="mr-4">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                 class="w-8 h-8 text-white" viewBox="0 0 256 250" version="1.1" preserveAspectRatio="xMidYMid">
-              <g>
-                <path
-                  d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z"
-                  fill="currentColor"/>
-              </g>
+            <svg class="w-6 h-6 text-white" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M7.55016 19.7502C16.6045 19.7502 21.5583 12.2469 21.5583 5.74211C21.5583 5.53117 21.5536 5.31554 21.5442 5.1046C22.5079 4.40771 23.3395 3.5445 24 2.55554C23.1025 2.95484 22.1496 3.21563 21.1739 3.32898C22.2013 2.71315 22.9705 1.74572 23.3391 0.606011C22.3726 1.1788 21.3156 1.58286 20.2134 1.80085C19.4708 1.01181 18.489 0.48936 17.4197 0.314295C16.3504 0.13923 15.2532 0.321295 14.2977 0.832341C13.3423 1.34339 12.5818 2.15495 12.1338 3.14156C11.6859 4.12816 11.5754 5.23486 11.8195 6.29054C9.86249 6.19233 7.94794 5.68395 6.19998 4.79834C4.45203 3.91274 2.90969 2.66968 1.67297 1.14976C1.0444 2.23349 0.852057 3.51589 1.13503 4.73634C1.418 5.95678 2.15506 7.02369 3.19641 7.72023C2.41463 7.69541 1.64998 7.48492 0.965625 7.10617V7.1671C0.964925 8.30439 1.3581 9.40683 2.07831 10.287C2.79852 11.1672 3.80132 11.7708 4.91625 11.9952C4.19206 12.1934 3.43198 12.2222 2.69484 12.0796C3.00945 13.0577 3.62157 13.9131 4.44577 14.5266C5.26997 15.14 6.26512 15.4808 7.29234 15.5015C5.54842 16.8714 3.39417 17.6144 1.17656 17.6109C0.783287 17.6103 0.390399 17.5861 0 17.5387C2.25286 18.984 4.87353 19.7516 7.55016 19.7502Z" fill="currentColor"/>
             </svg>
           </a>
           <a target="_blank" href="" class="mr-4">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                 class="w-8 h-8 text-white" viewBox="0 0 256 250" version="1.1" preserveAspectRatio="xMidYMid">
-              <g>
-                <path
-                  d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z"
-                  fill="currentColor"/>
-              </g>
+            <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 17.9895 4.3882 22.954 10.125 23.8542V15.4688H7.07812V12H10.125V9.35625C10.125 6.34875 11.9166 4.6875 14.6576 4.6875C15.9701 4.6875 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.34 7.875 13.875 8.80008 13.875 9.75V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9895 24 12Z" fill="currentColor"/>
             </svg>
           </a>
           <a target="_blank" href="" class="mr-4">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                 class="w-8 h-8 text-white" viewBox="0 0 256 250" version="1.1" preserveAspectRatio="xMidYMid">
-              <g>
-                <path
-                  d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z"
-                  fill="currentColor"/>
-              </g>
+            <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.3724 0 0 5.3808 0 12.0204C0 17.3304 3.438 21.8364 8.2068 23.4252C8.8068 23.5356 9.0252 23.1648 9.0252 22.8456C9.0252 22.5612 9.0156 21.804 9.0096 20.802C5.6712 21.528 4.9668 19.1904 4.9668 19.1904C4.422 17.8008 3.6348 17.4312 3.6348 17.4312C2.5452 16.6872 3.7176 16.7016 3.7176 16.7016C4.9212 16.7856 5.5548 17.94 5.5548 17.94C6.6252 19.776 8.364 19.2456 9.0468 18.9384C9.1572 18.162 9.4668 17.6328 9.81 17.3328C7.146 17.0292 4.344 15.9972 4.344 11.3916C4.344 10.08 4.812 9.006 5.5788 8.166C5.4552 7.8624 5.0436 6.6396 5.6964 4.986C5.6964 4.986 6.7044 4.662 8.9964 6.2172C9.97532 5.95022 10.9853 5.81423 12 5.8128C13.02 5.8176 14.046 5.9508 15.0048 6.2172C17.2956 4.662 18.3012 4.9848 18.3012 4.9848C18.9564 6.6396 18.5436 7.8624 18.4212 8.166C19.1892 9.006 19.6548 10.08 19.6548 11.3916C19.6548 16.0092 16.848 17.0256 14.1756 17.3232C14.6064 17.694 14.9892 18.4272 14.9892 19.5492C14.9892 21.1548 14.9748 22.452 14.9748 22.8456C14.9748 23.1672 15.1908 23.5416 15.8004 23.424C18.19 22.6225 20.2672 21.0904 21.7386 19.0441C23.2099 16.9977 24.001 14.5408 24 12.0204C24 5.3808 18.6264 0 12 0Z" fill="currentColor"/>
             </svg>
           </a>
         </div>
@@ -203,11 +105,12 @@
 <script>
 import {mapGetters} from 'vuex'
 import Features from '~/components/pages/welcome/Features'
+import MoreFeatures from '~/components/pages/welcome/MoreFeatures'
 import OpenFormFooter from '../components/pages/OpenFormFooter'
 import Testimonials from '../components/pages/welcome/Testimonials'
 
 export default {
-  components: {Testimonials, OpenFormFooter, Features},
+  components: {Testimonials, OpenFormFooter, Features, MoreFeatures},
 
   layout: 'default',
 

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['500'],
+          default: colors.blue['600'],
+          DEFAULT: colors.blue['600'],
           dark: colors.blue['800']
         },
         'notion-dark': {

tests/Feature/RegisterTest.php

@@ -10,6 +10,7 @@ it('can register', function () {
         'hear_about_us' => 'google',
         'password' => 'secret',
         'password_confirmation' => 'secret',
+        'agree_terms' => true
     ])
         ->assertSuccessful()
         ->assertJsonStructure(['id', 'name', 'email']);