update 5 files

src/components/FormFields/OutlineSpan/index.js

@@ -14,17 +14,13 @@ const OutlineSpan = ({
   return (
     <div className={`${divWidth}`}>
       <span
-        className={`absolute right-20 -mt-2 bg-white text-xs px-2 font-sansbold z-10`}
-        style={{ color: outlineTitleClr }}
+        className={`absolute right-20 -mt-2 ${outlineTitleClr} bg-white text-xs px-2 font-sansbold z-10`}
       >
         {outlineTitle}
       </span>
       <p
         className={`relative w-full border-2 rounded-md text-sm leading-6 text-justify p-3 
-focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E] ${textClr}`}
-        style={{
-          borderColor: borderClr,
-        }}
+focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E] ${borderClr} ${textClr}`}
         onClick={onClick}
         onFocus={onFocus}
         onBlur={onBlur}

src/components/FormFields/OutlineTextarea/index.js

@@ -5,16 +5,12 @@ const OutlineTextarea = ({ text, outlineTitleClr, outlineTitle, outline }) => {
     <div>
       {outline && (
         <span
-          className={`absolute right-20 mt-3 bg-white text-xs px-2 font-sansbold z-10`}
-          style={{ color: outlineTitleClr }}
+          className={`absolute right-20 mt-3 ${outlineTitleClr} bg-red-600 text-xs px-2 font-sansbold z-10`}
         >
           {outlineTitle}
         </span>
       )}
-      <textarea
-        style={{ borderWidth: "2px" }}
-        class="text-justify leading-5 relative w-full h-20 resize-y rounded-md my-5 text-xs border-[#06BACE] focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
-      >
+      <textarea class="text-justify leading-5 border-[2px] relative w-full h-20 resize-y rounded-md my-5 text-xs border-[#06BACE] focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]">
         {text}
       </textarea>
     </div>
@@ -26,6 +22,6 @@ export default OutlineTextarea;
 OutlineTextarea.defaultProps = {
   text: "جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت  ",
   outlineTitle: "مهدی عندلیب",
-  outlineTitleClr: "red",
+  outlineTitleClr: "text-blue-600",
   outline: true,
 };

src/components/MiniComponents/DropDown/index.js

@@ -16,9 +16,8 @@ export const DropDown = ({}) => {
         />
       </button>
       <div
-        style={{ backgroundColor: "#65A9FF" }}
         id="dropdown"
-        className="hidden z-10 text-xs list-none rounded divide-y divide-gray-100 shadow"
+        className="hidden z-10 text-xs list-none bg-[#65A9FF] rounded divide-y divide-gray-100 shadow"
       >
         <ul className="" aria-labelledby="dropdownButton">
           <li>

src/components/MiniComponents/FolderTree/index.js

@@ -76,10 +76,9 @@ const FolderTree = ({
                 />
                 <span
                   className={
-                    "z-10   mr-2 " +
+                    "z-10  mr-2 text-[#00253A]" +
                     (selected === item.id ? "text-sm" : "text-xs")
                   }
-                  style={{ color: "#00253A" }}
                 >
                   {item.name}
                   {item.id}

src/components/MiniComponents/Playlist/index.js

@@ -5,8 +5,7 @@ const Playlist = ({ items }) => {
     <section className="flex flex-row flex-wrap items-center gap-4 mt-7">
       {items.map((item, index) => (
         <div
-          className="flex flex-row items-center bg-white border-2 rounded-lg px-2 py-4"
-          style={{ borderColor: "#EEEEEE" }}
+          className="flex flex-row items-center bg-white border-2 border-[#EEEEEE] rounded-lg px-2 py-4"
           key={index}
         >
           <img src={item.icon} className="w-14" alt="" />