From ca9c0517904ff3b9741a63d0204ff29f972b250c Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <99127578+subhajit20@users.noreply.github.com>
Date: Tue, 7 Nov 2023 23:33:41 +0530
Subject: [PATCH] Replaced all the css into tailwind css on  Pagination 
 component (#1763)

---
 components/Pagination/Pagination.js           | 12 ++++++---
 components/Pagination/Pagination.module.css   | 12 ---------
 .../__snapshots__/PaginationItem.test.js.snap |  2 +-
 .../__snapshots__/Pagination.test.js.snap     | 26 +++++++++----------
 4 files changed, 22 insertions(+), 30 deletions(-)
 delete mode 100644 components/Pagination/Pagination.module.css

diff --git a/components/Pagination/Pagination.js b/components/Pagination/Pagination.js
index 5baf7ef55..3e05a05e5 100644
--- a/components/Pagination/Pagination.js
+++ b/components/Pagination/Pagination.js
@@ -3,7 +3,6 @@ import LeftAngleIcon from 'static/images/icons/FontAwesome/angle-left-solid.svg'
 import RightAngleIcon from 'static/images/icons/FontAwesome/angle-right-solid.svg';
 import { PREV_PAGE_BUTTON, NEXT_PAGE_BUTTON } from '../../common/constants/testIDs';
 import PaginationItem from './PaginationItem/PaginationItem';
-import styles from './Pagination.module.css';
 
 Pagination.propTypes = {
   currentPage: number.isRequired,
@@ -147,7 +146,12 @@ function Pagination({ currentPage, pathname, query, totalPages }) {
   }
 
   return (
-    <nav className={styles.Pagination} data-testid="Pagination">
+    <nav
+      className={
+        '[&>ol]:flex [&>ol]:my-0 [&>ol]:mx-auto [&>ol]:p-0 [&>ol]:justify-between [&>ol]:items-center [&>ol]:max-w-fit"'
+      }
+      data-testid="Pagination"
+    >
       <ol>
         {currentPage > 1 && (
           <PaginationItem
@@ -156,7 +160,7 @@ function Pagination({ currentPage, pathname, query, totalPages }) {
             query={query}
             testId={PREV_PAGE_BUTTON}
           >
-            <LeftAngleIcon className={styles.icon} />
+            <LeftAngleIcon className="w-full" />
           </PaginationItem>
         )}
 
@@ -174,7 +178,7 @@ function Pagination({ currentPage, pathname, query, totalPages }) {
             query={query}
             testId={NEXT_PAGE_BUTTON}
           >
-            <RightAngleIcon className={styles.icon} />
+            <RightAngleIcon className="w-full" />
           </PaginationItem>
         )}
       </ol>
diff --git a/components/Pagination/Pagination.module.css b/components/Pagination/Pagination.module.css
deleted file mode 100644
index 77a02e68b..000000000
--- a/components/Pagination/Pagination.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.Pagination > ol {
-  display: flex;
-  margin: 0 auto;
-  padding: 0;
-  justify-content: space-between;
-  align-items: center;
-  max-width: fit-content;
-}
-
-.icon {
-  width: 100%;
-}
diff --git a/components/Pagination/PaginationItem/__tests__/__snapshots__/PaginationItem.test.js.snap b/components/Pagination/PaginationItem/__tests__/__snapshots__/PaginationItem.test.js.snap
index dfd41a853..6243fa20e 100644
--- a/components/Pagination/PaginationItem/__tests__/__snapshots__/PaginationItem.test.js.snap
+++ b/components/Pagination/PaginationItem/__tests__/__snapshots__/PaginationItem.test.js.snap
@@ -12,7 +12,7 @@ exports[`PaginationItem renders correctly as a current item with value 1`] = `
     onMouseEnter={[Function]}
   >
     <span
-      className="ScreenReaderOnly"
+      className="sr-only"
       data-testid="SCREEN_READER_ONLY"
     >
       Go to page
diff --git a/components/Pagination/__tests__/__snapshots__/Pagination.test.js.snap b/components/Pagination/__tests__/__snapshots__/Pagination.test.js.snap
index 03574b8d8..c50204b56 100644
--- a/components/Pagination/__tests__/__snapshots__/Pagination.test.js.snap
+++ b/components/Pagination/__tests__/__snapshots__/Pagination.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Pagination should render with required props 1`] = `
 <nav
-  className="Pagination"
+  className="[&>ol]:flex [&>ol]:my-0 [&>ol]:mx-auto [&>ol]:p-0 [&>ol]:justify-between [&>ol]:items-center [&>ol]:max-w-fit\\""
   data-testid="Pagination"
 >
   <ol>
@@ -17,7 +17,7 @@ exports[`Pagination should render with required props 1`] = `
         onMouseEnter={[Function]}
       >
         <span
-          className="ScreenReaderOnly"
+          className="sr-only"
           data-testid="SCREEN_READER_ONLY"
         >
           Go to page
@@ -36,7 +36,7 @@ exports[`Pagination should render with required props 1`] = `
         onMouseEnter={[Function]}
       >
         <span
-          className="ScreenReaderOnly"
+          className="sr-only"
           data-testid="SCREEN_READER_ONLY"
         >
           Go to page
@@ -55,7 +55,7 @@ exports[`Pagination should render with required props 1`] = `
         onMouseEnter={[Function]}
       >
         <span
-          className="ScreenReaderOnly"
+          className="sr-only"
           data-testid="SCREEN_READER_ONLY"
         >
           Go to page
@@ -74,7 +74,7 @@ exports[`Pagination should render with required props 1`] = `
         onMouseEnter={[Function]}
       >
         <span
-          className="ScreenReaderOnly"
+          className="sr-only"
           data-testid="SCREEN_READER_ONLY"
         >
           Go to page
@@ -93,7 +93,7 @@ exports[`Pagination should render with required props 1`] = `
         onMouseEnter={[Function]}
       >
         <span
-          className="ScreenReaderOnly"
+          className="sr-only"
           data-testid="SCREEN_READER_ONLY"
         >
           Go to page
@@ -112,7 +112,7 @@ exports[`Pagination should render with required props 1`] = `
         onMouseEnter={[Function]}
       >
         <span
-          className="ScreenReaderOnly"
+          className="sr-only"
           data-testid="SCREEN_READER_ONLY"
         >
           Go to page
@@ -131,7 +131,7 @@ exports[`Pagination should render with required props 1`] = `
         onMouseEnter={[Function]}
       >
         <span
-          className="ScreenReaderOnly"
+          className="sr-only"
           data-testid="SCREEN_READER_ONLY"
         >
           Go to page
@@ -150,7 +150,7 @@ exports[`Pagination should render with required props 1`] = `
         onMouseEnter={[Function]}
       >
         <span
-          className="ScreenReaderOnly"
+          className="sr-only"
           data-testid="SCREEN_READER_ONLY"
         >
           Go to page
@@ -169,7 +169,7 @@ exports[`Pagination should render with required props 1`] = `
         onMouseEnter={[Function]}
       >
         <span
-          className="ScreenReaderOnly"
+          className="sr-only"
           data-testid="SCREEN_READER_ONLY"
         >
           Go to page
@@ -194,7 +194,7 @@ exports[`Pagination should render with required props 1`] = `
         onMouseEnter={[Function]}
       >
         <span
-          className="ScreenReaderOnly"
+          className="sr-only"
           data-testid="SCREEN_READER_ONLY"
         >
           Go to page
@@ -213,13 +213,13 @@ exports[`Pagination should render with required props 1`] = `
         onMouseEnter={[Function]}
       >
         <span
-          className="ScreenReaderOnly"
+          className="sr-only"
           data-testid="SCREEN_READER_ONLY"
         >
           Go to page
         </span>
         <svg
-          className="icon"
+          className="w-full"
         />
       </a>
     </li>