Mitra/DPROD-3109/Arabic slider scroll issue (#6963)

* fix: 🐛 fix arabic scroll issue in slider

* fix: 🐛 fix change of the icon name coming from quill icons

* fix: 🐛 fix rtl issue

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

@@ -34,7 +34,7 @@ import { percentToDecimal, swiperOption } from '../utils'
 import { handleRedirectToTradersHub } from 'components/custom/utils'
 import useAuthCheck from 'components/hooks/use-auth-check'
 import useHandleSignup from 'components/hooks/use-handle-signup'
-import { Localize } from 'components/localization'
+import { Localize, is_rtl } from 'components/localization'
 
 const IconsMapper = {
     // Forex Icons
@@ -127,6 +127,7 @@ const LiveMarketCard = <T extends MarketName>({
                 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)}
+                dir={is_rtl() ? 'rtl' : 'ltr'}
             />
             <div className="flex items-center flex-col ">{children}</div>
         </>

src/features/pages/home/years/index.tsx

@@ -2,7 +2,7 @@ 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'
+import { Localize, is_rtl } from 'components/localization'
 
 const TwentyYearsStrong = () => {
     return (
@@ -14,6 +14,7 @@ const TwentyYearsStrong = () => {
                 className: 'w-screen lg:w-full [&>*:nth-child(1)]:!gap-gap-lg ',
                 variant: 'ContentBottom',
                 cards: cards,
+                dir: is_rtl() ? 'rtl' : 'ltr',
             }}
         />
     )