fix: fix some QA issues

- fix navbar height
- remove input shadow
- change donateCard options style
- add 2px borders to cards
- remove search from nav on sections other than products
- implement useMediaQuery

src/utils/hooks/index.ts

@@ -7,3 +7,5 @@ export * from "./useAutoResizableTextArea";
 export * from "./useCopyToClipboard";
 export * from "./useVote";
 export * from './useWindowSize'
+export * from './useMediaQuery'
+export * from './useCurrentSection'

src/utils/hooks/useCurrentSection.ts

@@ -0,0 +1,18 @@
+import { useLocation } from "react-router-dom"
+
+
+
+
+export const useCurrentSection = () => {
+    const location = useLocation();
+
+    if (location.pathname.startsWith('/blog'))
+        return 'blog';
+    if (location.pathname.startsWith('/hackathons'))
+        return 'hackathons';
+    if (location.pathname.startsWith('/products'))
+        return 'products';
+    if (location.pathname.startsWith('/donate'))
+        return 'donate';
+    return 'other'
+}

src/utils/hooks/useMediaQuery.ts

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react'
+
+
+export function useMediaQuery(query: string): boolean {
+    const getMatches = (query: string): boolean => {
+        // Prevents SSR issues
+        if (typeof window !== 'undefined') {
+            return window.matchMedia(query).matches
+        }
+        return false
+    }
+
+    const [matches, setMatches] = useState<boolean>(getMatches(query))
+
+    function handleChange() {
+        setMatches(getMatches(query))
+    }
+
+    useEffect(() => {
+        const matchMedia = window.matchMedia(query)
+
+        // Triggered at the first client-side load and if query changes
+        handleChange()
+
+        // Listen matchMedia
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange)
+        } else {
+            matchMedia.addEventListener('change', handleChange)
+        }
+
+        return () => {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange)
+            } else {
+                matchMedia.removeEventListener('change', handleChange)
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [query])
+
+    return matches
+}