added and updated

src/components/ReactTable4/BasicTable.js

@@ -187,15 +187,12 @@ const BasicTable = ({ settingsIcon }) => {
             </tr>
           ))}
         </thead>
-        {/* filters */}
+        {/* filter row */}
         <thead style={{ backgroundColor: "#FAFBFF" }}>
           {headerGroups.map((headerGroup) => (
             <tr {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map((column) => (
-                <th
+                <th {...column.getHeaderProps()} className="py-2 text-sm ">
-                  {...column.getHeaderProps()}
-                  className="py-2 text-right text-sm"
-                >
                   {column.canFilter ? column.render("Filter") : null}
                 </th>
               ))}

src/components/ReactTable4/ColumnSearch.js

@@ -8,26 +8,26 @@ export const ColumnSearch = ({ column }) => {
   const [activeSearchBox, setActiveSearchBox] = useState(false);
 
   return (
-    <div className="rounded-md flex flex-row items-center">
+    <div className="flex flex-row items-center">
       <div className="flex flex-row items-center relative">
         {activeSearchBox && (
           <img
             src={settings}
             alt=""
-            className="w-4 h-4 absolute left-7 cursor-pointer"
+            className="w-4 h-4 absolute left-16 cursor-pointer"
             onClick={() => setActiveSearchBox(false)}
           />
         )}
         <img
           src={search}
           alt=""
-          className="w-4 h-4 absolute left-2 cursor-pointer"
+          className="w-4 h-4 absolute left-11 cursor-pointer"
         />
         <input
           value={filterValue || ""}
           onChange={(e) => setFilter(e.target.value)}
           onFocus={() => setActiveSearchBox(true)}
-          className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border p-1`}
+          className={`w-9/12 text-xs text-blue-400 rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
           style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
         />
       </div>

src/components/ReactTable4/GlobalFilter.js

@@ -34,7 +34,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
         onFocus={() => setActiveSearchBox(true)}
         // onBlur={() => setActiveSearchBox(false)}
         type="text"
-        className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`}
+        className={`text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
         style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
       />
     </div>

src/components/ReactTable4/SelectColumnFilter.js

@@ -13,7 +13,8 @@ export const SelectColumnFilter = ({
 
   return (
     <select
-      className="rounded-md border-gray-300 shadow-sm text-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+      className="text-xs flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+      style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
       name={id}
       id={id}
       value={filterValue}
@@ -21,11 +22,11 @@ export const SelectColumnFilter = ({
         setFilter(e.target.value || undefined);
       }}
     >
-      <option className="text-xs" value="">
+      <option className="" value="">
         همه
       </option>
       {options.map((option, i) => (
-        <option key={i} value={option} className="text-xs">
+        <option key={i} value={option} className="text-right">
           {(() => {
             if (option === 1) {
               return "وضعیت عادی";

src/components/ReactTable4/columns.js

@@ -14,7 +14,6 @@ export const COLUMNS = [
     Footer: "نام و نام خانوادگی",
     accessor: "name",
     disableSortBy: true,
-    disableFilters: true,
   },
   {
     Header: "تاریخ سفارش",