update 4 files and delete 1 file

src/App.js

@@ -187,7 +187,7 @@ function App() {
         {/* <FolderTree /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        {/* <ReactTable4 /> */}
+        <ReactTable4 />
         {/* <ReactTable5 /> */}
 
         {/* ----------------------------$$$ start---------------------------- */}

src/components/DropDown/index.js

@@ -1,9 +1,10 @@
 import React from "react";
+
 import more from "./more2.svg";
 
 export const DropDown = ({}) => {
   return (
-    <div>
+    <div className="mr-3">
       <button
         className=""
         id="dropdownButton"

src/components/DropDown/more2.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="vuesax_linear_more" data-name="vuesax/linear/more" transform="translate(-188 580) rotate(-90)">
+    <g id="more">
+      <path id="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(559 198)" fill="#6397b5"/>
+      <path id="Vector-2" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(573 198)" fill="#6397b5"/>
+      <path id="Vector-3" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(566 198)" fill="#6397b5"/>
+      <path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(556 188)" fill="#6397b5" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/Folderlist/index.js

@@ -7,10 +7,8 @@ import "./index.scss";
 // ? images
 import folder from "./images/folder-open.svg";
 import more from "./images/more.svg";
-import pic1 from "./images/profile-pic1.svg";
-import pic2 from "./images/profile-pic2.svg";
-import pic3 from "./images/profile-pic3.svg";
 import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
+import DropDown from "../DropDown";
 
 const Folderlists = ({ items }) => {
   return (
@@ -50,11 +48,12 @@ const Folderlists = ({ items }) => {
           <div className="flex flex-row justify-between items-center">
             <img src={item.icon} className="w-14" alt="" />
             <div className="self-start flex flex-row-reverse">
-              <img
+              {/* <img
                 src={item.dropDownIcon}
                 className="rotate-90 w-5 cursor-pointer mr-3"
                 alt=""
-              />
+              /> */}
+              <DropDown />
               <ProfilePicNextToEachOther
                 num={item.num}
                 showRest={false}

src/components/ReactTable4/Buttons.js

@@ -3,7 +3,8 @@ import { useState } from "react";
 import arrowIcon from "./arrow-icon.svg";
 import more from "./more2.svg";
 import edit from "./edit.svg";
-import DropDown from "./DropDown";
+
+import DropDown from "../DropDown";
 
 export const Buttons = ({ row, addTab }) => {
   const [activeDetails, setActiveDetails] = useState(null);
@@ -37,7 +38,6 @@ export const Buttons = ({ row, addTab }) => {
       >
         <img src={edit} alt="" className="w-4" />
       </div>
-      {/* <img src={more} alt="" className="w-5 cursor-pointer" /> */}
       <DropDown />
     </div>
   );

src/components/ReactTable4/EditButtons.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import Table from "./BasicTable";
 
-import DropDown from "./DropDown";
+import DropDown from "../DropDown";
 
 import filter from "./filter.svg";
 import plus from "./plus.svg";