Merge pull request #221 from deriv-com/Jia/logo-carousel-fix

deriv-com · Dec 1, 2023 · cfc24ad · cfc24ad
2 parents 64cb17d + a9edd05
commit cfc24ad
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 39 deletions.
diff --git a/libs/blocks/src/lib/fast-payment/base/index.tsx b/libs/blocks/src/lib/fast-payment/base/index.tsx
@@ -14,41 +14,29 @@ const Base: React.FC<FastPaymentProps> = ({
 }) => {
   return (
     <FluidContainer className="bg-background-primary-container py-general-4xl">
-      <div className="flex flex-col items-center">
-        <div className="flex w-full flex-col gap-gap-3xl">
-          <div className="flex flex-col gap-gap-2xl">
-            <div className="flex flex-col items-center justify-center gap-general-lg text-center max-sm:gap-general-md">
-              <Heading.H2>{title}</Heading.H2>
-              {description && <Text size="xl">{description}</Text>}
-            </div>
+      <div className="flex flex-col items-center text-center">
+        <Heading.H2>{title}</Heading.H2>
+        {description && <Text className="pt-general-lg">{description}</Text>}
 
-            {link && (
-              <div className="flex justify-center">
-                <CustomLink
-                  size="lg"
-                  href={link.href}
-                  className="w-fit"
-                  hasIcon
-                >
-                  {link.content}
-                </CustomLink>
-              </div>
-            )}
+        {link && (
+          <div className="flex justify-center pt-general-xl">
+            <CustomLink href={link.href} className="w-fit" hasIcon>
+              {link.content}
+            </CustomLink>
           </div>
-          <div className="flex flex-col items-center justify-center gap-general-lg">
-            <div className="flex w-full justify-center">
-              <CardsContainer
-                cards={cards}
-                variant="ContentBottom"
-                cols={cols}
-                dense={dense}
-              />
-            </div>
-            {disclaimer && (
-              <p className="text-100 text-typography-subtle">{disclaimer}</p>
-            )}
-          </div>
-        </div>
+        )}
+        <CardsContainer
+          cards={cards}
+          variant="ContentBottom"
+          cols={cols}
+          dense={dense}
+          className="pt-general-2xl"
+        />
+        {disclaimer && (
+          <Text size="sm" className="pt-general-2xl text-typography-subtle">
+            {disclaimer}
+          </Text>
+        )}
       </div>
     </FluidContainer>
   );

diff --git a/libs/blocks/src/lib/footer/footer-cta-block/footer-cta.stories.tsx b/libs/blocks/src/lib/footer/footer-cta-block/footer-cta.stories.tsx
@@ -3,7 +3,7 @@ import FooterCTABlock from '.';
 import { Heading, Button } from '@deriv/quill-design';
 
 const meta = {
-  title: 'Blocks/Footer/FooterCTA',
+  title: 'Blocks/CTA',
   component: FooterCTABlock,
   tags: ['autodocs'],
   argTypes: {

diff --git a/libs/components/src/lib/cards-container/index.tsx b/libs/components/src/lib/cards-container/index.tsx
@@ -1,4 +1,4 @@
-import { qtMerge } from '@deriv/quill-design';
+import { qtJoin, qtMerge } from '@deriv/quill-design';
 import Card, { CardVariants } from '../card';
 
 export type CardVariantType = keyof CardVariants;
@@ -34,7 +34,14 @@ export const CardsContainer = <T extends CardVariantType>({
   const CardComponent = Card[variant];
 
   return (
-    <div className="flex w-full overflow-hidden" id="cards-container">
+    <div
+      className={qtJoin(
+        'flex overflow-hidden',
+        cols === 'infinite' ? 'w-screen' : 'w-full',
+        className,
+      )}
+      id="cards-container"
+    >
       {cols === 'infinite' ? (
         <>
           {Array.from(Array(3).keys()).map((index) => (
@@ -44,7 +51,6 @@ export const CardsContainer = <T extends CardVariantType>({
                 'gap-gap-lg', // TODO: Add sm/md/lg/xl variants if needed
                 cardColsVariant[cols],
                 'pr-general-md',
-                className,
               )}
               id="infinite-carousel"
             >
@@ -62,7 +68,6 @@ export const CardsContainer = <T extends CardVariantType>({
             'gap-gap-lg', // TODO: we might need to add sm/md/lg/xl variants
             dense ? 'w-full lg:max-w-max' : 'w-full',
             cardColsVariant[cols],
-            className,
           )}
         >
           {cards.map((card) => (

diff --git a/libs/templates/src/lib/home/index.tsx b/libs/templates/src/lib/home/index.tsx
@@ -12,6 +12,11 @@ import FastPaymentSection from './sections/fast-payments';
 import ReviewSection from './sections/review';
 import AccountSection from './sections/account-section';
 import CTASection from './sections/cta';
+import { FastPayment } from '@deriv-com/blocks';
+import {
+  PaymentMethodBitcoinBrandIcon,
+  PaymentMethodSkrillBrandIcon,
+} from '@deriv/quill-icons';
 
 export function HomeTemplate() {
   return (

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,7 +14,7 @@ module.exports = {
         },
       },
       animation: {
-        slide: '10s slide infinite linear',
+        slide: '20s slide infinite linear',
       },
     },
   },