Fix mobile view pagination buttons (#25)

* fix mobile view pagination * Fix pagination buttons layout for the desktop view
profydev · Oct 28, 2024 · 821d4ab · 821d4ab
1 parent d39483f
commit 821d4ab
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 23 deletions.
diff --git a/features/issues/components/filters-bar/filters-bar.module.scss b/features/issues/components/filters-bar/filters-bar.module.scss
@@ -43,7 +43,8 @@
 
 .button {
   margin-right: auto;
-  min-width: 230px;
+  min-width: 250px;
+  font-weight: 400;
 }
 
 .icon {

diff --git a/features/issues/components/issue-list/issue-list.module.scss b/features/issues/components/issue-list/issue-list.module.scss
@@ -13,12 +13,36 @@
     .container {
       display: none;
     }
+
+    .paginationContainer {
+      display: flex;
+      flex-direction: column;
+      padding: 0 0 space.$s3 0;
+    }
+
+    .paginationButtons {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .paginationButton {
+      width: 50%;
+    }
+
+    .pageInfo {
+      margin: space.$s4 0;
+    }
   }
 
   @media (min-width: breakpoint.$desktop) {
     .mobileContainer {
       display: none;
     }
+
+    .paginationContainer {
+      padding: space.$s4 0;
+    }
   }
 }
 
@@ -58,7 +82,6 @@
   align-items: center;
   justify-content: space-between;
   padding: space.$s4 space.$s6;
-  border-top: 1px solid color.$gray-200;
 }
 
 .paginationButton {

diff --git a/features/issues/components/issue-list/issue-list.tsx b/features/issues/components/issue-list/issue-list.tsx
@@ -129,27 +129,27 @@ export function IssueList() {
             ))}
           </tbody>
         </table>
-        <div className={styles.paginationContainer}>
-          <div>
-            <button
-              className={styles.paginationButton}
-              onClick={() => navigateToPage(page - 1)}
-              disabled={page === 1}
-            >
-              Previous
-            </button>
-            <button
-              className={styles.paginationButton}
-              onClick={() => navigateToPage(page + 1)}
-              disabled={page === meta?.totalPages}
-            >
-              Next
-            </button>
-          </div>
-          <div className={styles.pageInfo}>
-            Page <span className={styles.pageNumber}>{meta?.currentPage}</span>{" "}
-            of <span className={styles.pageNumber}>{meta?.totalPages}</span>
-          </div>
+      </div>
+      <div className={styles.paginationContainer}>
+        <div className={styles.paginationButtons}>
+          <button
+            className={styles.paginationButton}
+            onClick={() => navigateToPage(page - 1)}
+            disabled={page === 1}
+          >
+            Previous
+          </button>
+          <button
+            className={styles.paginationButton}
+            onClick={() => navigateToPage(page + 1)}
+            disabled={page === meta?.totalPages}
+          >
+            Next
+          </button>
+        </div>
+        <div className={styles.pageInfo}>
+          Page <span className={styles.pageNumber}>{meta?.currentPage}</span> of{" "}
+          <span className={styles.pageNumber}>{meta?.totalPages}</span>
         </div>
       </div>
     </div>