Add Dark mode support to listings and also fix functionality to next/…

…previous buttons (#258)

* 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.

* Make previous/next buttons on left/right of screen

* 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.

* Add dark variants for Previous/Next buttons

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" />
   );
 };
 

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)}
@@ -45,21 +46,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>

frontend/src/pages/Browse.tsx

@@ -28,7 +28,7 @@ const Browse = () => {
 
   useEffect(() => {
     handleSearch();
-  }, [debouncedSearch]);
+  }, [debouncedSearch, pageNumber]);
 
   const handleSearch = async () => {
     setListingIds(null);
@@ -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 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
+              </button>
+            )}
+            {nextButton && (
+              <button
+                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
+              </button>
+            )}
           </div>
         )}
       </div>