feat(LOY-53): CurrentRewards - replace show more functionality with pagination

2024-12-02 21:11:53 +01:00
parent 9e42cf0f37
commit 28d4d752e9
11 changed files with 124 additions and 167 deletions
--- a/components/MyPages/Pagination/pagination.module.css
+++ b/components/MyPages/Pagination/pagination.module.css
@@ -0,0 +1,40 @@
+.pagination {
+  display: flex;
+  justify-content: left;
+  padding: var(--Spacing-x2);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Rounded);
+  margin: auto;
+  gap: var(--Spacing-x5);
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.paginationButton {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  height: 32px;
+  width: 32px;
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.paginationButton[disabled] {
+  cursor: not-allowed;
+}
+.chevronLeft {
+  transform: rotate(180deg);
+  height: 100%;
+}
+
+.paginationButtonActive {
+  color: var(--Base-Text-Inverted);
+  background-color: var(--Base-Text-Accent);
+  border-radius: var(--Corner-radius-Rounded);
+}