Merge pull request #278 from deriv-com/Jia/update-block-title-max-width

deriv-com · Dec 20, 2023 · cb59bc5 · cb59bc5
2 parents da4ca9e + 17d5163
commit cb59bc5
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git a/libs/blocks/src/lib/fast-payment/base/index.tsx b/libs/blocks/src/lib/fast-payment/base/index.tsx
@@ -30,7 +30,7 @@ const Base: React.FC<FastPaymentProps> = ({
         className="flex flex-col items-center"
         data-testid="fast-payment-container"
       >
-        <Heading.H2>{title}</Heading.H2>
+        <Heading.H2 className="max-w-[816px] text-center">{title}</Heading.H2>
         {description && (
           <Text
             data-testid="fast-payment-description"
@@ -44,6 +44,7 @@ const Base: React.FC<FastPaymentProps> = ({
             href={link.href}
             className="w-fit pt-general-xl"
             hasIcon
+            size="md"
             data-testid="fast-payment-link"
           >
             {link.content}

diff --git a/libs/blocks/src/lib/platform/card/index.tsx b/libs/blocks/src/lib/platform/card/index.tsx
@@ -38,7 +38,11 @@ const PlatformBlockCard = ({
       )}
     >
       <FluidContainer className="flex flex-col gap-gap-3xl">
-        {header && <Heading.H2 className="text-center">{header}</Heading.H2>}
+        {header && (
+          <Heading.H2 className="mx-auto max-w-[816px] text-center">
+            {header}
+          </Heading.H2>
+        )}
         <CardsContainer variant={variant} cols={cols} cards={cards} />
         {description && <Text className="text-center">{description}</Text>}
       </FluidContainer>

diff --git a/libs/blocks/src/lib/platform/tab/index.tsx b/libs/blocks/src/lib/platform/tab/index.tsx
@@ -32,7 +32,11 @@ const PlatformBlockTab = ({
     >
       <FluidContainer>
         <div className="flex flex-col gap-gap-3xl">
-          {header && <Heading.H2 className="text-center">{header}</Heading.H2>}
+          {header && (
+            <Heading.H2 className="mx-auto max-w-[816px] text-center">
+              {header}
+            </Heading.H2>
+          )}
           <Tab.Base tabs={tabs} className="flex flex-col gap-gap-2xl">
             {children}
           </Tab.Base>

diff --git a/libs/components/src/lib/live-market/container/index.tsx b/libs/components/src/lib/live-market/container/index.tsx
@@ -39,7 +39,11 @@ export const Container = ({
       )}
     >
       <FluidContainer className="flex flex-col gap-gap-3xl">
-        {header && <Heading.H2 className="text-center">{header}</Heading.H2>}
+        {header && (
+          <Heading.H2 className="mx-auto max-w-[816px] text-center">
+            {header}
+          </Heading.H2>
+        )}
         {children}
         {description && <Text className="text-center">{description}</Text>}
         {link && (