Merge pull request #376 from deriv-com/meenu-cta-block-fixes

deriv-com · Feb 20, 2024 · f8aa682 · f8aa682
2 parents 7c6fbe3 + 40ab460
commit f8aa682
Showing 1 changed file with 14 additions and 25 deletions.
diff --git a/libs/blocks/src/lib/cta/index.tsx b/libs/blocks/src/lib/cta/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Heading, Section, Text } from '@deriv/quill-design';
-import clsx from 'clsx';
+import { Heading, Section, Text, qtMerge } from '@deriv/quill-design';
 
 export type CTABlockProps = {
   content?: React.ReactNode;
@@ -20,27 +19,27 @@ export const CTABlock = ({
   return (
     <Section className=" py-general-4xl">
       <div
-        className={clsx(
-          ' relative isolate flex  h-full min-h-[496px] flex-col justify-end gap-gap-lg  md:justify-center  lg:mx-auto  lg:max-w-[1232px] ',
-          variant === 'content-left' ? 'lg:flex-row-reverse' : 'lg:flex-row  ',
+        className={qtMerge(
+          variant === 'content-left'
+            ? 'flex-col lg:flex-row'
+            : 'flex-col lg:flex-row-reverse ',
+          ' relative isolate flex  h-full min-h-[496px] justify-end gap-gap-lg  md:justify-center  lg:mx-auto  lg:max-w-[1232px] ',
         )}
       >
+        {content && (
+          <div className="absolute -z-10 h-full w-full overflow-hidden object-cover object-top lg:relative ">
+            {content}
+          </div>
+        )}
         <div
-          className={clsx(
-            'flex w-full flex-col justify-center gap-gap-3xl px-general-lg pb-general-2xl lg:px-general-none lg:pb-general-none',
+          className={qtMerge(
             variant === 'content-left'
               ? 'lg:ps-general-2xl '
               : 'lg:pe-general-2xl ',
+            'flex w-full flex-col justify-center gap-gap-3xl px-general-lg pb-general-2xl lg:px-general-none lg:pb-general-none',
           )}
         >
-          <div
-            className={clsx(
-              'flex flex-col gap-gap-lg',
-              'w-full',
-              'sm:w-[50%]',
-              'lg:w-full',
-            )}
-          >
+          <div className="flex w-full flex-col gap-gap-lg sm:w-[50%] lg:w-full">
             {title && (
               <Heading.H2 className="text-solid-slate-50 lg:text-typography-prominent">
                 {title}
@@ -50,16 +49,6 @@ export const CTABlock = ({
           </div>
           {children && children}
         </div>
-        {content && (
-          <div
-            className={clsx([
-              'absolute -z-10  h-full overflow-hidden object-cover object-top ',
-              'h-full w-full lg:relative',
-            ])}
-          >
-            {content}
-          </div>
-        )}
       </div>
     </Section>
   );