updated the withdrawl and layout

src/app/globals.css

@@ -181,7 +181,8 @@
   transform-origin: bottom left;
 }
 
-.status.paid {
+.status.paid,
+.status.success {
   background-color: #12A211;
 }
 

src/components/organism/Table/index.tsx

@@ -17,15 +17,16 @@ export default function CustomTable<TData>({ table, loading = false,
     const columnCount = table.getAllLeafColumns().length;
     const user = useAppSelector((state) => state.auth.user)
     if (user?.role && user?.role.toUpperCase() === "USER") {
+
         return (
-            <table className="min-w-full text-left border-separate border-spacing-y-1 user_table">
+            <table className="min-w-full border-collapse border border-gray-200 text-left">
                 <thead>
                     {table.getHeaderGroups().map((headerGroup) => (
                         <tr key={headerGroup.id}>
                             {headerGroup.headers.map((header) => (
                                 <th
                                     key={header.id}
-                                    className="text-[12px] font-[600] text-white p-2 lg:p-4"
+                                    className="text-[12px] font-[600] text-title p-2 py-4 px-4 bg-light-gray"
                                 >
                                     {flexRender(
                                         header.column.columnDef.header,
@@ -41,8 +42,8 @@ export default function CustomTable<TData>({ table, loading = false,
                         Array.from({ length: skeletonRows }).map((_, rowIndex) => (
                             <tr key={`skeleton-${rowIndex}`} className="animate-pulse">
                                 {Array.from({ length: columnCount }).map((_, colIndex) => (
-                                    <td key={`skeleton-cell-${rowIndex}-${colIndex}`} className="text-[14px] p-2 lg:p-4 ">
-                                        <div className="h-4 w-full rounded-xl bg-[rgba(255, 255, 255, 0.10)]" />
+                                    <td key={`skeleton-cell-${rowIndex}-${colIndex}`} className="p-2 py-4 px-4">
+                                        <div className="h-4 w-full rounded bg-gray-200" />
                                     </td>
                                 ))}
                             </tr>
@@ -58,11 +59,9 @@ export default function CustomTable<TData>({ table, loading = false,
                         </tr>
                     ) : (
                         table.getRowModel().rows.map((row) => (
-                            <tr key={row.id} className="rounded-[24px] mb-1" >
+                            <tr key={row.id} className="">
                                 {row.getVisibleCells().map((cell) => (
-                                    <td key={cell.id}
-                                        className="text-[14px] px-4 py-4"
-                                        style={{ background: "rgba(255, 255, 255, 0.10)" }}>
+                                    <td key={cell.id} className="px-4 py-4 ">
                                         {flexRender(
                                             cell.column.columnDef.cell,
                                             cell.getContext()
@@ -73,18 +72,20 @@ export default function CustomTable<TData>({ table, loading = false,
                         ))
                     )}
                 </tbody>
+
             </table>
-        )
+        );
     }
+
     return (
-        <table className="min-w-full border-collapse border border-gray-200 text-left">
+        <table className="min-w-full text-left border-separate border-spacing-y-1 user_table">
             <thead>
                 {table.getHeaderGroups().map((headerGroup) => (
                     <tr key={headerGroup.id}>
                         {headerGroup.headers.map((header) => (
                             <th
                                 key={header.id}
-                                className="text-[12px] font-[600] text-title p-2 py-4 px-4 bg-light-gray"
+                                className="text-[12px] font-[600] text-white p-2 lg:p-4"
                             >
                                 {flexRender(
                                     header.column.columnDef.header,
@@ -100,8 +101,8 @@ export default function CustomTable<TData>({ table, loading = false,
                     Array.from({ length: skeletonRows }).map((_, rowIndex) => (
                         <tr key={`skeleton-${rowIndex}`} className="animate-pulse">
                             {Array.from({ length: columnCount }).map((_, colIndex) => (
-                                <td key={`skeleton-cell-${rowIndex}-${colIndex}`} className="p-2 py-4 px-4">
-                                    <div className="h-4 w-full rounded bg-gray-200" />
+                                <td key={`skeleton-cell-${rowIndex}-${colIndex}`} className="text-[14px] p-2 lg:p-4 ">
+                                    <div className="h-4 w-full rounded-xl bg-[rgba(255, 255, 255, 0.10)]" />
                                 </td>
                             ))}
                         </tr>
@@ -117,9 +118,11 @@ export default function CustomTable<TData>({ table, loading = false,
                     </tr>
                 ) : (
                     table.getRowModel().rows.map((row) => (
-                        <tr key={row.id} className="">
+                        <tr key={row.id} className="rounded-[24px] mb-1" >
                             {row.getVisibleCells().map((cell) => (
-                                <td key={cell.id} className="px-4 py-4 ">
+                                <td key={cell.id}
+                                    className="text-[14px] px-4 py-4"
+                                    style={{ background: "rgba(255, 255, 255, 0.10)" }}>
                                     {flexRender(
                                         cell.column.columnDef.cell,
                                         cell.getContext()
@@ -130,7 +133,6 @@ export default function CustomTable<TData>({ table, loading = false,
                     ))
                 )}
             </tbody>
-
         </table>
-    );
+    )
 }