fix: updated captiontext for numbers

deriv-com · Apr 15, 2024 · 6b8b3f8 · 6b8b3f8
1 parent f3c2b93
commit 6b8b3f8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/lib/components/Pagination/base/index.tsx b/lib/components/Pagination/base/index.tsx
@@ -5,6 +5,7 @@ import {
 import { DOTS } from "../../../hooks/usePaginationRange.tsx";
 import { PaginationProps } from "../types";
 import "./pagination-base.scss";
+import { CaptionText } from "../../Typography/caption";
 
 interface PaginationButtonProps extends Pick<PaginationProps, "variant"> {
     pageNumber: number | string;
@@ -58,7 +59,12 @@ const PaginationButton = ({
             onClick={(e) => handleOnClick(e.currentTarget.textContent)}
             className="variant__number"
         >
-            {pageNumber}
+            <CaptionText
+                className="number-text"
+                aria-current={currentPage === pageNumber}
+            >
+                {pageNumber}
+            </CaptionText>
         </button>
     );
 };

diff --git a/lib/components/Pagination/base/pagination-base.scss b/lib/components/Pagination/base/pagination-base.scss
@@ -26,10 +26,7 @@
                 background-color: var(--core-color-solid-slate-1400);
             }
         }
-        color: var(--semantic-color-typography-default);
-        &[aria-current=true] {
-            color: var(--core-color-solid-slate-50);
-        }
+
     }
     &__bullet {
 
@@ -45,4 +42,11 @@
 }
 .hidden_pages {
     display: flex;
+}
+.number-text{
+    &[aria-current=true]{
+        font-weight: bold;
+        color: var(--core-color-solid-slate-50);
+    }
+    color: var(--semantic-color-typography-default);
 }
diff --git a/lib/components/Typography/caption/index.tsx b/lib/components/Typography/caption/index.tsx
@@ -13,7 +13,7 @@ export const CaptionText = ({
     as = "p",
     italic = false,
     underlined = false,
-    bold = true,
+    bold = false,
     ...rest
 }: TypographyProps) => {
     const decoration = getTextDecoration(italic, underlined);