chore: update positioning and styling inside card

apps/web/src/components/AdPanel/Content.tsx → apps/web/src/components/AdPanel/BodyText.tsx

@@ -1,9 +1,9 @@
 import { Text, TextProps } from '@pancakeswap/uikit'
 import { PropsWithChildren } from 'react'
 
-interface ContentProps extends TextProps, PropsWithChildren {}
+interface BodyTextProps extends TextProps, PropsWithChildren {}
 
-export const Content = ({ children, ...props }: ContentProps) => {
+export const BodyText = ({ children, ...props }: BodyTextProps) => {
   return (
     <Text fontSize="14px" mb="16px" bold {...props}>
       {children}

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

@@ -14,8 +14,10 @@ const BaseCard = styled(Box)`
 const Content = styled(Flex)`
   position: relative;
   width: 148px;
+  height: 110px;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
 
   z-index: 2;
 `
@@ -31,15 +33,15 @@ const GraphicsContainer = styled(Box)`
   z-index: 1;
 `
 
-const SliderContainer = styled(Box)`
-  position: absolute;
-  bottom: 16px;
-  left: 16px;
+// const SliderContainer = styled(Box)`
+//   position: absolute;
+//   bottom: 16px;
+//   left: 16px;
 
-  width: 148px;
-  height: 4px; /* temporary */
-  /* border: 1px solid gray; */
-`
+//   width: 148px;
+//   height: 4px; /* temporary */
+//   /* border: 1px solid gray; */
+// `
 
 const CloseButtonContainer = styled(Box)`
   position: absolute;
@@ -73,7 +75,6 @@ export const AdCard = ({ children, imageUrl, alt }: AdCardProps) => {
   return (
     <BaseCard>
       <Content>{children}</Content>
-      <SliderContainer />
       <GraphicsContainer>
         <CloseButtonContainer>
           <StyledIconButton aria-label="Close the Ad banner">

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

@@ -14,20 +14,24 @@ export const StyledSwiper = styled(Swiper)`
   position: absolute;
   right: 30px;
   bottom: 30px;
+  width: 328px;
   overflow: visible;
   opacity: 0;
-  animation: ${appearAnimation} 0.3s ease-in-out 0.7s forwards;
-  width: 328px;
   margin: 0;
+  animation: ${appearAnimation} 0.3s ease-in-out 0.7s forwards;
+
   .swiper-pagination {
     position: absolute;
-    left: 16px;
+    left: 18px;
+    bottom: 16px;
+    width: 148px;
+
     display: flex;
     justify-content: center;
-    width: 148px;
-    bottom: 16px;
+
     gap: 4px;
   }
+
   .swiper-pagination-bullet {
     position: relative;
     background-color: ${({ theme }) => theme.colors.inputSecondary};
@@ -37,15 +41,18 @@ export const StyledSwiper = styled(Swiper)`
     height: 4px;
     overflow: hidden;
     opacity: 1;
+
     &.swiper-pagination-bullet-active {
       &::before {
         content: '';
         border-radius: 4px;
         position: absolute;
         top: 0;
         left: 0;
+
         width: 100%;
         height: 100%;
+
         background-color: ${({ theme }) => theme.colors.secondary};
         animation: ${progress} 5s linear forwards;
         transform-origin: left center;

apps/web/src/components/AdPanel/Variations/ContentAd.tsx

@@ -1,11 +1,11 @@
+import { BodyText } from '../BodyText'
 import { AdButton } from '../Button'
 import { AdCard } from '../Card'
-import { Content } from '../Content'
 
 export const ContentAd = () => {
   return (
     <AdCard imageUrl="/images/adpanel-test/bannerImg2.png">
-      <Content>Web3 Notifications Now Live!!</Content>
+      <BodyText fontSize="15px">Web3 Notifications Now Live!!</BodyText>
 
       <AdButton isExternal>Learn More</AdButton>
     </AdCard>

apps/web/src/components/AdPanel/Variations/TitleContentAd.tsx

@@ -1,13 +1,13 @@
+import { BodyText } from '../BodyText'
 import { AdButton } from '../Button'
 import { AdCard } from '../Card'
-import { Content } from '../Content'
 import { Title } from '../Title'
 
 export const TitleContentAd = () => {
   return (
     <AdCard imageUrl="/images/adpanel-test/bannerImg1.png">
       <Title>Need Help?</Title>
-      <Content>Quick start now on How to Swap!</Content>
+      <BodyText>Quick start now on How to Swap!</BodyText>
 
       <AdButton isExternal>Quick start</AdButton>
     </AdCard>

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

@@ -10,4 +10,20 @@ export const AdList = [
     id: 'content-ad',
     component: <ContentAd />,
   },
+  {
+    id: 'title-content-ad',
+    component: <TitleContentAd />,
+  },
+  {
+    id: 'content-ad',
+    component: <ContentAd />,
+  },
+  {
+    id: 'title-content-ad',
+    component: <TitleContentAd />,
+  },
+  {
+    id: 'content-ad',
+    component: <ContentAd />,
+  },
 ]

apps/web/src/components/AdPanel/index.ts

@@ -1,13 +1,13 @@
+import { BodyText } from './BodyText'
 import { AdButton as Button } from './Button'
 import { AdCard as Card } from './Card'
 import { DesktopCard, MobileCard } from './CardLayouts'
-import { Content } from './Content'
 
 // TODO: Later move to widgets-internal with conventional exporting
 export const AdPanel = {
   DesktopCard,
   MobileCard,
   Card,
-  Content,
+  BodyText,
   Button,
 }