Some changes

src/components/MainForm.vue

@@ -88,8 +88,8 @@ function setConfirmationModal(event : Event) {
                            v-bind:dark = "isDarkTheme"/>
           </div>
         </div>
-        <button class="button is-info mt-5">Submit</button>
-        <button class="button is-info mt-5 ml-3" @click="setConfirmationModal">Potwierdź</button>
+        <button class="button is-info mt-5">Zapisz</button>
+        <button class="button is-success mt-5 ml-3" @click="setConfirmationModal">Potwierdź</button>
       </div>
     </div>
     <div v-for="category in categories" :key="category.Kod">
@@ -105,6 +105,7 @@ function setConfirmationModal(event : Event) {
                   type="text"
                   placeholder="Kwota"
                   v-model="product.Twr_Cena"
+                  v-bind:class="{ 'is-success has-background-light': product.Quantity != undefined && product.Quantity as unknown as string != '' }"
                 />
               </div>
             </div>
@@ -115,20 +116,21 @@ function setConfirmationModal(event : Event) {
                   type="text"
                   placeholder="Kwota"
                   v-model="product.Twr_CenaZ"
+                  v-bind:class="{ 'is-success has-background-light': product.Quantity != undefined && product.Quantity as unknown as string != '' }"
                 />
               </div>
             </div>
             <div class="column">
               <div class="field has-addons">
                 <p class="control">
-                  <span class="select is-small">
+                  <span class="select is-small" v-bind:class="{ 'is-success has-background-light': product.Quantity != undefined }">
                     <select v-model="product.ChosenOption" readonly>
                       <option v-for="option in product.Options" :key="option">{{ option }}</option>
                     </select>
                   </span>
                 </p>
                 <p class="control is-expanded">
-                  <input class="input is-small" type="text" placeholder="Ilość" v-model="product.Quantity">
+                  <input class="input is-small" type="text" placeholder="Ilość" v-model="product.Quantity" v-bind:class="{ 'is-success': product.Quantity != undefined }">
                 </p>
               </div>
             </div>
@@ -139,10 +141,10 @@ function setConfirmationModal(event : Event) {
     </div>
     <div class="columns mt-1 is-variable is-mobile">
       <div class = "column is-6">
-        <button class="button is-info is-fullwidth is-large">Submit</button>
+        <button class="button is-info is-fullwidth is-large">Zapisz</button>
       </div>
       <div class = "is-large column is-6 ml-3">
-        <button class="button is-info is-fullwidth is-large" @click="showConfirmationModal = true">Potwierdź</button>
+        <button class="button is-success is-fullwidth is-large" @click="showConfirmationModal = true">Potwierdź</button>
       </div>
     </div>
   </form>

src/components/NavBar.vue

@@ -6,6 +6,7 @@ import { useOrdersStore } from '@/stores/orders.store'
 import { useContractorsStore } from '@/stores/contractors.store'
 import { useCategoriesStore } from '@/stores/categories.store'
 import { storeToRefs } from 'pinia'
+import { useUserStore } from '@/stores/user.store'
 
 const activator =  ref(false);
 
@@ -13,6 +14,9 @@ const siteControlStore = useSiteControlStore();
 const ordersStore = useOrdersStore();
 const contractorsStore = useContractorsStore();
 const categoriesStore = useCategoriesStore();
+const userStore = useUserStore();
+
+const { username } = storeToRefs(userStore);
 
 
 function makeBurger() {
@@ -83,9 +87,12 @@ function newOrder() {
             <button class="button is-info" @click="newOrder">
             Nowe Zamówienie
             </button>
-            <button class="button is-light" @click="routeLogin">
+            <button class="button is-light" @click="routeLogin" v-if="username == undefined">
               Log in
             </button>
+            <button class="button is-light is-static" @click="routeLogin" v-if="username != undefined">
+              {{ username }}
+            </button>
           </div>
         </div>
       </div>

src/components/OrdersSelector.vue

@@ -11,6 +11,7 @@ const searchOrderDate = ref<Date>();
 const isOutOfBuffer = ref<boolean>(false);
 const isInBufor = ref<boolean>(false);
 const { orders } = storeToRefs(ordersStore);
+const areOrdersLoading = ref<boolean>(false);
 
 watch(isInBufor, (val) => {
   if(val && val == isOutOfBuffer.value) {
@@ -34,11 +35,13 @@ function viewOrder(uuid : string) {
 
 async function fetchOrders(event : Event) {
   event.preventDefault();
+  areOrdersLoading.value = true;
   if(isInBufor.value) {
     orders.value = await ordersStore.fetchOrdersInBuffer();
   } else if (isOutOfBuffer.value) {
     orders.value = await ordersStore.fetchOrdersOutOfBuffer();
   }
+  areOrdersLoading.value = false;
 }
 
 </script>
@@ -70,7 +73,7 @@ async function fetchOrders(event : Event) {
             </label>
           </div>
         </div>
-        <button class="button is-primary is-small is-expanded" @click="fetchOrders">Pobierz zamówienia</button>
+        <button class="button is-primary is-small is-expanded" @click="fetchOrders"  :class="{ 'is-loading': areOrdersLoading }">Pobierz zamówienia</button>
       </div>
     </form>
     <div class="box">