Meenu/Pr 1911 meenu hotfix live price card (binary-com#6813)

* auto-pull-translation

* auto-pull-translation

* auto-pull-translation

* auto-pull-translation

* fix: left crop issue fixed

* fix: hotfix

---------

Co-authored-by: meenu-deriv <[email protected]>

Author: meenakshi-deriv

package-lock.json

@@ -7,7 +7,7 @@
         "@artsy/fresnel": "^6.2.1",
         "@builder.io/partytown": "^0.8.1",
         "@deriv-com/blocks": "^0.79.0",
-        "@deriv-com/components": "^0.47.0",
+        "@deriv-com/components": "^0.48.0",
         "@deriv-com/hooks": "^0.10.0",
         "@deriv-com/providers": "^0.11.0",
         "@deriv/analytics": "^1.4.4",

package.json

@@ -1,5 +1,5 @@
 {
     "stars": 4.5,
     "trustScore": 4.6,
-    "numberOfReviews": "30,000"
+    "numberOfReviews": "43,385"
 }

src/data/trustpilot.json

@@ -124,11 +124,11 @@ const LiveMarketCard = <T extends MarketName>({
             <CardSlider
                 variant="LiveMarketCard"
                 swiperData={swiperOption}
-                slideClasses="max-w-[296px] mr-800"
-                className="w-screen !mr-[calc((-100vw+100%)/2)] lg:w-full lg:!mr-auto"
+                slideClasses="max-w-[296px] !mr-gap-none !ml-gap-none"
+                className="w-screen lg:w-full [&>*:nth-child(1)]:!gap-gap-lg"
                 cards={livePriceData.slice(0, 4)}
             />
-            <div className="flex items-center flex-col">{children}</div>
+            <div className="flex items-center flex-col ">{children}</div>
         </>
     )
 }

src/features/pages/home/live-pricing-migration/cards/index.tsx

@@ -5,11 +5,15 @@ export const percentToDecimal = (percentStr) => {
 interface SwiperOption {
     spaceBetween: number
     slidesPerView: number | 'auto'
+    reverseDirection: true
+    freeMode: true
 }
 
 export const swiperOption: SwiperOption = {
     spaceBetween: 16,
     slidesPerView: 'auto',
+    reverseDirection: true,
+    freeMode: true,
 }
 
 export const initialLiveMarketData = {

src/features/pages/home/live-pricing-migration/utils/index.ts

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Features } from '@deriv-com/blocks'
+import { swiperOption } from '../live-pricing-migration/utils'
 import { cards } from './data'
 import { Localize } from 'components/localization'
 
@@ -8,8 +9,9 @@ const TwentyYearsStrong = () => {
         <Features.ContentSlider
             title={<Localize translate_text="_t_We're 24+ years strong_t_" />}
             cardSliderProps={{
-                slideClasses: 'max-w-[296px] !h-auto mr-800',
-                className: 'w-screen !mr-[calc((-100vw+100%)/2)] lg:w-full lg:!mr-auto',
+                swiperData: swiperOption,
+                slideClasses: 'max-w-[296px] !h-auto !mr-gap-none !ml-gap-none',
+                className: 'w-screen lg:w-full [&>*:nth-child(1)]:!gap-gap-lg ',
                 variant: 'ContentBottom',
                 cards: cards,
             }}