From de4236f3d15ad737d2220a0fc5becf821f2615ea Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Thu, 31 Mar 2022 09:09:01 +0200
Subject: [PATCH] #99 - tailwind plugin for eslint

---
 .eslintrc.js                                  |  6 ++
 package-lock.json                             | 26 ++++++
 package.json                                  |  1 +
 resources/js/Pages/Calendar.vue               | 36 ++++----
 resources/js/Pages/Error.vue                  | 12 +--
 resources/js/Pages/Holidays/Create.vue        | 20 ++--
 resources/js/Pages/Holidays/Edit.vue          | 20 ++--
 resources/js/Pages/Holidays/Index.vue         | 36 ++++----
 resources/js/Pages/Login.vue                  | 22 ++---
 resources/js/Pages/MonthlyUsage.vue           | 20 ++--
 resources/js/Pages/Users/Create.vue           | 66 ++++++-------
 resources/js/Pages/Users/Edit.vue             | 66 ++++++-------
 resources/js/Pages/Users/Index.vue            | 62 ++++++-------
 resources/js/Pages/VacationLimits.vue         | 44 ++++-----
 resources/js/Pages/VacationRequest/Create.vue | 92 +++++++++----------
 resources/js/Pages/VacationRequest/Index.vue  | 54 +++++------
 .../VacationRequest/IndexForApprovers.vue     | 80 ++++++++--------
 resources/js/Pages/VacationRequest/Show.vue   | 92 +++++++++----------
 resources/js/Shared/Activity.vue              | 10 +-
 resources/js/Shared/Layout/AppLayout.vue      |  2 +-
 resources/js/Shared/Layout/GuestLayout.vue    |  2 +-
 resources/js/Shared/MainMenu.vue              | 74 +++++++--------
 resources/js/Shared/Pagination.vue            | 14 +--
 resources/js/Shared/VacationBar.vue           | 24 ++---
 .../js/Shared/VacationTypeCalendarIcon.vue    |  2 +-
 resources/js/Shared/Widgets/AbsenceList.vue   |  8 +-
 .../Widgets/PendingVacationRequests.vue       |  8 +-
 .../js/Shared/Widgets/UpcomingHolidays.vue    |  8 +-
 .../Shared/Widgets/UserVacationRequests.vue   |  6 +-
 resources/js/Shared/Widgets/VacationStats.vue | 34 +++----
 resources/js/Shared/Widgets/Welcome.vue       | 12 +--
 31 files changed, 496 insertions(+), 463 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index e8d2e95..ba5b8c0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,4 +1,5 @@
 module.exports = {
+  plugins: ['tailwindcss'],
   env: {
     node: true,
     'vue/setup-compiler-macros': true,
@@ -15,5 +16,10 @@ module.exports = {
     'comma-dangle': ['error', 'always-multiline'],
     'object-curly-spacing': ['error', 'always'],
     'vue/require-default-prop': 0,
+    'tailwindcss/classnames-order': 'error',
+    'tailwindcss/enforces-negative-arbitrary-values': 'error',
+    'tailwindcss/enforces-shorthand': 'error',
+    'tailwindcss/no-arbitrary-value': 'error',
+    'tailwindcss/no-contradicting-classname': 'error',
   },
 }
diff --git a/package-lock.json b/package-lock.json
index b584c84..6e6fd67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
             },
             "devDependencies": {
                 "eslint": "^8.11.0",
+                "eslint-plugin-tailwindcss": "^3.5.0",
                 "eslint-plugin-vue": "^8.5.0"
             }
         },
@@ -4344,6 +4345,20 @@
                 "url": "https://opencollective.com/eslint"
             }
         },
+        "node_modules/eslint-plugin-tailwindcss": {
+            "version": "3.5.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.5.0.tgz",
+            "integrity": "sha512-m1NyKX1qii3arb+zWrsNO5R15b27aaEm6m1ie9JM9a6yBrU9Q8H62obzT/U8PSITIucMY864uxljV8MiP7H6xg==",
+            "dev": true,
+            "dependencies": {
+                "fast-glob": "^3.2.5",
+                "postcss": "^8.4.4",
+                "tailwindcss": "^3.0.7"
+            },
+            "engines": {
+                "node": ">=12.13.0"
+            }
+        },
         "node_modules/eslint-plugin-vue": {
             "version": "8.5.0",
             "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.5.0.tgz",
@@ -12883,6 +12898,17 @@
                 "v8-compile-cache": "^2.0.3"
             }
         },
+        "eslint-plugin-tailwindcss": {
+            "version": "3.5.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.5.0.tgz",
+            "integrity": "sha512-m1NyKX1qii3arb+zWrsNO5R15b27aaEm6m1ie9JM9a6yBrU9Q8H62obzT/U8PSITIucMY864uxljV8MiP7H6xg==",
+            "dev": true,
+            "requires": {
+                "fast-glob": "^3.2.5",
+                "postcss": "^8.4.4",
+                "tailwindcss": "^3.0.7"
+            }
+        },
         "eslint-plugin-vue": {
             "version": "8.5.0",
             "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.5.0.tgz",
diff --git a/package.json b/package.json
index 320b280..decb2c6 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     },
     "devDependencies": {
         "eslint": "^8.11.0",
+        "eslint-plugin-tailwindcss": "^3.5.0",
         "eslint-plugin-vue": "^8.5.0"
     }
 }
diff --git a/resources/js/Pages/Calendar.vue b/resources/js/Pages/Calendar.vue
index 9e8dc25..cd68451 100644
--- a/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@@ -3,28 +3,28 @@
   <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
       <div class="flex items-center">
-        <h2 class="text-lg leading-6 text-center font-medium text-gray-900">
+        <h2 class="text-lg font-medium leading-6 text-center text-gray-900">
           Kalendarz urlopów
         </h2>
-        <div class="ml-3 flex items-center rounded-md shadow-sm md:items-stretch">
+        <div class="flex items-center ml-3 rounded-md shadow-sm md:items-stretch">
           <InertiaLink
             v-if="previousMonth"
             as="button"
             :href="`/vacation/calendar/${previousMonth.value}`"
-            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
           >
-            <ChevronLeftIcon class="h-5 w-5" />
+            <ChevronLeftIcon class="w-5 h-5" />
           </InertiaLink>
           <span
             v-else
-            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
           >
-            <ChevronLeftIcon class="h-5 w-5" />
+            <ChevronLeftIcon class="w-5 h-5" />
           </span>
           <InertiaLink
             as="button"
             :href="`/vacation/calendar/${currentMonth.value}`"
-            class="hidden border-t border-b border-gray-300 bg-white px-2 text-sm font-medium flex items-center text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
+            class="flex focus:relative items-center px-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 md:block"
           >
             Dzisiaj
           </InertiaLink>
@@ -32,32 +32,32 @@
             v-if="nextMonth"
             as="button"
             :href="`/vacation/calendar/${nextMonth.value}`"
-            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
           >
-            <ChevronRightIcon class="h-5 w-5" />
+            <ChevronRightIcon class="w-5 h-5" />
           </InertiaLink>
           <span
             v-else
-            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
           >
-            <ChevronRightIcon class="h-5 w-5" />
+            <ChevronRightIcon class="w-5 h-5" />
           </span>
         </div>
       </div>
       <div v-if="can.generateTimesheet">
         <a
           :href="`/vacation/timesheet/${selectedMonth.value}`"
-          class="block text-center ml-3 px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+          class="block py-3 px-4 ml-3 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
         >
           Pobierz plik Excel
         </a>
       </div>
     </div>
     <div class="overflow-x-auto">
-      <table class="w-full text-center text-sm border border-gray-300">
+      <table class="w-full text-sm text-center border border-gray-300">
         <thead>
           <tr>
-            <th class="w-64 py-2 border text-lg font-semibold text-gray-800 border-gray-300">
+            <th class="py-2 w-64 text-lg font-semibold text-gray-800 border border-gray-300">
               <div class="flex justify-center items-center">
                 {{ selectedMonth.name }} {{ years.selected.year }}
               </div>
@@ -65,13 +65,13 @@
             <th
               v-for="day in calendar"
               :key="day.dayOfMonth"
-              class="border border-gray-300 text-lg font-semibold text-gray-900 py-2 px-2"
+              class="p-2 text-lg font-semibold text-gray-900 border border-gray-300"
               style="min-width: 46px;"
               :class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }"
             >
               <div>
                 {{ day.dayOfMonth }}
-                <p class="font-normal mt-1 text-sm capitalize">
+                <p class="mt-1 text-sm font-normal capitalize">
                   {{ day.dayOfWeek }}
                 </p>
               </div>
@@ -83,9 +83,9 @@
             v-for="user in users.data"
             :key="user.id"
           >
-            <th class="border border-gray-300 py-2 px-2">
+            <th class="p-2 border border-gray-300">
               <div class="flex justify-start items-center">
-                <span class="inline-flex items-center justify-center h-8 w-8 rounded-full">
+                <span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
                   <img :src="user.avatar">
                 </span>
                 <div class="ml-3">
diff --git a/resources/js/Pages/Error.vue b/resources/js/Pages/Error.vue
index 76bfd45..438ae37 100644
--- a/resources/js/Pages/Error.vue
+++ b/resources/js/Pages/Error.vue
@@ -1,24 +1,24 @@
 <template>
   <InertiaHead :title="error.title" />
-  <div class="min-h-full px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
-    <div class="max-w-max mx-auto">
+  <div class="py-16 px-4 min-h-full sm:py-24 sm:px-6 md:grid md:place-items-center lg:px-8">
+    <div class="mx-auto max-w-max">
       <main class="sm:flex">
         <p class="text-4xl font-extrabold text-blumilk-600 sm:text-5xl">
           {{ error.code }}
         </p>
         <div class="sm:ml-6">
-          <div class="sm:border-l sm:border-gray-200 sm:pl-6">
-            <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
+          <div class="sm:pl-6 sm:border-l sm:border-gray-200">
+            <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
               {{ error.title }}
             </h1>
             <p class="mt-1 text-base text-gray-500">
               {{ error.message }}
             </p>
           </div>
-          <div class="mt-10 flex space-x-3 sm:border-l sm:border-transparent sm:pl-6">
+          <div class="flex mt-10 space-x-3 sm:pl-6 sm:border-l sm:border-transparent">
             <InertiaLink
               href="/"
-              class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+              class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
             >
               Wróć do strony głównej
             </InertiaLink>
diff --git a/resources/js/Pages/Holidays/Create.vue b/resources/js/Pages/Holidays/Create.vue
index 0a94ac9..3e22292 100644
--- a/resources/js/Pages/Holidays/Create.vue
+++ b/resources/js/Pages/Holidays/Create.vue
@@ -2,27 +2,27 @@
   <InertiaHead title="Dodaj dzień wolny" />
   <div class="bg-white shadow-md">
     <div class="p-4 sm:px-6">
-      <h2 class="text-lg leading-6 font-medium text-gray-900">
+      <h2 class="text-lg font-medium leading-6 text-gray-900">
         Dodaj dzień wolny
       </h2>
     </div>
     <form
-      class="border-t border-gray-200 px-6"
+      class="px-6 border-t border-gray-200"
       @submit.prevent="createHoliday"
     >
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+      <div class="items-center py-4 sm:grid sm:grid-cols-3">
         <label
           for="name"
           class="block text-sm font-medium text-gray-700 sm:mt-px"
         >
           Nazwa
         </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
+        <div class="mt-1 sm:col-span-2 sm:mt-0">
           <input
             id="name"
             v-model="form.name"
             type="text"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
           >
           <p
@@ -33,20 +33,20 @@
           </p>
         </div>
       </div>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+      <div class="items-center py-4 sm:grid sm:grid-cols-3">
         <label
           for="date"
           class="block text-sm font-medium text-gray-700 sm:mt-px"
         >
           Data
         </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
+        <div class="mt-1 sm:col-span-2 sm:mt-0">
           <FlatPickr
             id="date"
             v-model="form.date"
             placeholder="Wybierz datę"
             :config="{minDate, maxDate}"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.date, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.date }"
           />
           <p
@@ -61,14 +61,14 @@
         <div class="space-x-3">
           <InertiaLink
             href="/holidays"
-            class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+            class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
           >
             Anuluj
           </InertiaLink>
           <button
             type="submit"
             :disabled="form.processing"
-            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
           >
             Zapisz
           </button>
diff --git a/resources/js/Pages/Holidays/Edit.vue b/resources/js/Pages/Holidays/Edit.vue
index 072701a..215ae45 100644
--- a/resources/js/Pages/Holidays/Edit.vue
+++ b/resources/js/Pages/Holidays/Edit.vue
@@ -2,27 +2,27 @@
   <InertiaHead title="Edytuj dzień wolny" />
   <div class="bg-white shadow-md">
     <div class="p-4 sm:px-6">
-      <h2 class="text-lg leading-6 font-medium text-gray-900">
+      <h2 class="text-lg font-medium leading-6 text-gray-900">
         Edytuj dzień wolny
       </h2>
     </div>
     <form
-      class="border-t border-gray-200 px-6"
+      class="px-6 border-t border-gray-200"
       @submit.prevent="editHoliday"
     >
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+      <div class="items-center py-4 sm:grid sm:grid-cols-3">
         <label
           for="name"
           class="block text-sm font-medium text-gray-700 sm:mt-px"
         >
           Nazwa
         </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
+        <div class="mt-1 sm:col-span-2 sm:mt-0">
           <input
             id="name"
             v-model="form.name"
             type="text"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
           >
           <p
@@ -33,19 +33,19 @@
           </p>
         </div>
       </div>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+      <div class="items-center py-4 sm:grid sm:grid-cols-3">
         <label
           for="date"
           class="block text-sm font-medium text-gray-700 sm:mt-px"
         >
           Data
         </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
+        <div class="mt-1 sm:col-span-2 sm:mt-0">
           <FlatPickr
             id="date"
             v-model="form.date"
             placeholder="Wybierz datę"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.date, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.date }"
           />
           <p
@@ -60,14 +60,14 @@
         <div class="space-x-3">
           <InertiaLink
             href="/holidays"
-            class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+            class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
           >
             Anuluj
           </InertiaLink>
           <button
             type="submit"
             :disabled="form.processing"
-            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
           >
             Zapisz
           </button>
diff --git a/resources/js/Pages/Holidays/Index.vue b/resources/js/Pages/Holidays/Index.vue
index 7e743d0..872cf5c 100644
--- a/resources/js/Pages/Holidays/Index.vue
+++ b/resources/js/Pages/Holidays/Index.vue
@@ -3,45 +3,45 @@
   <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
       <div>
-        <h2 class="text-lg leading-6 font-medium text-gray-900">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
           Dni wolne od pracy
         </h2>
       </div>
       <div v-if="can.manageHolidays">
         <InertiaLink
           href="holidays/create"
-          class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
         >
           Dodaj dzień
         </InertiaLink>
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
+      <div class="overflow-auto xl:overflow-visible">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>
               <th
                 scope="col"
-                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
                 Nazwa
               </th>
               <th
                 scope="col"
-                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
                 Data
               </th>
               <th
                 scope="col"
-                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
                 Dzień tygodnia
               </th>
               <th
                 scope="col"
-                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               />
             </tr>
           </thead>
@@ -51,24 +51,24 @@
               :key="holiday.id"
               class="hover:bg-blumilk-25"
             >
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold capitalize">
+              <td class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
                 {{ holiday.name }}
               </td>
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                 {{ holiday.displayDate }}
               </td>
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                 {{ holiday.dayOfWeek }}
               </td>
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
+              <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
                 <Menu
                   v-if="can.manageHolidays"
                   as="div"
-                  class="relative inline-block text-left"
+                  class="inline-block relative text-left"
                 >
-                  <MenuButton class="rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blumilk-500">
+                  <MenuButton class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100">
                     <DotsVerticalIcon
-                      class="h-5 w-5"
+                      class="w-5 h-5"
                       aria-hidden="true"
                     />
                   </MenuButton>
@@ -81,7 +81,7 @@
                     leave-from-class="transform opacity-100 scale-100"
                     leave-to-class="transform opacity-0 scale-95"
                   >
-                    <MenuItems class="origin-top-right absolute right-0 mt-2 w-56 z-10 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <MenuItems class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right">
                       <div class="py-1">
                         <MenuItem
                           v-slot="{ active }"
@@ -91,7 +91,7 @@
                             :href="`/holidays/${holiday.id}/edit`"
                             :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
                           >
-                            <PencilIcon class="mr-2 h-5 w-5 text-blue-500" /> Edytuj
+                            <PencilIcon class="mr-2 w-5 h-5 text-blue-500" /> Edytuj
                           </InertiaLink>
                         </MenuItem>
                         <MenuItem
@@ -105,7 +105,7 @@
                             :href="`/holidays/${holiday.id}`"
                             :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
                           >
-                            <TrashIcon class="mr-2 h-5 w-5 text-red-500" /> Usuń
+                            <TrashIcon class="mr-2 w-5 h-5 text-red-500" /> Usuń
                           </InertiaLink>
                         </MenuItem>
                       </div>
@@ -117,7 +117,7 @@
             <tr v-if="!holidays.data.length">
               <td
                 colspan="100%"
-                class="text-center py-4 text-xl leading-5 text-gray-700"
+                class="py-4 text-xl leading-5 text-center text-gray-700"
               >
                 Brak danych
               </td>
diff --git a/resources/js/Pages/Login.vue b/resources/js/Pages/Login.vue
index f209e9d..812b10d 100644
--- a/resources/js/Pages/Login.vue
+++ b/resources/js/Pages/Login.vue
@@ -10,23 +10,23 @@
   >
     <div
       v-if="errors.oauth"
-      class="absolute inset-x-2 top-2 sm:mx-auto sm:w-full sm:max-w-md bg-red-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden"
+      class="overflow-hidden absolute inset-x-2 top-2 bg-red-500 rounded-lg ring-1 ring-black ring-opacity-5 shadow-lg pointer-events-auto sm:mx-auto sm:w-full sm:max-w-md"
     >
       <div class="p-4">
         <div class="flex items-center">
-          <div class="w-0 flex-1 flex justify-between">
-            <ExclamationIcon class="h-5 w-5 mr-1 text-white" />
-            <p class="w-0 flex-1 text-sm font-medium text-white">
+          <div class="flex flex-1 justify-between w-0">
+            <ExclamationIcon class="mr-1 w-5 h-5 text-white" />
+            <p class="flex-1 w-0 text-sm font-medium text-white">
               {{ errors.oauth }}
             </p>
           </div>
-          <div class="ml-4 flex-shrink-0 flex">
+          <div class="flex shrink-0 ml-4">
             <button
-              class="bg-red-500 rounded-md inline-flex text-red-100 hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"
+              class="inline-flex text-red-100 hover:text-red-400 bg-red-500 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2"
               @click="delete errors.oauth"
             >
               <span class="sr-only">Close</span>
-              <XIcon class="h-5 w-5" />
+              <XIcon class="w-5 h-5" />
             </button>
           </div>
         </div>
@@ -34,20 +34,20 @@
     </div>
   </transition>
   <div
-    class="sm:mx-auto sm:w-full sm:max-w-md text-white space-y-4 flex flex-col items-center rounded-lg px-4 py-8"
+    class="flex flex-col items-center py-8 px-4 space-y-4 text-white rounded-lg sm:mx-auto sm:w-full sm:max-w-md"
     dusk="login-link"
   >
     <img
-      class="mx-auto h-50 w-auto"
+      class="mx-auto w-auto h-50"
       src="img/logo.png"
     >
     <a
       href="/login/google/start"
-      class="inline-flex justify-center items-center py-2 px-6 rounded-md shadow-sm bg-blumilk-500 text-md font-medium text-white hover:bg-blumilk-700"
+      class="inline-flex justify-center items-center py-2 px-6 font-medium text-white bg-blumilk-500 hover:bg-blumilk-700 rounded-md shadow-sm text-md"
     >
       Zaloguj się za pomocą Google
       <svg
-        class="w-5 h-5 ml-2"
+        class="ml-2 w-5 h-5"
         fill="currentColor"
         viewBox="0 0 24 24"
       >
diff --git a/resources/js/Pages/MonthlyUsage.vue b/resources/js/Pages/MonthlyUsage.vue
index 6c2cff3..3ef5e1d 100644
--- a/resources/js/Pages/MonthlyUsage.vue
+++ b/resources/js/Pages/MonthlyUsage.vue
@@ -3,23 +3,23 @@
   <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
       <div class="flex items-center">
-        <h2 class="text-lg leading-6 font-medium text-gray-900">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
           Wykorzystanie miesięczne urlopu wypoczynkowego
         </h2>
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-x-auto xl:overflow-x-visible overflow-y-hidden">
+      <div class="overflow-x-auto overflow-y-hidden xl:overflow-x-visible">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>
-              <th class="w-64 px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-left">
+              <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
                 Pracownik
               </th>
               <th
                 v-for="month in months"
                 :key="month"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-center"
+                class="py-3 px-6 text-xs font-semibold tracking-wider text-center text-gray-500 uppercase"
                 :class="{'bg-blumilk-50': isCurrentMonth(month)}"
                 style="min-width: 46px;"
               >
@@ -27,7 +27,7 @@
                   {{ month.shortcut }}
                 </span>
               </th>
-              <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-center">
+              <th class="py-3 px-6 text-xs font-semibold tracking-wider text-center text-gray-500 uppercase">
                 Wykorzystanie urlopu
               </th>
             </tr>
@@ -38,11 +38,11 @@
               :key="item.user.id"
               class="hover:bg-blumilk-25"
             >
-              <th class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold capitalize">
+              <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
                 <div class="flex justify-start items-center">
-                  <span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
+                  <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                     <img
-                      class="h-10 w-10 rounded-full"
+                      class="w-10 h-10 rounded-full"
                       :src="item.user.avatar"
                     >
                   </span>
@@ -58,12 +58,12 @@
               <td
                 v-for="month in months"
                 :key="month.value"
-                class="px-4 py-4 text-sm text-gray-500 font-semibold text-center"
+                class="p-4 text-sm font-semibold text-center text-gray-500"
                 :class="{'bg-blumilk-25': isCurrentMonth(month)}"
               >
                 {{ item.months[month.value] ?? '-' }}
               </td>
-              <td class="px-4 py-4 text-sm text-gray-500 font-semibold text-center">
+              <td class="p-4 text-sm font-semibold text-center text-gray-500">
                 <div style="min-width: 300px;">
                   <VacationBar :stats="{ used: item.stats.used, pending: item.stats.pending, remaining: item.stats.remaining }" />
                 </div>
diff --git a/resources/js/Pages/Users/Create.vue b/resources/js/Pages/Users/Create.vue
index a82434b..9b28b64 100644
--- a/resources/js/Pages/Users/Create.vue
+++ b/resources/js/Pages/Users/Create.vue
@@ -2,27 +2,27 @@
   <InertiaHead title="Dodawanie użytkownika" />
   <div class="bg-white shadow-md">
     <div class="p-4 sm:px-6">
-      <h2 class="text-lg leading-6 font-medium text-gray-900">
+      <h2 class="text-lg font-medium leading-6 text-gray-900">
         Dodaj użytkownika
       </h2>
     </div>
     <form
-      class="border-t border-gray-200 px-6"
+      class="px-6 border-t border-gray-200"
       @submit.prevent="createUser"
     >
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+      <div class="items-center py-4 sm:grid sm:grid-cols-3">
         <label
           for="firstName"
           class="block text-sm font-medium text-gray-700 sm:mt-px"
         >
           Imię
         </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
+        <div class="mt-1 sm:col-span-2 sm:mt-0">
           <input
             id="firstName"
             v-model="form.firstName"
             type="text"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }"
           >
           <p
@@ -33,19 +33,19 @@
           </p>
         </div>
       </div>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+      <div class="items-center py-4 sm:grid sm:grid-cols-3">
         <label
           for="lastName"
           class="block text-sm font-medium text-gray-700 sm:mt-px"
         >
           Nazwisko
         </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
+        <div class="mt-1 sm:col-span-2 sm:mt-0">
           <input
             id="lastName"
             v-model="form.lastName"
             type="text"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }"
           >
           <p
@@ -56,19 +56,19 @@
           </p>
         </div>
       </div>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+      <div class="items-center py-4 sm:grid sm:grid-cols-3">
         <label
           for="email"
           class="block text-sm font-medium text-gray-700 sm:mt-px"
         >
           Adres e-mail
         </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
+        <div class="mt-1 sm:col-span-2 sm:mt-0">
           <input
             id="email"
             v-model="form.email"
             type="email"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }"
           >
           <p
@@ -79,19 +79,19 @@
           </p>
         </div>
       </div>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+      <div class="items-center py-4 sm:grid sm:grid-cols-3">
         <label
           for="position"
           class="block text-sm font-medium text-gray-700 sm:mt-px"
         >
           Stanowisko
         </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
+        <div class="mt-1 sm:col-span-2 sm:mt-0">
           <input
             id="position"
             v-model="form.position"
             type="text"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.position, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.position }"
           >
           <p
@@ -105,19 +105,19 @@
       <Listbox
         v-model="form.role"
         as="div"
-        class="sm:grid sm:grid-cols-3 py-4 items-center"
+        class="items-center py-4 sm:grid sm:grid-cols-3"
       >
         <ListboxLabel class="block text-sm font-medium text-gray-700">
           Rola
         </ListboxLabel>
-        <div class="mt-1 relative sm:mt-0 sm:col-span-2">
+        <div class="relative mt-1 sm:col-span-2 sm:mt-0">
           <ListboxButton
-            class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
+            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.role, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.role }"
           >
             <span class="block truncate">{{ form.role.label }}</span>
-            <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-              <SelectorIcon class="h-5 w-5 text-gray-400" />
+            <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+              <SelectorIcon class="w-5 h-5 text-gray-400" />
             </span>
           </ListboxButton>
           <transition
@@ -125,7 +125,7 @@
             leave-from-class="opacity-100"
             leave-to-class="opacity-0"
           >
-            <ListboxOptions class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+            <ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm">
               <ListboxOption
                 v-for="role in roles"
                 :key="role.value"
@@ -142,7 +142,7 @@
                     v-if="selected"
                     :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
                   >
-                    <CheckIcon class="h-5 w-5" />
+                    <CheckIcon class="w-5 h-5" />
                   </span>
                 </li>
               </ListboxOption>
@@ -159,19 +159,19 @@
       <Listbox
         v-model="form.employmentForm"
         as="div"
-        class="sm:grid sm:grid-cols-3 py-4 items-center"
+        class="items-center py-4 sm:grid sm:grid-cols-3"
       >
         <ListboxLabel class="block text-sm font-medium text-gray-700">
           Forma zatrudnienia
         </ListboxLabel>
-        <div class="mt-1 relative sm:mt-0 sm:col-span-2">
+        <div class="relative mt-1 sm:col-span-2 sm:mt-0">
           <ListboxButton
-            class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
+            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
           >
             <span class="block truncate">{{ form.employmentForm.label }}</span>
-            <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-              <SelectorIcon class="h-5 w-5 text-gray-400" />
+            <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+              <SelectorIcon class="w-5 h-5 text-gray-400" />
             </span>
           </ListboxButton>
 
@@ -180,7 +180,7 @@
             leave-from-class="opacity-100"
             leave-to-class="opacity-0"
           >
-            <ListboxOptions class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+            <ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm">
               <ListboxOption
                 v-for="employmentForm in employmentForms"
                 :key="employmentForm.value"
@@ -197,7 +197,7 @@
                     v-if="selected"
                     :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
                   >
-                    <CheckIcon class="h-5 w-5" />
+                    <CheckIcon class="w-5 h-5" />
                   </span>
                 </li>
               </ListboxOption>
@@ -211,19 +211,19 @@
           </p>
         </div>
       </Listbox>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+      <div class="items-center py-4 sm:grid sm:grid-cols-3">
         <label
           for="employment_date"
           class="block text-sm font-medium text-gray-700 sm:mt-px"
         >
           Data zatrudnienia
         </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
+        <div class="mt-1 sm:col-span-2 sm:mt-0">
           <FlatPickr
             id="employment_date"
             v-model="form.employmentDate"
             placeholder="Wybierz datę"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentDate, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentDate }"
           />
           <p
@@ -238,14 +238,14 @@
         <div class="space-x-3">
           <InertiaLink
             href="/users"
-            class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+            class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
           >
             Anuluj
           </InertiaLink>
           <button
             type="submit"
             :disabled="form.processing"
-            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
           >
             Zapisz
           </button>
diff --git a/resources/js/Pages/Users/Edit.vue b/resources/js/Pages/Users/Edit.vue
index a85469d..5835bef 100644
--- a/resources/js/Pages/Users/Edit.vue
+++ b/resources/js/Pages/Users/Edit.vue
@@ -2,27 +2,27 @@
   <InertiaHead title="Edycja użytkownika" />
   <div class="bg-white shadow-md">
     <div class="p-4 sm:px-6">
-      <h2 class="text-lg leading-6 font-medium text-gray-900">
+      <h2 class="text-lg font-medium leading-6 text-gray-900">
         Edytuj użytkownika
       </h2>
     </div>
     <form
-      class="border-t border-gray-200 px-6"
+      class="px-6 border-t border-gray-200"
       @submit.prevent="editUser"
     >
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+      <div class="items-center py-4 sm:grid sm:grid-cols-3">
         <label
           for="firstName"
           class="block text-sm font-medium text-gray-700 sm:mt-px"
         >
           Imię
         </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
+        <div class="mt-1 sm:col-span-2 sm:mt-0">
           <input
             id="firstName"
             v-model="form.firstName"
             type="text"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }"
           >
           <p
@@ -33,19 +33,19 @@
           </p>
         </div>
       </div>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+      <div class="items-center py-4 sm:grid sm:grid-cols-3">
         <label
           for="lastName"
           class="block text-sm font-medium text-gray-700 sm:mt-px"
         >
           Nazwisko
         </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
+        <div class="mt-1 sm:col-span-2 sm:mt-0">
           <input
             id="lastName"
             v-model="form.lastName"
             type="text"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }"
           >
           <p
@@ -56,19 +56,19 @@
           </p>
         </div>
       </div>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+      <div class="items-center py-4 sm:grid sm:grid-cols-3">
         <label
           for="email"
           class="block text-sm font-medium text-gray-700 sm:mt-px"
         >
           Adres e-mail
         </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
+        <div class="mt-1 sm:col-span-2 sm:mt-0">
           <input
             id="email"
             v-model="form.email"
             type="email"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }"
           >
           <p
@@ -79,19 +79,19 @@
           </p>
         </div>
       </div>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+      <div class="items-center py-4 sm:grid sm:grid-cols-3">
         <label
           for="position"
           class="block text-sm font-medium text-gray-700 sm:mt-px"
         >
           Stanowisko
         </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
+        <div class="mt-1 sm:col-span-2 sm:mt-0">
           <input
             id="position"
             v-model="form.position"
             type="text"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.position, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.position }"
           >
           <p
@@ -105,19 +105,19 @@
       <Listbox
         v-model="form.role"
         as="div"
-        class="sm:grid sm:grid-cols-3 py-4 items-center"
+        class="items-center py-4 sm:grid sm:grid-cols-3"
       >
         <ListboxLabel class="block text-sm font-medium text-gray-700">
           Rola
         </ListboxLabel>
-        <div class="mt-1 relative sm:mt-0 sm:col-span-2">
+        <div class="relative mt-1 sm:col-span-2 sm:mt-0">
           <ListboxButton
-            class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
+            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
           >
             <span class="block truncate">{{ form.role.label }}</span>
-            <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-              <SelectorIcon class="h-5 w-5 text-gray-400" />
+            <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+              <SelectorIcon class="w-5 h-5 text-gray-400" />
             </span>
           </ListboxButton>
           <transition
@@ -126,7 +126,7 @@
             leave-to-class="opacity-0"
           >
             <ListboxOptions
-              class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+              class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
             >
               <ListboxOption
                 v-for="role in roles"
@@ -146,7 +146,7 @@
                     v-if="selected"
                     :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
                   >
-                    <CheckIcon class="h-5 w-5" />
+                    <CheckIcon class="w-5 h-5" />
                   </span>
                 </li>
               </ListboxOption>
@@ -163,19 +163,19 @@
       <Listbox
         v-model="form.employmentForm"
         as="div"
-        class="sm:grid sm:grid-cols-3 py-4 items-center"
+        class="items-center py-4 sm:grid sm:grid-cols-3"
       >
         <ListboxLabel class="block text-sm font-medium text-gray-700">
           Forma zatrudnienia
         </ListboxLabel>
-        <div class="mt-1 relative sm:mt-0 sm:col-span-2">
+        <div class="relative mt-1 sm:col-span-2 sm:mt-0">
           <ListboxButton
-            class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
+            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
           >
             <span class="block truncate">{{ form.employmentForm.label }}</span>
-            <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-              <SelectorIcon class="h-5 w-5 text-gray-400" />
+            <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+              <SelectorIcon class="w-5 h-5 text-gray-400" />
             </span>
           </ListboxButton>
           <transition
@@ -184,7 +184,7 @@
             leave-to-class="opacity-0"
           >
             <ListboxOptions
-              class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+              class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
             >
               <ListboxOption
                 v-for="employmentForm in employmentForms"
@@ -204,7 +204,7 @@
                     v-if="selected"
                     :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
                   >
-                    <CheckIcon class="h-5 w-5" />
+                    <CheckIcon class="w-5 h-5" />
                   </span>
                 </li>
               </ListboxOption>
@@ -218,19 +218,19 @@
           </p>
         </div>
       </Listbox>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+      <div class="items-center py-4 sm:grid sm:grid-cols-3">
         <label
           for="employment_date"
           class="block text-sm font-medium text-gray-700 sm:mt-px"
         >
           Data zatrudnienia
         </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
+        <div class="mt-1 sm:col-span-2 sm:mt-0">
           <FlatPickr
             id="employment_date"
             v-model="form.employmentDate"
             placeholder="Wybierz datę"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
             :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentDate, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentDate }"
           />
           <p
@@ -245,14 +245,14 @@
         <div class="space-x-3">
           <InertiaLink
             href="/users"
-            class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+            class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
           >
             Anuluj
           </InertiaLink>
           <button
             type="submit"
             :disabled="form.processing"
-            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
           >
             Zapisz
           </button>
diff --git a/resources/js/Pages/Users/Index.vue b/resources/js/Pages/Users/Index.vue
index 3288780..68bfe74 100644
--- a/resources/js/Pages/Users/Index.vue
+++ b/resources/js/Pages/Users/Index.vue
@@ -3,70 +3,70 @@
   <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
       <div>
-        <h2 class="text-lg leading-6 font-medium text-gray-900">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
           Użytkownicy
         </h2>
       </div>
       <div>
         <InertiaLink
           href="users/create"
-          class="inline-flex items-center text-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
         >
           Dodaj użytkownika
         </InertiaLink>
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="px-4 py-3">
+      <div class="py-3 px-4">
         <div class="relative max-w-md">
-          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-            <SearchIcon class="h-5 w-5 text-gray-400" />
+          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+            <SearchIcon class="w-5 h-5 text-gray-400" />
           </div>
           <input
             v-model.trim="search"
             type="search"
-            class="block w-full bg-white border border-gray-300 rounded-md py-2 pl-10 pr-3 text-sm placeholder-gray-500 focus:outline-none focus:text-gray-900 focus:placeholder-gray-400 focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm mt-1"
+            class="block py-2 pr-3 pl-10 mt-1 w-full text-sm placeholder:text-gray-500 focus:text-gray-900 focus:placeholder:text-gray-400 bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
             placeholder="Szukaj"
           >
         </div>
       </div>
-      <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
+      <div class="overflow-auto xl:overflow-visible">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>
               <th
                 scope="col"
-                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
                 Imię i nazwisko
               </th>
               <th
                 scope="col"
-                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
                 Rola
               </th>
               <th
                 scope="col"
-                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
                 Stanowisko
               </th>
               <th
                 scope="col"
-                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
                 Forma zatrudnienia
               </th>
               <th
                 scope="col"
-                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
                 Data rozpoczęcia
               </th>
               <th
                 scope="col"
-                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               />
             </tr>
           </thead>
@@ -76,43 +76,43 @@
               :key="user.id"
               :class="{ 'bg-red-50': user.deleted, 'hover:bg-blumilk-25': !user.deleted }"
             >
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                 <div class="flex">
-                  <span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
+                  <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                     <img
-                      class="h-10 w-10 rounded-full"
+                      class="w-10 h-10 rounded-full"
                       :src="user.avatar"
                     >
                   </span>
                   <div class="ml-3">
-                    <p class="text-sm font-medium break-all text-gray-900">
+                    <p class="text-sm font-medium text-gray-900 break-all">
                       {{ user.name }}
                     </p>
-                    <p class="text-sm break-all text-gray-500">
+                    <p class="text-sm text-gray-500 break-all">
                       {{ user.email }}
                     </p>
                   </div>
                 </div>
               </td>
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                 {{ user.role }}
               </td>
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                 {{ user.position }}
               </td>
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                 {{ user.employmentForm }}
               </td>
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                 {{ user.employmentDate }}
               </td>
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
+              <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
                 <Menu
                   as="div"
-                  class="relative inline-block text-left"
+                  class="inline-block relative text-left"
                 >
-                  <MenuButton class="rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blumilk-500">
-                    <DotsVerticalIcon class="h-5 w-5" />
+                  <MenuButton class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100">
+                    <DotsVerticalIcon class="w-5 h-5" />
                   </MenuButton>
 
                   <transition
@@ -123,7 +123,7 @@
                     leave-from-class="transform opacity-100 scale-100"
                     leave-to-class="transform opacity-0 scale-95"
                   >
-                    <MenuItems class="origin-top-right absolute right-0 mt-2 w-56 z-10 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <MenuItems class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right">
                       <div
                         v-if="!user.deleted"
                         class="py-1"
@@ -136,7 +136,7 @@
                             :href="`/users/${user.id}/edit`"
                             :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
                           >
-                            <PencilIcon class="mr-2 h-5 w-5 text-blue-500" /> Edytuj
+                            <PencilIcon class="mr-2 w-5 h-5 text-blue-500" /> Edytuj
                           </InertiaLink>
                         </MenuItem>
                         <MenuItem
@@ -150,7 +150,7 @@
                             :href="`/users/${user.id}`"
                             :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
                           >
-                            <TrashIcon class="mr-2 h-5 w-5 text-red-500" /> Usuń
+                            <TrashIcon class="mr-2 w-5 h-5 text-red-500" /> Usuń
                           </InertiaLink>
                         </MenuItem>
                       </div>
@@ -169,7 +169,7 @@
                             :href="`/users/${user.id}/restore`"
                             :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
                           >
-                            <RefreshIcon class="mr-2 h-5 w-5 text-green-500" /> Przywróć
+                            <RefreshIcon class="mr-2 w-5 h-5 text-green-500" /> Przywróć
                           </InertiaLink>
                         </MenuItem>
                       </div>
@@ -183,7 +183,7 @@
             >
               <td
                 colspan="100%"
-                class="text-center py-4 text-xl leading-5 text-gray-700"
+                class="py-4 text-xl leading-5 text-center text-gray-700"
               >
                 Brak danych
               </td>
diff --git a/resources/js/Pages/VacationLimits.vue b/resources/js/Pages/VacationLimits.vue
index be7661b..950c5d3 100644
--- a/resources/js/Pages/VacationLimits.vue
+++ b/resources/js/Pages/VacationLimits.vue
@@ -3,44 +3,44 @@
   <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
       <div>
-        <h2 class="text-lg leading-6 font-medium text-gray-900">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
           Dostępne dni urlopu dla użytkowników
         </h2>
       </div>
     </div>
     <div class="border-t border-gray-200">
       <form @submit.prevent="submitVacationDays">
-        <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
-          <table class="min-w-full divide-y divide-gray-200 border-b">
+        <div class="overflow-auto xl:overflow-visible">
+          <table class="min-w-full border-b divide-y divide-gray-200">
             <thead class="bg-gray-50">
               <tr>
                 <th
                   scope="col"
-                  class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
                 >
                   Imię i nazwisko
                 </th>
                 <th
                   scope="col"
-                  class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
                 >
                   Forma zatrudnienia
                 </th>
                 <th
                   scope="col"
-                  class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
                 >
                   Posiada urlop?
                 </th>
                 <th
                   scope="col"
-                  class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
                 >
                   Pozostałe dni z poprzedniego roku
                 </th>
                 <th
                   scope="col"
-                  class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
                 >
                   Dostępne dni w roku
                 </th>
@@ -52,28 +52,28 @@
                 :key="item.id"
                 class="hover:bg-blumilk-25"
               >
-                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                   <div class="flex">
-                    <span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
+                    <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                       <img
-                        class="h-10 w-10 rounded-full"
+                        class="w-10 h-10 rounded-full"
                         :src="item.user.avatar"
                       >
                     </span>
                     <div class="ml-3">
-                      <p class="text-sm font-medium break-all text-gray-900">
+                      <p class="text-sm font-medium text-gray-900 break-all">
                         {{ item.user.name }}
                       </p>
-                      <p class="text-sm break-all text-gray-500">
+                      <p class="text-sm text-gray-500 break-all">
                         {{ item.user.email }}
                       </p>
                     </div>
                   </div>
                 </td>
-                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                   {{ item.user.employmentForm }}
                 </td>
-                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                   <Switch
                     v-model="item.hasVacation"
                     :class="[item.hasVacation ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
@@ -83,18 +83,18 @@
                     />
                   </Switch>
                 </td>
-                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-                  <div class="mt-1 sm:mt-0 sm:col-span-2 w-full max-w-lg bg-gray-50 border border-gray-300 rounded-md px-4 py-2 inline-flex items-center text-gray-500 sm:text-sm">
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  <div class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm">
                     {{ item.remainingLastYear }}
                   </div>
                 </td>
-                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-                  <div class="mt-1 sm:mt-0 sm:col-span-2">
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  <div class="mt-1 sm:col-span-2 sm:mt-0">
                     <input
                       v-model="item.days"
                       type="number"
                       min="0"
-                      class="block w-full shadow-sm rounded-md sm:text-sm disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none disabled:cursor-not-allowed"
+                      class="block w-full disabled:text-slate-500 disabled:bg-slate-50 rounded-md disabled:border-slate-200 shadow-sm disabled:shadow-none disabled:cursor-not-allowed sm:text-sm"
                       :disabled="!item.hasVacation"
                       :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`items.${index}.days`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`items.${index}.days`] }"
                     >
@@ -110,7 +110,7 @@
               <tr v-if="!form.items.length">
                 <td
                   colspan="100%"
-                  class="text-center py-4 text-xl leading-5 text-gray-700"
+                  class="py-4 text-xl leading-5 text-center text-gray-700"
                 >
                   Brak danych
                 </td>
@@ -121,7 +121,7 @@
         <div class="flex justify-end py-3 px-4">
           <button
             type="submit"
-            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
           >
             Zapisz
           </button>
diff --git a/resources/js/Pages/VacationRequest/Create.vue b/resources/js/Pages/VacationRequest/Create.vue
index c5bf011..9da43f1 100644
--- a/resources/js/Pages/VacationRequest/Create.vue
+++ b/resources/js/Pages/VacationRequest/Create.vue
@@ -1,25 +1,25 @@
 <template>
   <InertiaHead title="Złóż wniosek urlopowy" />
   <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
-    <div class="xl:col-span-2 h-full bg-white shadow-md flex flex-col">
+    <div class="flex flex-col h-full bg-white shadow-md xl:col-span-2">
       <div class="p-4 sm:px-6">
-        <h2 class="text-lg leading-6 font-medium text-gray-900">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
           Złóż wniosek urlopowy
         </h2>
       </div>
       <form
-        class="border-t border-gray-200 h-full px-6"
+        class="px-6 h-full border-t border-gray-200"
         @submit.prevent="createForm"
       >
-        <div class="h-full flex flex-col justify-around">
+        <div class="flex flex-col justify-around h-full">
           <div>
             <div
               v-if="form.errors.vacationRequest"
-              class="rounded-md bg-red-50 p-4 mt-2"
+              class="p-4 mt-2 bg-red-50 rounded-md"
             >
               <div class="flex">
-                <div class="flex-shrink-0">
-                  <XCircleIcon class="h-5 w-5 text-red-400" />
+                <div class="shrink-0">
+                  <XCircleIcon class="w-5 h-5 text-red-400" />
                 </div>
                 <div class="ml-3">
                   <h3 class="text-sm font-medium text-red-800">
@@ -35,25 +35,25 @@
               v-if="can.createOnBehalfOfEmployee"
               v-model="form.user"
               as="div"
-              class="sm:grid sm:grid-cols-3 py-4 items-center"
+              class="items-center py-4 sm:grid sm:grid-cols-3"
             >
               <ListboxLabel class="block text-sm font-medium text-gray-700">
                 Osoba składająca wniosek
               </ListboxLabel>
-              <div class="mt-1 relative sm:mt-0 sm:col-span-2">
+              <div class="relative mt-1 sm:col-span-2 sm:mt-0">
                 <ListboxButton
-                  class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
+                  class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
                   :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.user, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.user }"
                 >
                   <span class="flex items-center">
                     <img
                       :src="form.user.avatar"
-                      class="flex-shrink-0 h-6 w-6 rounded-full"
+                      class="shrink-0 w-6 h-6 rounded-full"
                     >
-                    <span class="ml-3 block truncate">{{ form.user.name }}</span>
+                    <span class="block ml-3 truncate">{{ form.user.name }}</span>
                   </span>
-                  <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                    <SelectorIcon class="h-5 w-5 text-gray-400" />
+                  <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                    <SelectorIcon class="w-5 h-5 text-gray-400" />
                   </span>
                 </ListboxButton>
 
@@ -63,7 +63,7 @@
                   leave-to-class="opacity-0"
                 >
                   <ListboxOptions
-                    class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+                    class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
                   >
                     <ListboxOption
                       v-for="user in users.data"
@@ -77,7 +77,7 @@
                           <img
                             :src="user.avatar"
                             alt=""
-                            class="flex-shrink-0 h-6 w-6 rounded-full"
+                            class="shrink-0 w-6 h-6 rounded-full"
                           >
                           <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
                             {{ user.name }}
@@ -88,7 +88,7 @@
                           v-if="selected"
                           :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
                         >
-                          <CheckIcon class="h-5 w-5" />
+                          <CheckIcon class="w-5 h-5" />
                         </span>
                       </li>
                     </ListboxOption>
@@ -104,7 +104,7 @@
             </Listbox>
             <div
               v-else
-              class="sm:grid sm:grid-cols-3 py-4 items-center"
+              class="items-center py-4 sm:grid sm:grid-cols-3"
             >
               <label
                 for="date_from"
@@ -112,11 +112,11 @@
               >
                 Osoba składająca wniosek
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <div class="flex justify-start items-center">
-                  <span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
+                  <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                     <img
-                      class="h-10 w-10 rounded-full"
+                      class="w-10 h-10 rounded-full"
                       :src="auth.user.avatar"
                     >
                   </span>
@@ -131,19 +131,19 @@
             <Listbox
               v-model="form.vacationType"
               as="div"
-              class="sm:grid sm:grid-cols-3 py-4 items-center"
+              class="items-center py-4 sm:grid sm:grid-cols-3"
             >
               <ListboxLabel class="block text-sm font-medium text-gray-700">
                 Rodzaj urlopu
               </ListboxLabel>
-              <div class="mt-1 relative sm:mt-0 sm:col-span-2">
+              <div class="relative mt-1 sm:col-span-2 sm:mt-0">
                 <ListboxButton
-                  class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
+                  class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
                   :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
                 >
                   <span class="block truncate">{{ form.vacationType.label }}</span>
-                  <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                    <SelectorIcon class="h-5 w-5 text-gray-400" />
+                  <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                    <SelectorIcon class="w-5 h-5 text-gray-400" />
                   </span>
                 </ListboxButton>
                 <transition
@@ -151,7 +151,7 @@
                   leave-from-class="opacity-100"
                   leave-to-class="opacity-0"
                 >
-                  <ListboxOptions class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+                  <ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm">
                     <ListboxOption
                       v-for="vacationType in vacationTypes"
                       :key="vacationType.value"
@@ -168,7 +168,7 @@
                           v-if="selected"
                           :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
                         >
-                          <CheckIcon class="h-5 w-5" />
+                          <CheckIcon class="w-5 h-5" />
                         </span>
                       </li>
                     </ListboxOption>
@@ -182,20 +182,20 @@
                 </p>
               </div>
             </Listbox>
-            <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+            <div class="items-center py-4 sm:grid sm:grid-cols-3">
               <label
                 for="date_from"
                 class="block text-sm font-medium text-gray-700 sm:mt-px"
               >
                 Planowany urlop od
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <FlatPickr
                   id="date_from"
                   v-model="form.from"
                   :config="fromInputConfig"
                   placeholder="Wybierz datę"
-                  class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+                  class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
                   :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }"
                   @on-change="onFromChange"
                 />
@@ -207,20 +207,20 @@
                 </p>
               </div>
             </div>
-            <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+            <div class="items-center py-4 sm:grid sm:grid-cols-3">
               <label
                 for="date_from"
                 class="block text-sm font-medium text-gray-700 sm:mt-px"
               >
                 Planowany urlop do
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <FlatPickr
                   id="date_to"
                   v-model="form.to"
                   :config="toInputConfig"
                   placeholder="Wybierz datę"
-                  class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+                  class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
                   :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }"
                   @on-change="onToChange"
                 />
@@ -232,33 +232,33 @@
                 </p>
               </div>
             </div>
-            <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+            <div class="items-center py-4 sm:grid sm:grid-cols-3">
               <span class="block text-sm font-medium text-gray-700 sm:mt-px">Liczba dni urlopu</span>
               <div
-                class="mt-1 sm:mt-0 sm:col-span-2 w-full max-w-lg bg-gray-50 border border-gray-300 rounded-md px-4 py-2 inline-flex items-center text-gray-500 sm:text-sm"
+                class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm"
               >
                 {{ estimatedDays.length }}
               </div>
             </div>
-            <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+            <div class="items-center py-4 sm:grid sm:grid-cols-3">
               <label
                 for="comment"
                 class="block text-sm font-medium text-gray-700"
               >
                 Komentarz
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <textarea
                   id="comment"
                   v-model="form.comment"
                   rows="4"
-                  class="shadow-sm focus:ring-blumilk-500 focus:border-blumilk-500 block w-full max-w-lg sm:text-sm border-gray-300 rounded-md"
+                  class="block w-full max-w-lg rounded-md border-gray-300 focus:border-blumilk-500 focus:ring-blumilk-500 shadow-sm sm:text-sm"
                 />
               </div>
             </div>
             <div
               v-if="can.skipFlow"
-              class="sm:grid sm:grid-cols-3 py-4 items-center"
+              class="items-center py-4 sm:grid sm:grid-cols-3"
             >
               <label
                 for="flowSkipped"
@@ -266,7 +266,7 @@
               >
                 Natychmiastowo zatwierdź wniosek
               </label>
-              <div class="mt-2 sm:mt-0 sm:col-span-2">
+              <div class="mt-2 sm:col-span-2 sm:mt-0">
                 <Switch
                   id="flowSkipped"
                   v-model="form.flowSkipped"
@@ -283,14 +283,14 @@
             <div class="space-x-3">
               <InertiaLink
                 href="/vacation/requests"
-                class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+                class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
               >
                 Anuluj
               </InertiaLink>
               <button
                 type="submit"
                 :disabled="form.processing"
-                class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+                class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
               >
                 Zapisz
               </button>
@@ -299,9 +299,9 @@
         </div>
       </form>
     </div>
-    <div class="bg-white shadow-md h-full">
+    <div class="h-full bg-white shadow-md">
       <div class="p-4 sm:px-6">
-        <h2 class="text-lg leading-6 font-medium text-gray-900">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
           <span v-if="auth.user.id !== form.user.id">
             Urlop wypoczynkowy, dane dla: {{ form.user.name }}
           </span>
@@ -310,7 +310,7 @@
           </span>
         </h2>
       </div>
-      <div class="border-t border-gray-200 px-6 pt-8">
+      <div class="px-6 pt-8 border-t border-gray-200">
         <VacationChart :stats="stats" />
       </div>
     </div>
diff --git a/resources/js/Pages/VacationRequest/Index.vue b/resources/js/Pages/VacationRequest/Index.vue
index 16bd743..283c7eb 100644
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -2,20 +2,20 @@
   <InertiaHead title="Moje wnioski urlopowe" />
   <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
-      <h2 class="text-lg leading-6 font-medium text-gray-900">
+      <h2 class="text-lg font-medium leading-6 text-gray-900">
         Moje wnioski urlopowe
       </h2>
       <div>
         <InertiaLink
           href="/vacation/requests/create"
-          class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
         >
           Dodaj wniosek
         </InertiaLink>
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="hidden md:flex relative shadow divide-x divide-gray-200">
+      <div class="hidden relative divide-x divide-gray-200 shadow md:flex">
         <button
           v-for="(status, index) in statuses"
           :key="index"
@@ -34,23 +34,23 @@
           />
         </button>
       </div>
-      <div class="md:hidden px-4 py-4 grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
+      <div class="grid grid-cols-1 gap-2 p-4 md:hidden md:grid-cols-2 md:gap-4">
         <Listbox
           v-model="form.status"
           as="div"
         >
-          <ListboxLabel class="block text-sm font-medium text-gray-700 mb-2">
+          <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
             Status
           </ListboxLabel>
-          <div class="mt-1 relative sm:mt-0">
+          <div class="relative mt-1 sm:mt-0">
             <ListboxButton
-              class="bg-white relative w-full h-10 max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
+              class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
             >
               <span class="flex items-center">
                 {{ form.status.name }}
               </span>
-              <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                <SelectorIcon class="h-5 w-5 text-gray-400" />
+              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                <SelectorIcon class="w-5 h-5 text-gray-400" />
               </span>
             </ListboxButton>
 
@@ -60,7 +60,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
               >
                 <ListboxOption
                   v-for="status in statuses"
@@ -78,7 +78,7 @@
                       v-if="selected"
                       :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
                     >
-                      <CheckIcon class="h-5 w-5" />
+                      <CheckIcon class="w-5 h-5" />
                     </span>
                   </li>
                 </ListboxOption>
@@ -88,43 +88,43 @@
         </Listbox>
       </div>
     </div>
-    <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
+    <div class="overflow-auto xl:overflow-visible">
       <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-gray-50">
           <tr>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
               Numer
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
               Rodzaj urlopu
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
               Od
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
               Do
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
               Dni urlopu
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
               Status
             </th>
@@ -135,9 +135,9 @@
           <tr
             v-for="request in requests.data"
             :key="request.id"
-            class="hover:bg-blumilk-25 relative"
+            class="relative hover:bg-blumilk-25"
           >
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               <InertiaLink
                 :href="`/vacation/requests/${request.id}`"
                 class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
@@ -145,22 +145,22 @@
                 {{ request.name }}
               </InertiaLink>
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
+            <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
               <VacationType :type="request.type" />
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               {{ request.from }}
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               {{ request.to }}
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               {{ request.days.length }}
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               <Status :status="request.state" />
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               <InertiaLink
                 :href="`/vacation/requests/${request.id}`"
                 class="flex justify-around"
@@ -176,7 +176,7 @@
           <tr v-if="! requests.data.length">
             <td
               colspan="100%"
-              class="text-center py-4 text-xl leading-5 text-gray-700"
+              class="py-4 text-xl leading-5 text-center text-gray-700"
             >
               Brak danych
             </td>
diff --git a/resources/js/Pages/VacationRequest/IndexForApprovers.vue b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
index 3499364..8ef28d1 100644
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -3,31 +3,31 @@
   <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
       <div>
-        <h2 class="text-lg leading-6 font-medium text-gray-900">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
           Wnioski urlopowe
         </h2>
       </div>
       <div>
         <InertiaLink
           href="/vacation/requests/create"
-          class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
         >
           Dodaj wniosek
         </InertiaLink>
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="px-4 py-4 grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
+      <div class="grid grid-cols-1 gap-2 p-4 md:grid-cols-2 md:gap-4">
         <Listbox
           v-model="form.user"
           as="div"
         >
-          <ListboxLabel class="block text-sm font-medium text-gray-700 mb-2">
+          <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
             Pracownik
           </ListboxLabel>
-          <div class="mt-1 relative sm:mt-0">
+          <div class="relative mt-1 sm:mt-0">
             <ListboxButton
-              class="bg-white relative w-full h-10 max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
+              class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
             >
               <span v-if="form.user === null">
                 Wszyscy
@@ -38,12 +38,12 @@
               >
                 <img
                   :src="form.user.avatar"
-                  class="flex-shrink-0 h-6 w-6 rounded-full"
+                  class="shrink-0 w-6 h-6 rounded-full"
                 >
-                <span class="ml-3 block truncate">{{ form.user.name }}</span>
+                <span class="block ml-3 truncate">{{ form.user.name }}</span>
               </span>
-              <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                <SelectorIcon class="h-5 w-5 text-gray-400" />
+              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                <SelectorIcon class="w-5 h-5 text-gray-400" />
               </span>
             </ListboxButton>
 
@@ -53,7 +53,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
               >
                 <ListboxOption
                   v-slot="{ active }"
@@ -71,7 +71,7 @@
                       v-if="form.user === null"
                       :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
                     >
-                      <CheckIcon class="h-5 w-5" />
+                      <CheckIcon class="w-5 h-5" />
                     </span>
                   </li>
                 </ListboxOption>
@@ -88,7 +88,7 @@
                     <div class="flex items-center">
                       <img
                         :src="user.avatar"
-                        class="flex-shrink-0 h-6 w-6 rounded-full"
+                        class="shrink-0 w-6 h-6 rounded-full"
                       >
                       <span
                         :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
@@ -100,7 +100,7 @@
                       v-if="form.user?.id === user.id"
                       :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
                     >
-                      <CheckIcon class="h-5 w-5" />
+                      <CheckIcon class="w-5 h-5" />
                     </span>
                   </li>
                 </ListboxOption>
@@ -112,18 +112,18 @@
           v-model="form.status"
           as="div"
         >
-          <ListboxLabel class="block text-sm font-medium text-gray-700 mb-2">
+          <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
             Status
           </ListboxLabel>
-          <div class="mt-1 relative sm:mt-0">
+          <div class="relative mt-1 sm:mt-0">
             <ListboxButton
-              class="bg-white relative w-full h-10 max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
+              class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
             >
               <span class="flex items-center">
                 {{ form.status.name }}
               </span>
-              <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                <SelectorIcon class="h-5 w-5 text-gray-400" />
+              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                <SelectorIcon class="w-5 h-5 text-gray-400" />
               </span>
             </ListboxButton>
 
@@ -133,7 +133,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
               >
                 <ListboxOption
                   v-for="status in statuses"
@@ -151,7 +151,7 @@
                       v-if="selected"
                       :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
                     >
-                      <CheckIcon class="h-5 w-5" />
+                      <CheckIcon class="w-5 h-5" />
                     </span>
                   </li>
                 </ListboxOption>
@@ -161,49 +161,49 @@
         </Listbox>
       </div>
     </div>
-    <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
+    <div class="overflow-auto xl:overflow-visible">
       <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-gray-50">
           <tr>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
               Numer
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
               Pracownik
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
               Rodzaj urlopu
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
               Od
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
               Do
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
               Dni urlopu
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
+              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
               Status
             </th>
@@ -214,9 +214,9 @@
           <tr
             v-for="request in requests.data"
             :key="request.id"
-            class="hover:bg-blumilk-25 relative"
+            class="relative hover:bg-blumilk-25"
           >
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               <InertiaLink
                 :href="`/vacation/requests/${request.id}`"
                 class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
@@ -224,9 +224,9 @@
                 {{ request.name }}
               </InertiaLink>
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
+            <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
               <div class="flex">
-                <div class="h-10 w-10 rounded-full">
+                <div class="w-10 h-10 rounded-full">
                   <img :src="request.user.avatar">
                 </div>
                 <div class="ml-3">
@@ -239,22 +239,22 @@
                 </div>
               </div>
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
+            <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
               <VacationType :type="request.type" />
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               {{ request.from }}
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               {{ request.to }}
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               {{ request.days.length }}
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               <Status :status="request.state" />
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               <InertiaLink
                 :href="`/vacation/requests/${request.id}`"
                 class="flex justify-around"
@@ -270,7 +270,7 @@
           <tr v-if="! requests.data.length">
             <td
               colspan="100%"
-              class="text-center py-4 text-xl leading-5 text-gray-700"
+              class="py-4 text-xl leading-5 text-center text-gray-700"
             >
               Brak danych
             </td>
diff --git a/resources/js/Pages/VacationRequest/Show.vue b/resources/js/Pages/VacationRequest/Show.vue
index 2889f15..f1673f8 100644
--- a/resources/js/Pages/VacationRequest/Show.vue
+++ b/resources/js/Pages/VacationRequest/Show.vue
@@ -1,31 +1,31 @@
 <template>
   <InertiaHead :title="`Wniosek ${request.name}`" />
-  <div class="grid grid-cols-1 gap-6 xl:grid-flow-col-dense xl:grid-cols-3">
-    <div class="space-y-6 xl:col-start-1 xl:col-span-2">
+  <div class="grid grid-cols-1 gap-6 xl:grid-cols-3 xl:grid-flow-col-dense">
+    <div class="space-y-6 xl:col-span-2 xl:col-start-1">
       <div class="bg-white shadow-md">
-        <div class="px-4 py-5 sm:px-6">
-          <h3 class="text-lg leading-6 font-medium text-gray-900">
+        <div class="py-5 px-4 sm:px-6">
+          <h3 class="text-lg font-medium leading-6 text-gray-900">
             Informacje na temat wniosku
           </h3>
         </div>
-        <div class="border-t border-gray-200 px-4 py-5 sm:p-0">
+        <div class="py-5 px-4 border-t border-gray-200 sm:p-0">
           <dl class="sm:divide-y sm:divide-gray-200">
-            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
               <dt class="text-sm font-medium text-gray-500">
                 Nr wniosku
               </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
                 {{ request.name }}
               </dd>
             </div>
-            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500 flex items-center">
+            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+              <dt class="flex items-center text-sm font-medium text-gray-500">
                 Pracownik
               </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
                 <div class="flex">
                   <img
-                    class="h-10 w-10 rounded-full"
+                    class="w-10 h-10 rounded-full"
                     :src="request.user.avatar"
                   >
                   <div class="ml-3">
@@ -39,27 +39,27 @@
                 </div>
               </dd>
             </div>
-            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
               <dt class="text-sm font-medium text-gray-500">
                 Rodzaj urlopu
               </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
                 <VacationType :type="request.type" />
               </dd>
             </div>
-            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
               <dt class="text-sm font-medium text-gray-500">
                 Obecny status
               </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
                 <Status :status="request.state" />
               </dd>
             </div>
-            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
               <dt class="text-sm font-medium text-gray-500">
                 Data
               </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
                 <template v-if="request.days.length > 1">
                   {{ request.from }} - {{ request.to }}
                 </template>
@@ -71,35 +71,35 @@
                 </span>
               </dd>
             </div>
-            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
               <dt class="text-sm font-medium text-gray-500">
                 Komentarz
               </dt>
               <dd
                 v-if="request.comment != null"
-                class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
+                class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"
               >
                 {{ request.comment }}
               </dd>
               <dd
                 v-else
-                class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
+                class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"
               >
                 -
               </dd>
             </div>
-            <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500 flex items-center">
+            <div class="py-5 px-4 bg-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt class="flex items-center text-sm font-medium text-gray-500">
                 Załączniki
               </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                <ul class="border border-gray-200 rounded-md divide-y divide-gray-200">
-                  <li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm">
-                    <div class="w-0 flex-1 flex items-center">
-                      <PaperClipIcon class="flex-shrink-0 h-5 w-5 text-gray-400" />
-                      <span class="ml-2 flex-1 w-0 truncate"> wniosek_urlopowy.pdf </span>
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                <ul class="rounded-md border border-gray-200 divide-y divide-gray-200">
+                  <li class="flex justify-between items-center py-3 pr-4 pl-3 text-sm">
+                    <div class="flex flex-1 items-center w-0">
+                      <PaperClipIcon class="shrink-0 w-5 h-5 text-gray-400" />
+                      <span class="flex-1 ml-2 w-0 truncate"> wniosek_urlopowy.pdf </span>
                     </div>
-                    <div class="ml-4 flex-shrink-0">
+                    <div class="shrink-0 ml-4">
                       <a
                         :href="`/vacation/requests/${request.id}/download`"
                         target="_blank"
@@ -119,8 +119,8 @@
         v-if="can.acceptAsTechnical"
         class="bg-white shadow"
       >
-        <div class="px-4 py-5 sm:p-6">
-          <h3 class="text-lg leading-6 font-medium text-gray-900">
+        <div class="py-5 px-4 sm:p-6">
+          <h3 class="text-lg font-medium leading-6 text-gray-900">
             Zaakceptuj wniosek jako osoba techniczna
           </h3>
           <div class="mt-2 max-w-xl text-sm text-gray-500">
@@ -135,7 +135,7 @@
               method="post"
               as="button"
               preserve-scroll
-              class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+              class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
             >
               Zaakceptuj wniosek
             </InertiaLink>
@@ -146,8 +146,8 @@
         v-if="can.acceptAsAdministrative"
         class="bg-white shadow"
       >
-        <div class="px-4 py-5 sm:p-6">
-          <h3 class="text-lg leading-6 font-medium text-gray-900">
+        <div class="py-5 px-4 sm:p-6">
+          <h3 class="text-lg font-medium leading-6 text-gray-900">
             Zaakceptuj wniosek jako osoba administracyjna
           </h3>
           <div class="mt-2 max-w-xl text-sm text-gray-500">
@@ -161,7 +161,7 @@
               method="post"
               as="button"
               preserve-scroll
-              class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+              class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
             >
               Zaakceptuj wniosek
             </InertiaLink>
@@ -172,8 +172,8 @@
         v-if="can.reject"
         class="bg-white shadow"
       >
-        <div class="px-4 py-5 sm:p-6">
-          <h3 class="text-lg leading-6 font-medium text-gray-900">
+        <div class="py-5 px-4 sm:p-6">
+          <h3 class="text-lg font-medium leading-6 text-gray-900">
             Odrzuć wniosek
           </h3>
           <div class="mt-2 max-w-xl text-sm text-gray-500">
@@ -187,7 +187,7 @@
               method="post"
               as="button"
               preserve-scroll
-              class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
+              class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
             >
               Odrzuć wniosek
             </InertiaLink>
@@ -196,10 +196,10 @@
       </div>
       <div
         v-if="can.cancel"
-        class="bg-white shadow border border-red-500"
+        class="bg-white border border-red-500 shadow"
       >
-        <div class="px-4 py-5 sm:p-6">
-          <h3 class="text-lg leading-6 font-medium text-gray-900">
+        <div class="py-5 px-4 sm:p-6">
+          <h3 class="text-lg font-medium leading-6 text-gray-900">
             Anuluj wniosek
           </h3>
           <div class="mt-2 max-w-xl text-sm text-gray-500">
@@ -213,7 +213,7 @@
               method="post"
               as="button"
               preserve-scroll
-              class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
+              class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
             >
               Anuluj wniosek
             </InertiaLink>
@@ -221,14 +221,14 @@
         </div>
       </div>
     </div>
-    <div class="xl:col-start-3 xl:col-span-1 space-y-6">
+    <div class="space-y-6 xl:col-span-1 xl:col-start-3">
       <div class="bg-white shadow-md">
-        <div class="px-4 py-5 sm:px-6">
-          <h3 class="text-lg leading-6 font-medium text-gray-900">
+        <div class="py-5 px-4 sm:px-6">
+          <h3 class="text-lg font-medium leading-6 text-gray-900">
             Historia wniosku
           </h3>
         </div>
-        <div class="border-t border-gray-200 px-4 py-4">
+        <div class="p-4 border-t border-gray-200">
           <ul>
             <li
               v-for="(activity, index) in activities.data"
diff --git a/resources/js/Shared/Activity.vue b/resources/js/Shared/Activity.vue
index dfd18ee..35dbc70 100644
--- a/resources/js/Shared/Activity.vue
+++ b/resources/js/Shared/Activity.vue
@@ -2,9 +2,9 @@
   <div :class="{'relative pb-8': last}">
     <span
       v-if="last"
-      class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+      class="absolute top-4 left-4 -ml-px w-0.5 h-full bg-gray-200"
     />
-    <div class="relative flex space-x-3">
+    <div class="flex relative space-x-3">
       <div>
         <span :class="[statusInfo.outline.background, statusInfo.outline.foreground, 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white']">
           <component
@@ -13,16 +13,16 @@
           />
         </span>
       </div>
-      <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+      <div class="flex flex-1 justify-between pt-1.5 space-x-4 min-w-0">
         <div class="flex flex-col items-start">
           <div class="text-sm font-medium text-gray-700">
             {{ statusInfo.text }}
           </div>
-          <div class="text-right text-sm whitespace-nowrap font-medium text-gray-400">
+          <div class="text-sm font-medium text-right text-gray-400 whitespace-nowrap">
             {{ activity.user }}
           </div>
         </div>
-        <div class="text-right text-sm whitespace-nowrap text-gray-500 flex flex-col">
+        <div class="flex flex-col text-sm text-right text-gray-500 whitespace-nowrap">
           <time>{{ activity.date }}</time>
           <time>{{ activity.time }}</time>
         </div>
diff --git a/resources/js/Shared/Layout/AppLayout.vue b/resources/js/Shared/Layout/AppLayout.vue
index 82bac1b..7f87e55 100644
--- a/resources/js/Shared/Layout/AppLayout.vue
+++ b/resources/js/Shared/Layout/AppLayout.vue
@@ -4,7 +4,7 @@
       :auth="auth"
       :years="years"
     />
-    <main class="lg:ml-64 flex flex-col flex-1 py-8">
+    <main class="flex flex-col flex-1 py-8 lg:ml-64">
       <div class="lg:px-4">
         <slot />
       </div>
diff --git a/resources/js/Shared/Layout/GuestLayout.vue b/resources/js/Shared/Layout/GuestLayout.vue
index 722ed6f..4b38ab3 100644
--- a/resources/js/Shared/Layout/GuestLayout.vue
+++ b/resources/js/Shared/Layout/GuestLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-blumilk-25">
+  <div class="flex flex-col justify-center py-12 min-h-screen bg-blumilk-25 sm:px-6 lg:px-8">
     <slot />
   </div>
 </template>
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index 3f6a0d3..3b19188 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -5,7 +5,7 @@
   >
     <Dialog
       as="div"
-      class="fixed inset-0 flex z-40 lg:hidden"
+      class="flex fixed inset-0 z-40 lg:hidden"
       @close="sidebarOpen = false"
     >
       <TransitionChild
@@ -28,7 +28,7 @@
         leave-from="translate-x-0"
         leave-to="-translate-x-full"
       >
-        <div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-blumilk-700">
+        <div class="flex relative flex-col flex-1 pt-5 pb-4 w-full max-w-xs bg-blumilk-700">
           <TransitionChild
             as="template"
             enter="ease-in-out duration-300"
@@ -38,39 +38,39 @@
             leave-from="opacity-100"
             leave-to="opacity-0"
           >
-            <div class="absolute top-0 right-0 -mr-12 pt-2">
+            <div class="absolute top-0 right-0 pt-2 -mr-12">
               <button
                 type="button"
-                class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+                class="flex justify-center items-center ml-1 w-10 h-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
                 @click="sidebarOpen = false"
               >
-                <XIcon class="h-6 w-6 text-white" />
+                <XIcon class="w-6 h-6 text-white" />
               </button>
             </div>
           </TransitionChild>
-          <div class="flex-shrink-0 flex items-center px-4">
+          <div class="flex shrink-0 items-center px-4">
             <InertiaLink
               href="/"
               @click="sidebarOpen = false;"
             >
               <img
-                class="h-8 w-auto"
+                class="w-auto h-8"
                 src="/img/logo-white.svg"
               >
             </InertiaLink>
           </div>
-          <nav class="mt-5 flex-shrink-0 h-full divide-y divide-blumilk-800 overflow-y-auto">
+          <nav class="overflow-y-auto shrink-0 mt-5 h-full divide-y divide-blumilk-800">
             <div class="px-2 space-y-1">
               <InertiaLink
                 href="/"
                 :class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md']"
                 @click="sidebarOpen = false;"
               >
-                <HomeIcon class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200" />
+                <HomeIcon class="shrink-0 mr-4 w-6 h-6 text-blumilk-200" />
                 Strona główna
               </InertiaLink>
             </div>
-            <div class="mt-3 pt-3">
+            <div class="pt-3 mt-3">
               <div class="px-2 space-y-1">
                 <InertiaLink
                   v-for="item in navigation"
@@ -81,7 +81,7 @@
                 >
                   <component
                     :is="item.icon"
-                    class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
+                    class="shrink-0 mr-4 w-6 h-6 text-blumilk-200"
                   />
                   {{ item.name }}
                 </InertiaLink>
@@ -90,13 +90,13 @@
           </nav>
         </div>
       </TransitionChild>
-      <div class="flex-shrink-0 w-14" />
+      <div class="shrink-0 w-14" />
     </Dialog>
   </TransitionRoot>
 
-  <div class="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0">
-    <div class="flex flex-col flex-grow bg-blumilk-700 pt-5 pb-4 overflow-y-auto">
-      <div class="flex items-center flex-shrink-0 px-4">
+  <div class="hidden lg:flex lg:fixed lg:inset-y-0 lg:flex-col lg:w-64">
+    <div class="flex overflow-y-auto flex-col grow pt-5 pb-4 bg-blumilk-700">
+      <div class="flex shrink-0 items-center px-4">
         <InertiaLink href="/">
           <img
             src="/img/logo-white.svg"
@@ -104,15 +104,15 @@
           >
         </InertiaLink>
       </div>
-      <nav class="mt-5 px-2 flex-1 flex flex-col divide-y divide-blumilk-800 overflow-y-auto">
+      <nav class="flex overflow-y-auto flex-col flex-1 px-2 mt-5 divide-y divide-blumilk-800">
         <InertiaLink
           href="/"
           :class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
         >
-          <HomeIcon class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200" />
+          <HomeIcon class="shrink-0 mr-4 w-6 h-6 text-blumilk-200" />
           Strona główna
         </InertiaLink>
-        <div class="mt-1 pt-1 space-y-1">
+        <div class="pt-1 mt-1 space-y-1">
           <InertiaLink
             v-for="item in navigation"
             :key="item.name"
@@ -121,7 +121,7 @@
           >
             <component
               :is="item.icon"
-              class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
+              class="shrink-0 mr-4 w-6 h-6 text-blumilk-200"
             />
             {{ item.name }}
           </InertiaLink>
@@ -130,21 +130,21 @@
     </div>
   </div>
 
-  <div class="lg:pl-64 flex flex-col flex-1">
-    <div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200">
+  <div class="flex flex-col flex-1 lg:pl-64">
+    <div class="flex relative z-10 shrink-0 h-16 bg-white border-b border-gray-200">
       <button
         type="button"
-        class="px-4 border-r border-gray-200 text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blumilk-500 lg:hidden"
+        class="px-4 text-gray-400 border-r border-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blumilk-500 lg:hidden"
         @click="sidebarOpen = true"
       >
-        <MenuAlt1Icon class="h-6 w-6" />
+        <MenuAlt1Icon class="w-6 h-6" />
       </button>
-      <div class="flex-1 px-4 flex justify-between sm:px-6 lg:px-8">
+      <div class="flex flex-1 justify-between px-4 sm:px-6 lg:px-8">
         <div class="flex items-center">
           <div>
             <Menu
               as="div"
-              class="relative inline-block text-left"
+              class="inline-block relative text-left"
             >
               <div class="flex justify-center items-center">
                 <div class="mr-4 text-sm">
@@ -152,10 +152,10 @@
                 </div>
                 <div>
                   <MenuButton
-                    class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+                    class="inline-flex justify-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
                   >
                     {{ years.selected.year }}
-                    <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
+                    <ChevronDownIcon class="-mr-1 ml-2 w-5 h-5" />
                   </MenuButton>
                 </div>
               </div>
@@ -169,7 +169,7 @@
                 leave-to-class="transform opacity-0 scale-95"
               >
                 <MenuItems
-                  class="origin-top-right absolute right-0 mt-2 w-24 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+                  class="absolute right-0 mt-2 w-24 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
                 >
                   <div class="py-1">
                     <MenuItem
@@ -187,7 +187,7 @@
                         {{ item.year }}
                         <CheckIcon
                           v-if="item.year === years.selected.year"
-                          class="h-5 w-5 text-blumilk-500 ml-2"
+                          class="ml-2 w-5 h-5 text-blumilk-500"
                         />
                       </InertiaLink>
                     </MenuItem>
@@ -198,7 +198,7 @@
           </div>
           <div
             v-if="years.current.year !== years.selected.year"
-            class="ml-3 text-sm hidden sm:block"
+            class="hidden ml-3 text-sm sm:block"
           >
             <InertiaLink
               :href="years.current.link"
@@ -211,22 +211,22 @@
             </inertialink>
           </div>
         </div>
-        <div class="ml-4 flex items-center md:ml-6">
+        <div class="flex items-center ml-4 md:ml-6">
           <Menu
             as="div"
-            class="ml-3 relative"
+            class="relative ml-3"
           >
             <MenuButton
-              class="max-w-xs bg-white rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50"
+              class="flex items-center max-w-xs text-sm bg-white rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 lg:p-2 lg:hover:bg-gray-50 lg:rounded-md"
             >
               <img
-                class="h-8 w-8 rounded-full"
+                class="w-8 h-8 rounded-full"
                 :src="auth.user.avatar"
               >
-              <span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block">
+              <span class="hidden ml-3 text-sm font-medium text-gray-700 lg:block">
                 {{ auth.user.name }}
               </span>
-              <ChevronDownIcon class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block" />
+              <ChevronDownIcon class="hidden shrink-0 ml-1 w-5 h-5 text-gray-400 lg:block" />
             </MenuButton>
             <transition
               enter-active-class="transition ease-out duration-100"
@@ -237,7 +237,7 @@
               leave-to-class="transform opacity-0 scale-95"
             >
               <MenuItems
-                class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+                class="absolute right-0 py-1 mt-2 w-48 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
               >
                 <MenuItem v-slot="{ active }">
                   <InertiaLink
diff --git a/resources/js/Shared/Pagination.vue b/resources/js/Shared/Pagination.vue
index 4e5975c..2eae342 100644
--- a/resources/js/Shared/Pagination.vue
+++ b/resources/js/Shared/Pagination.vue
@@ -1,25 +1,25 @@
 <template>
   <div
     v-if="pagination.last_page !== 1"
-    class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg"
+    class="flex justify-between items-center py-3 px-4 bg-white rounded-b-lg border-t border-gray-200 sm:px-6"
   >
-    <div class="flex-1 flex justify-between sm:hidden">
+    <div class="flex flex-1 justify-between sm:hidden">
       <Component
         :is="prevLink ? 'InertiaLink': 'span'"
         :href="prevLink"
-        class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+        class="inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300"
       >
         Poprzednia
       </Component>
       <Component
         :is="nextLink ? 'InertiaLink': 'span'"
         :href="nextLink"
-        class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+        class="inline-flex relative items-center py-2 px-4 ml-3 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300"
       >
         Następna
       </Component>
     </div>
-    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+    <div class="hidden sm:flex sm:flex-1 sm:justify-between sm:items-center">
       <div class="text-sm text-gray-700">
         Wyświetlanie od
         <span class="font-medium">{{ pagination.from }}</span>
@@ -29,7 +29,7 @@
         <span class="font-medium">{{ pagination.total }}</span>
         wyników
       </div>
-      <nav class="relative z-0 inline-flex space-x-1">
+      <nav class="inline-flex relative z-0 space-x-1">
         <template
           v-for="(link, index) in pagination.links"
           :key="index"
@@ -38,7 +38,7 @@
             :is="link.url ? 'InertiaLink' : 'span'"
             :href="link.url"
             :preserve-scroll="true"
-            class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium"
+            class="inline-flex relative items-center py-2 px-4 text-sm font-medium rounded-md border"
             :class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
             v-text="link.label"
           />
diff --git a/resources/js/Shared/VacationBar.vue b/resources/js/Shared/VacationBar.vue
index f214047..24a0386 100644
--- a/resources/js/Shared/VacationBar.vue
+++ b/resources/js/Shared/VacationBar.vue
@@ -1,56 +1,56 @@
 <template>
   <Popper
     hover
-    class="h-full w-full"
+    class="w-full h-full"
   >
-    <div class="flex bg-white text-white">
+    <div class="flex text-white bg-white">
       <div
         v-show="stats.used > 0"
         :style="`background-color: ${colors.used}; flex-basis: ${calculatePercent(stats.used)}%;`"
-        class="flex items-center justify-center py-2 px-0.5"
+        class="flex justify-center items-center py-2 px-0.5"
       >
         <strong>{{ stats.used }}</strong>
       </div>
       <div
         v-show="stats.pending > 0"
         :style="`background-color: ${colors.pending}; flex-basis: ${calculatePercent(stats.pending)}%;`"
-        class="flex items-center justify-center py-2 px-0.5"
+        class="flex justify-center items-center py-2 px-0.5"
       >
         <strong>{{ stats.pending }}</strong>
       </div>
       <div
         v-show="stats.remaining > 0"
         :style="`background-color: ${colors.remaining}; flex-basis: ${calculatePercent(stats.remaining)}%;`"
-        class="flex items-center justify-center py-2 px-0.5"
+        class="flex justify-center items-center py-2 px-0.5"
       >
         <strong>{{ stats.remaining }}</strong>
       </div>
     </div>
     <template #content>
-      <div class="px-4 py-2 bg-white text-md text-gray-900 rounded-md shadow-md flext">
+      <div class="py-2 px-4 text-gray-900 bg-white rounded-md shadow-md text-md flext">
         <div class="flex items-center font-normal">
           <i
-            class="inline-block w-5 h-3 mr-3"
+            class="inline-block mr-3 w-5 h-3"
             :style="`background-color: ${colors.used}`"
           />
           Wykorzystane:
-          <span class="font-semibold ml-1">{{ stats.used }}</span>
+          <span class="ml-1 font-semibold">{{ stats.used }}</span>
         </div>
         <div class="flex items-center font-normal">
           <i
-            class="inline-block w-5 h-3 mr-3"
+            class="inline-block mr-3 w-5 h-3"
             :style="`background-color: ${colors.pending}`"
           />
           Rozpatrywane:
-          <span class="font-semibold ml-1">{{ stats.pending }}</span>
+          <span class="ml-1 font-semibold">{{ stats.pending }}</span>
         </div>
         <div class="flex items-center font-normal">
           <i
-            class="inline-block w-5 h-3 mr-3"
+            class="inline-block mr-3 w-5 h-3"
             :style="`background-color: ${colors.remaining}`"
           />
           Pozostałe:
-          <span class="font-semibold ml-1">{{ stats.remaining }}</span>
+          <span class="ml-1 font-semibold">{{ stats.remaining }}</span>
         </div>
       </div>
     </template>
diff --git a/resources/js/Shared/VacationTypeCalendarIcon.vue b/resources/js/Shared/VacationTypeCalendarIcon.vue
index 22d49df..77970c8 100644
--- a/resources/js/Shared/VacationTypeCalendarIcon.vue
+++ b/resources/js/Shared/VacationTypeCalendarIcon.vue
@@ -8,7 +8,7 @@
       </div>
     </div>
     <template #content>
-      <div class="px-2 py-1 bg-white text-xs text-gray-900 shadow-md ">
+      <div class="py-1 px-2 text-xs text-gray-900 bg-white shadow-md ">
         {{ typeInfo.text }}
       </div>
     </template>
diff --git a/resources/js/Shared/Widgets/AbsenceList.vue b/resources/js/Shared/Widgets/AbsenceList.vue
index 9fc8c97..266955e 100644
--- a/resources/js/Shared/Widgets/AbsenceList.vue
+++ b/resources/js/Shared/Widgets/AbsenceList.vue
@@ -1,19 +1,19 @@
 <template>
   <section class="bg-white shadow-md">
     <div class="p-4 sm:px-6">
-      <h2 class="text-lg leading-6 font-medium text-gray-900">
+      <h2 class="text-lg font-medium leading-6 text-gray-900">
         Dzisiejsze nieobecności
       </h2>
     </div>
-    <div class="border-t border-gray-200 px-4 sm:px-6">
+    <div class="px-4 border-t border-gray-200 sm:px-6">
       <ul class="divide-y divide-gray-200">
         <li
           v-for="absence in absences"
           :key="absence.user.id"
-          class="py-4 flex"
+          class="flex py-4"
         >
           <img
-            class="h-10 w-10 rounded-full"
+            class="w-10 h-10 rounded-full"
             :src="absence.user.avatar"
           >
           <div class="ml-3">
diff --git a/resources/js/Shared/Widgets/PendingVacationRequests.vue b/resources/js/Shared/Widgets/PendingVacationRequests.vue
index dd91a61..8494e60 100644
--- a/resources/js/Shared/Widgets/PendingVacationRequests.vue
+++ b/resources/js/Shared/Widgets/PendingVacationRequests.vue
@@ -1,11 +1,11 @@
 <template>
   <section class="bg-white shadow-md">
     <div class="p-4 sm:px-6">
-      <h2 class="text-lg leading-6 font-medium text-gray-900">
+      <h2 class="text-lg font-medium leading-6 text-gray-900">
         Wnioski oczekujące na akcje
       </h2>
     </div>
-    <div class="border-t border-gray-200 pb-5 px-4 sm:px-6">
+    <div class="px-4 pb-5 border-t border-gray-200 sm:px-6">
       <div class="flow-root mt-6">
         <ul class="-my-5 divide-y divide-gray-200">
           <li
@@ -30,7 +30,7 @@
               <div class="mt-3 text-sm text-gray-600">
                 <div class="flex">
                   <img
-                    class="h-10 w-10 rounded-full"
+                    class="w-10 h-10 rounded-full"
                     :src="request.user.avatar"
                   >
                   <div class="ml-3">
@@ -56,7 +56,7 @@
         <InertiaLink
           href="/vacation/requests"
           :data="{status: 'waiting_for_action'}"
-          class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
+          class="flex justify-center items-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
         >
           Zobacz wszystkie
         </InertiaLink>
diff --git a/resources/js/Shared/Widgets/UpcomingHolidays.vue b/resources/js/Shared/Widgets/UpcomingHolidays.vue
index b5f82a0..8331739 100644
--- a/resources/js/Shared/Widgets/UpcomingHolidays.vue
+++ b/resources/js/Shared/Widgets/UpcomingHolidays.vue
@@ -1,16 +1,16 @@
 <template>
   <section class="bg-white shadow-md">
     <div class="p-4 sm:px-6">
-      <h2 class="text-lg leading-6 font-medium text-gray-900">
+      <h2 class="text-lg font-medium leading-6 text-gray-900">
         Najbliższe dni wolne
       </h2>
     </div>
-    <div class="border-t border-gray-200 px-4 pb-5 sm:px-6">
+    <div class="px-4 pb-5 border-t border-gray-200 sm:px-6">
       <ul class="divide-y divide-gray-200">
         <li
           v-for="holiday in holidays"
           :key="holiday.id.id"
-          class="py-4 flex"
+          class="flex py-4"
         >
           <div>
             <p class="text-sm font-medium text-gray-900">
@@ -30,7 +30,7 @@
       <div>
         <InertiaLink
           href="/holidays"
-          class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
+          class="flex justify-center items-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
         >
           Zobacz wszystkie
         </InertiaLink>
diff --git a/resources/js/Shared/Widgets/UserVacationRequests.vue b/resources/js/Shared/Widgets/UserVacationRequests.vue
index bd7b162..3d7216b 100644
--- a/resources/js/Shared/Widgets/UserVacationRequests.vue
+++ b/resources/js/Shared/Widgets/UserVacationRequests.vue
@@ -1,11 +1,11 @@
 <template>
   <section class="bg-white shadow-md">
     <div class="p-4 sm:px-6">
-      <h2 class="text-lg leading-6 font-medium text-gray-900">
+      <h2 class="text-lg font-medium leading-6 text-gray-900">
         Twoje wnioski
       </h2>
     </div>
-    <div class="border-t border-gray-200 pb-5 px-4 sm:px-6">
+    <div class="px-4 pb-5 border-t border-gray-200 sm:px-6">
       <div class="flow-root mt-6">
         <ul class="-my-5 divide-y divide-gray-200">
           <li
@@ -42,7 +42,7 @@
       <div class="mt-6">
         <InertiaLink
           href="/vacation/requests/me"
-          class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
+          class="flex justify-center items-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
         >
           Zobacz wszystkie
         </InertiaLink>
diff --git a/resources/js/Shared/Widgets/VacationStats.vue b/resources/js/Shared/Widgets/VacationStats.vue
index bfdaf1c..a6a9e46 100644
--- a/resources/js/Shared/Widgets/VacationStats.vue
+++ b/resources/js/Shared/Widgets/VacationStats.vue
@@ -1,62 +1,62 @@
 <template>
-  <section class="grid grid-cols-1 md:grid-cols-2 gap-4">
-    <div class="hidden md:block bg-white shadow-md p-4">
+  <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
+    <div class="hidden p-4 bg-white shadow-md md:block">
       <VacationChart :stats="stats" />
     </div>
     <div class="h-full">
       <div class="grid grid-cols-2 gap-4 h-full">
-        <div class="px-4 py-5 bg-white shadow-md sm:p-6">
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
           <dd class="mt-1 text-4xl font-semibold text-blumilk-500">
             {{ stats.remaining }}
           </dd>
-          <dt class="text-md font-medium text-gray-700 truncate">
+          <dt class="font-medium text-gray-700 truncate text-md">
             Pozostało
           </dt>
-          <dt class="text-sm font-medium text-gray-500 mt-2">
+          <dt class="mt-2 text-sm font-medium text-gray-500">
             Dni do wykorzystania teraz.
           </dt>
         </div>
-        <div class="px-4 py-5 bg-white shadow-md sm:p-6">
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
           <dd class="mt-1 text-4xl font-semibold text-blumilk-700">
             {{ stats.used }}
           </dd>
-          <dt class="text-md font-medium text-gray-700 truncate">
+          <dt class="font-medium text-gray-700 truncate text-md">
             Dni wykorzystane
           </dt>
-          <dt class="text-sm font-medium text-gray-500 mt-2">
+          <dt class="mt-2 text-sm font-medium text-gray-500">
             Dni, które zostały już wykorzystane na urlop wypoczynkowy.
           </dt>
         </div>
-        <div class="px-4 py-5 bg-white shadow-md sm:p-6">
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
           <dt class="mt-1 text-4xl font-semibold text-blumilk-200">
             {{ stats.pending }}
           </dt>
-          <dd class="text-md font-medium text-gray-500 truncate">
+          <dd class="font-medium text-gray-500 truncate text-md">
             Rozpatrywane
           </dd>
-          <dt class="text-sm font-medium text-gray-500 mt-2">
+          <dt class="mt-2 text-sm font-medium text-gray-500">
             Dni czekające na akceptację przełożonych.
           </dt>
         </div>
-        <div class="px-4 py-5 bg-white shadow-md sm:p-6">
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
           <dt class="mt-1 text-4xl font-semibold text-gray-900">
             {{ stats.limit }}
           </dt>
-          <dd class="text-md font-medium text-gray-500 truncate">
+          <dd class="font-medium text-gray-500 truncate text-md">
             Limit urlopu
           </dd>
-          <dt class="text-sm font-medium text-gray-500 mt-2">
+          <dt class="mt-2 text-sm font-medium text-gray-500">
             Twój roczny limit urlopu wypoczynkowego.
           </dt>
         </div>
-        <div class="px-4 py-5 bg-white shadow-md sm:p-6 col-span-2">
+        <div class="col-span-2 py-5 px-4 bg-white shadow-md sm:p-6">
           <dt class="mt-1 text-4xl font-semibold text-gray-900">
             {{ stats.other }}
           </dt>
-          <dd class="text-md font-medium text-gray-500 truncate">
+          <dd class="font-medium text-gray-500 truncate text-md">
             Inne urlopy
           </dd>
-          <dt class="text-sm font-medium text-gray-500 mt-2">
+          <dt class="mt-2 text-sm font-medium text-gray-500">
             Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
           </dt>
         </div>
diff --git a/resources/js/Shared/Widgets/Welcome.vue b/resources/js/Shared/Widgets/Welcome.vue
index 74f26d5..942dc87 100644
--- a/resources/js/Shared/Widgets/Welcome.vue
+++ b/resources/js/Shared/Widgets/Welcome.vue
@@ -1,16 +1,16 @@
 <template>
   <section>
-    <div class=" bg-white overflow-hidden shadow">
-      <div class="bg-white p-6">
-        <div class="sm:flex sm:items-center sm:justify-between">
+    <div class=" overflow-hidden bg-white shadow">
+      <div class="p-6 bg-white">
+        <div class="sm:flex sm:justify-between sm:items-center">
           <div class="sm:flex sm:space-x-5">
-            <div class="flex-shrink-0">
+            <div class="shrink-0">
               <img
-                class="mx-auto h-20 w-20 rounded-full"
+                class="mx-auto w-20 h-20 rounded-full"
                 :src="user.avatar"
               >
             </div>
-            <div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
+            <div class="mt-4 text-center sm:pt-1 sm:mt-0 sm:text-left">
               <p class="text-sm font-medium text-gray-600">
                 Cześć,
               </p>