MOSIP-32346 UI layout pagination sorting fixed (#399)

* MOSIP-32346 UI layout issues fixed Signed-off-by: Mayura Deshmukh <[email protected]> * MOSIP-32346 UI layout issues fixed Signed-off-by: Mayura Deshmukh <[email protected]> * MOSIP-32346 UI layout pagination sorting fixed Signed-off-by: Mayura Deshmukh <[email protected]> --------- Signed-off-by: Mayura Deshmukh <[email protected]>
mosip · May 31, 2024 · 3bc2003 · 3bc2003
1 parent adb4286
commit 3bc2003
Show file tree

Hide file tree

Showing 7 changed files with 331 additions and 220 deletions.
diff --git a/pmp-reactjs-ui/package-lock.json b/pmp-reactjs-ui/package-lock.json
diff --git a/pmp-reactjs-ui/package.json b/pmp-reactjs-ui/package.json
@@ -16,6 +16,7 @@
     "react-cookie": "^7.1.4",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.1",
+    "react-icons": "^5.2.1",
     "react-paginate": "^8.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",

diff --git a/pmp-reactjs-ui/src/App.css b/pmp-reactjs-ui/src/App.css
@@ -36,3 +36,33 @@
     transform: rotate(360deg);
   }
 }
+
+.pagination {
+  list-style: none;
+  height: 31.5px;
+  width: 31.5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2px;
+  cursor: pointer;
+}
+
+.active {
+  background-color: #1447B2;
+  border-radius: 10%;
+  color: white;
+  padding: 12px;
+  font-size: small;
+}
+
+.page-item {
+  list-style: none;
+  font-size: small;
+  height: 25px;
+  width: 25px;
+  margin: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/pmp-reactjs-ui/src/pages/certificates/PartnerCertificatesList.js b/pmp-reactjs-ui/src/pages/certificates/PartnerCertificatesList.js
@@ -133,7 +133,7 @@ function PartnerCertificatesList() {
     };
 
     return (
-        <div className="ml-32 mr-5 mt-5 w-full">
+        <div className="ml-32 mr-5 mt-5 w-full overflow-x-scroll">
             {!dataLoaded && (
                 <LoadingIcon></LoadingIcon>
             )}

diff --git a/pmp-reactjs-ui/src/pages/dashboard/Dashboard.js b/pmp-reactjs-ui/src/pages/dashboard/Dashboard.js
@@ -102,7 +102,7 @@ function Dashboard() {
   };
 
   return (
-    <div className="w-full mb-[2%] ml-20">
+    <div className="w-full mb-[2%] ml-20  overflow-x-scroll">
       {!dataLoaded && (
         <LoadingIcon></LoadingIcon>
       )}