Added basic set of design fixes for pagination

Author: Hardik500

components/dashboard/src/Pagination/Pagination.tsx

@@ -29,18 +29,24 @@ function Pagination(props: PaginationProps) {
     };
     const getClassnames = (pageNumber: string | number) => {
         if (pageNumber === currentPage) {
-            return "text-gray-500 w-8 text-center rounded-md hover:bg-gray-50 bg-gray-100 disabled pointer-events-none";
+            return "text-gray-500 dark:text-gray-400 h-9 w-8 flex items-center justify-center rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 bg-gray-100 disabled pointer-events-none";
         }
         if (pageNumber === "...") {
-            return "text-gray-500 w-8 text-center rounded-md hover:bg-gray-50 disabled pointer-events-none";
+            return "text-gray-500 dark:text-gray-400 h-9 w-8 flex items-center justify-center rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 disabled pointer-events-none";
         }
-        return "text-gray-500 w-8 text-center rounded-md hover:bg-gray-50 cursor-pointer";
+        return "text-gray-500 dark:text-gray-400 h-9 w-8 flex items-center justify-center rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer";
     };
 
     return (
         <nav className="mt-16 mb-16">
-            <ul className="flex justify-center space-x-4">
-                <li className={`text-gray-400 ${currentPage === 1 ? "disabled" : "cursor-pointer text-gray-500"}`}>
+            <ul className="flex justify-center items-center space-x-4">
+                <li
+                    className={`font-bold text-gray-300 ${
+                        currentPage === 1
+                            ? "disabled dark:text-gray-500"
+                            : "cursor-pointer dark:text-gray-400 text-gray-500"
+                    }`}
+                >
                     <span onClick={prevPage}>
                         <Arrow direction={"left"} />
                         Previous
@@ -57,8 +63,10 @@ function Pagination(props: PaginationProps) {
                     );
                 })}
                 <li
-                    className={`text-gray-400 ${
-                        currentPage === totalNumberOfPages ? "disabled" : "cursor-pointer text-gray-500"
+                    className={`font-bold text-gray-300 ${
+                        currentPage === totalNumberOfPages
+                            ? "disabled dark:text-gray-500"
+                            : "cursor-pointer dark:text-gray-400 text-gray-500"
                     }`}
                 >
                     <span onClick={nextPage}>