From 7ab22c47cdf3bdce786ef8a01401ce7da0c1fbd0 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Wed, 15 Nov 2023 22:34:52 +0100
Subject: [PATCH 1/7] Add hover effect to provider icons

---
 resources/js/Shared/Components/ProviderIcons.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index 4c3b6135..ee275cf4 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -16,7 +16,7 @@ function getProviderColor(providerName) {
   <div class="mb-2 mr-1 mt-4 flex w-fit flex-row-reverse flex-wrap items-center justify-end sm:mt-0 sm:justify-start">
     <div v-for="cityProvider in item.cityProviders" :key="cityProvider.provider_name">
       <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
-           class="m-1 flex h-7 w-fit shrink-0 items-center justify-center rounded-md border border-zinc-300 p-1 lg:h-8"
+           class="m-1 flex h-7 w-fit shrink-0 items-center justify-center rounded-md border border-zinc-300 p-1 lg:h-8 hover:scale-150 transition-all"
       >
         <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
       </div>

From fd9070d9b21c4ee5f26b29a1c2d8d11a09b78657 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Thu, 16 Nov 2023 09:11:17 +0100
Subject: [PATCH 2/7] Update providers in cities, added tooltips

---
 resources/js/Shared/Components/City.vue          | 4 ++--
 resources/js/Shared/Components/ProviderIcons.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/Shared/Components/City.vue b/resources/js/Shared/Components/City.vue
index 869eb0b7..5132d48c 100644
--- a/resources/js/Shared/Components/City.vue
+++ b/resources/js/Shared/Components/City.vue
@@ -201,9 +201,9 @@ function toggleProvidersForm() {
         <div v-for="provider in filteredSelectedCityProviders.slice(0, 4)" :key="provider.name"
              :style="{ 'background-color': selectedCityProviders.includes(provider.name) ? provider.color : '' }"
              :class="selectedCityProviders.includes(provider.name) ? 'border-zinc-600 drop-shadow-lg' : 'hidden'"
-             class="m-1 flex h-5 w-fit items-center justify-center rounded border border-zinc-300 bg-zinc-300 p-1 "
+             class="m-1 flex h-5 w-fit items-center justify-center rounded border border-zinc-300 bg-zinc-300 p-1 hover:scale-[2] transition-all hover:z-50"
         >
-          <img class="w-5" :src="'/providers/' + provider.name.toLowerCase() + '.png'" alt="">
+          <img class="w-5" :src="'/providers/' + provider.name.toLowerCase() + '.png'" :title="provider.name" alt="">
         </div>
 
         <div v-if="selectedCityProviders.length > 4"
diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index ee275cf4..7811a9df 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -13,7 +13,7 @@ function getProviderColor(providerName) {
 </script>
 
 <template>
-  <div class="mb-2 mr-1 mt-4 flex w-fit flex-row-reverse flex-wrap items-center justify-end sm:mt-0 sm:justify-start">
+  <div class="mb-2 mr-3 mt-4 flex w-fit flex-row-reverse flex-wrap items-center justify-end sm:mt-0 sm:justify-start">
     <div v-for="cityProvider in item.cityProviders" :key="cityProvider.provider_name">
       <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
            class="m-1 flex h-7 w-fit shrink-0 items-center justify-center rounded-md border border-zinc-300 p-1 lg:h-8 hover:scale-150 transition-all"

From 2627c8d0863160b80eb9b00c2182e78c578001d6 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Thu, 16 Nov 2023 10:32:25 +0100
Subject: [PATCH 3/7] fixed tailwind classes order

---
 resources/js/Shared/Components/City.vue          | 2 +-
 resources/js/Shared/Components/ProviderIcons.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Shared/Components/City.vue b/resources/js/Shared/Components/City.vue
index 5132d48c..555d6d01 100644
--- a/resources/js/Shared/Components/City.vue
+++ b/resources/js/Shared/Components/City.vue
@@ -201,7 +201,7 @@ function toggleProvidersForm() {
         <div v-for="provider in filteredSelectedCityProviders.slice(0, 4)" :key="provider.name"
              :style="{ 'background-color': selectedCityProviders.includes(provider.name) ? provider.color : '' }"
              :class="selectedCityProviders.includes(provider.name) ? 'border-zinc-600 drop-shadow-lg' : 'hidden'"
-             class="m-1 flex h-5 w-fit items-center justify-center rounded border border-zinc-300 bg-zinc-300 p-1 hover:scale-[2] transition-all hover:z-50"
+             class="m-1 flex h-5 w-fit items-center justify-center rounded border border-zinc-300 bg-zinc-300 p-1 transition-all hover:z-50 hover:scale-[2]"
         >
           <img class="w-5" :src="'/providers/' + provider.name.toLowerCase() + '.png'" :title="provider.name" alt="">
         </div>
diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index 7811a9df..e17f13fb 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -16,7 +16,7 @@ function getProviderColor(providerName) {
   <div class="mb-2 mr-3 mt-4 flex w-fit flex-row-reverse flex-wrap items-center justify-end sm:mt-0 sm:justify-start">
     <div v-for="cityProvider in item.cityProviders" :key="cityProvider.provider_name">
       <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
-           class="m-1 flex h-7 w-fit shrink-0 items-center justify-center rounded-md border border-zinc-300 p-1 lg:h-8 hover:scale-150 transition-all"
+           class="m-1 flex h-7 w-fit shrink-0 items-center justify-center rounded-md border border-zinc-300 p-1 transition-all hover:z-50 hover:scale-150 lg:h-8"
       >
         <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
       </div>

From a6c3d657f6fbf1458a16e6c45cdef4418f13ffc1 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Tue, 21 Nov 2023 15:02:35 +0100
Subject: [PATCH 4/7] made icons larger without hover effect

---
 resources/js/Shared/Components/City.vue          | 8 ++++----
 resources/js/Shared/Components/ProviderIcons.vue | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/js/Shared/Components/City.vue b/resources/js/Shared/Components/City.vue
index 555d6d01..2d0ada2f 100644
--- a/resources/js/Shared/Components/City.vue
+++ b/resources/js/Shared/Components/City.vue
@@ -198,19 +198,19 @@ function toggleProvidersForm() {
     </div>
     <div class="hidden items-center lg:flex">
       <div class="items-top flex h-1/2 flex-wrap items-center">
-        <div v-for="provider in filteredSelectedCityProviders.slice(0, 4)" :key="provider.name"
+        <div v-for="provider in filteredSelectedCityProviders.slice(0, 3)" :key="provider.name"
              :style="{ 'background-color': selectedCityProviders.includes(provider.name) ? provider.color : '' }"
              :class="selectedCityProviders.includes(provider.name) ? 'border-zinc-600 drop-shadow-lg' : 'hidden'"
-             class="m-1 flex h-5 w-fit items-center justify-center rounded border border-zinc-300 bg-zinc-300 p-1 transition-all hover:z-50 hover:scale-[2]"
+             class="m-1 mr-5 flex h-5 w-fit scale-[1.75] items-center justify-center rounded border border-zinc-300 bg-zinc-300 p-1"
         >
           <img class="w-5" :src="'/providers/' + provider.name.toLowerCase() + '.png'" :title="provider.name" alt="">
         </div>
 
-        <div v-if="selectedCityProviders.length > 4"
+        <div v-if="selectedCityProviders.length > 3"
              class="m-1 flex h-5 w-fit items-center justify-center rounded border border-zinc-300 bg-zinc-300 p-1"
         >
           <div class="flex h-5 w-5 items-center justify-center text-xs text-gray-500">
-            +{{ selectedCityProviders.length - 4 }}
+            +{{ selectedCityProviders.length - 3 }}
           </div>
         </div>
         <div v-else-if="selectedCityProviders.length === 0" class="m-1 flex h-5 w-fit items-center justify-center p-1">
diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index e17f13fb..6a129d48 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -16,7 +16,7 @@ function getProviderColor(providerName) {
   <div class="mb-2 mr-3 mt-4 flex w-fit flex-row-reverse flex-wrap items-center justify-end sm:mt-0 sm:justify-start">
     <div v-for="cityProvider in item.cityProviders" :key="cityProvider.provider_name">
       <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
-           class="m-1 flex h-7 w-fit shrink-0 items-center justify-center rounded-md border border-zinc-300 p-1 transition-all hover:z-50 hover:scale-150 lg:h-8"
+           class="m-3 mr-5 flex h-7 w-fit shrink-0 scale-150 items-center justify-center rounded-md border border-zinc-300 p-1 lg:h-8"
       >
         <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
       </div>

From 06209c0df009f3c598f8cb25eab9e550d33af5b8 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Sat, 25 Nov 2023 11:07:11 +0100
Subject: [PATCH 5/7] providers have no borders

---
 resources/js/Shared/Components/City.vue          | 2 +-
 resources/js/Shared/Components/ProviderIcons.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Shared/Components/City.vue b/resources/js/Shared/Components/City.vue
index 2d0ada2f..ce651112 100644
--- a/resources/js/Shared/Components/City.vue
+++ b/resources/js/Shared/Components/City.vue
@@ -201,7 +201,7 @@ function toggleProvidersForm() {
         <div v-for="provider in filteredSelectedCityProviders.slice(0, 3)" :key="provider.name"
              :style="{ 'background-color': selectedCityProviders.includes(provider.name) ? provider.color : '' }"
              :class="selectedCityProviders.includes(provider.name) ? 'border-zinc-600 drop-shadow-lg' : 'hidden'"
-             class="m-1 mr-5 flex h-5 w-fit scale-[1.75] items-center justify-center rounded border border-zinc-300 bg-zinc-300 p-1"
+             class="m-1 mr-5 flex h-5 w-fit scale-[1.75] items-center justify-center rounded  bg-zinc-300 p-1"
         >
           <img class="w-5" :src="'/providers/' + provider.name.toLowerCase() + '.png'" :title="provider.name" alt="">
         </div>
diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index 6a129d48..b5bd7a9a 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -16,7 +16,7 @@ function getProviderColor(providerName) {
   <div class="mb-2 mr-3 mt-4 flex w-fit flex-row-reverse flex-wrap items-center justify-end sm:mt-0 sm:justify-start">
     <div v-for="cityProvider in item.cityProviders" :key="cityProvider.provider_name">
       <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
-           class="m-3 mr-5 flex h-7 w-fit shrink-0 scale-150 items-center justify-center rounded-md border border-zinc-300 p-1 lg:h-8"
+           class="m-3 mr-5 flex h-7 w-fit shrink-0 scale-150 items-center justify-center rounded-md p-1 lg:h-8"
       >
         <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
       </div>

From a2994879364d54d401aae704f4c9ac0b57c3317a Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Sat, 25 Nov 2023 11:20:53 +0100
Subject: [PATCH 6/7] fixed problem with provider width

---
 resources/js/Shared/Components/ProviderIcons.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index b5bd7a9a..212d0652 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -14,9 +14,9 @@ function getProviderColor(providerName) {
 
 <template>
   <div class="mb-2 mr-3 mt-4 flex w-fit flex-row-reverse flex-wrap items-center justify-end sm:mt-0 sm:justify-start">
-    <div v-for="cityProvider in item.cityProviders" :key="cityProvider.provider_name">
+    <div class="w-[72px]" v-for="cityProvider in item.cityProviders" :key="cityProvider.provider_name">
       <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
-           class="m-3 mr-5 flex h-7 w-fit shrink-0 scale-150 items-center justify-center rounded-md p-1 lg:h-8"
+           class="m-3 mr-5 flex h-7 w-fit scale-150 items-center justify-center rounded-md p-1 lg:h-8"
       >
         <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
       </div>

From d4f09f4ecb3b3792cbb43351ed65ba02b72a24b6 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Sat, 25 Nov 2023 20:23:57 +0100
Subject: [PATCH 7/7] linting

---
 resources/js/Shared/Components/ProviderIcons.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index 212d0652..eef49127 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -14,7 +14,7 @@ function getProviderColor(providerName) {
 
 <template>
   <div class="mb-2 mr-3 mt-4 flex w-fit flex-row-reverse flex-wrap items-center justify-end sm:mt-0 sm:justify-start">
-    <div class="w-[72px]" v-for="cityProvider in item.cityProviders" :key="cityProvider.provider_name">
+    <div v-for="cityProvider in item.cityProviders" :key="cityProvider.provider_name" class="w-[72px]">
       <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
            class="m-3 mr-5 flex h-7 w-fit scale-150 items-center justify-center rounded-md p-1 lg:h-8"
       >