chore: Change pagination bullet color in adpanel to make it visible (#…

…11052)

Before: 
<img width="389" alt="Screenshot 2024-12-14 at 10 19 36"
src="https://github.com/user-attachments/assets/9c72473d-c121-4e23-acc5-f396d27e20c1"
/>
After: 
<img width="383" alt="Screenshot 2024-12-14 at 10 19 25"
src="https://github.com/user-attachments/assets/5b543ef9-5fd7-4c77-8146-fea7b9bf14d7"
/>

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `AdPanel` component in the application
by updating styles, optimizing functions, and improving the ad
configuration logic.

### Detailed summary
- Updated background color in `CarrouselWithSlider.tsx` based on theme.
- Converted `handleResume` in `CardLayouts.tsx` to a `useCallback`.
- Changed `onAutoplayPause` to directly use `pauseAni`.
- Refactored `useAdConfig` in `config.tsx` to use `useMemo` for ad list
creation and rendering logic.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

apps/web/src/components/AdPanel/CardLayouts.tsx

@@ -54,13 +54,9 @@ const AdSlides = memo(({ forceMobile, isDismissible = true }: AdPlayerProps) =>
     resetAllExpanded()
   }, [route, resetAllExpanded])
 
-  const handlePause = () => {
-    pauseAni()
-  }
-
-  const handleResume = () => {
+  const handleResume = useCallback(() => {
     if (!isAnySlideExpanded) resumeAni()
-  }
+  }, [isAnySlideExpanded, resumeAni])
 
   useEffect(() => {
     if (swiperRef.current) {
@@ -94,7 +90,7 @@ const AdSlides = memo(({ forceMobile, isDismissible = true }: AdPlayerProps) =>
       pagination={{ clickable: true, enabled: !isAnySlideExpanded }}
       $showPagination={!isAnySlideExpanded}
       modules={[Autoplay, Pagination, EffectFade]}
-      onAutoplayPause={handlePause}
+      onAutoplayPause={pauseAni}
       onAutoplayResume={handleResume}
       loop
       observer

apps/web/src/components/AdPanel/CarrouselWithSlider.tsx

@@ -32,7 +32,7 @@ export const StyledSwiper = styled(Swiper)<{ $showPagination?: boolean }>`
   .swiper-pagination-bullet {
     display: ${({ $showPagination = true }) => ($showPagination ? 'block' : 'none')};
     position: relative;
-    background-color: ${({ theme }) => theme.colors.inputSecondary};
+    background-color: ${({ theme }) => (theme.isDark ? '#55496E' : '#D7CAEC')};
     margin: 0 !important;
     flex-grow: 1;
     border-radius: 4px;

apps/web/src/components/AdPanel/config.tsx

@@ -1,4 +1,5 @@
 import { useMatchBreakpoints } from '@pancakeswap/uikit'
+import { useMemo } from 'react'
 import { AdCakeStaking } from './Ads/AdCakeStaking'
 import { AdMevProtection } from './Ads/AdMevProtection'
 import { AdOptionsTrading } from './Ads/AdOptionsTrading'
@@ -20,55 +21,63 @@ enum Priority {
 
 export const useAdConfig = () => {
   const { isDesktop } = useMatchBreakpoints()
+  const shouldRenderOnPage = shouldRenderOnPages(['/buy-crypto', '/', '/prediction'])
   const MAX_ADS = isDesktop ? 6 : 4
 
   const adList: Array<{
     id: string
     component: JSX.Element
     shouldRender?: Array<boolean>
     priority?: number
-  }> = [
-    {
-      id: 'expandable-ad',
-      component: <ExpandableAd />,
-      priority: Priority.FIRST_AD,
-      shouldRender: [shouldRenderOnPages(['/buy-crypto', '/', '/prediction'])],
-    },
-    {
-      id: 'ad-springboard',
-      component: <AdSpringboard />,
-    },
-    {
-      id: 'ad-mev',
-      component: <AdMevProtection />,
-    },
-    {
-      id: 'prediction-telegram-bot',
-      component: <AdTelegramBot />,
-    },
-    {
-      id: 'pcsx',
-      component: <AdPCSX />,
-    },
-    {
-      id: 'cake-staking',
-      component: <AdCakeStaking />,
-    },
-    {
-      id: 'clamm-options-trading',
-      component: <AdOptionsTrading />,
-    },
+  }> = useMemo(
+    () => [
+      {
+        id: 'expandable-ad',
+        component: <ExpandableAd />,
+        priority: Priority.FIRST_AD,
+        shouldRender: [shouldRenderOnPage],
+      },
+      {
+        id: 'ad-springboard',
+        component: <AdSpringboard />,
+      },
+      {
+        id: 'ad-mev',
+        component: <AdMevProtection />,
+      },
+      {
+        id: 'prediction-telegram-bot',
+        component: <AdTelegramBot />,
+      },
+      {
+        id: 'pcsx',
+        component: <AdPCSX />,
+      },
+      {
+        id: 'cake-staking',
+        component: <AdCakeStaking />,
+      },
+      {
+        id: 'clamm-options-trading',
+        component: <AdOptionsTrading />,
+      },
 
-    {
-      id: 'rocker-meme-career',
-      component: <AdRocker />,
-    },
-  ]
+      {
+        id: 'rocker-meme-career',
+        component: <AdRocker />,
+      },
+    ],
+    [shouldRenderOnPage],
+  )
 
-  return adList
-    .filter((ad) => ad.shouldRender === undefined || ad.shouldRender.every(Boolean))
-    .sort((a, b) => (b.priority || Priority.VERY_LOW) - (a.priority || Priority.VERY_LOW))
-    .slice(0, MAX_ADS)
+  return useMemo(
+    () =>
+      adList
+        .filter((ad) => ad.shouldRender === undefined || ad.shouldRender.every(Boolean))
+        .sort((a, b) => (b.priority || Priority.VERY_LOW) - (a.priority || Priority.VERY_LOW))
+        .slice(0, MAX_ADS),
+    [adList, MAX_ADS],
+  )
 }
 
 // Array of strings or regex patterns