update App.js, src/components/CardDesign3/index.js, src/components/SearchBox/index.js and src/components/TimeLineComponent/index.js

src/App.js

@@ -140,7 +140,7 @@ function App() {
         {/* <FileManager /> */}
         {/* <GridListTable /> */}
         {/* <PopupCard /> */}
-        {/* <TimeLineComponent /> */}
+        <TimeLineComponent />
         {/* <CardTrelloDesign /> */}
         {/* <ReligiousTimes /> */}
         {/* <DistributedData /> */}

src/components/CardDesign3/index.js

@@ -19,7 +19,9 @@ const CardDesign3 = () => {
         <SearchBox
           searchIcon={searchIcon}
           placeholder={"جستجو برا اساس اسم یا کد ملی"}
-          className={"p-4 w-[100%]"}
+          className={
+            "p-4 border-[#ddd] focus:border-gray-200 focus:ring-gray-200"
+          }
         />
       </div>
       <CustomToast2 num={4} />

src/components/SearchBox/index.js

@@ -27,7 +27,7 @@ const SearchBox = ({ cancleIcon, searchIcon, placeholder, className }) => {
         // onBlur={() => setActiveSearchBox(false)}
         type="text"
         placeholder={placeholder}
-        className={`${className} text-xs focus:outline-none rounded border border-[#B5D6FF] focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
+        className={`${className} w-[100%] text-xs focus:outline-none rounded border focus:ring  focus:ring-opacity-20`}
       />
     </div>
   );
@@ -41,5 +41,6 @@ SearchBox.defaultProps = {
 
   placeholder: "دنبال چه چیزی هستید",
 
-  className: "w-[100%] text-blue-400 bg-[#F9FBFF] placeholder-blue-300",
+  className:
+    "text-blue-400 bg-[#F9FBFF] placeholder-blue-300 border-[#B5D6FF] focus:border-blue-200 focus:ring-blue-200",
 };

src/components/TimeLineComponent/index.js

@@ -18,7 +18,10 @@ const TimeLineComponent = ({ data }) => {
         <div className="flex-1">
           <Timeline />
         </div>
-        <SearchBox inputWidth={"100%"} searchIcon={search} borderClr="#ddd" />
+        <SearchBox
+          searchIcon={search}
+          className={"border-[#ddd] focus:border-gray-200 focus:ring-gray-200"}
+        />
       </div>
     </div>
   );