From 90e8812a98e47459dbe28b50843eef8f931b3f33 Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Mon, 11 Apr 2022 08:47:35 +0200
Subject: [PATCH] fix css focuses

---
 resources/js/Composables/vacationTypeInfo.js           |  4 ++--
 resources/js/Pages/AnnualSummary.vue                   |  6 +++---
 resources/js/Pages/Calendar.vue                        | 10 +++++-----
 resources/js/Pages/Users/Create.vue                    |  4 ++--
 resources/js/Pages/Users/Edit.vue                      |  4 ++--
 resources/js/Pages/VacationRequest/Create.vue          |  4 ++--
 resources/js/Pages/VacationRequest/Index.vue           |  8 ++++----
 .../js/Pages/VacationRequest/IndexForApprovers.vue     |  6 +++---
 resources/js/Shared/MainMenu.vue                       |  6 +++---
 resources/lang/pl.json                                 |  4 ++--
 10 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/resources/js/Composables/vacationTypeInfo.js b/resources/js/Composables/vacationTypeInfo.js
index 1091b25..4f154cb 100644
--- a/resources/js/Composables/vacationTypeInfo.js
+++ b/resources/js/Composables/vacationTypeInfo.js
@@ -14,8 +14,8 @@ const types = [
     text: 'Urlop wypoczynkowy',
     value: 'vacation',
     icon: WhiteBalanceSunnyIcon,
-    color: 'text-amber-300',
-    border: 'border-amber-300',
+    color: 'text-yellow-500',
+    border: 'border-yellow-500',
   },
   {
     text: 'Urlop na żądanie',
diff --git a/resources/js/Pages/AnnualSummary.vue b/resources/js/Pages/AnnualSummary.vue
index 72b7dba..46f434b 100644
--- a/resources/js/Pages/AnnualSummary.vue
+++ b/resources/js/Pages/AnnualSummary.vue
@@ -39,7 +39,7 @@
                 offset-distance="0"
               >
                 <div :class="[day.isPendingVacation && 'mx-0.5']">
-                  <button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium`]">
+                  <button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium focus:outline-blumilk-500`]">
                     <time
                       :datetime="day.date.toISODate()"
                       :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
@@ -58,7 +58,7 @@
                 hover
                 offset-distance="0"
               >
-                <button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent">
+                <button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500">
                   <time
                     :datetime="day.date.toISODate()"
                     :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'text-red-700 font-bold mx-auto flex h-7 w-7 p-4 items-center justify-center']"
@@ -74,7 +74,7 @@
               </Popper>
               <button
                 v-else
-                class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent"
+                class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500"
               >
                 <time
                   :datetime="day.date.toISODate()"
diff --git a/resources/js/Pages/Calendar.vue b/resources/js/Pages/Calendar.vue
index 60e165d..46d84e1 100644
--- a/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@@ -11,20 +11,20 @@
             v-if="previousMonth"
             as="button"
             :href="`/vacation/calendar/${previousMonth.value}`"
-            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"
+            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 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
           >
             <ChevronLeftIcon class="w-5 h-5" />
           </InertiaLink>
           <span
             v-else
-            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"
+            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 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
           >
             <ChevronLeftIcon class="w-5 h-5" />
           </span>
           <InertiaLink
             as="button"
             :href="`/vacation/calendar/${currentMonth.value}`"
-            class="hidden focus:relative items-center p-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 md:flex"
+            class="hidden focus:relative items-center p-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 focus:outline-blumilk-500 md:flex"
           >
             Dzisiaj
           </InertiaLink>
@@ -32,13 +32,13 @@
             v-if="nextMonth"
             as="button"
             :href="`/vacation/calendar/${nextMonth.value}`"
-            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"
+            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 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
           >
             <ChevronRightIcon class="w-5 h-5" />
           </InertiaLink>
           <span
             v-else
-            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"
+            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 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
           >
             <ChevronRightIcon class="w-5 h-5" />
           </span>
diff --git a/resources/js/Pages/Users/Create.vue b/resources/js/Pages/Users/Create.vue
index 9b28b64..d56ca33 100644
--- a/resources/js/Pages/Users/Create.vue
+++ b/resources/js/Pages/Users/Create.vue
@@ -112,7 +112,7 @@
         </ListboxLabel>
         <div class="relative mt-1 sm:col-span-2 sm:mt-0">
           <ListboxButton
-            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="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none 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>
@@ -166,7 +166,7 @@
         </ListboxLabel>
         <div class="relative mt-1 sm:col-span-2 sm:mt-0">
           <ListboxButton
-            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="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none 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>
diff --git a/resources/js/Pages/Users/Edit.vue b/resources/js/Pages/Users/Edit.vue
index 5835bef..05505d2 100644
--- a/resources/js/Pages/Users/Edit.vue
+++ b/resources/js/Pages/Users/Edit.vue
@@ -112,7 +112,7 @@
         </ListboxLabel>
         <div class="relative mt-1 sm:col-span-2 sm:mt-0">
           <ListboxButton
-            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="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none 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>
@@ -170,7 +170,7 @@
         </ListboxLabel>
         <div class="relative mt-1 sm:col-span-2 sm:mt-0">
           <ListboxButton
-            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="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none 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>
diff --git a/resources/js/Pages/VacationRequest/Create.vue b/resources/js/Pages/VacationRequest/Create.vue
index a6ac3f4..212ab31 100644
--- a/resources/js/Pages/VacationRequest/Create.vue
+++ b/resources/js/Pages/VacationRequest/Create.vue
@@ -63,7 +63,7 @@
                   leave-to-class="opacity-0"
                 >
                   <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 focus:ring-blumilk-500 ring-opacity-5 shadow-lg 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"
@@ -156,7 +156,7 @@
                   leave-from-class="opacity-100"
                   leave-to-class="opacity-0"
                 >
-                  <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 focus:ring-blumilk-500 ring-opacity-5 shadow-lg 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"
diff --git a/resources/js/Pages/VacationRequest/Index.vue b/resources/js/Pages/VacationRequest/Index.vue
index 9841417..465d070 100644
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -19,7 +19,7 @@
         <button
           v-for="(status, index) in statuses"
           :key="index"
-          :class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center']"
+          :class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden focus:outline-blumilk-500 bg-white py-4 px-4 text-sm font-medium text-center']"
           @click="form.status = status"
         >
           <span>{{ status.name }}</span>
@@ -140,7 +140,7 @@
             <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"
+                class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
               >
                 {{ request.name }}
               </InertiaLink>
@@ -163,13 +163,13 @@
             <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               <InertiaLink
                 :href="`/vacation/requests/${request.id}`"
-                class="flex justify-around"
+                class="flex justify-around focus:outline-blumilk-500"
               >
                 <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
               </InertiaLink>
               <InertiaLink
                 :href="`/vacation/requests/${request.id}`"
-                class="absolute inset-0"
+                class="absolute inset-0 focus:outline-blumilk-500"
               />
             </td>
           </tr>
diff --git a/resources/js/Pages/VacationRequest/IndexForApprovers.vue b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
index fd36332..e20ab1c 100644
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -219,7 +219,7 @@
             <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"
+                class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
               >
                 {{ request.name }}
               </InertiaLink>
@@ -257,13 +257,13 @@
             <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               <InertiaLink
                 :href="`/vacation/requests/${request.id}`"
-                class="flex justify-around"
+                class="flex justify-around focus:outline-blumilk-500"
               >
                 <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
               </InertiaLink>
               <InertiaLink
                 :href="`/vacation/requests/${request.id}`"
-                class="absolute inset-0"
+                class="absolute inset-0 focus:outline-blumilk-500"
               />
             </td>
           </tr>
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index 799caec..d50a40a 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -71,7 +71,7 @@
               </InertiaLink>
             </div>
             <div class="pt-3 mt-3">
-              <div class="px-2 space-y-1">
+              <div class="py-1 px-2 space-y-1">
                 <InertiaLink
                   v-for="item in navigation"
                   :key="item.name"
@@ -107,7 +107,7 @@
       <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']"
+          :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 mt-1 text-sm leading-6 font-medium rounded-md']"
         >
           <HomeIcon class="shrink-0 mr-4 w-6 h-6 text-blumilk-200" />
           Strona główna
@@ -152,7 +152,7 @@
                 </div>
                 <div>
                   <MenuButton
-                    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"
+                    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  shadow-sm"
                   >
                     {{ years.selected.year }}
                     <ChevronDownIcon class="-mr-1 ml-2 w-5 h-5" />
diff --git a/resources/lang/pl.json b/resources/lang/pl.json
index 2c04418..69cdf97 100644
--- a/resources/lang/pl.json
+++ b/resources/lang/pl.json
@@ -59,8 +59,8 @@
   "Vacation type: :type": "Rodzaj wniosku: :type",
   "From :from to :to (number of days: :days)": "Od :from do :to (liczba dni: :days)",
   "Click here for details": "Kliknij, aby zobaczyć szczegóły",
-  "Vacation request :title is waiting for your technical approval": "Wniosek urlopowy :title czeka na akceptacje techniczną",
-  "Vacation request :title is waiting for your administrative approval": "Wniosek urlopowy :title czeka na akceptacje administracyjną",
+  "Vacation request :title is waiting for your technical approval": "Wniosek urlopowy :title czeka na akceptację techniczną",
+  "Vacation request :title is waiting for your administrative approval": "Wniosek urlopowy :title czeka na akceptację administracyjną",
   "The vacation request :title from user :requester is waiting for your technical approval.": "Wniosek urlopowy :title od użytkownika :requester czeka na Twoją akceptację techniczną.",
   "The vacation request :title from user :requester is waiting for your administrative approval.": "Wniosek urlopowy :title od użytkownika :requester czeka na Twoją akceptację administracyjną.",
   "Vacation request :title has been :status": "Wniosek urlopowy :title został :status",