From 7f72c077bae68e77252b34da0c244c884b837e9c Mon Sep 17 00:00:00 2001
From: Dennis Chen <dchen@mathadvance.org>
Date: Mon, 5 Aug 2024 17:09:52 -0700
Subject: [PATCH 1/4] Make dark mode version of ListingGridCard

It may not be a bad idea to

- add a placeholder image/text when none is present for a listing (even
  something as simple as "No Image" to make it clear that this was
  intentional from the part of the listing creator, and not a network
  error)
- remove the `animate-pulse` effect in dark mode; I hesitantly kept it
  in for now but it is plausible that animate-pulse loses its magic in
  dark mode.
---
 frontend/src/components/Image.tsx                    | 4 +---
 frontend/src/components/listings/ListingGridCard.tsx | 9 +++++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Image.tsx b/frontend/src/components/Image.tsx
index f199737d..170db31b 100644
--- a/frontend/src/components/Image.tsx
+++ b/frontend/src/components/Image.tsx
@@ -1,8 +1,6 @@
 const Image = () => {
   return (
-    <div>
-      <div className="animate-pulse bg-gray-200 w-full aspect-square"></div>
-    </div>
+    <div className="animate-pulse bg-gray-200 dark:bg-gray-800 w-full aspect-square" />
   );
 };
 
diff --git a/frontend/src/components/listings/ListingGridCard.tsx b/frontend/src/components/listings/ListingGridCard.tsx
index 7a43d65d..6d504518 100644
--- a/frontend/src/components/listings/ListingGridCard.tsx
+++ b/frontend/src/components/listings/ListingGridCard.tsx
@@ -26,6 +26,7 @@ const ListingGridCard = (props: Props) => {
       className={clsx(
         "transition-transform duration-100 ease-in-out transform cursor-pointer",
         "flex flex-col max-w-sm rounded material-card bg-white justify-between",
+        "dark:bg-gray-900",
         hovering ? "scale-105" : "scale-100",
       )}
       onMouseEnter={() => setHovering(true)}
@@ -43,21 +44,21 @@ const ListingGridCard = (props: Props) => {
       )}
       <div className="px-4 py-4 h-full">
         <CardHeader>
-          <CardTitle className="text-gray-500 text-xl min-h-6">
+          <CardTitle className="text-gray-500 dark:text-gray-300 text-xl min-h-6">
             {listing ? (
               listing.name
             ) : (
-              <div className="animate-pulse bg-gray-200 h-6 w-1/2 mb-2"></div>
+              <div className="animate-pulse bg-gray-200 dark:bg-gray-700 h-6 w-1/2 mb-2"></div>
             )}
           </CardTitle>
         </CardHeader>
-        <CardContent className="text-gray-500 max-h-32 overflow-hidden">
+        <CardContent className="text-gray-500 dark:text-gray-300 max-h-32 overflow-hidden">
           {listing ? (
             listing?.description && (
               <RenderDescription description={listing?.description} />
             )
           ) : (
-            <div className="animate-pulse bg-gray-200 h-6 w-full"></div>
+            <div className="animate-pulse bg-gray-200 dark:bg-gray-700 h-6 w-full"></div>
           )}
         </CardContent>
       </div>

From 47d16d9dd525e04219161fdd6c1ba52db16c0dd6 Mon Sep 17 00:00:00 2001
From: Dennis Chen <dchen@mathadvance.org>
Date: Mon, 5 Aug 2024 17:20:50 -0700
Subject: [PATCH 2/4] Make previous/next buttons on left/right of screen

---
 frontend/src/pages/Browse.tsx | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/frontend/src/pages/Browse.tsx b/frontend/src/pages/Browse.tsx
index 63aae77d..1e90bdf3 100644
--- a/frontend/src/pages/Browse.tsx
+++ b/frontend/src/pages/Browse.tsx
@@ -87,24 +87,22 @@ const Browse = () => {
 
         {hasButton && (
           <div className="flex justify-center mt-4">
-            <div className="inline-flex">
-              {prevButton && (
-                <button
-                  className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l"
-                  onClick={() => navigate(`/browse/${pageNumber - 1}`)}
-                >
-                  Previous
-                </button>
-              )}
-              {nextButton && (
-                <button
-                  className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r"
-                  onClick={() => navigate(`/browse/${pageNumber + 1}`)}
-                >
-                  Next
-                </button>
-              )}
-            </div>
+            {prevButton && (
+              <button
+                className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l mr-auto"
+                onClick={() => navigate(`/browse/${pageNumber - 1}`)}
+              >
+                Previous
+              </button>
+            )}
+            {nextButton && (
+              <button
+                className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r ml-auto"
+                onClick={() => navigate(`/browse/${pageNumber + 1}`)}
+              >
+                Next
+              </button>
+            )}
           </div>
         )}
       </div>

From 9abb4d43c1e26982e6406d5219d073293790a41c Mon Sep 17 00:00:00 2001
From: Dennis Chen <dchen@mathadvance.org>
Date: Mon, 5 Aug 2024 17:21:12 -0700
Subject: [PATCH 3/4] Fix Listings button functionality

- the previous and next buttons took people to /browse/PAGENUMBER rather
  than /browse/?page=PAGENUMBER, where the frontend expects the latter.
  Fixed.
- having fixed that, when we go to a new page, the listings do not
  refresh because the useEffect calling handleSearch has never been
  called; the useEffect hook now updates when pageNumber changes.
---
 frontend/src/pages/Browse.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Browse.tsx b/frontend/src/pages/Browse.tsx
index 1e90bdf3..d90afab6 100644
--- a/frontend/src/pages/Browse.tsx
+++ b/frontend/src/pages/Browse.tsx
@@ -28,7 +28,7 @@ const Browse = () => {
 
   useEffect(() => {
     handleSearch();
-  }, [debouncedSearch]);
+  }, [debouncedSearch, pageNumber]);
 
   const handleSearch = async () => {
     setListingIds(null);
@@ -90,7 +90,7 @@ const Browse = () => {
             {prevButton && (
               <button
                 className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l mr-auto"
-                onClick={() => navigate(`/browse/${pageNumber - 1}`)}
+                onClick={() => navigate(`/browse/?page=${pageNumber - 1}`)}
               >
                 Previous
               </button>
@@ -98,7 +98,7 @@ const Browse = () => {
             {nextButton && (
               <button
                 className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r ml-auto"
-                onClick={() => navigate(`/browse/${pageNumber + 1}`)}
+                onClick={() => navigate(`/browse/?page=${pageNumber + 1}`)}
               >
                 Next
               </button>

From c8627a8ffc347686b5e95108d249ae1af730f244 Mon Sep 17 00:00:00 2001
From: Dennis Chen <dchen@mathadvance.org>
Date: Mon, 5 Aug 2024 17:31:03 -0700
Subject: [PATCH 4/4] Add dark variants for Previous/Next buttons

---
 frontend/src/pages/Browse.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Browse.tsx b/frontend/src/pages/Browse.tsx
index d90afab6..c0f12dd6 100644
--- a/frontend/src/pages/Browse.tsx
+++ b/frontend/src/pages/Browse.tsx
@@ -89,7 +89,7 @@ const Browse = () => {
           <div className="flex justify-center mt-4">
             {prevButton && (
               <button
-                className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l mr-auto"
+                className="bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-300 font-bold py-2 px-4 rounded-l mr-auto"
                 onClick={() => navigate(`/browse/?page=${pageNumber - 1}`)}
               >
                 Previous
@@ -97,7 +97,7 @@ const Browse = () => {
             )}
             {nextButton && (
               <button
-                className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r ml-auto"
+                className="bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-300 font-bold py-2 px-4 rounded-r ml-auto"
                 onClick={() => navigate(`/browse/?page=${pageNumber + 1}`)}
               >
                 Next