update text styles

Author: tienkane

apps/kyberswap-interface/src/pages/Earns/PoolExplorer/index.tsx

@@ -5,6 +5,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useMedia } from 'react-use'
 import { Flex, Text } from 'rebass'
 import { usePoolsExplorerQuery } from 'services/zapEarn'
+import styled from 'styled-components'
 
 import { ReactComponent as IconUserEarnPosition } from 'assets/svg/earn/ic_user_earn_position.svg'
 import { NotificationType } from 'components/Announcement/type'
@@ -42,6 +43,14 @@ export enum SortBy {
 const POLLING_INTERVAL = 5 * 60_000
 const DEBOUNCE_DELAY = 300
 
+export const BaseWarningWrapper = styled.div`
+  border-radius: 40px;
+  padding: 6px 12px;
+  background-color: ${({ theme }) => theme.background};
+  width: fit-content;
+  margin: 0 auto;
+`
+
 const PoolExplorer = () => {
   const [search, setSearch] = useState('')
   const deboundedSearch = useDebounce(search, DEBOUNCE_DELAY)
@@ -186,10 +195,12 @@ const PoolExplorer = () => {
 
       <Filter filters={filters} updateFilters={updateFilters} search={search} setSearch={setSearch} />
       {filters.chainId === ChainId.BASE && (
-        <Text color={theme.primary} fontSize={12} fontStyle={'italic'}>
-          Kyber Earn data on Base is being updated. This may take a moment and will be available again at 1:00 AM UTC on
-          20 Nov 2025 — thank you for your patience.
-        </Text>
+        <BaseWarningWrapper>
+          <Text color={theme.subText} fontSize={12} fontWeight={500} fontStyle={'italic'}>
+            Kyber Earn data on Base is being updated. This may take a moment and will be available again at 1:00 AM UTC
+            on 20 Nov 2025 — thank you for your patience.
+          </Text>
+        </BaseWarningWrapper>
       )}
 
       {upToLarge && (

apps/kyberswap-interface/src/pages/Earns/UserPositions/index.tsx

@@ -14,6 +14,7 @@ import Pagination from 'components/Pagination'
 import { APP_PATHS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import useTheme from 'hooks/useTheme'
+import { BaseWarningWrapper } from 'pages/Earns/PoolExplorer'
 import { ContentWrapper, Disclaimer, NavigateButton } from 'pages/Earns/PoolExplorer/styles'
 import { IconArrowLeft } from 'pages/Earns/PositionDetail/styles'
 import Filter from 'pages/Earns/UserPositions/Filter'
@@ -382,10 +383,12 @@ const UserPositions = () => {
         />
 
         {filters.chainIds?.split(',').includes(ChainId.BASE.toString()) && (
-          <Text color={theme.primary} fontSize={12} fontStyle={'italic'}>
-            Kyber Earn data on Base is being updated. This may take a moment and will be available again at 1:00 AM UTC
-            on 20 Nov 2025 — thank you for your patience.
-          </Text>
+          <BaseWarningWrapper>
+            <Text color={theme.subText} fontSize={12} fontWeight={500} fontStyle={'italic'}>
+              Kyber Earn data on Base is being updated. This may take a moment and will be available again at 1:00 AM
+              UTC on 20 Nov 2025 — thank you for your patience.
+            </Text>
+          </BaseWarningWrapper>
         )}
 
         <PositionTableWrapper>