From 5e14760dc296127837ee740e599eb47823383d1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Castillo?= <tcastilloboireau@gmail.com>
Date: Thu, 30 Apr 2026 16:08:22 -0300
Subject: [PATCH] fix: adjust search input look and feel according to figma
 guidelines
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>
---
 src/components/mui/search-input.js | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/components/mui/search-input.js b/src/components/mui/search-input.js
index 256f9237..428d1235 100644
--- a/src/components/mui/search-input.js
+++ b/src/components/mui/search-input.js
@@ -14,7 +14,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import { TextField, IconButton, InputAdornment } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
-import ClearIcon from "@mui/icons-material/Clear";
+import CancelIcon from "@mui/icons-material/Cancel";
 import debounce from "lodash/debounce";
 import { DEBOUNCE_WAIT } from "../../utils/constants";
 
@@ -59,23 +59,18 @@ const SearchInput = ({ term, onSearch, placeholder = "Search...", debounced }) =
       value={searchTerm}
       placeholder={placeholder}
       slotProps={{
-        input: {          
-          startAdornment: debounced && (
+        input: {
+          startAdornment: (
             <InputAdornment position="start">
               <SearchIcon sx={{ color: "#0000008F" }} />
             </InputAdornment>
           ),
           endAdornment: (
             <InputAdornment position="end">
-              {searchTerm ? (
-                <IconButton size="small" onClick={handleClear}>
-                  <ClearIcon fontSize="small" sx={{ color: "#0000008F" }} />
+              {searchTerm && (
+                <IconButton onClick={handleClear} disableRipple>
+                  <CancelIcon sx={{ color: "#0000008F" }} />
                 </IconButton>
-              ) : 
-              (
-                !debounced && <SearchIcon
-                  sx={{ mr: 1, color: "#0000008F", position: "absolute", right: 0 }}
-                />
               )}
             </InputAdornment>
           )
@@ -86,8 +81,9 @@ const SearchInput = ({ term, onSearch, placeholder = "Search...", debounced }) =
       fullWidth
       sx={{
         "& .MuiOutlinedInput-root": {
-          height: "36px"
-        }
+          height: "36px",
+          paddingX: 1
+        },        
       }}
     />
   );