fix: search should be more visible on scroll on new resource

resources/css/app.css

@@ -30,6 +30,14 @@ body {
     @apply text-black dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300;
 }
 
+.input-sticky {
+    @apply text-black dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300 focus:ring-2 dark:focus:ring-coolgray-300 focus:ring-neutral-400 block w-full py-1.5 rounded border-0 text-sm ring-1 ring-inset;
+}
+
+.input-sticky-active {
+    @apply border-2 border-coollabs focus:bg-coolgray-400 focus:border-coollabs;
+}
+
 /* Readonly */
 .input {
     @apply dark:read-only:text-neutral-500 dark:read-only:ring-0 dark:read-only:bg-coolgray-100/40 placeholder:text-neutral-300 dark:placeholder:text-neutral-700 read-only:text-neutral-500 read-only:bg-neutral-200;

resources/views/livewire/project/new/select.blade.php

@@ -12,9 +12,10 @@
     <div class="pb-4">Deploy resources, like Applications, Databases, Services...</div>
     <div x-data="searchResources()">
         @if ($current_step === 'type')
-            <div class="sticky top-0 z-50 py-2">
-                <input autocomplete="off" x-ref="searchInput" class="input w-full" x-model="search"
-                    placeholder="Type / to search..." @keydown.window.slash.prevent="$refs.searchInput.focus()">
+            <div x-data="{ isSticky: false }" x-init="window.addEventListener('scroll', () => isSticky = window.pageYOffset > 100)" class="sticky top-0 z-50 py-2">
+                <input autocomplete="off" x-ref="searchInput" class="input-sticky"
+                    :class="{ 'input-sticky-active': isSticky }" x-model="search" placeholder="Type / to search..."
+                    @keydown.window.slash.prevent="$refs.searchInput.focus()">
             </div>
             <div x-show="loading">Loading...</div>
             <div x-show="!loading" class="flex flex-col gap-4 py-4">