update

src/components/ReactTable4/BasicTable.js

@@ -133,12 +133,12 @@ const BasicTable = ({ settingsIcon }) => {
       {/* <button onClick={changeOrder}> Change Column Order </button> */}
       <div className="flex flex-row items-center justify-between">
         {/* right box */}
-        <div className="w-8/12">
+        <div className="" style={{ width: "70%" }}>
           <Tabbar />
         </div>
         {/* left box */}
         <div
-          className="rounded-md p-2 flex flex-row items-center"
+          className="rounded-md p-2 flex flex-row items-center justify-end"
           style={{ backgroundColor: "#F1F6FF" }}
         >
           {/* search box */}

src/components/ReactTable4/ColumnSearch.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 import search from "./search-normal.svg";
-import settings from "./settings.svg";
+import cancleIcon from "./zarbedar-icon.svg";
 
 export const ColumnSearch = ({ column }) => {
   const { filterValue, setFilter } = column;
@@ -12,9 +12,9 @@ export const ColumnSearch = ({ column }) => {
       <div className="flex flex-row items-center relative">
         {activeSearchBox && (
           <img
-            src={settings}
+            src={cancleIcon}
             alt=""
-            className="w-4 h-4 absolute left-16 cursor-pointer"
+            className="w-2 h-2 absolute left-16 cursor-pointer"
             onClick={() => setActiveSearchBox(false)}
           />
         )}

src/components/ReactTable4/GlobalFilter.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { useAsyncDebounce } from "react-table";
 
 import search from "./search-normal.svg";
-import settings from "./settings.svg";
+import cancleIcon from "./zarbedar-icon.svg";
 
 export const GlobalFilter = ({ filter, setFilter }) => {
   const [activeSearchBox, setActiveSearchBox] = useState(false);
@@ -17,9 +17,9 @@ export const GlobalFilter = ({ filter, setFilter }) => {
     <div className="flex flex-row-reverse items-center relative ml-2 ">
       {activeSearchBox && (
         <img
-          src={settings}
+          src={cancleIcon}
           alt=""
-          className="w-4 h-4 absolute left-7 cursor-pointer"
+          className="w-3 h-3 absolute left-7 cursor-pointer"
           onClick={() => setActiveSearchBox(false)}
         />
       )}

src/components/ReactTable4/SliderColumnFilter.js

@@ -27,7 +27,7 @@ export const SliderColumnFilter = ({
           setFilter(parseInt(e.target.value, 10));
         }}
       />
-      <div className="p-1 rounded bg-blue-300">
+      <div className="p-1 rounded bg-blue-300 bg-opacity-20">
         <img
           src={cancleIcon}
           onClick={() => setFilter(undefined)}

src/components/ReactTable4/index.js

@@ -2,6 +2,8 @@ import React, { useRef } from "react";
 import BasicTable from "./BasicTable";
 // import useDraggableScroll from "use-draggable-scroll";
 
+import cancleIcon from "./zarbedar-icon.svg";
+
 const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
   return (
     <div className="my-10  w-11/12 mx-auto">
@@ -90,7 +92,7 @@ export function Tabbar({}) {
   ];
   return (
     <ul
-      className="tabbar flex no-scrollbar border-b border-gray-200 dark:border-gray-700 overflow-x-scroll scrolling-touch"
+      className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
       onMouseDown={(e) => {
         const slider = window.document.querySelector(".tabbar");
         window.isDown = true;
@@ -113,19 +115,16 @@ export function Tabbar({}) {
       }}
     >
       {tabs.map((el) => (
-        <li className="mr-2 ">
+        <li
-          <span
           onClick={(e) => {
             if (window.isDown) return e.preventDefault();
-              ///do here
           }}
           aria-current="page"
-            className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500"
+          className="flex flex-row items-center text-sm text-center active px-2 py-1 rounded-sm mx-1"
+          style={{ backgroundColor: "#F1F6FF" }}
         >
-            <span className="p-2">
+          <span className="">{el}</span>
-              {el} <span className="p-2">x</span>
+          <img src={cancleIcon} className="w-2 h-2 mx-2" />
-            </span>
-          </span>
         </li>
       ))}
     </ul>

src/components/ReactTable4/zarbedar-icon.svg

@@ -1,10 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18.118" height="18.118" viewBox="0 0 18.118 18.118">
+<svg xmlns="http://www.w3.org/2000/svg" width="5.397" height="5.397" viewBox="0 0 5.397 5.397">
-  <g id="Group_1" data-name="Group 1" transform="translate(-244.586 -251.497)">
+  <g id="Group_1887" data-name="Group 1887" transform="translate(0.707 0.707)">
-    <g id="vuesax_linear_clipboard-close" data-name="vuesax/linear/clipboard-close">
+    <path id="Vector" d="M3.943,3.943,0,0" transform="translate(0.04)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
-      <g id="clipboard-close">
+    <path id="Vector-2" data-name="Vector" d="M3.943,0,0,3.943" transform="translate(0 0.04)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
-        <path id="Vector" d="M15.136,15.136,0,0" transform="translate(246.153 252.911)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-        <path id="Vector-2" data-name="Vector" d="M15.136,0,0,15.136" transform="translate(246 253.064)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-      </g>
-    </g>
   </g>
 </svg>