fix: zoom out issue

deriv-com · Nov 15, 2023 · 7448797 · 7448797
1 parent f9596b3
commit 7448797
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 11 deletions.
diff --git a/libs/templates/src/lib/home/index.tsx b/libs/templates/src/lib/home/index.tsx
@@ -23,7 +23,7 @@ export function HomeTemplate() {
       <WhyTradeSection />
       <AccountSection />
       <FastPaymentSection />
-      {/* <ReviewSection /> */}
+      <ReviewSection />
       <ProvenExcellenceSection />
       <StaticNumberBlock />
       <CTASection />

diff --git a/libs/templates/src/lib/home/sections/review/index.tsx b/libs/templates/src/lib/home/sections/review/index.tsx
@@ -1,5 +1,4 @@
-import styles from './review.module.css';
-import { FluidContainer, qtMerge } from '@deriv/quill-design';
+import { FluidContainer, Section, qtMerge } from '@deriv/quill-design';
 import { useEffect, useRef } from 'react';
 import Script from 'next/script';
 
@@ -12,9 +11,11 @@ const ReviewSection = () => {
   }, []);
 
   return (
-    <FluidContainer>
-      <div className="my-general-xl flex flex-col items-center gap-general-xl rounded-xl py-general-3xl">
-        <div className={qtMerge('flex', styles['truspilot-zoom'])}>
+    <Section
+      className={qtMerge('py-general-4xl', 'bg-background-primary-container')}
+    >
+      <FluidContainer className="flex flex-col items-center rounded-xl max-sm:w-[90%] sm:py-general-lg">
+        <div className={qtMerge('flex scale-150 max-sm:scale-100')}>
           <Script
             key="trustpilot-widget"
             type="text/javascript"
@@ -42,8 +43,8 @@ const ReviewSection = () => {
             </a>
           </div>
         </div>
-      </div>
-    </FluidContainer>
+      </FluidContainer>
+    </Section>
   );
 };
 

diff --git a/libs/templates/src/lib/home/sections/review/review.module.css b/libs/templates/src/lib/home/sections/review/review.module.css