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/features/Hackathons/Components/HackathonCard/HackathonCard.tsx

@@ -14,7 +14,7 @@ interface Props {
 
 export default function HackathonCard({ hackathon }: Props) {
     return (
-        <div className="rounded-16 bg-white overflow-hidden">
+        <div className="rounded-16 bg-white overflow-hidden border-2">
             <img className="w-full h-[120px] object-cover" src={hackathon.cover_image} alt="" />
             <div className="p-16">
                 <div className="flex flex-col gap-8">

src/features/Hackathons/Components/SortByFilter/SortByFilter.tsx

@@ -22,7 +22,7 @@ interface Props {
 
 export default function SortByFilter({ filterChanged }: Props) {
 
-    const [selected, setSelected] = useState<string | null>(null);
+    const [selected, setSelected] = useState<string | null>('Upcoming');
 
     const filterClicked = (_newValue: string | null) => {
         const newValue = selected !== _newValue ? _newValue : null;
@@ -37,7 +37,7 @@ export default function SortByFilter({ filterChanged }: Props) {
         <>
             {
                 isMdScreen ?
-                    <div className='bg-white border rounded-12 p-16'>
+                    <div className='bg-white border-2 rounded-12 p-16'>
                         < p className="text-body2 font-bolder text-black mb-16" > Sort By</p >
                         <ul>
                             {filters.map((f, idx) => <li

src/features/Hackathons/Components/TopicsFilter/TopicsFilter.tsx

@@ -29,7 +29,7 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
     return (
         <>
             {isMdScreen ?
-                <div className='bg-white border rounded-12 p-16'>
+                <div className='bg-white border-2 rounded-12 p-16'>
                     <p className="text-body2 font-bolder text-black mb-16">Topics</p>
                     <ul className=' flex flex-col gap-16'>
                         {topicsQuery.loading ?

src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx

@@ -26,7 +26,7 @@ export default function HackathonsPage() {
 
     return (
         <div
-            className={`page-container pt-16 w-full ${styles.grid}`}
+            className={`page-container  pt-16 w-full ${styles.grid}`}
         >
             <aside className='no-scrollbar'>
                 <div className="sticky flex flex-col gap-24 md:overflow-y-scroll"

src/features/Hackathons/pages/HackathonsPage/styles.module.scss

@@ -1,11 +1,11 @@
 .grid {
   display: grid;
   grid-template-columns: 100%;
-  gap: 32px;
+  gap: 24px;
 
   @media screen and (min-width: 768px) {
     grid-template-columns: 1fr 2fr 0;
-    gap: 32px;
+    gap: 24px;
   }
 
   @media screen and (min-width: 1024px) {