fix(fox): improve ecosystem icon consistency and header spacing

src/components/Layout/Header/Header.tsx

@@ -55,6 +55,8 @@ const rightHStackSpacingSx = { base: 2, lg: 4 }
 // Search box responsive styles
 const searchBoxMaxWSx = { base: 'auto', lg: '400px' }
 const searchBoxMinWSx = { base: 'auto', xl: '300px' }
+const searchBoxDisplay = { base: 'none', '3xl': 'flex' }
+const iconButtonDisplay = { base: 'flex', '3xl': 'none' }
 
 const baseTradeSubMenuItems = [
   { label: 'navBar.swap', path: '/trade', icon: TbRefresh },
@@ -84,17 +86,6 @@ export const Header = memo(() => {
   const height = useMemo(() => ref.current?.getBoundingClientRect()?.height ?? 0, [])
   const { scrollY } = useScroll()
 
-  const searchBoxDisplay = {
-    base: 'none',
-    '2xl': 'flex',
-    xl: 'none',
-  }
-
-  const iconButtonDisplay = {
-    base: 'flex',
-    '2xl': 'none',
-  }
-
   useEffect(() => {
     return scrollY.on('change', () => setY(scrollY.get()))
   }, [scrollY])

src/pages/Fox/components/FoxFarming.tsx

@@ -7,6 +7,7 @@ import {
   Divider,
   Flex,
   Heading,
+  Icon,
   SimpleGrid,
   Skeleton,
   Stack,
@@ -20,6 +21,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import dayjs from 'dayjs'
 import qs from 'qs'
 import { useCallback, useEffect, useMemo } from 'react'
+import { TbPlant2 } from 'react-icons/tb'
 import { useTranslate } from 'react-polyglot'
 import { useLocation, useNavigate } from 'react-router-dom'
 
@@ -70,6 +72,7 @@ const columnsProps = {
   base: 1,
   md: 2,
 }
+const FARMING_ICON = <Icon as={TbPlant2} aria-hidden color='blue.500' boxSize={8} me={2} />
 
 export const FoxFarming = () => {
   const { assetAccountId } = useFoxPageContext()
@@ -302,9 +305,7 @@ export const FoxFarming = () => {
         <Flex sx={headerSx}>
           <Box mb={headerTitleMb} maxWidth={headerTitleMaxWidth}>
             <Heading as='h2' fontSize='2xl' display='flex' alignItems='center'>
-              <CText as='span' me={2}>
-                🧑‍🌾
-              </CText>
+              {FARMING_ICON}
               {translate('foxPage.foxFarming.title')}
               <Skeleton isLoaded={Boolean(!isOpportunityLoading && apy)} ml={2}>
                 <Tag colorScheme='green' verticalAlign='middle'>

src/pages/Fox/components/FoxGovernance.tsx

@@ -6,17 +6,18 @@ import {
   Divider,
   Flex,
   Heading,
+  Icon,
   Link,
   Skeleton,
   Tab,
   TabList,
   TabPanel,
   TabPanels,
   Tabs,
-  Text as CText,
 } from '@chakra-ui/react'
 import { foxAssetId } from '@shapeshiftoss/caip'
 import { useCallback, useEffect, useMemo } from 'react'
+import { TbBuildingBank } from 'react-icons/tb'
 import { useTranslate } from 'react-polyglot'
 
 import { FoxGovernanceProposal } from './FoxGovernanceProposal'
@@ -52,6 +53,7 @@ const flexPropsMdAuto = { base: 1, md: 'auto' }
 const widthBaseFull = { base: 'full' }
 const widthMdAuto = { base: 'full', md: 'auto' }
 const tabListPaddingLeft = { base: 6, md: 0 }
+const GOVERNANCE_ICON = <Icon as={TbBuildingBank} aria-hidden color='blue.500' boxSize={8} me={2} />
 
 export const FoxGovernance = () => {
   const isConnected = useIsWalletConnected()
@@ -119,9 +121,7 @@ export const FoxGovernance = () => {
         <Flex sx={headerSx}>
           <Box mb={headerTitleMb} maxWidth={headerTitleMaxWidth}>
             <Heading as='h2' fontSize='2xl' display='flex' alignItems='center'>
-              <CText as='span' me={2}>
-                🏛️
-              </CText>
+              {GOVERNANCE_ICON}
               {translate('foxPage.governance.title')}
             </Heading>
             <Flex alignItems='center'>