update 5 files

src/Views/Home/Main/index.js

@@ -21,7 +21,7 @@ function Main({ activeComponent }) {
         )}
         {/* <h2>Props</h2> */}
         {activeComponent?.props?.length > 0 && (
-          <table className="w-full" style={{ direction: "ltr" }}>
+          <table className="w-full ltr">
             <thead>
               <tr>
                 <th className="font-sansbold text-lg">Name</th>

src/components/Tabels/ReactTable5/Location.js

@@ -3,9 +3,7 @@ import React from "react";
 const Location = () => {
   return (
     <div className="mx-2">
-      <span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
-        لوکیشن مد نظر:
-      </span>
+      <span className="text-xs mr-2 text-[#65A9FF]">لوکیشن مد نظر:</span>
       <img
         className="mt-1 mr-2 border border-blue-300 rounded"
         src="images/ReactTable4map.svg"

src/components/Tabels/ReactTable5/RenderRowSubComponent.js

@@ -11,8 +11,7 @@ const RenderRowSubComponent = ({ columns, row }) => {
       ${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}`}
     >
       <div
-        className="absolute w-6/12 p-4 rounded"
-        style={{ top: "10%" }}
+        className="absolute w-6/12 p-4 rounded top-[10%]"
         onClick={(e) => e.stopPropagation()}
       >
         <img src={row.filePic} className="w-52 mx-auto" />

src/components/Tabels/ReactTable5/SendForm.js

@@ -3,27 +3,15 @@ import React from "react";
 const SendForm = () => {
   return (
     <div className="flex flex-col flex-1 mx-2">
-      <span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
-        توضیحات:
-      </span>
+      <span className="text-sm mb-4 text-[#65A9FF]">توضیحات:</span>
       <form className="flex flex-col ">
         <input
           placeholder="موضوع"
-          className="text-xs mb-2 placeholder-blue-300 rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-          style={{
-            backgroundColor: "#F8FBFF",
-            borderColor: "#C8DEF9",
-            color: "#00253A",
-          }}
+          className="text-xs mb-2 placeholder-blue-300 bg-[#F8FBFF] text-[#00253A] border-[#C8DEF9] rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
         />
         <textarea
           placeholder="متن"
-          className="resize-none w-full h-32 placeholder-blue-300 text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-          style={{
-            backgroundColor: "#F8FBFF",
-            borderColor: "#C8DEF9",
-            color: "#00253A",
-          }}
+          className="resize-none bg-[#F8FBFF] text-[#00253A] border-[#C8DEF9] w-full h-32 placeholder-blue-300 text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
         ></textarea>
       </form>
     </div>

src/components/Timeline/TimeLine1/TimeLineItem.js

@@ -2,14 +2,8 @@ import CircleInCircle from "../../MiniComponents/CircleInCircle";
 import ProfilePicNextToEachOther from "../../Avatar/ProfilePicNextToEachOther";
 
 const TimeLineItem = ({ data }) => (
-  <div
-    className="timeline-item flex flex-row mt-5 w-1/2 self-end justify-start"
-    style={{ paddingRight: "30px" }}
-  >
-    <div
-      className="timeline-item-content relative bg-white rounded-md shadow-sm flex flex-col items-end border border-[#D6D6D6] "
-      style={{ maxWidth: "100%", width: "400px" }}
-    >
+  <div className="timeline-item flex flex-row mt-5 w-1/2 self-end justify-start pr-[30px]">
+    <div className="max-w-full w-[400px] timeline-item-content relative bg-white rounded-md shadow-sm flex flex-col items-end border border-[#D6D6D6] ">
       {/* top --> time & date */}
       <div
         className={`w-full p-3 flex items-center justify-between ${