update Tabbar.js, BasicTable.js and EditRow.js

src/components/Tabels/ReactTable4/Tabbar.js

@@ -32,11 +32,13 @@ const Tabbar = ({ tabs, delTab, setActivateTab, activeTab }) => {
             if (window.isDown) return e.preventDefault();
           }}
           aria-current="page"
-          className="flex flex-row items-center text-sm text-center active rounded-sm px-4"
-          style={{
-            backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
-            color: activeTab === el.id ? "#fff" : "#000",
-          }}
+          className={`flex flex-row items-center text-lg text-center active rounded-sm p-20 ${
+            activeTab === el.id ? "bg-[#fff]" : "bg-[#000]"
+          } ${activeTab === el.id ? "bg-[#92c1fc]" : "bg-[#F1F6FF]"}`}
+          // style={{
+          //   backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
+          //   color: activeTab === el.id ? "#fff" : "#000",
+          // }}
         >
           <div className="h-full py-2" onClick={(e) => setActivateTab(el.id)}>
             {el.name}

src/components/Tabels/ReactTable5/BasicTable.js

@@ -36,8 +36,7 @@ export const SelectColumnFilter = ({
 
   return (
     <select
-      className="w-32 appearance-none text-xs  flex flex-row items-start p-2 rounded focus:outline-none border focus:border-gray-200 focus:ring focus:ring-gray-200 focus:ring-opacity-20"
-      style={{ borderColor: "#EEEEEE", color: "#00253A" }}
+      className="w-32 appearance-none text-xs  flex flex-row items-start p-2 rounded border-[#EEEEEE] text-[#00253A] focus:outline-none border focus:border-gray-200 focus:ring focus:ring-gray-200 focus:ring-opacity-20"
       name={id}
       id={id}
       value={filterValue}
@@ -45,19 +44,14 @@ export const SelectColumnFilter = ({
         setFilter(e.target.value || undefined);
       }}
     >
-      <option
-        className="text-white"
-        value=""
-        style={{ backgroundColor: "#65A9FF" }}
-      >
+      <option className="text-white " value="">
         بر اساس نوع فایل
       </option>
       {options.map((option, i) => (
         <option
           key={i}
           value={option}
-          className="text-right text-white px-2"
-          style={{ backgroundColor: "#65A9FF" }}
+          className="text-right text-white px-2 bg-[#65A9FF]"
         >
           {(() => {
             if (option === 1) {

src/components/Tabels/ReactTable5/EditRow.js

@@ -11,52 +11,31 @@ const EditRow = ({ row }) => {
       ${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}`}
     >
       <div
-        className="absolute w-fit bg-white p-4 rounded flex flex-row items-center space-x-10"
-        style={{ top: "10%" }}
+        className="top-[10%] absolute w-fit bg-white p-4 rounded flex flex-row items-center space-x-10"
         onClick={(e) => e.stopPropagation()}
       >
         <img src={row.original.filePic} alt="" className="w-20" />
         <span
           role="textbox"
-          style={{
-            backgroundColor: "#F8FBFF",
-            borderColor: "#C8DEF9",
-            color: "#00253A",
-          }}
-          className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          className="bg-[#F8FBFF] text-[#00253A] border-[#C8DEF9] text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
         >
           {row.original.fileName}
         </span>
         <span
           role="textbox"
-          style={{
-            backgroundColor: "#F8FBFF",
-            borderColor: "#C8DEF9",
-            color: "#00253A",
-          }}
-          className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          className="bg-[#F8FBFF] text-[#00253A] border-[#C8DEF9] text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
         >
           {row.original.fileType}
         </span>
         <span
           role="textbox"
-          style={{
-            backgroundColor: "#F8FBFF",
-            borderColor: "#C8DEF9",
-            color: "#00253A",
-          }}
-          className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          className="bg-[#F8FBFF] text-[#00253A] border-[#C8DEF9] text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
         >
           {row.original.fileSize}
         </span>
         <span
           role="textbox"
-          style={{
-            backgroundColor: "#F8FBFF",
-            borderColor: "#C8DEF9",
-            color: "#00253A",
-          }}
-          className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          className="bg-[#F8FBFF] text-[#00253A] border-[#C8DEF9] text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
         >
           {row.original.fileDate}
         </span>