From 92eba0107c0d3ff5b27f5ab4431b7ee84b1943c5 Mon Sep 17 00:00:00 2001
From: J M Rossy <jm.rossy@gmail.com>
Date: Mon, 7 Oct 2024 16:47:11 -0400
Subject: [PATCH] Prevent header animation in firefox Fix mini search bar icon
 color

---
 src/components/search/MiniSearchBar.tsx | 4 +++-
 src/utils/browser.ts                    | 3 +++
 src/utils/useScrollListener.ts          | 5 +++++
 3 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/browser.ts

diff --git a/src/components/search/MiniSearchBar.tsx b/src/components/search/MiniSearchBar.tsx
index b204204..ce05181 100644
--- a/src/components/search/MiniSearchBar.tsx
+++ b/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>
diff --git a/src/utils/browser.ts b/src/utils/browser.ts
new file mode 100644
index 0000000..c0a393f
--- /dev/null
+++ b/src/utils/browser.ts
@@ -0,0 +1,3 @@
+export function isFirefox() {
+  return typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('firefox');
+}
diff --git a/src/utils/useScrollListener.ts b/src/utils/useScrollListener.ts
index fb8b9bd..a23981a 100644
--- a/src/utils/useScrollListener.ts
+++ b/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);