Styling fixes

Author: craquet

src/components/search/DefaultSearchBox.tsx

@@ -7,7 +7,7 @@ import { ChevronDown, ExternalLink, SearchIcon } from "lucide-react"
 export function DefaultSearchBox(props: InputViewProps) {
     return (
         <div className="rfs-relative rfs-flex rfs-w-full rfs-max-w-[1300px] rfs-px-[15px] md:rfs-px-[calc(24px+0.5rem)] rfs-flex-col rfs-items-center rfs-gap-4 md:rfs-flex-row">
-            <SearchIcon className="rfs-absolute rfs-left-12 rfs-top-3 rfs-size-4 rfs-text-muted-foreground md:rfs-top-auto" />
+            <SearchIcon className="rfs-absolute rfs-left-7 md:rfs-left-12 rfs-top-3.5 rfs-size-4 rfs-text-muted-foreground md:rfs-top-auto" />
             <Input {...props.getInputProps()} placeholder="Search for something..." className="rfs-h-11 rfs-pl-10" />
             <div className="rfs-flex rfs-w-full rfs-items-center md:rfs-h-full md:rfs-w-auto">
                 <Button {...props.getButtonProps()} className="rfs-grow rfs-rounded-r-none" size="lg">

src/elastic-ui.css

@@ -15,7 +15,7 @@
  * Body
  */
 .sui-layout-body {
-    background: hsl(var(--background));
+    background: hsl(var(--rfs-background));
 }
 
 @media (max-width: 800px) {
@@ -82,8 +82,8 @@
         width: 100%;
         margin: 0;
         padding: 0 15px 30px 15px;
-        color: hsl(var(--foreground));
-        background-color: hsl(var(--background));
+        color: hsl(var(--rfs-foreground));
+        background-color: hsl(var(--rfs-background));
         overflow: auto;
     }
 }
@@ -104,9 +104,9 @@
         line-height: 1.5;
         font-size: 14px;
         font-weight: 500;
-        color: hsl(var(--secondary-foreground));
-        background-color: hsl(var(--secondary));
-        border: 1px solid hsl(var(--border));
+        color: hsl(var(--rfs-secondary-foreground));
+        background-color: hsl(var(--rfs-secondary));
+        border: 1px solid hsl(var(--rfs-border));
         border-radius: 4px;
     }