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

src/components/Layout/Header/GlobalSearch/GlobalSearchButton.tsx

@@ -11,9 +11,6 @@ interface GlobalSearchButtonProps {
   isIconButton?: boolean
 }
 
-const widthProp = { base: 'auto', lg: 'full' }
-const displayProp1 = { base: 'flex', lg: 'none' }
-const displayProp2 = { base: 'none', lg: 'flex' }
 const sxProp1 = { svg: { width: '18px', height: '18px' } }
 
 const searchIcon = <SearchIcon />
@@ -50,14 +47,7 @@ export const GlobalSearchButton = memo(({ isIconButton = false }: GlobalSearchBu
           data-testid='global-search-button'
         />
       ) : (
-        <Box width={widthProp}>
-          <IconButton
-            display={displayProp1}
-            icon={searchIcon}
-            aria-label={translate('common.search')}
-            onClick={onOpen}
-            data-testid='global-search-button'
-          />
+        <Box width='full'>
           <Button
             width='full'
             leftIcon={searchIcon}
@@ -66,7 +56,7 @@ export const GlobalSearchButton = memo(({ isIconButton = false }: GlobalSearchBu
             fontSize='sm'
             alignItems='center'
             color='text.subtle'
-            display={displayProp2}
+            display='flex'
             sx={sxProp1}
             bg='background.input.base'
             border='1px solid'

src/components/Layout/Header/Header.tsx

@@ -1,6 +1,6 @@
 import { Box, Divider, Flex, HStack, Link, Text, useMediaQuery } from '@chakra-ui/react'
 import { useScroll } from 'framer-motion'
-import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useState } from 'react'
 import {
   TbArrowRight,
   TbBuildingBank,
@@ -53,8 +53,9 @@ const navHStackDisplaySx = { base: 'none', md: 'flex' }
 const rightHStackSpacingSx = { base: 2, lg: 4 }
 
 // Search box responsive styles
-const searchBoxMaxWSx = { base: 'auto', lg: '400px' }
-const searchBoxMinWSx = { base: 'auto', xl: '300px' }
+const fullSearchMediaQuery = '@media screen and (min-width: 1540px)'
+const searchBoxSx = { display: 'none', [fullSearchMediaQuery]: { display: 'flex' } }
+const iconButtonSx = { display: 'flex', [fullSearchMediaQuery]: { display: 'none' } }
 
 const baseTradeSubMenuItems = [
   { label: 'navBar.swap', path: '/trade', icon: TbRefresh },
@@ -79,26 +80,33 @@ export const Header = memo(() => {
   const {
     state: { isConnected, walletInfo },
   } = useWallet()
-  const ref = useRef<HTMLDivElement>(null)
   const [y, setY] = useState(0)
-  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])
 
+  const isScrolled = y > 0
+
+  // masks the area behind and around the header so scrolling content can't show through it - kept
+  // permanently opaque (it matches the body background) so it never lags behind fast scrolls
+  const backdropSx = useMemo(
+    () => ({
+      content: '""',
+      position: 'absolute' as const,
+      top: '-1rem',
+      left: '-1rem',
+      right: '-1rem',
+      bottom: 0,
+      bg: 'background.surface.base',
+      borderBottom: '1px solid',
+      borderBottomColor: isScrolled ? 'border.base' : 'transparent',
+      zIndex: -1,
+    }),
+    [isScrolled],
+  )
+
   const isWalletConnectToDappsV2Enabled = useFeatureFlag('WalletConnectToDappsV2')
   const isActionCenterEnabled = useFeatureFlag('ActionCenter')
   const isNewWalletManagerEnabled = useFeatureFlag('NewWalletManager')
@@ -163,16 +171,9 @@ export const Header = memo(() => {
         direction='column'
         position='sticky'
         zIndex='banner'
-        ref={ref}
-        bg={y > height ? 'background.surface.base' : 'transparent'}
-        border='1px solid'
-        borderColor={y > height ? 'border.base' : 'transparent'}
-        borderRadius='2xl'
+        _before={backdropSx}
         marginTop={2}
         mx={2}
-        transitionDuration='200ms'
-        transitionProperty='all'
-        transitionTimingFunction='cubic-bezier(0.4, 0, 0.2, 1)'
         top={2}
         paddingTop={paddingTopProp}
       >
@@ -209,13 +210,13 @@ export const Header = memo(() => {
           </HStack>
 
           {/* Middle section - search box */}
-          <Box maxW={searchBoxMaxWSx} minW={searchBoxMinWSx} mx={4} display={searchBoxDisplay}>
+          <Box width='300px' mx={4} sx={searchBoxSx}>
             <GlobalSearchButton />
           </Box>
 
           {/* Right section - equal width to left */}
           <HStack spacing={rightHStackSpacingSx} flex='1' justifyContent='flex-end' minW={0}>
-            <Box display={iconButtonDisplay}>
+            <Box sx={iconButtonSx}>
               <GlobalSearchButton isIconButton />
             </Box>
             {isLargerThanMd && (isDegradedState || degradedChainIds.length > 0) && (

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 farmingIcon = <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>
+              {farmingIcon}
               {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,16 @@ const flexPropsMdAuto = { base: 1, md: 'auto' }
 const widthBaseFull = { base: 'full' }
 const widthMdAuto = { base: 'full', md: 'auto' }
 const tabListPaddingLeft = { base: 6, md: 0 }
+const governanceIcon = (
+  <Icon
+    as={TbBuildingBank}
+    aria-hidden
+    color='blue.500'
+    boxSize={8}
+    me={2}
+    transform='translateY(-2px)'
+  />
+)
 
 export const FoxGovernance = () => {
   const isConnected = useIsWalletConnected()
@@ -119,9 +130,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>
+              {governanceIcon}
               {translate('foxPage.governance.title')}
             </Heading>
             <Flex alignItems='center'>