Refactor, improving responsivness

src/components/MainForm.vue

@@ -15,7 +15,7 @@ const ordersStore = useOrdersStore();
 const siteControlStore = useSiteControlStore();
 
 const { contractor, contractors } = storeToRefs(contractorsStore);
-const { deliveryDate, uuid } = storeToRefs(ordersStore);
+const { deliveryDate, uuid, additionalNotes } = storeToRefs(ordersStore);
 const { categories } = storeToRefs(categoriesStore);
 const { showConfirmationModal, showCancellationModal, isDarkTheme } = storeToRefs(siteControlStore);
 
@@ -170,8 +170,8 @@ onBeforeUnmount( function () {
 </script>
 
 <template>
-  <form class="box" @submit.prevent="createJSON">
-    <div class="mb-3">
+  <form class="box is-shadowless" @submit.prevent="createJSON">
+    <div>
       <div class="box">
         <div class="mb-3">
           <h1 class="title is-5"><b>ZAMÓWIENIE</b></h1>
@@ -213,14 +213,16 @@ onBeforeUnmount( function () {
                            :clearable="true"
                            input-class-name="input is-small calendar-background"
                            menu-class-name="calendar-background"
-                           v-bind:dark = "isDarkTheme"/>
+                           v-bind:dark = "!!window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches"
+            />
           </div>
         </div>
         <div class="field mt-5">
           <label class="label is-small">Uwagi do zamówienia</label>
           <textarea
+            v-model="additionalNotes"
             class="textarea"
-            placeholder="Jeszcze nie połączone z bazą danych"
+            placeholder="Uwagi do zamówienia"
             rows="5"
           ></textarea>
         </div>