adjust templates, add timezone and locale

app/javascript/application.js

@@ -12,6 +12,7 @@ import ClipboardCopy from './elements/clipboard_copy'
 import DynamicList from './elements/dynamic_list'
 import DownloadButton from './elements/download_button'
 import SetOriginUrl from './elements/set_origin_url'
+import SetTimezone from './elements/set_timezone'
 
 document.addEventListener('turbo:before-cache', () => {
   window.flash?.remove()
@@ -32,6 +33,7 @@ window.customElements.define('clipboard-copy', ClipboardCopy)
 window.customElements.define('dynamic-list', DynamicList)
 window.customElements.define('download-button', DownloadButton)
 window.customElements.define('set-origin-url', SetOriginUrl)
+window.customElements.define('set-timezone', SetTimezone)
 
 window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/set_timezone.js

@@ -0,0 +1,7 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    if (this.dataset.inputId) {
+      document.getElementById(this.dataset.inputId).value = Intl.DateTimeFormat().resolvedOptions().timeZone
+    }
+  }
+}

app/javascript/submission_form/area.vue

@@ -207,7 +207,7 @@ export default {
     },
     formattedDate () {
       if (this.field.type === 'date' && this.modelValue) {
-        return new Intl.DateTimeFormat({ year: 'numeric', month: 'numeric', day: 'numeric' }).format(new Date(this.modelValue))
+        return new Intl.DateTimeFormat([], { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(this.modelValue))
       } else {
         return ''
       }

app/javascript/submission_form/form.vue

@@ -41,6 +41,10 @@
           >{{ currentField.name }}
             <template v-if="!currentField.required">(optional)</template>
           </label>
+          <div
+            v-else
+            class="py-1"
+          />
           <div>
             <input
               :id="currentField.uuid"
@@ -62,6 +66,10 @@
           >{{ currentField.name }}
             <template v-if="!currentField.required">(optional)</template>
           </label>
+          <div
+            v-else
+            class="py-1"
+          />
           <div class="text-center">
             <input
               :id="currentField.uuid"
@@ -82,6 +90,10 @@
           >{{ currentField.name }}
             <template v-if="!currentField.required">(optional)</template>
           </label>
+          <div
+            v-else
+            class="py-1"
+          />
           <select
             :id="currentField.uuid"
             :required="currentField.required"
@@ -246,7 +258,7 @@
           :key="step[0].uuid"
           href="#"
           class="inline border border-base-300 h-3 w-3 rounded-full mx-1"
-          :class="{ 'bg-base-200': index === currentStep, 'bg-base-content': index < currentStep || isCompleted, 'bg-white': index > currentStep }"
+          :class="{ 'bg-base-300': index === currentStep, 'bg-base-content': index < currentStep || isCompleted, 'bg-white': index > currentStep }"
           @click.prevent="isCompleted ? '' : goToStep(step, true)"
         />
       </div>