From 413662dc32d133d0be0b4edd487782e2860f659e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Morten=20H=C3=B8fft?=
 <6759267+MortenHofft@users.noreply.github.com>
Date: Wed, 23 Oct 2024 14:12:48 +0200
Subject: [PATCH] component: input field with search button

---
 packages/gbif-org/src/components/searchInput.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/gbif-org/src/components/searchInput.tsx b/packages/gbif-org/src/components/searchInput.tsx
index ae7de6af8..97a957eb0 100644
--- a/packages/gbif-org/src/components/searchInput.tsx
+++ b/packages/gbif-org/src/components/searchInput.tsx
@@ -8,17 +8,18 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
 const SearchInput = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
     return (
-      <div className={cn('g-flex disabled:g-opacity-50 g-relative', className)}>
+      <div className={cn('g-inline-flex disabled:g-opacity-50 g-items-center g-justify-center g-w-16 g-px-2', className)}>
         <input
         type={type}
         className={cn(
-          'g-pe-8 g-flex-auto g-h-9 g-w-full g-rounded-md g-border g-border-input g-bg-transparent g-px-3 g-py-1 g-text-sm g-shadow-sm g-transition-colors file:g-border-0 file:g-bg-transparent file:g-text-sm file:g-font-medium placeholder:g-text-muted-foreground focus-visible:g-outline-none focus-visible:g-ring-1 focus-visible:g-ring-ring disabled:g-cursor-not-allowed',
-          className
+          'g-flex-auto g-block g-w-8 g-bg-transparent g-py-1 g-text-sm g-transition-colors file:g-border-0 file:g-bg-transparent file:g-text-sm file:g-font-medium placeholder:g-text-muted-foreground focus-visible:g-outline-none disabled:g-cursor-not-allowed',
         )}
         ref={ref}
         {...props}
       />
-        <button type="submit" className="g-h-9 g-absolute g-top-0 g-end-2 g-flex-none g-rounded-s-none g-rounded-e g-px-2"><MdSearch /></button>
+        <button type="submit" className="g-text-slate-400 g-text-center g-flex-none g-px-1 g-text-base">
+          <MdSearch />
+        </button>
       </div>
     );
   }