refactor: more tailwind

src/routes/users/Search.tsx

@@ -1,4 +1,3 @@
-import styled from "styled-components";
 import Tippy from "@tippyjs/react";
 import searchIcon from "../../assets/icons/search.svg?url";
 import addIcon from "../../assets/icons/add.svg?url";
@@ -6,31 +5,6 @@ import AddEntriesMenu from "../../common/component/AddEntriesMenu";
 import Tooltip from "../../common/component/Tooltip";
 import { FC, ChangeEvent } from "react";
 import { useTranslation } from "react-i18next";
-
-const StyledWrapper = styled.div`
-  position: relative;
-  min-height: 56px;
-  padding: 6px 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-  .search {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    .input {
-      width: 100%;
-      border: none;
-      outline: none;
-      background: none;
-      font-weight: normal;
-      font-size: 14px;
-      line-height: 20px;
-    }
-  }
-`;
 type Props = {
   input: string,
   updateInput: (input: string) => void
@@ -41,17 +15,17 @@ const Search: FC<Props> = ({ input, updateInput }) => {
     updateInput(evt.target.value);
   };
   return (
-    <StyledWrapper>
-      <div className="search">
+    <div className="relative min-h-[56px] px-2 py-3 flex items-center justify-between gap-2 shadow">
+      <div className="flex items-center gap-1">
         <img src={searchIcon} alt="search icon" />
-        <input value={input} placeholder={`${t("action.search")}...`} className="input" onChange={handleInput} />
+        <input value={input} placeholder={`${t("action.search")}...`} className="w-full text-sm" onChange={handleInput} />
       </div>
       <Tooltip tip={t("more")} placement="bottom">
         <Tippy interactive placement="bottom-end" trigger="click" content={<AddEntriesMenu />}>
           <img src={addIcon} alt="add icon" className="cursor-pointer" />
         </Tippy>
       </Tooltip>
-    </StyledWrapper>
+    </div>
   );
 };
 export default Search;