From 16763372fc1c7a2bfaf73c09fd4c143201d42783 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 25 Nov 2024 15:46:23 +0100
Subject: [PATCH] fix: search should be more visible on scroll on new resource

---
 resources/css/app.css                                 | 8 ++++++++
 resources/views/livewire/project/new/select.blade.php | 7 ++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index e378d4640..5cd6864c4 100644
--- a/resources/css/app.css
+++ b/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;
diff --git a/resources/views/livewire/project/new/select.blade.php b/resources/views/livewire/project/new/select.blade.php
index 0a9614ea0..27bf325c4 100644
--- a/resources/views/livewire/project/new/select.blade.php
+++ b/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">