From 91fbca623b9744056a4b96985df9ddeff5133330 Mon Sep 17 00:00:00 2001
From: Andrew Wang <awwang3@uci.edu>
Date: Mon, 1 Jan 2024 01:21:12 -0800
Subject: [PATCH] fix: prevent pointer blocking behavior of chevron on
 dropdowns

---
 components/DropdownComponent.tsx       |  2 +-
 components/search/FilterComponents.tsx |  2 +-
 components/search/ScrollToTop.tsx      | 16 ++--------------
 3 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/components/DropdownComponent.tsx b/components/DropdownComponent.tsx
index 9107590..05af086 100644
--- a/components/DropdownComponent.tsx
+++ b/components/DropdownComponent.tsx
@@ -67,7 +67,7 @@ export const DropdownComponentSearch = (props: DropdownComponentProps) => {
                         </option>
                     ))}
                 </select>
-                <div className="absolute right-2 top-[14px] h-8 w-8 text-2xl opacity-25 md:right-5 md:top-[18px] md:text-3xl">
+                <div className="pointer-events-none absolute right-2 top-[14px] h-8 w-8 text-2xl opacity-25 md:right-5 md:top-[18px] md:text-3xl">
                     <FaChevronDown />
                 </div>
             </div>
diff --git a/components/search/FilterComponents.tsx b/components/search/FilterComponents.tsx
index 562a927..062297e 100644
--- a/components/search/FilterComponents.tsx
+++ b/components/search/FilterComponents.tsx
@@ -262,7 +262,7 @@ export const SortDropdown = (props: SortDropdownProps) => {
                         <option key={item}>{item}</option>
                     ))}
                 </select>
-                <div className="absolute right-1 top-[14px] h-8 w-8 text-gray">
+                <div className="pointer-events-none absolute right-1 top-[14px] h-8 w-8 text-gray">
                     <FaChevronDown />
                 </div>
             </div>
diff --git a/components/search/ScrollToTop.tsx b/components/search/ScrollToTop.tsx
index 67041fe..4f86f04 100644
--- a/components/search/ScrollToTop.tsx
+++ b/components/search/ScrollToTop.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import { FaChevronUp } from "react-icons/fa";
 
 const ScrollToTop = () => {
     const [isVisible, setIsVisible] = useState(false);
@@ -33,20 +34,7 @@ const ScrollToTop = () => {
             onClick={scrollToTop}
         >
             <div className="flex items-center justify-center">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-6 w-6"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="white"
-                >
-                    <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M5 15l7-7 7 7"
-                    />
-                </svg>
+                <FaChevronUp style={{color: "white"}}/>
                 <span
                     className={
                         "hidden px-2 group-hover:inline-flex"