refactor(logo): Update main logo SVG to use currentColor

The main logo SVG has been replaced with an updated version.

The previous logo had hardcoded fill colors, making it difficult to adapt to different color schemes, such as light and dark modes.

The new SVG uses `fill="currentColor"`, which allows its color to be controlled via the parent element's CSS `color` property. This makes the logo easily themeable and more flexible for use throughout the application.

src/components/Tables/tenders/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import useTenderListPresenter from "./useTenderListPresenter";
-
+import Status from "@/components/ui/Status";
 import {
   Table,
   TableBody,
@@ -30,6 +30,9 @@ const TendersTable = () => {
       <Table>
         <TableHeader>
           <TableRow className="border-none uppercase [&>th]:text-start">
+            <TableHead colSpan={100} className="text-start font-extrabold">
+              Row
+            </TableHead>
             <TableHead colSpan={100} className="text-start font-extrabold">
               Title
             </TableHead>
@@ -42,6 +45,7 @@ const TendersTable = () => {
           </TableRow>
         </TableHeader>
 
+        {isPending && <TendersSkeleton />}
         <TableBody>
           {allTenders.map((item, index) =>
             !item ? (
@@ -52,6 +56,9 @@ const TendersTable = () => {
                 key={item.id}
                 className="odd:bg-gray-2 dark:odd:bg-gray-7"
               >
+                <TableCell className="text-start" colSpan={100}>
+                  {index + 1}
+                </TableCell>
                 <TableCell className="text-start" colSpan={100}>
                   {item.title}
                 </TableCell>
@@ -59,21 +66,14 @@ const TendersTable = () => {
                   {item.country_code}
                 </TableCell>
                 <TableCell className={cn(`text capitalize`)} colSpan={100}>
-                  <span
-                    className={cn(
-                      "rounded-2xl p-2",
-                      getStatusColor(item.status),
-                    )}
-                  >
-                    {item.status}
-                  </span>
+                  <Status status={item.status}>{item.status}</Status>
                 </TableCell>
               </TableRow>
             ),
           )}
         </TableBody>
+        {isFetchingNextPage && <TendersSkeleton />}
       </Table>
-      {isFetchingNextPage && <TendersSkeleton />}
       {(data?.pages.length ?? 0) >= 5 && hasNextPage && (
         <button
           onClick={() => fetchNextPage()}