From 263c308116b68a6ab113de33345a0f63e82745c2 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Thu, 7 Dec 2023 12:17:31 +0100
Subject: [PATCH 01/13] prepare for adding provider app buttons

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

diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index eef49127..7fb28bdd 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -2,6 +2,7 @@
 const props = defineProps({
   item: Object,
   providers: Object,
+  apps: Object,
 })
 
 function getProviderColor(providerName) {
@@ -10,15 +11,53 @@ function getProviderColor(providerName) {
   return provider ? provider.color : ''
 }
 
+// function getProviderUrl(providerName) {
+//   const provider = props.providers.find(provider => provider.name === providerName)
+//
+//   return provider ? provider.url : ''
+// }
+
+// make buttons visible if provider is clicked and hide if clicked again and hide if clicked outside, if clicked .provider-icon, remove hidden class from .provider-buttons and add hidden class to all other .provider-buttons
+document.addEventListener('click', function(event) {
+  if (!event.target.closest('.provider-buttons') && !event.target.closest('.provider-icon')) {
+    document.querySelectorAll('.provider-buttons').forEach(element => {
+      element.classList.add('hidden')
+    })
+  }
+
+  if (event.target.closest('.provider-icon')) {
+    event.target.closest('.provider-icon').querySelector('.provider-buttons').classList.remove('hidden')
+    document.querySelectorAll('.provider-icon').forEach(element => {
+      if (element !== event.target.closest('.provider-icon')) {
+        element.querySelector('.provider-buttons').classList.add('hidden')
+      }
+    })
+  }
+
+})
+
 </script>
 
 <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="relative 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" 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"
+           class="provider-icon m-3 mr-5 flex h-7 w-fit scale-150 items-center justify-center rounded-md p-1 lg:h-8 " onclick=""
       >
         <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
+        <!-- modal for displaying download buttons -->
+        <div class="provider-buttons absolute bottom-[120%]  left-1/2 h-10 w-10 -translate-x-1/2 rounded bg-slate-200 opacity-80">
+          <!-- buttons visible for web, android or apple if properties are set -->
+          <div v-if="item.web_url" class="flex flex-col items-center">
+            <a :href="item.web_url" target="_blank" class="provider-button text-sm font-semibold text-white hover:underline">Web</a>
+          </div>
+          <div v-if="item.android_url" class="flex flex-col items-center">
+            <a :href="item.android_url" target="_blank" class="provider-button text-sm font-semibold text-white hover:underline">Android</a>
+          </div>
+          <div v-if="item.ios_url" class="flex flex-col items-center">
+            <a :href="item.ios_url" target="_blank" class="provider-button text-sm font-semibold text-white hover:underline">Apple</a>
+          </div>
+        </div>
       </div>
     </div>
   </div>

From 2b2a4747edd44ea68f0990824fd7c5c5d52ad115 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Sat, 9 Dec 2023 15:31:22 +0100
Subject: [PATCH 02/13] css and buttons updated

---
 public/icons/android.svg                      | 100 ++++++++++++++++++
 public/icons/apple.svg                        |  44 ++++++++
 public/icons/globe.svg                        |  38 +++++++
 resources/css/app.css                         |  32 +++++-
 .../js/Shared/Components/ProviderIcons.vue    |  59 ++++++-----
 5 files changed, 242 insertions(+), 31 deletions(-)
 create mode 100644 public/icons/android.svg
 create mode 100644 public/icons/apple.svg
 create mode 100644 public/icons/globe.svg

diff --git a/public/icons/android.svg b/public/icons/android.svg
new file mode 100644
index 00000000..8272bac1
--- /dev/null
+++ b/public/icons/android.svg
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="18.175323mm"
+   height="20.239428mm"
+   viewBox="0 0 18.175323 20.239428"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.1 (9b9bdc1480, 2023-11-25, custom)"
+   sodipodi:docname="android.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.72693603"
+     inkscape:cx="348.03613"
+     inkscape:cy="277.87865"
+     inkscape:window-width="1850"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath392">
+      <path
+         d="M 0,705.894 H 1064.198 V 0 H 0 Z"
+         transform="translate(-263.6938,-248.8117)"
+         id="path392" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath386">
+      <path
+         d="M 0,705.894 H 1064.198 V 0 H 0 Z"
+         transform="translate(-215.4907,-273.32731)"
+         id="path386" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath390">
+      <path
+         d="M 0,705.894 H 1064.198 V 0 H 0 Z"
+         transform="translate(-243.57571,-244.91521)"
+         id="path390" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath388">
+      <path
+         d="M 0,705.894 H 1064.198 V 0 H 0 Z"
+         transform="translate(-243.57571,-246.88981)"
+         id="path388" />
+    </clipPath>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-12.699998,-75.141669)">
+    <path
+       id="path385"
+       d="M 0,0 C -0.614,-0.688 -0.979,-1.724 -0.979,-3.063 V -52.41 c 0,-1.13 0.266,-2.035 0.713,-2.708 l 27.375,27.693 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,13.045367,75.476664)"
+       clip-path="url(#clipPath386)" />
+    <path
+       id="path387"
+       d="m 0,0 8.452,8.551 -31.847,18.094 c -1.327,0.754 -2.543,0.91 -3.509,0.574 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,22.953132,84.803227)"
+       clip-path="url(#clipPath388)" />
+    <path
+       id="path389"
+       d="m 0,0 -27.331,-27.649 c 1.021,-0.562 2.405,-0.491 3.936,0.378 L 8.848,-8.95 Z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,22.953132,85.499822)"
+       clip-path="url(#clipPath390)" />
+    <path
+       id="path391"
+       d="m 0,0 -10.416,5.918 -8.726,-8.827 9.121,-9.228 L 0,-6.442 C 3.118,-4.671 3.118,-1.771 0,0"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,30.05035,84.125224)"
+       clip-path="url(#clipPath392)" />
+  </g>
+</svg>
diff --git a/public/icons/apple.svg b/public/icons/apple.svg
new file mode 100644
index 00000000..2c87d819
--- /dev/null
+++ b/public/icons/apple.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="256px"
+   height="315px"
+   viewBox="0 0 256 315"
+   version="1.1"
+   preserveAspectRatio="xMidYMid"
+   id="svg1"
+   sodipodi:docname="apple-seeklogo.com.svg"
+   inkscape:version="1.3.1 (9b9bdc1480, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.5904762"
+     inkscape:cx="127.96875"
+     inkscape:cy="157.5"
+     inkscape:window-width="1850"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <g
+     id="g1"
+     style="fill:#ffffff;fill-opacity:1">
+    <path
+       d="M213.803394,167.030943 C214.2452,214.609646 255.542482,230.442639 256,230.644727 C255.650812,231.761357 249.401383,253.208293 234.24263,275.361446 C221.138555,294.513969 207.538253,313.596333 186.113759,313.991545 C165.062051,314.379442 158.292752,301.507828 134.22469,301.507828 C110.163898,301.507828 102.642899,313.596301 82.7151126,314.379442 C62.0350407,315.16201 46.2873831,293.668525 33.0744079,274.586162 C6.07529317,235.552544 -14.5576169,164.286328 13.147166,116.18047 C26.9103111,92.2909053 51.5060917,77.1630356 78.2026125,76.7751096 C98.5099145,76.3877456 117.677594,90.4371851 130.091705,90.4371851 C142.497945,90.4371851 165.790755,73.5415029 190.277627,76.0228474 C200.528668,76.4495055 229.303509,80.1636878 247.780625,107.209389 C246.291825,108.132333 213.44635,127.253405 213.803394,167.030988 M174.239142,50.1987033 C185.218331,36.9088319 192.607958,18.4081019 190.591988,0 C174.766312,0.636050225 155.629514,10.5457909 144.278109,23.8283506 C134.10507,35.5906758 125.195775,54.4170275 127.599657,72.4607932 C145.239231,73.8255433 163.259413,63.4970262 174.239142,50.1987249"
+       fill="#000000"
+       id="path1"
+       style="fill:#ffffff;fill-opacity:1" />
+  </g>
+</svg>
diff --git a/public/icons/globe.svg b/public/icons/globe.svg
new file mode 100644
index 00000000..afb61ac7
--- /dev/null
+++ b/public/icons/globe.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="37.999901"
+   viewBox="0 -960 759.99802 759.99802"
+   width="37.999901"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="globe.svg"
+   inkscape:version="1.3.1 (9b9bdc1480, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="17"
+     inkscape:cx="19"
+     inkscape:cy="19"
+     inkscape:window-width="1850"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="m 315.539,-251.386 q -28.692,-40.384 -49.154,-86.923 -20.462,-46.539 -33.001,-102.077 H 73.538 q 36.538,77.308 97.923,125 61.385,47.693 144.078,64 z M 58.923,-485.77 h 166.154 q -3.769,-25.154 -5.154,-46.769 -1.385,-21.616 -1.385,-45.847 0,-21.769 1.077,-44.808 1.077,-23.038 4.847,-50.423 H 58.923 q -7.385,23.616 -10.462,46.231 -3.077,22.616 -3.077,49 0,26 3.077,47.693 3.077,21.692 10.462,44.923 z M 73.538,-719 h 159.231 q 12.385,-56.154 34.039,-104.578 21.654,-48.423 49.731,-85.654 Q 228.077,-886.386 170,-841.463 111.922,-796.539 73.538,-719 Z m 206.23,0 h 201.077 q -15.384,-63.231 -39.461,-110.308 -24.077,-47.077 -61.385,-87.308 -36.923,39.693 -61,87.5 -24.077,47.808 -39.231,110.116 z m 248.076,0 H 686.46 q -36.538,-73.078 -100,-122.347 -63.462,-49.27 -142.001,-67.269 26.154,36.846 47.308,85.077 21.154,48.231 36.077,104.539 z m -147.845,518.998 q -79.384,0 -148.73,-29.154 -69.346,-29.154 -120.846,-80.461 -51.5,-51.308 -80.961,-120.346 Q 0,-499.001 0,-578.386 q 0,-79.769 29.462,-149.422 29.461,-69.654 80.961,-120.961 51.5,-51.308 120.846,-81.269 69.346,-29.962 148.73,-29.962 79.384,0 148.73,29.962 69.346,29.961 120.846,81.269 51.5,51.307 80.961,120.961 29.462,69.653 29.462,149.422 0,15.462 -1,31.308 -1,15.846 -3.616,31.307 h -46.999 q 3.231,-15.461 4.731,-30.192 1.5,-14.731 1.5,-32.423 0,-26.384 -3.077,-49 -3.077,-22.615 -10.462,-46.231 H 534.921 q 3.769,29.616 5.462,51.231 1.692,21.616 1.692,44 0,13.231 -0.5,26.962 -0.5,13.73 -2.115,35.653 h -46.384 q 2,-18.692 2.808,-32.923 0.808,-14.23 0.808,-29.692 0,-22.538 -1.385,-43.769 -1.385,-21.231 -5.769,-51.462 H 271.076 q -4.385,30.231 -5.77,51.462 -1.384,21.231 -1.384,43.769 0,21.539 1.384,41.962 1.385,20.423 5.77,50.654 h 173.153 v 45.384 H 279.768 q 19.615,72.692 42.962,118.615 23.346,45.923 57.269,77.154 19.077,-20.077 35.038,-43.999 15.962,-23.923 29.192,-49.846 v 133.229 q -15.846,2.615 -31.807,3.923 -15.962,1.308 -32.423,1.308 z m 318,-29.384 -135.308,-135.309 v 113.386 h -45.384 v -191.384 h 191.384 v 45.384 H 594.305 l 135.309,135.308 z"
+     id="path1"
+     style="fill:#ffffff;fill-opacity:1" />
+</svg>
diff --git a/resources/css/app.css b/resources/css/app.css
index 6cd0f405..23d61c17 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,7 +1,6 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 @layer utilities {
     .no-scrollbar::-webkit-scrollbar {
         display: none;
@@ -10,7 +9,6 @@
         -ms-overflow-style: none;
         scrollbar-width: none;
       }
-
     .scrollbar::-webkit-scrollbar {
         width: 15px;
         height: 12px;
@@ -27,5 +25,33 @@
     .scrollbar::-webkit-scrollbar-thumb:hover {
         background: #d3d3d3;
     }
-  }
+    .provider-buttons {
+        position: absolute;
+        transition: all 0.15s ease-in-out;
+        opacity: 0;
+        transform: translate(0,0);
+        visibility: hidden;
+        top: -50%;
+        scale: 0.5;
+        left: -50%;
+        padding: 4px;
+        border-radius: 7px;
+        z-index: 50;
+        background: #d3d3d3;
+        > * {
+            margin-bottom: 4px;
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
 
+    }
+    .provider-buttons.show {
+        transform: translate(-50%, -50%);
+        opacity: 1;
+        visibility: visible;
+        top: 50%;
+        left: 50%;
+        scale: 1;
+    }
+  }
diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index 7fb28bdd..9de8c93e 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -10,54 +10,57 @@ function getProviderColor(providerName) {
 
   return provider ? provider.color : ''
 }
-
-// function getProviderUrl(providerName) {
-//   const provider = props.providers.find(provider => provider.name === providerName)
-//
-//   return provider ? provider.url : ''
-// }
-
-// make buttons visible if provider is clicked and hide if clicked again and hide if clicked outside, if clicked .provider-icon, remove hidden class from .provider-buttons and add hidden class to all other .provider-buttons
-document.addEventListener('click', function(event) {
+// get 
+document.addEventListener('click', function (event) {
   if (!event.target.closest('.provider-buttons') && !event.target.closest('.provider-icon')) {
     document.querySelectorAll('.provider-buttons').forEach(element => {
-      element.classList.add('hidden')
+      setTimeout(() => {
+        element.classList.remove('show')
+      }, 150)
     })
   }
 
   if (event.target.closest('.provider-icon')) {
-    event.target.closest('.provider-icon').querySelector('.provider-buttons').classList.remove('hidden')
+    const providerButtons = event.target.closest('.provider-icon').querySelector('.provider-buttons')
+    providerButtons.classList.add('show')
     document.querySelectorAll('.provider-icon').forEach(element => {
       if (element !== event.target.closest('.provider-icon')) {
-        element.querySelector('.provider-buttons').classList.add('hidden')
+        const otherProviderButtons = element.querySelector('.provider-buttons')
+        setTimeout(() => {
+          otherProviderButtons.classList.remove('show')
+        }, 150)
       }
     })
   }
-
 })
 
 </script>
 
 <template>
-  <div class="relative 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="relative z-0 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" class="w-[72px]">
       <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
-           class="provider-icon m-3 mr-5 flex h-7 w-fit scale-150 items-center justify-center rounded-md p-1 lg:h-8 " onclick=""
+           class="provider-icon relative z-0 m-3 mr-5 flex h-7 w-fit scale-150 items-center justify-center rounded-md p-1 lg:h-8" onclick=""
       >
-        <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
-        <!-- modal for displaying download buttons -->
-        <div class="provider-buttons absolute bottom-[120%]  left-1/2 h-10 w-10 -translate-x-1/2 rounded bg-slate-200 opacity-80">
-          <!-- buttons visible for web, android or apple if properties are set -->
-          <div v-if="item.web_url" class="flex flex-col items-center">
-            <a :href="item.web_url" target="_blank" class="provider-button text-sm font-semibold text-white hover:underline">Web</a>
-          </div>
-          <div v-if="item.android_url" class="flex flex-col items-center">
-            <a :href="item.android_url" target="_blank" class="provider-button text-sm font-semibold text-white hover:underline">Android</a>
-          </div>
-          <div v-if="item.ios_url" class="flex flex-col items-center">
-            <a :href="item.ios_url" target="_blank" class="provider-button text-sm font-semibold text-white hover:underline">Apple</a>
-          </div>
+        <div v-if="item.web_url||item.android_url||item.ios_url" class="provider-buttons">
+          <a v-if="item.web_url" :href="item.web_url" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black">
+            <img loading="lazy" class="mx-1 w-4" src="/icons/globe.svg" alt="">
+            <p class="provider-button text-sm font-semibold text-white">Web</p>
+          </a>
+          <a v-if="item.android_url" :href="item.android_url" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black">
+            <img loading="lazy" class="mx-1 w-4" src="/icons/android.svg" alt="">
+            <p :href="item.android_url" target="_blank" class="provider-button text-sm font-semibold text-white hover:underline">
+              Android
+            </p>
+          </a>
+          <a v-if="item.ios_url" :href="item.ios_url" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black ">
+            <img loading="lazy" class="mx-1 w-4" src="/icons/apple.svg" alt="">
+            <p :href="item.ios_url" target="_blank" class="provider-button w-24 text-sm font-semibold text-white hover:underline">
+              AppStore
+            </p>
+          </a>
         </div>
+        <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
       </div>
     </div>
   </div>

From c007280dfb6890d42a899510ab00292cbf95a521 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Sat, 9 Dec 2023 16:44:14 +0100
Subject: [PATCH 03/13] prepared database for links fixed displaying buttons

---
 .../2023_06_15_132726_create_providers.php    |   3 +
 .../js/Shared/Components/ProviderIcons.vue    | 106 ++++++++++--------
 2 files changed, 64 insertions(+), 45 deletions(-)

diff --git a/database/migrations/2023_06_15_132726_create_providers.php b/database/migrations/2023_06_15_132726_create_providers.php
index 6ca84af4..d793037d 100644
--- a/database/migrations/2023_06_15_132726_create_providers.php
+++ b/database/migrations/2023_06_15_132726_create_providers.php
@@ -12,6 +12,9 @@ public function up(): void
         Schema::create("providers", function (Blueprint $table): void {
             $table->string("name")->unique();
             $table->string("url")->nullable();
+            $table->string("android_url")->nullable();
+            $table->string("ios_url")->nullable();
+            $table->string("web_url")->nullable();
             $table->string("color");
             $table->timestamps();
         });
diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index 9de8c93e..72e3e7e2 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -4,61 +4,77 @@ const props = defineProps({
   providers: Object,
   apps: Object,
 })
-
 function getProviderColor(providerName) {
   const provider = props.providers.find(provider => provider.name === providerName)
-
   return provider ? provider.color : ''
 }
-// get 
-document.addEventListener('click', function (event) {
-  if (!event.target.closest('.provider-buttons') && !event.target.closest('.provider-icon')) {
-    document.querySelectorAll('.provider-buttons').forEach(element => {
-      setTimeout(() => {
-        element.classList.remove('show')
-      }, 150)
-    })
+function getProviderURLs(providerName, appType) {
+  ;
+  const provider = props.providers.find(provider => provider.name === providerName)
+  switch (appType) {
+    case 'web':
+      return provider.web_url ? provider.web_url : null
+      break;
+    case 'android':
+      return provider.android_url ? provider.android_url : null
+      break;
+    case 'ios':
+      return provider.ios_url ? provider.ios_url : null
+      break;
   }
-
-  if (event.target.closest('.provider-icon')) {
-    const providerButtons = event.target.closest('.provider-icon').querySelector('.provider-buttons')
-    providerButtons.classList.add('show')
-    document.querySelectorAll('.provider-icon').forEach(element => {
-      if (element !== event.target.closest('.provider-icon')) {
-        const otherProviderButtons = element.querySelector('.provider-buttons')
+  return null
+}
+if (window.location.pathname !== '/') {
+  document.addEventListener('click', function (event) {
+    if (!event.target.closest('.provider-buttons') && !event.target.closest('.provider-icon')) {
+      document.querySelectorAll('.provider-buttons').forEach(element => {
         setTimeout(() => {
-          otherProviderButtons.classList.remove('show')
+          element.classList.remove('show')
         }, 150)
+      })
+    }
+    if (event.target.closest('.provider-icon')) {
+      const providerButtons = event.target.closest('.provider-icon').querySelector('.provider-buttons')
+      if (providerButtons!==null) {
+        providerButtons.classList.add('show')
+        document.querySelectorAll('.provider-icon').forEach(element => {
+          if (element !== event.target.closest('.provider-icon')) {
+            const otherProviderButtons = element.querySelector('.provider-buttons')
+            setTimeout(() => {
+              otherProviderButtons.classList.remove('show')
+            }, 150)
+          }
+        })
       }
-    })
-  }
-})
-
+    }
+  })
+}
 </script>
-
 <template>
-  <div class="relative z-0 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" class="w-[72px]">
-      <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
-           class="provider-icon relative z-0 m-3 mr-5 flex h-7 w-fit scale-150 items-center justify-center rounded-md p-1 lg:h-8" onclick=""
-      >
-        <div v-if="item.web_url||item.android_url||item.ios_url" class="provider-buttons">
-          <a v-if="item.web_url" :href="item.web_url" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black">
-            <img loading="lazy" class="mx-1 w-4" src="/icons/globe.svg" alt="">
-            <p class="provider-button text-sm font-semibold text-white">Web</p>
-          </a>
-          <a v-if="item.android_url" :href="item.android_url" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black">
-            <img loading="lazy" class="mx-1 w-4" src="/icons/android.svg" alt="">
-            <p :href="item.android_url" target="_blank" class="provider-button text-sm font-semibold text-white hover:underline">
-              Android
-            </p>
-          </a>
-          <a v-if="item.ios_url" :href="item.ios_url" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black ">
-            <img loading="lazy" class="mx-1 w-4" src="/icons/apple.svg" alt="">
-            <p :href="item.ios_url" target="_blank" class="provider-button w-24 text-sm font-semibold text-white hover:underline">
-              AppStore
-            </p>
-          </a>
+    <div class="relative z-0 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" class="w-[72px]">
+        <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
+             class="provider-icon relative z-0 m-3 mr-5 flex h-7 w-fit scale-150 items-center justify-center rounded-md p-1 lg:h-8" onclick=""
+        >
+        <div v-if="getProviderURLs(cityProvider.provider_name, 'web') || getProviderURLs(cityProvider.provider_name, 'android') || getProviderURLs(cityProvider.provider_name, 'ios')">
+          <div class="provider-buttons">
+            <a v-if="getProviderURLs(cityProvider.provider_name, 'web')" :href="getProviderURLs(cityProvider.provider_name, 'web')" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black">
+              <img loading="lazy" class="mx-1 w-4" src="/icons/globe.svg" alt="">
+              <p class="provider-button text-sm font-semibold text-white">Web</p>
+            </a>
+            <a v-if="getProviderURLs(cityProvider.provider_name, 'android')" :href="getProviderURLs(cityProvider.provider_name, 'android')" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black">
+              <img loading="lazy" class="mx-1 w-4" src="/icons/android.svg" alt="">
+              <p class="provider-button text-sm font-semibold text-white hover:underline">
+                Android
+              </p>
+            </a>
+            <a v-if="getProviderURLs(cityProvider.provider_name, 'ios')" :href="getProviderURLs(cityProvider.provider_name, 'ios')" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black ">
+              <img loading="lazy" class="mx-1 w-4" src="/icons/apple.svg" alt="">
+              <p class="provider-button w-24 text-sm font-semibold text-white hover:underline">
+                AppStore
+              </p>
+            </a>
+          </div>
         </div>
         <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
       </div>

From f0988358f9aef0a10a8ddac567de3f00ee7ae8f5 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Tue, 19 Dec 2023 18:45:47 +0100
Subject: [PATCH 04/13] fixed error with buttons

---
 resources/css/app.css                         |  46 +++++--
 .../js/Shared/Components/ProviderIcons.vue    | 120 +++++++++---------
 2 files changed, 99 insertions(+), 67 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 23d61c17..13a9d41f 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -29,23 +29,49 @@
         position: absolute;
         transition: all 0.15s ease-in-out;
         opacity: 0;
-        transform: translate(0,0);
+        transform: translate(-50%, -50%);
         visibility: hidden;
-        top: -50%;
+        top: 50%;
+        left: 50%;
         scale: 0.5;
-        left: -50%;
-        padding: 4px;
+        padding: 8px;
         border-radius: 7px;
         z-index: 50;
         background: #d3d3d3;
-        > * {
-            margin-bottom: 4px;
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
+    }
+    .provider-buttons>div{
+        display: block;
+        content: 'isuhfuiodsfiodiocv';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        height: 100%;
+        aspect-ratio: 1/1;
+        background: #d3d3d3;
+        border-radius: 100%;
+        z-index: -1;
+        opacity: 50%;
+        transition: all 0.15s ease-in-out;
+    }
+    .provider-buttons.show>div:nth-of-type(1){
+        height: 20vh;
+    }    
+    .provider-buttons.show>div:nth-of-type(2) {
+        height: 40vh;
+    }    
+    .provider-buttons.show>div:nth-of-type(3) {
+        height: 80vh;
+    }    
 
+    .provider-buttons > a {
+        margin-bottom: 4px;
+    }
+    .provider-buttons>a:last-child {
+        margin-bottom: 0;
     }
+
+    
     .provider-buttons.show {
         transform: translate(-50%, -50%);
         opacity: 1;
diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index 72e3e7e2..21b66831 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -1,83 +1,89 @@
 <script setup>
+import { reactive } from 'vue'
 const props = defineProps({
   item: Object,
   providers: Object,
   apps: Object,
 })
+
 function getProviderColor(providerName) {
   const provider = props.providers.find(provider => provider.name === providerName)
+
   return provider ? provider.color : ''
 }
-function getProviderURLs(providerName, appType) {
-  ;
+
+function getProviderURLs(providerName) {
   const provider = props.providers.find(provider => provider.name === providerName)
-  switch (appType) {
-    case 'web':
-      return provider.web_url ? provider.web_url : null
-      break;
-    case 'android':
-      return provider.android_url ? provider.android_url : null
-      break;
-    case 'ios':
-      return provider.ios_url ? provider.ios_url : null
-      break;
-  }
-  return null
+  urls.pname = provider.name
+  urls.url = provider.url ? provider.url : null
+  urls.android_url =  provider.android_url ? provider.android_url : null
+  urls.ios_url = provider.ios_url ? provider.ios_url : null
+  console.log(urls)
+  console.log(provider)
 }
+
 if (window.location.pathname !== '/') {
   document.addEventListener('click', function (event) {
-    if (!event.target.closest('.provider-buttons') && !event.target.closest('.provider-icon')) {
-      document.querySelectorAll('.provider-buttons').forEach(element => {
+    // close provider buttons if clicked outside
+    if ((!event.target.closest('.provider-buttons') && !event.target.closest('.provider-icon')) || event.target.closest('.decoration')) {
+      if (document.querySelector('.provider-buttons')) {
         setTimeout(() => {
-          element.classList.remove('show')
+          document.querySelector('.provider-buttons').classList.remove('show')
         }, 150)
-      })
-    }
-    if (event.target.closest('.provider-icon')) {
-      const providerButtons = event.target.closest('.provider-icon').querySelector('.provider-buttons')
-      if (providerButtons!==null) {
-        providerButtons.classList.add('show')
-        document.querySelectorAll('.provider-icon').forEach(element => {
-          if (element !== event.target.closest('.provider-icon')) {
-            const otherProviderButtons = element.querySelector('.provider-buttons')
-            setTimeout(() => {
-              otherProviderButtons.classList.remove('show')
-            }, 150)
-          }
-        })
-      }
+  
+      }    }
+
+    // open provider buttons if clicked on provider icon 
+    if (event.target.closest('.provider-icon')&& document.querySelector('.provider-buttons')) {
+      const providerButtons = document.querySelector('.provider-buttons')
+      getProviderURLs(event.target.closest('.provider-icon').getAttribute('pname'))
+      providerButtons.classList.add('show')
     }
   })
 }
+// define props.urls reactive object
+const urls = reactive({
+  pname: null,
+  web: null,
+  android: null,
+  ios: null,
+})
 </script>
+
 <template>
-    <div class="relative z-0 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" class="w-[72px]">
-        <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
-             class="provider-icon relative z-0 m-3 mr-5 flex h-7 w-fit scale-150 items-center justify-center rounded-md p-1 lg:h-8" onclick=""
-        >
-        <div v-if="getProviderURLs(cityProvider.provider_name, 'web') || getProviderURLs(cityProvider.provider_name, 'android') || getProviderURLs(cityProvider.provider_name, 'ios')">
-          <div class="provider-buttons">
-            <a v-if="getProviderURLs(cityProvider.provider_name, 'web')" :href="getProviderURLs(cityProvider.provider_name, 'web')" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black">
-              <img loading="lazy" class="mx-1 w-4" src="/icons/globe.svg" alt="">
-              <p class="provider-button text-sm font-semibold text-white">Web</p>
-            </a>
-            <a v-if="getProviderURLs(cityProvider.provider_name, 'android')" :href="getProviderURLs(cityProvider.provider_name, 'android')" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black">
-              <img loading="lazy" class="mx-1 w-4" src="/icons/android.svg" alt="">
-              <p class="provider-button text-sm font-semibold text-white hover:underline">
-                Android
-              </p>
-            </a>
-            <a v-if="getProviderURLs(cityProvider.provider_name, 'ios')" :href="getProviderURLs(cityProvider.provider_name, 'ios')" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black ">
-              <img loading="lazy" class="mx-1 w-4" src="/icons/apple.svg" alt="">
-              <p class="provider-button w-24 text-sm font-semibold text-white hover:underline">
-                AppStore
-              </p>
-            </a>
-          </div>
-        </div>
+  <div class="relative z-0 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" class="w-[72px]">
+      <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
+           class="provider-icon relative z-0 m-3 mr-5 flex h-7 w-fit scale-150 items-center justify-center rounded-md p-1 lg:h-8" onclick="" :pname="cityProvider.provider_name"
+      >
         <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
       </div>
     </div>
+    <div v-if="urls.url || urls.android_url || urls.ios_url">
+      <div class="provider-buttons">
+        <p class="text-center text-lg">
+          {{ urls.pname }}
+        </p>
+        <a v-if="urls.url" :href="urls.url" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black">
+          <img loading="lazy" class="mx-2 w-6" src="/icons/globe.svg" alt="">
+          <p class="provider-button text-lg font-semibold text-white">Web</p>
+        </a>
+        <a v-if="urls.android_url" :href="urls.android_url" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black">
+          <img loading="lazy" class="mx-2 w-6" src="/icons/android.svg" alt="">
+          <p class="provider-button text-lg font-semibold text-white hover:underline">
+            Android
+          </p>
+        </a>
+        <a v-if="urls.ios_url" :href="urls.ios_url" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black ">
+          <img loading="lazy" class="mx-2 w-6" src="/icons/apple.svg" alt="">
+          <p class="provider-button text-lg font-semibold text-white hover:underline">
+            AppStore
+          </p>
+        </a>
+        <div class="decoration" />
+        <div class="decoration" />
+        <div class="decoration" />
+      </div>
+    </div>
   </div>
 </template>

From 968dfb016c966f8017ffc64bed8a09eb7b5fa9d0 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Tue, 19 Dec 2023 20:04:20 +0100
Subject: [PATCH 05/13] Remove unused web_url field and update provider button
 styles to display correctly

---
 .../2023_06_15_132726_create_providers.php    |  1 -
 resources/css/app.css                         |  2 +-
 resources/js/Pages/City/Index.vue             |  2 +-
 .../js/Shared/Components/ProviderIcons.vue    | 28 +++++++++----------
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/database/migrations/2023_06_15_132726_create_providers.php b/database/migrations/2023_06_15_132726_create_providers.php
index d793037d..794c7f9f 100644
--- a/database/migrations/2023_06_15_132726_create_providers.php
+++ b/database/migrations/2023_06_15_132726_create_providers.php
@@ -14,7 +14,6 @@ public function up(): void
             $table->string("url")->nullable();
             $table->string("android_url")->nullable();
             $table->string("ios_url")->nullable();
-            $table->string("web_url")->nullable();
             $table->string("color");
             $table->timestamps();
         });
diff --git a/resources/css/app.css b/resources/css/app.css
index 13a9d41f..1dc8df08 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -67,7 +67,7 @@
     .provider-buttons > a {
         margin-bottom: 4px;
     }
-    .provider-buttons>a:last-child {
+    .provider-buttons>a:last-of-type {
         margin-bottom: 0;
     }
 
diff --git a/resources/js/Pages/City/Index.vue b/resources/js/Pages/City/Index.vue
index 785fa0b5..4ca545be 100644
--- a/resources/js/Pages/City/Index.vue
+++ b/resources/js/Pages/City/Index.vue
@@ -86,7 +86,7 @@ function createOpinion() {
 
     <div class="mt-16 flex grow flex-col lg:flex-row">
       <div v-if="isDesktop || !shouldShowMap" class="grow lg:w-1/2">
-        <div class="mx-auto mt-4 flex w-11/12 flex-col sm:mt-12">
+        <div class="relative mx-auto mt-4 flex w-11/12 flex-col sm:mt-12">
           <div class="flex items-end justify-between md:items-center">
             <h1 class="flex text-4xl font-bold md:text-5xl">
               {{ city.name }}
diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index 21b66831..20265269 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -18,26 +18,28 @@ function getProviderURLs(providerName) {
   urls.url = provider.url ? provider.url : null
   urls.android_url =  provider.android_url ? provider.android_url : null
   urls.ios_url = provider.ios_url ? provider.ios_url : null
-  console.log(urls)
-  console.log(provider)
-}
+} 
 
 if (window.location.pathname !== '/') {
   document.addEventListener('click', function (event) {
     // close provider buttons if clicked outside
+    const providerButtons = document.querySelector('.provider-buttons')
     if ((!event.target.closest('.provider-buttons') && !event.target.closest('.provider-icon')) || event.target.closest('.decoration')) {
       if (document.querySelector('.provider-buttons')) {
         setTimeout(() => {
           document.querySelector('.provider-buttons').classList.remove('show')
         }, 150)
-  
+          console.log('clicked outside')
       }    }
 
     // open provider buttons if clicked on provider icon 
-    if (event.target.closest('.provider-icon')&& document.querySelector('.provider-buttons')) {
-      const providerButtons = document.querySelector('.provider-buttons')
+    if (event.target.closest('.provider-icon')) {
       getProviderURLs(event.target.closest('.provider-icon').getAttribute('pname'))
-      providerButtons.classList.add('show')
+if (urls.url||urls.android_url||urls.ios_url) {
+        providerButtons.classList.add('show')
+  
+      }
+      console.log('clicked on provider icon')
     }
   })
 }
@@ -51,30 +53,29 @@ const urls = reactive({
 </script>
 
 <template>
-  <div class="relative z-0 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="z-0 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" class="w-[72px]">
       <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
-           class="provider-icon relative z-0 m-3 mr-5 flex h-7 w-fit scale-150 items-center justify-center rounded-md p-1 lg:h-8" onclick="" :pname="cityProvider.provider_name"
+           class="provider-icon z-0 m-3 mr-5 flex h-7 w-fit scale-150 items-center justify-center rounded-md p-1 lg:h-8" onclick="" :pname="cityProvider.provider_name"
       >
         <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
       </div>
     </div>
-    <div v-if="urls.url || urls.android_url || urls.ios_url">
       <div class="provider-buttons">
         <p class="text-center text-lg">
           {{ urls.pname }}
         </p>
-        <a v-if="urls.url" :href="urls.url" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black">
+        <a v-if="urls.url" :href="urls.url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-black">
           <img loading="lazy" class="mx-2 w-6" src="/icons/globe.svg" alt="">
           <p class="provider-button text-lg font-semibold text-white">Web</p>
         </a>
-        <a v-if="urls.android_url" :href="urls.android_url" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black">
+        <a v-if="urls.android_url" :href="urls.android_url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-black">
           <img loading="lazy" class="mx-2 w-6" src="/icons/android.svg" alt="">
           <p class="provider-button text-lg font-semibold text-white hover:underline">
             Android
           </p>
         </a>
-        <a v-if="urls.ios_url" :href="urls.ios_url" target="_blank" class="flex h-7 w-24 flex-row place-items-center justify-items-center rounded bg-black ">
+        <a v-if="urls.ios_url" :href="urls.ios_url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-black ">
           <img loading="lazy" class="mx-2 w-6" src="/icons/apple.svg" alt="">
           <p class="provider-button text-lg font-semibold text-white hover:underline">
             AppStore
@@ -84,6 +85,5 @@ const urls = reactive({
         <div class="decoration" />
         <div class="decoration" />
       </div>
-    </div>
   </div>
 </template>

From b05e21513a8b950ed5efb494caae4523f80c4cb3 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Tue, 19 Dec 2023 20:52:06 +0100
Subject: [PATCH 06/13] some seeders done for testing (ie. beryl)

---
 app/Http/Resources/ProviderResource.php          |  2 ++
 database/seeders/ProviderSeeder.php              | 13 ++++++++-----
 resources/js/Shared/Components/ProviderIcons.vue |  8 +++++---
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/Http/Resources/ProviderResource.php b/app/Http/Resources/ProviderResource.php
index 4c126b6a..75f16695 100644
--- a/app/Http/Resources/ProviderResource.php
+++ b/app/Http/Resources/ProviderResource.php
@@ -14,6 +14,8 @@ public function toArray(Request $request): array
         return [
             "name" => $this->name,
             "url" => $this->url,
+            "android_url" => $this->android_url,
+            "ios_url" => $this->ios_url,
             "color" => $this->color,
         ];
     }
diff --git a/database/seeders/ProviderSeeder.php b/database/seeders/ProviderSeeder.php
index 69f39543..41b68c67 100644
--- a/database/seeders/ProviderSeeder.php
+++ b/database/seeders/ProviderSeeder.php
@@ -36,11 +36,11 @@ class ProviderSeeder extends Seeder
     public function run(): void
     {
         $providers = [
-            ["name" => BeamDataImporter::getProviderName(), "color" => "#7347ff"],
-            ["name" => BerylDataImporter::getProviderName(), "color" => "#00e3c2"],
-            ["name" => BinBinDataImporter::getProviderName(), "color" => "#3dbcc8"],
-            ["name" => BirdDataImporter::getProviderName(), "color" => "#26ccf0"],
-            ["name" => BitMobilityDataImporter::getProviderName(), "color" => "#8da6e3"],
+            ["name" => BeamDataImporter::getProviderName(), "color" => "#7347ff",   "url" => "https://ridebeam.com/", "android_url" => "https://play.google.com/store/apps/details?id=ride.beam", "ios_url" => "https://apps.apple.com/us/app/beam-ride-scooters/id1450999639"],
+            ["name" => BerylDataImporter::getProviderName(), "color" => "#00e3c2", "url" => "https://beryl.cc/", "android_url" => "https://play.google.com/store/apps/details?id=cc.beryl.app", "ios_url" => "https://apps.apple.com/gb/app/beryl-bikes/id1450999639"],
+            ["name" => BinBinDataImporter::getProviderName(), "color" => "#3dbcc8", "url" => "https://www.binbin.es/"],
+            ["name" => BirdDataImporter::getProviderName(), "color" => "#26ccf0",   "url" => "https://www.bird.co/"],
+            ["name" => BitMobilityDataImporter::getProviderName(), "color" => "#8da6e3", "url" => "https://www.bitmobility.com"],
             ["name" => BoltDataImporter::getProviderName(), "color" => "#24f0a0"],
             ["name" => DottDataImporter::getProviderName(), "color" => "#f5c604"],
             ["name" => HopDataImporter::getProviderName(), "color" => "#ea1821"],
@@ -66,6 +66,9 @@ public function run(): void
             Provider::create([
                 "name" => $provider["name"],
                 "color" => $provider["color"],
+                "url" => $provider["url"] ?? null,
+                "android_url" => $provider["android_url"] ?? null,
+                "ios_url" => $provider["ios_url"] ?? null,
             ]);
         }
     }
diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index 20265269..4dbc7075 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -18,6 +18,7 @@ function getProviderURLs(providerName) {
   urls.url = provider.url ? provider.url : null
   urls.android_url =  provider.android_url ? provider.android_url : null
   urls.ios_url = provider.ios_url ? provider.ios_url : null
+  console.log(provider)
 } 
 
 if (window.location.pathname !== '/') {
@@ -40,15 +41,16 @@ if (urls.url||urls.android_url||urls.ios_url) {
   
       }
       console.log('clicked on provider icon')
+      console.log(urls) 
     }
   })
 }
 // define props.urls reactive object
 const urls = reactive({
   pname: null,
-  web: null,
-  android: null,
-  ios: null,
+  url: null,
+  android_url: null,
+  ios_url: null,
 })
 </script>
 

From 76f86e53599e29b99ce273db2cdb5eadf2b2c6c2 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Tue, 19 Dec 2023 22:45:17 +0100
Subject: [PATCH 07/13] almost everything done, changing links for real ones
 left

---
 database/seeders/ProviderSeeder.php           | 44 +++++++++----------
 resources/css/app.css                         | 33 +-------------
 resources/js/Pages/City/Index.vue             |  4 +-
 .../js/Shared/Components/ProviderIcons.vue    | 30 +++++++------
 4 files changed, 43 insertions(+), 68 deletions(-)

diff --git a/database/seeders/ProviderSeeder.php b/database/seeders/ProviderSeeder.php
index 41b68c67..98ae598b 100644
--- a/database/seeders/ProviderSeeder.php
+++ b/database/seeders/ProviderSeeder.php
@@ -38,28 +38,28 @@ public function run(): void
         $providers = [
             ["name" => BeamDataImporter::getProviderName(), "color" => "#7347ff",   "url" => "https://ridebeam.com/", "android_url" => "https://play.google.com/store/apps/details?id=ride.beam", "ios_url" => "https://apps.apple.com/us/app/beam-ride-scooters/id1450999639"],
             ["name" => BerylDataImporter::getProviderName(), "color" => "#00e3c2", "url" => "https://beryl.cc/", "android_url" => "https://play.google.com/store/apps/details?id=cc.beryl.app", "ios_url" => "https://apps.apple.com/gb/app/beryl-bikes/id1450999639"],
-            ["name" => BinBinDataImporter::getProviderName(), "color" => "#3dbcc8", "url" => "https://www.binbin.es/"],
-            ["name" => BirdDataImporter::getProviderName(), "color" => "#26ccf0",   "url" => "https://www.bird.co/"],
-            ["name" => BitMobilityDataImporter::getProviderName(), "color" => "#8da6e3", "url" => "https://www.bitmobility.com"],
-            ["name" => BoltDataImporter::getProviderName(), "color" => "#24f0a0"],
-            ["name" => DottDataImporter::getProviderName(), "color" => "#f5c604"],
-            ["name" => HopDataImporter::getProviderName(), "color" => "#ea1821"],
-            ["name" => HoppDataImporter::getProviderName(), "color" => "#1ce5be"],
-            ["name" => HulajDataImporter::getProviderName(), "color" => "#d6213f"],
-            ["name" => LimeDataImporter::getProviderName(), "color" => "#00de00"],
-            ["name" => LinkDataImporter::getProviderName(), "color" => "#def700"],
-            ["name" => NeuronDataImporter::getProviderName(), "color" => "#445261"],
-            ["name" => QuickDataImporter::getProviderName(), "color" => "#009ac7"],
-            ["name" => SpinDataImporter::getProviderName(), "color" => "#ff5436"],
-            ["name" => SixtDataImporter::getProviderName(), "color" => "#f25a04"],
-            ["name" => TierDataImporter::getProviderName(), "color" => "#0E1A50"],
-            ["name" => VoiDataImporter::getProviderName(), "color" => "#f46c63"],
-            ["name" => UrentDataImporter::getProviderName(), "color" => "#9400FF"],
-            ["name" => ZwingsDataImporter::getProviderName(), "color" => "#abb8c3"],
-            ["name" => RydeDataImporter::getProviderName(), "color" => "#4dcb1f"],
-            ["name" => VeoDataImporter::getProviderName(), "color" => "#000000"],
-            ["name" => WindDataImporter::getProviderName(), "color" => "#fffa00"],
-            ["name" => WheeMoveDataImporter::getProviderName(), "color" => "#31682d"],
+            ["name" => BinBinDataImporter::getProviderName(), "color" => "#3dbcc8", "url" => "https://www.binbin.es/", "android_url" => "https://play.google.com/store/apps/details?id=com.binbin", "ios_url" => "https://apps.apple.com/es/app/binbin/id1450999639"],
+            ["name" => BirdDataImporter::getProviderName(), "color" => "#26ccf0",   "url" => "https://www.bird.co/", "android_url" => "https://play.google.com/store/apps/details?id=co.bird.android", "ios_url" => "https://apps.apple.com/us/app/bird-enjoy-the-ride/id1260842311"],
+            ["name" => BitMobilityDataImporter::getProviderName(), "color" => "#8da6e3", "url" => "https://www.bitmobility.com", "android_url" => "https://play.google.com/store/apps/details?id=com.bitmobility", "ios_url" => "https://apps.apple.com/us/app/bit-mobility/id1450999639"],
+            ["name" => BoltDataImporter::getProviderName(), "color" => "#24ef0a0", "url" => "https://www.micromobility.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.micromobility.bolt", "ios_url" => "https://apps.apple.com/us/app/bolt-electric-scooters/id1450999639"],
+            ["name" => DottDataImporter::getProviderName(), "color" => "#f5c604", "url" => "https://ridedott.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.dott", "ios_url" => "https://apps.apple.com/us/app/dott-ride-your-way/id1450999639"],
+            ["name" => HopDataImporter::getProviderName(), "color" => "#ea1821", "url" => "https://www.hop.city/", "android_url" => "https://play.google.com/store/apps/details?id=city.hop", "ios_url" => "https://apps.apple.com/us/app/hop-city/id1450999639"],
+            ["name" => HoppDataImporter::getProviderName(), "color" => "#1ce5be", "url" => "https://www.hoppscooters.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.hoppscooters", "ios_url" => "https://apps.apple.com/us/app/hopp-scooters/id1450999639"],
+            ["name" => HulajDataImporter::getProviderName(), "color" => "#d6213f", "url" => "https://hulaj.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.hulaj", "ios_url" => "https://apps.apple.com/us/app/hulaj/id1450999639"],
+            ["name" => LimeDataImporter::getProviderName(), "color" => "#00de00", "url" => "https://www.li.me/", "android_url" => "https://play.google.com/store/apps/details?id=com.limebike", "ios_url" => "https://apps.apple.com/us/app/lime-your-ride-anytime/id1450999639"],
+            ["name" => LinkDataImporter::getProviderName(), "color" => "#def700", "url" => "https://link.city/", "android_url" => "https://play.google.com/store/apps/details?id=city.link", "ios_url" => "https://apps.apple.com/us/app/link-city/id1450999639"],
+            ["name" => NeuronDataImporter::getProviderName(), "color" => "#445261", "url" => "https://www.neuron.sg/", "android_url" => "https://play.google.com/store/apps/details?id=sg.neuron", "ios_url" => "https://apps.apple.com/us/app/neuron-mobility/id1450999639"],
+            ["name" => QuickDataImporter::getProviderName(), "color" => "#009ac7", "url" => "https://www.quick.co/", "android_url" => "https://play.google.com/store/apps/details?id=com.quick", "ios_url" => "https://apps.apple.com/us/app/quick-ride/id1450999639"],
+            ["name" => SpinDataImporter::getProviderName(), "color" => "#ff5436", "url" => "https://www.spin.app/", "android_url" => "https://play.google.com/store/apps/details?id=app.spin", "ios_url" => "https://apps.apple.com/us/app/spin-scooters/id1450999639"],
+            ["name" => SixtDataImporter::getProviderName(), "color" => "#f25a04", "url" => "https://www.sixt.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.sixt.reservation", "ios_url" => "https://apps.apple.com/us/app/sixt-rent-a-car/id1450999639"],
+            ["name" => TierDataImporter::getProviderName(), "color" => "#0E1A50", "url" => "https://www.tier.app/", "android_url" => "https://play.google.com/store/apps/details?id=app.tier", "ios_url" => "https://apps.apple.com/us/app/tier/id1450999639"],
+            ["name" => VoiDataImporter::getProviderName(), "color" => "#f46c63", "url" => "https://www.voiscooters.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.voiapp.voi", "ios_url" => "https://apps.apple.com/us/app/voi-scooters-get-magic-wheels/id1450999639"],
+            ["name" => UrentDataImporter::getProviderName(), "color" => "#9400FF", "url" => "https://www.urent.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.urent", "ios_url" => "https://apps.apple.com/us/app/urent/id1450999639"],
+            ["name" => ZwingsDataImporter::getProviderName(), "color" => "#abb8c3", "url" => "https://www.zwings.co.uk/", "android_url" => "https://play.google.com/store/apps/details?id=com.zwings", "ios_url" => "https://apps.apple.com/us/app/zwings/id1450999639"],
+            ["name" => RydeDataImporter::getProviderName(), "color" => "#4dcb1f", "url" => "https://www.ryde.es/", "android_url" => "https://play.google.com/store/apps/details?id=com.ryde", "ios_url" => "https://apps.apple.com/us/app/ryde/id1450999639"],
+            ["name" => VeoDataImporter::getProviderName(), "color" => "#000000", "url" => "https://www.veoride.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.veoride.rider", "ios_url" => "https://apps.apple.com/us/app/veoride/id1450999639"],
+            ["name" => WindDataImporter::getProviderName(), "color" => "#fffa00", "url" => "https://www.wind.co/", "android_url" => "https://play.google.com/store/apps/details?id=co.wind", "ios_url" => "https://apps.apple.com/us/app/wind/id1450999639"],
+            ["name" => WheeMoveDataImporter::getProviderName(), "color" => "#31682d", "url" => "https://www.wheemove.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.wheemove", "ios_url" => "https://apps.apple.com/us/app/wheemove/id1450999639"],
         ];
 
         foreach ($providers as $provider) {
diff --git a/resources/css/app.css b/resources/css/app.css
index 1dc8df08..c542290b 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -31,52 +31,23 @@
         opacity: 0;
         transform: translate(-50%, -50%);
         visibility: hidden;
-        top: 50%;
+        top: 20%;
         left: 50%;
-        scale: 0.5;
         padding: 8px;
         border-radius: 7px;
         z-index: 50;
-        background: #d3d3d3;
-    }
-    .provider-buttons>div{
-        display: block;
-        content: 'isuhfuiodsfiodiocv';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        height: 100%;
-        aspect-ratio: 1/1;
-        background: #d3d3d3;
-        border-radius: 100%;
-        z-index: -1;
-        opacity: 50%;
-        transition: all 0.15s ease-in-out;
     }
-    .provider-buttons.show>div:nth-of-type(1){
-        height: 20vh;
-    }    
-    .provider-buttons.show>div:nth-of-type(2) {
-        height: 40vh;
-    }    
-    .provider-buttons.show>div:nth-of-type(3) {
-        height: 80vh;
-    }    
-
     .provider-buttons > a {
         margin-bottom: 4px;
     }
     .provider-buttons>a:last-of-type {
         margin-bottom: 0;
     }
-
-    
     .provider-buttons.show {
         transform: translate(-50%, -50%);
         opacity: 1;
         visibility: visible;
-        top: 50%;
+        top: 30%;
         left: 50%;
         scale: 1;
     }
diff --git a/resources/js/Pages/City/Index.vue b/resources/js/Pages/City/Index.vue
index 4ca545be..023550da 100644
--- a/resources/js/Pages/City/Index.vue
+++ b/resources/js/Pages/City/Index.vue
@@ -85,8 +85,8 @@ function createOpinion() {
     <Nav ref="nav" class="z-30" />
 
     <div class="mt-16 flex grow flex-col lg:flex-row">
-      <div v-if="isDesktop || !shouldShowMap" class="grow lg:w-1/2">
-        <div class="relative mx-auto mt-4 flex w-11/12 flex-col sm:mt-12">
+      <div v-if="isDesktop || !shouldShowMap" class="relative grow lg:w-1/2">
+        <div class="mx-auto mt-4 flex w-11/12 flex-col sm:mt-12">
           <div class="flex items-end justify-between md:items-center">
             <h1 class="flex text-4xl font-bold md:text-5xl">
               {{ city.name }}
diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index 4dbc7075..0e27bf78 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -25,20 +25,24 @@ if (window.location.pathname !== '/') {
   document.addEventListener('click', function (event) {
     // close provider buttons if clicked outside
     const providerButtons = document.querySelector('.provider-buttons')
-    if ((!event.target.closest('.provider-buttons') && !event.target.closest('.provider-icon')) || event.target.closest('.decoration')) {
+    if ((!event.target.closest('.provider-buttons') && !event.target.closest('.provider-icon'))) {
       if (document.querySelector('.provider-buttons')) {
         setTimeout(() => {
           document.querySelector('.provider-buttons').classList.remove('show')
+          urls.hidden = true
         }, 150)
+        urls.transparent = true
           console.log('clicked outside')
-      }    }
+      }
+    }
 
     // open provider buttons if clicked on provider icon 
     if (event.target.closest('.provider-icon')) {
       getProviderURLs(event.target.closest('.provider-icon').getAttribute('pname'))
-if (urls.url||urls.android_url||urls.ios_url) {
-        providerButtons.classList.add('show')
-  
+    if (urls.url||urls.android_url||urls.ios_url) {
+      providerButtons.classList.add('show')
+      urls.hidden = false
+      urls.transparent = false
       }
       console.log('clicked on provider icon')
       console.log(urls) 
@@ -51,6 +55,8 @@ const urls = reactive({
   url: null,
   android_url: null,
   ios_url: null,
+  hidden: true,
+  transparent: true,
 })
 </script>
 
@@ -63,29 +69,27 @@ const urls = reactive({
         <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
       </div>
     </div>
-      <div class="provider-buttons">
+      <div class="provider-buttons shadow-lg border-solid border border-blumilk-100 bg-white">
         <p class="text-center text-lg">
           {{ urls.pname }}
         </p>
-        <a v-if="urls.url" :href="urls.url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-black">
+        <a v-if="urls.url" :href="urls.url" target="_blank" class="flex h-11 w-36 shadow-inner flex-row place-items-center justify-items-center rounded bg-blumilk-300">
           <img loading="lazy" class="mx-2 w-6" src="/icons/globe.svg" alt="">
-          <p class="provider-button text-lg font-semibold text-white">Web</p>
+          <p class="provider-button text-lg  font-semibold text-white hover:underline">Web</p>
         </a>
-        <a v-if="urls.android_url" :href="urls.android_url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-black">
+        <a v-if="urls.android_url" :href="urls.android_url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-blumilk-300">
           <img loading="lazy" class="mx-2 w-6" src="/icons/android.svg" alt="">
           <p class="provider-button text-lg font-semibold text-white hover:underline">
             Android
           </p>
         </a>
-        <a v-if="urls.ios_url" :href="urls.ios_url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-black ">
+        <a v-if="urls.ios_url" :href="urls.ios_url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-blumilk-300 ">
           <img loading="lazy" class="mx-2 w-6" src="/icons/apple.svg" alt="">
           <p class="provider-button text-lg font-semibold text-white hover:underline">
             AppStore
           </p>
         </a>
-        <div class="decoration" />
-        <div class="decoration" />
-        <div class="decoration" />
       </div>
+      <div :style="{ opacity: urls.transparent?'0%':'60%' , visibility: urls.hidden?'hidden':'visible' }" class="decoration absolute w-screen h-screen bg-white -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2   transition-all"></div>
   </div>
 </template>

From 0141abb63b3ce4bc068d5252f3f05908b6bc189a Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Tue, 19 Dec 2023 22:54:48 +0100
Subject: [PATCH 08/13] fixed bolt seeder

---
 database/seeders/ProviderSeeder.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/database/seeders/ProviderSeeder.php b/database/seeders/ProviderSeeder.php
index 98ae598b..2f51b5c6 100644
--- a/database/seeders/ProviderSeeder.php
+++ b/database/seeders/ProviderSeeder.php
@@ -41,7 +41,7 @@ public function run(): void
             ["name" => BinBinDataImporter::getProviderName(), "color" => "#3dbcc8", "url" => "https://www.binbin.es/", "android_url" => "https://play.google.com/store/apps/details?id=com.binbin", "ios_url" => "https://apps.apple.com/es/app/binbin/id1450999639"],
             ["name" => BirdDataImporter::getProviderName(), "color" => "#26ccf0",   "url" => "https://www.bird.co/", "android_url" => "https://play.google.com/store/apps/details?id=co.bird.android", "ios_url" => "https://apps.apple.com/us/app/bird-enjoy-the-ride/id1260842311"],
             ["name" => BitMobilityDataImporter::getProviderName(), "color" => "#8da6e3", "url" => "https://www.bitmobility.com", "android_url" => "https://play.google.com/store/apps/details?id=com.bitmobility", "ios_url" => "https://apps.apple.com/us/app/bit-mobility/id1450999639"],
-            ["name" => BoltDataImporter::getProviderName(), "color" => "#24ef0a0", "url" => "https://www.micromobility.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.micromobility.bolt", "ios_url" => "https://apps.apple.com/us/app/bolt-electric-scooters/id1450999639"],
+            ["name" => BoltDataImporter::getProviderName(), "color" => "#24f0a0", "url" => "https://www.micromobility.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.micromobility.bolt", "ios_url" => "https://apps.apple.com/us/app/bolt-electric-scooters/id1450999639"],
             ["name" => DottDataImporter::getProviderName(), "color" => "#f5c604", "url" => "https://ridedott.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.dott", "ios_url" => "https://apps.apple.com/us/app/dott-ride-your-way/id1450999639"],
             ["name" => HopDataImporter::getProviderName(), "color" => "#ea1821", "url" => "https://www.hop.city/", "android_url" => "https://play.google.com/store/apps/details?id=city.hop", "ios_url" => "https://apps.apple.com/us/app/hop-city/id1450999639"],
             ["name" => HoppDataImporter::getProviderName(), "color" => "#1ce5be", "url" => "https://www.hoppscooters.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.hoppscooters", "ios_url" => "https://apps.apple.com/us/app/hopp-scooters/id1450999639"],

From 332a2d4feab52c7d6cd1180d391887714fa47357 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Tue, 19 Dec 2023 23:59:46 +0100
Subject: [PATCH 09/13] updated seeder

---
 database/seeders/ProviderSeeder.php | 51 ++++++++++++++---------------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/database/seeders/ProviderSeeder.php b/database/seeders/ProviderSeeder.php
index 2f51b5c6..602d2cc4 100644
--- a/database/seeders/ProviderSeeder.php
+++ b/database/seeders/ProviderSeeder.php
@@ -3,7 +3,6 @@
 declare(strict_types=1);
 
 namespace Database\Seeders;
-
 use App\Importers\BeamDataImporter;
 use App\Importers\BerylDataImporter;
 use App\Importers\BinBinDataImporter;
@@ -30,38 +29,36 @@
 use App\Importers\ZwingsDataImporter;
 use App\Models\Provider;
 use Illuminate\Database\Seeder;
-
 class ProviderSeeder extends Seeder
 {
     public function run(): void
     {
         $providers = [
-            ["name" => BeamDataImporter::getProviderName(), "color" => "#7347ff",   "url" => "https://ridebeam.com/", "android_url" => "https://play.google.com/store/apps/details?id=ride.beam", "ios_url" => "https://apps.apple.com/us/app/beam-ride-scooters/id1450999639"],
-            ["name" => BerylDataImporter::getProviderName(), "color" => "#00e3c2", "url" => "https://beryl.cc/", "android_url" => "https://play.google.com/store/apps/details?id=cc.beryl.app", "ios_url" => "https://apps.apple.com/gb/app/beryl-bikes/id1450999639"],
-            ["name" => BinBinDataImporter::getProviderName(), "color" => "#3dbcc8", "url" => "https://www.binbin.es/", "android_url" => "https://play.google.com/store/apps/details?id=com.binbin", "ios_url" => "https://apps.apple.com/es/app/binbin/id1450999639"],
-            ["name" => BirdDataImporter::getProviderName(), "color" => "#26ccf0",   "url" => "https://www.bird.co/", "android_url" => "https://play.google.com/store/apps/details?id=co.bird.android", "ios_url" => "https://apps.apple.com/us/app/bird-enjoy-the-ride/id1260842311"],
-            ["name" => BitMobilityDataImporter::getProviderName(), "color" => "#8da6e3", "url" => "https://www.bitmobility.com", "android_url" => "https://play.google.com/store/apps/details?id=com.bitmobility", "ios_url" => "https://apps.apple.com/us/app/bit-mobility/id1450999639"],
-            ["name" => BoltDataImporter::getProviderName(), "color" => "#24f0a0", "url" => "https://www.micromobility.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.micromobility.bolt", "ios_url" => "https://apps.apple.com/us/app/bolt-electric-scooters/id1450999639"],
-            ["name" => DottDataImporter::getProviderName(), "color" => "#f5c604", "url" => "https://ridedott.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.dott", "ios_url" => "https://apps.apple.com/us/app/dott-ride-your-way/id1450999639"],
-            ["name" => HopDataImporter::getProviderName(), "color" => "#ea1821", "url" => "https://www.hop.city/", "android_url" => "https://play.google.com/store/apps/details?id=city.hop", "ios_url" => "https://apps.apple.com/us/app/hop-city/id1450999639"],
-            ["name" => HoppDataImporter::getProviderName(), "color" => "#1ce5be", "url" => "https://www.hoppscooters.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.hoppscooters", "ios_url" => "https://apps.apple.com/us/app/hopp-scooters/id1450999639"],
-            ["name" => HulajDataImporter::getProviderName(), "color" => "#d6213f", "url" => "https://hulaj.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.hulaj", "ios_url" => "https://apps.apple.com/us/app/hulaj/id1450999639"],
-            ["name" => LimeDataImporter::getProviderName(), "color" => "#00de00", "url" => "https://www.li.me/", "android_url" => "https://play.google.com/store/apps/details?id=com.limebike", "ios_url" => "https://apps.apple.com/us/app/lime-your-ride-anytime/id1450999639"],
-            ["name" => LinkDataImporter::getProviderName(), "color" => "#def700", "url" => "https://link.city/", "android_url" => "https://play.google.com/store/apps/details?id=city.link", "ios_url" => "https://apps.apple.com/us/app/link-city/id1450999639"],
-            ["name" => NeuronDataImporter::getProviderName(), "color" => "#445261", "url" => "https://www.neuron.sg/", "android_url" => "https://play.google.com/store/apps/details?id=sg.neuron", "ios_url" => "https://apps.apple.com/us/app/neuron-mobility/id1450999639"],
-            ["name" => QuickDataImporter::getProviderName(), "color" => "#009ac7", "url" => "https://www.quick.co/", "android_url" => "https://play.google.com/store/apps/details?id=com.quick", "ios_url" => "https://apps.apple.com/us/app/quick-ride/id1450999639"],
-            ["name" => SpinDataImporter::getProviderName(), "color" => "#ff5436", "url" => "https://www.spin.app/", "android_url" => "https://play.google.com/store/apps/details?id=app.spin", "ios_url" => "https://apps.apple.com/us/app/spin-scooters/id1450999639"],
-            ["name" => SixtDataImporter::getProviderName(), "color" => "#f25a04", "url" => "https://www.sixt.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.sixt.reservation", "ios_url" => "https://apps.apple.com/us/app/sixt-rent-a-car/id1450999639"],
-            ["name" => TierDataImporter::getProviderName(), "color" => "#0E1A50", "url" => "https://www.tier.app/", "android_url" => "https://play.google.com/store/apps/details?id=app.tier", "ios_url" => "https://apps.apple.com/us/app/tier/id1450999639"],
-            ["name" => VoiDataImporter::getProviderName(), "color" => "#f46c63", "url" => "https://www.voiscooters.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.voiapp.voi", "ios_url" => "https://apps.apple.com/us/app/voi-scooters-get-magic-wheels/id1450999639"],
-            ["name" => UrentDataImporter::getProviderName(), "color" => "#9400FF", "url" => "https://www.urent.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.urent", "ios_url" => "https://apps.apple.com/us/app/urent/id1450999639"],
-            ["name" => ZwingsDataImporter::getProviderName(), "color" => "#abb8c3", "url" => "https://www.zwings.co.uk/", "android_url" => "https://play.google.com/store/apps/details?id=com.zwings", "ios_url" => "https://apps.apple.com/us/app/zwings/id1450999639"],
-            ["name" => RydeDataImporter::getProviderName(), "color" => "#4dcb1f", "url" => "https://www.ryde.es/", "android_url" => "https://play.google.com/store/apps/details?id=com.ryde", "ios_url" => "https://apps.apple.com/us/app/ryde/id1450999639"],
-            ["name" => VeoDataImporter::getProviderName(), "color" => "#000000", "url" => "https://www.veoride.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.veoride.rider", "ios_url" => "https://apps.apple.com/us/app/veoride/id1450999639"],
-            ["name" => WindDataImporter::getProviderName(), "color" => "#fffa00", "url" => "https://www.wind.co/", "android_url" => "https://play.google.com/store/apps/details?id=co.wind", "ios_url" => "https://apps.apple.com/us/app/wind/id1450999639"],
-            ["name" => WheeMoveDataImporter::getProviderName(), "color" => "#31682d", "url" => "https://www.wheemove.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.wheemove", "ios_url" => "https://apps.apple.com/us/app/wheemove/id1450999639"],
+            ["name" => BeamDataImporter::getProviderName(), "color" => "#7347ff",   "url" => "https://www.ridebeam.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.escooterapp&pli=1", "ios_url" => "https://apps.apple.com/app/id1427114484"],
+            ["name" => BerylDataImporter::getProviderName(), "color" => "#00e3c2", "url" => "https://beryl.cc/", "android_url" => "https://play.google.com/store/apps/details?id=cc.beryl.basis", "ios_url" => "https://apps.apple.com/app/id1386768364"],
+            ["name" => BinBinDataImporter::getProviderName(), "color" => "#3dbcc8", "url" => "https://www.binbin.tech/", "android_url" => "https://play.google.com/store/apps/details?id=com.BINBIN&hl=en_US", "ios_url" => "https://apps.apple.com/us/app/binbin-scooters/id1483635924"],
+            ["name" => BirdDataImporter::getProviderName(), "color" => "#26ccf0",   "url" => "https://www.bird.co/", "android_url" => "https://play.google.com/store/apps/details?id=co.bird.android", "ios_url" => "https://apps.apple.com/us/app/bird-be-free-enjoy-the-ride/id1260842311"],
+            ["name" => BitMobilityDataImporter::getProviderName(), "color" => "#8da6e3", "url" => "https://bitmobility.it/en/", "android_url" => "https://play.google.com/store/apps/details?id=it.bitmobility.bit", "ios_url" => "https://apps.apple.com/it/app/bit/id1464155063"],
+            ["name" => BoltDataImporter::getProviderName(), "color" => "#24f0a0", "url" => "https://bolt.eu/pl-pl/scooters/", "android_url" => "https://play.google.com/store/apps/details?id=ee.mtakso.client&hl=pl&gl=US", "ios_url" => "https://apps.apple.com/pl/app/bolt-przejazdy-hulajnogi/id675033630?l=pl"],
+            ["name" => DottDataImporter::getProviderName(), "color" => "#f5c604", "url" => "https://ridedott.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.ridedott.rider&pli=1", "ios_url" => "https://apps.apple.com/us/app/dott-unlock-your-city/id1440301673"],
+            ["name" => HopDataImporter::getProviderName(), "color" => "#ea1821", "url" => "https://hop.bike/en/", "android_url" => "https://play.google.com/store/apps/details?id=com.hoplagit.rider&hl=pl&gl=US", "ios_url" => "https://apps.apple.com/pl/app/hop-enjoy-the-city/id1487640704?l=pl"],
+            ["name" => HoppDataImporter::getProviderName(), "color" => "#1ce5be", "url" => "https://hopp.bike/", "android_url" => "https://play.google.com/store/apps/details?id=bike.hopp", "ios_url" => "https://apps.apple.com/us/app/hopp-scooters/id1471324642?ls=1"],
+            ["name" => HulajDataImporter::getProviderName(), "color" => "#d6213f", "url" => "https://hulaj.eu/", "android_url" => "https://play.google.com/store/apps/details?id=eu.hulaj&hl=pl&gl=US"],
+            ["name" => LimeDataImporter::getProviderName(), "color" => "#00de00", "url" => "https://www.li.me/", "android_url" => "https://play.google.com/store/apps/details?id=com.limebike", "ios_url" => "https://apps.apple.com/app/id1199780189"],
+            ["name" => LinkDataImporter::getProviderName(), "color" => "#def700", "url" => "https://link.city/", "android_url" => "https://play.google.com/store/apps/details?id=com.superpedestrian.link", "ios_url" => "https://apps.apple.com/US/app/id1487864428?mt=8"],
+            ["name" => NeuronDataImporter::getProviderName(), "color" => "#445261", "url" => "https://www.rideneuron.com/", "android_url" => "https://go.onelink.me/app/Neuron", "ios_url" => "https://go.onelink.me/app/NeuroniOS"],
+            ["name" => QuickDataImporter::getProviderName(), "color" => "#009ac7", "url" => "https://quick-app.eu/en/", "android_url" => "https://play.google.com/store/apps/details?id=eu.quick_app.eu", "ios_url" => "https://apps.apple.com/us/app/quickapp/id1461661144"],
+            ["name" => SpinDataImporter::getProviderName(), "color" => "#ff5436", "url" => "https://www.spin.app/", "android_url" => "https://play.google.com/store/apps/details?hl=en_US&id=pm.spin", "ios_url" => "https://apps.apple.com/us/app/spin-electric-scooters/id1241808993"],
+            ["name" => SixtDataImporter::getProviderName(), "color" => "#f25a04", "url" => "https://www.sixt.com/share/#/", "android_url" => "https://play.google.com/store/apps/details?id=com.sixt.reservation&hl=pl&gl=US", "ios_url" => "https://apps.apple.com/us/app/sixt-rent-share-ride-plus/id295079411"],
+            ["name" => TierDataImporter::getProviderName(), "color" => "#0E1A50", "url" => "https://www.tier.app/", "android_url" => "https://play.google.com/store/apps/details?id=com.tier.app&hl=en&gl=US", "ios_url" => "https://apps.apple.com/app/id1436140272?mt=8"],
+            ["name" => VoiDataImporter::getProviderName(), "color" => "#f46c63", "url" => "https://www.voiscooters.com/", "android_url" => "https://play.google.com/store/apps/details?id=io.voiapp.voi&hl=pl&gl=US", "ios_url" => "https://apps.apple.com/us/app/voi-e-scooter-e-bike-hire/id1395921017?mt=8"],
+            ["name" => UrentDataImporter::getProviderName(), "color" => "#9400FF", "url" => "https://urent.ru/", "android_url" => "https://play.google.com/store/apps/details?id=ru.urentbike.app", "ios_url" => "https://apps.apple.com/gb/app/urent-e-scooters-and-bikes/id1352346712"],
+            ["name" => ZwingsDataImporter::getProviderName(), "color" => "#abb8c3", "url" => "https://www.zwings.co.uk/", "android_url" => "https://play.google.com/store/apps/details?id=com.zwings", "ios_url" => "https://apps.apple.com/us/app/zwings/id1503019815"],
+            ["name" => RydeDataImporter::getProviderName(), "color" => "#4dcb1f", "url" => "https://www.ryde-technology.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.ryde_android&hl=no", "ios_url" => "https://apps.apple.com/no/app/id1495605028"],
+            ["name" => VeoDataImporter::getProviderName(), "color" => "#000000", "url" => "https://www.veoride.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.pgt.veoride", "ios_url" => "https://apps.apple.com/us/app/veoride/id1279820696"],
+            ["name" => WindDataImporter::getProviderName(), "color" => "#fffa00", "url" => "https://www.wind.co/", "android_url" => "https://play.google.com/store/apps/details?id=com.zen.zbike&referrer=utm_source%3Dofficialweb%26utm_medium%3Dother%26utm_term%3Dglobal", "ios_url" => "https://apps.apple.com/cn/app/yango-wind-e-scooter-sharing/id1247826304?utm_source=officialweb&utm_medium=other&time=1703025387273&utm_term=global"],
+            ["name" => WheeMoveDataImporter::getProviderName(), "color" => "#31682d", "url" => "https://www.wheemove.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.whee.android", "ios_url" => "https://apps.apple.com/us/app/whee-e-scooter-sharing/id1465111214?l=es&ls=1"],
         ];
-
         foreach ($providers as $provider) {
             Provider::create([
                 "name" => $provider["name"],

From ecf4b2a95b62891ee3632c172fb9d025ba04a94f Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Wed, 20 Dec 2023 00:05:39 +0100
Subject: [PATCH 10/13] lint

---
 .../js/Shared/Components/ProviderIcons.vue    | 54 ++++++++++---------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index 0e27bf78..0308319b 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -25,6 +25,7 @@ if (window.location.pathname !== '/') {
   document.addEventListener('click', function (event) {
     // close provider buttons if clicked outside
     const providerButtons = document.querySelector('.provider-buttons')
+
     if ((!event.target.closest('.provider-buttons') && !event.target.closest('.provider-icon'))) {
       if (document.querySelector('.provider-buttons')) {
         setTimeout(() => {
@@ -32,17 +33,18 @@ if (window.location.pathname !== '/') {
           urls.hidden = true
         }, 150)
         urls.transparent = true
-          console.log('clicked outside')
+        console.log('clicked outside')
       }
     }
 
     // open provider buttons if clicked on provider icon 
     if (event.target.closest('.provider-icon')) {
       getProviderURLs(event.target.closest('.provider-icon').getAttribute('pname'))
-    if (urls.url||urls.android_url||urls.ios_url) {
-      providerButtons.classList.add('show')
-      urls.hidden = false
-      urls.transparent = false
+
+      if (urls.url||urls.android_url||urls.ios_url) {
+        providerButtons.classList.add('show')
+        urls.hidden = false
+        urls.transparent = false
       }
       console.log('clicked on provider icon')
       console.log(urls) 
@@ -69,27 +71,27 @@ const urls = reactive({
         <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
       </div>
     </div>
-      <div class="provider-buttons shadow-lg border-solid border border-blumilk-100 bg-white">
-        <p class="text-center text-lg">
-          {{ urls.pname }}
+    <div class="provider-buttons border border-solid border-blumilk-100 bg-white shadow-lg">
+      <p class="text-center text-lg">
+        {{ urls.pname }}
+      </p>
+      <a v-if="urls.url" :href="urls.url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-blumilk-300 shadow-inner">
+        <img loading="lazy" class="mx-2 w-6" src="/icons/globe.svg" alt="">
+        <p class="provider-button text-lg  font-semibold text-white hover:underline">Web</p>
+      </a>
+      <a v-if="urls.android_url" :href="urls.android_url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-blumilk-300">
+        <img loading="lazy" class="mx-2 w-6" src="/icons/android.svg" alt="">
+        <p class="provider-button text-lg font-semibold text-white hover:underline">
+          Android
         </p>
-        <a v-if="urls.url" :href="urls.url" target="_blank" class="flex h-11 w-36 shadow-inner flex-row place-items-center justify-items-center rounded bg-blumilk-300">
-          <img loading="lazy" class="mx-2 w-6" src="/icons/globe.svg" alt="">
-          <p class="provider-button text-lg  font-semibold text-white hover:underline">Web</p>
-        </a>
-        <a v-if="urls.android_url" :href="urls.android_url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-blumilk-300">
-          <img loading="lazy" class="mx-2 w-6" src="/icons/android.svg" alt="">
-          <p class="provider-button text-lg font-semibold text-white hover:underline">
-            Android
-          </p>
-        </a>
-        <a v-if="urls.ios_url" :href="urls.ios_url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-blumilk-300 ">
-          <img loading="lazy" class="mx-2 w-6" src="/icons/apple.svg" alt="">
-          <p class="provider-button text-lg font-semibold text-white hover:underline">
-            AppStore
-          </p>
-        </a>
-      </div>
-      <div :style="{ opacity: urls.transparent?'0%':'60%' , visibility: urls.hidden?'hidden':'visible' }" class="decoration absolute w-screen h-screen bg-white -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2   transition-all"></div>
+      </a>
+      <a v-if="urls.ios_url" :href="urls.ios_url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-blumilk-300 ">
+        <img loading="lazy" class="mx-2 w-6" src="/icons/apple.svg" alt="">
+        <p class="provider-button text-lg font-semibold text-white hover:underline">
+          AppStore
+        </p>
+      </a>
+    </div>
+    <div :style="{ opacity: urls.transparent?'0%':'60%' , visibility: urls.hidden?'hidden':'visible' }" class="decoration absolute left-1/2 top-1/2 h-screen w-screen -translate-x-1/2 -translate-y-1/2 bg-white   transition-all" />
   </div>
 </template>

From b3ad93ba027c8c2375b67cb2bce630dbe41ce6f7 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Wed, 20 Dec 2023 00:08:41 +0100
Subject: [PATCH 11/13] seeder lint

---
 database/seeders/ProviderSeeder.php | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/database/seeders/ProviderSeeder.php b/database/seeders/ProviderSeeder.php
index 602d2cc4..e3bed569 100644
--- a/database/seeders/ProviderSeeder.php
+++ b/database/seeders/ProviderSeeder.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 namespace Database\Seeders;
+
 use App\Importers\BeamDataImporter;
 use App\Importers\BerylDataImporter;
 use App\Importers\BinBinDataImporter;
@@ -29,6 +30,7 @@
 use App\Importers\ZwingsDataImporter;
 use App\Models\Provider;
 use Illuminate\Database\Seeder;
+
 class ProviderSeeder extends Seeder
 {
     public function run(): void
@@ -59,6 +61,7 @@ public function run(): void
             ["name" => WindDataImporter::getProviderName(), "color" => "#fffa00", "url" => "https://www.wind.co/", "android_url" => "https://play.google.com/store/apps/details?id=com.zen.zbike&referrer=utm_source%3Dofficialweb%26utm_medium%3Dother%26utm_term%3Dglobal", "ios_url" => "https://apps.apple.com/cn/app/yango-wind-e-scooter-sharing/id1247826304?utm_source=officialweb&utm_medium=other&time=1703025387273&utm_term=global"],
             ["name" => WheeMoveDataImporter::getProviderName(), "color" => "#31682d", "url" => "https://www.wheemove.com/", "android_url" => "https://play.google.com/store/apps/details?id=com.whee.android", "ios_url" => "https://apps.apple.com/us/app/whee-e-scooter-sharing/id1465111214?l=es&ls=1"],
         ];
+
         foreach ($providers as $provider) {
             Provider::create([
                 "name" => $provider["name"],

From 5aa99409e458c638949d85b4cbcdf16c06e05892 Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Sat, 23 Dec 2023 11:13:30 +0100
Subject: [PATCH 12/13] fixed colors and text issue

---
 resources/css/app.css                         | 27 +++++++++++++++++++
 .../js/Shared/Components/ProviderIcons.vue    | 20 ++++++--------
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index c542290b..9430c6ad 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -38,6 +38,7 @@
         z-index: 50;
     }
     .provider-buttons > a {
+        position: relative;
         margin-bottom: 4px;
     }
     .provider-buttons>a:last-of-type {
@@ -51,4 +52,30 @@
         left: 50%;
         scale: 1;
     }
+    .provider-text::after {
+        content: "";
+        display: inline-block;
+        border: 8px solid transparent;
+        border-left-color: #fff;
+        opacity: 0;
+        transition: all 0.15s ease-in-out;
+        height: 0px;
+    }
+    a>.provider-text {
+        transition: all 0.15s ease-in-out;  
+        transform: scale(1);
+    }
+    a:hover>.provider-text {
+        text-decoration: none;
+        transform: scale(1.1);
+    }
+    a:hover>.provider-text::after {
+        opacity: 1;
+    }
+    .provider-buttons>a:hover{
+        box-shadow: inset 0 0 8px 1px #315cb8c5;
+    }
+    .provider-buttons>a{
+        transition: all 0.15s ease-in-out;
+    }
   }
diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index 0308319b..d5a864cf 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -23,7 +23,6 @@ function getProviderURLs(providerName) {
 
 if (window.location.pathname !== '/') {
   document.addEventListener('click', function (event) {
-    // close provider buttons if clicked outside
     const providerButtons = document.querySelector('.provider-buttons')
 
     if ((!event.target.closest('.provider-buttons') && !event.target.closest('.provider-icon'))) {
@@ -36,8 +35,6 @@ if (window.location.pathname !== '/') {
         console.log('clicked outside')
       }
     }
-
-    // open provider buttons if clicked on provider icon 
     if (event.target.closest('.provider-icon')) {
       getProviderURLs(event.target.closest('.provider-icon').getAttribute('pname'))
 
@@ -51,7 +48,6 @@ if (window.location.pathname !== '/') {
     }
   })
 }
-// define props.urls reactive object
 const urls = reactive({
   pname: null,
   url: null,
@@ -71,23 +67,23 @@ const urls = reactive({
         <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
       </div>
     </div>
-    <div class="provider-buttons border border-solid border-blumilk-100 bg-white shadow-lg">
-      <p class="text-center text-lg">
+    <div class="provider-buttons border border-solid bg-white shadow-lg">
+      <p class="text-center text-blumilk-500 text-lg">
         {{ urls.pname }}
       </p>
-      <a v-if="urls.url" :href="urls.url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-blumilk-300 shadow-inner">
+      <a v-if="urls.url" :href="urls.url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-blumilk-400 shadow-inner">
         <img loading="lazy" class="mx-2 w-6" src="/icons/globe.svg" alt="">
-        <p class="provider-button text-lg  font-semibold text-white hover:underline">Web</p>
+        <p class="provider-text text-lg font-semibold text-white hover:underline">Web </p>
       </a>
-      <a v-if="urls.android_url" :href="urls.android_url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-blumilk-300">
+      <a v-if="urls.android_url" :href="urls.android_url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-blumilk-400">
         <img loading="lazy" class="mx-2 w-6" src="/icons/android.svg" alt="">
-        <p class="provider-button text-lg font-semibold text-white hover:underline">
+        <p class="provider-text text-lg font-semibold text-white hover:underline">
           Android
         </p>
       </a>
-      <a v-if="urls.ios_url" :href="urls.ios_url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-blumilk-300 ">
+      <a v-if="urls.ios_url" :href="urls.ios_url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-blumilk-400 ">
         <img loading="lazy" class="mx-2 w-6" src="/icons/apple.svg" alt="">
-        <p class="provider-button text-lg font-semibold text-white hover:underline">
+        <p class="provider-text text-lg font-semibold text-white hover:underline">
           AppStore
         </p>
       </a>

From 64658b7371ef6f0e7e8e9c4c89625b49e0b6022f Mon Sep 17 00:00:00 2001
From: zmigroo <patrykzmigro@gmail.com>
Date: Sat, 23 Dec 2023 11:15:50 +0100
Subject: [PATCH 13/13] lintf

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

diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index d5a864cf..9ac34b28 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -35,6 +35,7 @@ if (window.location.pathname !== '/') {
         console.log('clicked outside')
       }
     }
+
     if (event.target.closest('.provider-icon')) {
       getProviderURLs(event.target.closest('.provider-icon').getAttribute('pname'))
 
@@ -68,7 +69,7 @@ const urls = reactive({
       </div>
     </div>
     <div class="provider-buttons border border-solid bg-white shadow-lg">
-      <p class="text-center text-blumilk-500 text-lg">
+      <p class="text-center text-lg text-blumilk-500">
         {{ urls.pname }}
       </p>
       <a v-if="urls.url" :href="urls.url" target="_blank" class="flex h-11 w-36 flex-row place-items-center justify-items-center rounded bg-blumilk-400 shadow-inner">