Prevent header animation in firefox

Fix mini search bar icon color

src/components/search/MiniSearchBar.tsx

@@ -3,6 +3,8 @@ import { useRouter } from 'next/router';
 
 import { IconButton, SearchIcon } from '@hyperlane-xyz/widgets';
 
+import { Color } from '../../styles/Color';
+
 interface FormValues {
   search: string;
 }
@@ -31,7 +33,7 @@ export function MiniSearchBar() {
           />
           <div className="h-8 w-8 flex items-center justify-center rounded-full bg-pink-500">
             <IconButton type="submit" title="Search">
-              <SearchIcon width={14} height={14} />
+              <SearchIcon width={14} height={14} color={Color.white} />
             </IconButton>
           </div>
         </div>

src/utils/browser.ts

@@ -0,0 +1,3 @@
+export function isFirefox() {
+  return typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('firefox');
+}

src/utils/useScrollListener.ts

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 
+import { isFirefox } from './browser';
+
 export function useScrollThresholdListener(threshold: number, debounce = 500) {
   const [isAboveThreshold, setIsAbove] = useState(false);
   const [isDebouncing, setIsDebouncing] = useState(false);
@@ -8,6 +10,9 @@ export function useScrollThresholdListener(threshold: number, debounce = 500) {
     let timeoutId: NodeJS.Timeout | null;
 
     const listener = () => {
+      // TODO find a way to make this animation smooth in Firefox
+      if (isFirefox()) return;
+
       const handleScroll = () => {
         if (window.scrollY > threshold && !isAboveThreshold) {
           setIsAbove(true);