From 01efd39d8850d4f794bc0dc1926fc059aa0bdcbb Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Fri, 28 Jan 2022 07:36:38 +0530
Subject: [PATCH] Fixes pagination subtext color in dark mode (#1980)

---
 frontend/src/HomePage/HomePage.jsx      | 1 +
 frontend/src/_components/Pagination.jsx | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index 0de0352876..5a80bbd3e3 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -590,6 +590,7 @@ class HomePage extends React.Component {
                           currentPage={meta.current_page}
                           count={this.pageCount()}
                           pageChanged={this.pageChanged}
+                          darkMode={this.props.darkMode}
                         />
                       )}
                     </div>
diff --git a/frontend/src/_components/Pagination.jsx b/frontend/src/_components/Pagination.jsx
index 1f8344fd6b..513e1a823d 100644
--- a/frontend/src/_components/Pagination.jsx
+++ b/frontend/src/_components/Pagination.jsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-export const Pagination = function Pagination({ currentPage, count, pageChanged, itemsPerPage = 10 }) {
+export const Pagination = function Pagination({ currentPage, count, pageChanged, itemsPerPage = 10, darkMode }) {
   const totalPages = useMemo(() => {
     return Math.floor((count - 1) / itemsPerPage) + 1;
   }, [count, itemsPerPage]);
@@ -53,7 +53,7 @@ export const Pagination = function Pagination({ currentPage, count, pageChanged,
 
   return (
     <div className="card-footer d-flex align-items-center px-1">
-      <p className="m-0 text-muted">
+      <p className={`m-0 ${darkMode ? 'text-white-50' : 'text-muted'}`}>
         Showing <span>{startingAppCount()}</span> to <span>{endingAppCount()}</span> of <span>{count}</span>
       </p>
       <ul className="pagination m-0 ms-auto">