rename some frontend components

frontend/src/App.tsx

@@ -5,12 +5,12 @@ import { AuthenticationProvider } from "hooks/auth";
 import { DarkModeProvider } from "hooks/dark_mode";
 import About from "pages/About";
 import APIKeys from "pages/APIKeys";
+import Browse from "pages/Browse";
+import Create from "pages/Create";
 import Home from "pages/Home";
 import ListingDetails from "pages/ListingDetails";
-import Listings from "pages/Listings";
 import Login from "pages/Login";
 import Logout from "pages/Logout";
-import NewListing from "pages/NewListing";
 import NotFound from "pages/NotFound";
 import Profile from "pages/Profile";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
@@ -34,9 +34,9 @@ const App = () => {
                     <Route path="/profile" element={<Profile />} />
                     <Route path="/login" element={<Login />} />
                     <Route path="/logout" element={<Logout />} />
-                    <Route path="/listings/add" element={<NewListing />} />
-                    <Route path="/listings/:page?" element={<Listings />} />
-                    <Route path="/listing/:id" element={<ListingDetails />} />
+                    <Route path="/create" element={<Create />} />
+                    <Route path="/browse/:page?" element={<Browse />} />
+                    <Route path="/item/:id" element={<ListingDetails />} />
                     <Route path="/404" element={<NotFound />} />
                     <Route path="*" element={<NotFoundRedirect />} />
                   </Routes>

frontend/src/components/listings/ListingGridCard.tsx

@@ -31,7 +31,7 @@ const ListingGridCard = (props: Props) => {
             hovering ? "scale-105" : "scale-100",
             "w-64 h-64 object-cover rounded-lg",
           )}
-          onClick={() => navigate(`/listing/${listingId}`)}
+          onClick={() => navigate(`/item/${listingId}`)}
         >
           <img
             className="w-full h-full object-cover rounded-lg"

frontend/src/components/nav/Sidebar.tsx

@@ -1,9 +1,11 @@
 import clsx from "clsx";
 import {
+  FaBookOpen,
   FaDoorClosed,
   FaHome,
   FaKey,
   FaLock,
+  FaPen,
   FaQuestion,
   FaScroll,
   FaTimes,
@@ -21,7 +23,7 @@ const SidebarItem = ({ icon, title, onClick }: SidebarItemProps) => {
   return (
     <li>
       <button onClick={onClick} className="w-full">
-        <span className="flex items-center p-3 px-4 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+        <span className="flex items-center py-1 px-4 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
           {icon}
           <span className={icon && "ms-5"}>{title}</span>
         </span>
@@ -30,6 +32,14 @@ const SidebarItem = ({ icon, title, onClick }: SidebarItemProps) => {
   );
 };
 
+const SidebarSeparator = () => {
+  return (
+    <li className="py-1">
+      <div className="border-t border-gray-200 dark:border-gray-700" />
+    </li>
+  );
+};
+
 interface Props {
   show: boolean;
   onClose: () => void;
@@ -71,6 +81,23 @@ const Sidebar = ({ show, onClose }: Props) => {
               onClose();
             }}
           />
+          <SidebarItem
+            title="Browse"
+            icon={<FaBookOpen />}
+            onClick={() => {
+              navigate("/browse");
+              onClose();
+            }}
+          />
+          <SidebarItem
+            title="Create"
+            icon={<FaPen />}
+            onClick={() => {
+              navigate("/create");
+              onClose();
+            }}
+          />
+          <SidebarSeparator />
           <SidebarItem
             title="Profile"
             icon={<FaUserCircle />}
@@ -95,9 +122,7 @@ const Sidebar = ({ show, onClose }: Props) => {
               onClose();
             }}
           />
-          <li>
-            <div className="border-t border-gray-200 dark:border-gray-700" />
-          </li>
+          <SidebarSeparator />
           <SidebarItem
             title="About"
             icon={<FaQuestion />}

frontend/src/pages/Listings.tsx → frontend/src/pages/Browse.tsx

@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 import { FaTimes } from "react-icons/fa";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
-const Listings = () => {
+const Browse = () => {
   const auth = useAuthentication();
   const [listingIds, setListingIds] = useState<string[] | null>(null);
   const [moreListings, setMoreListings] = useState<boolean>(false);
@@ -91,15 +91,15 @@ const Listings = () => {
             {prevButton && (
               <button
                 className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l"
-                onClick={() => navigate(`/listings/${pageNumber - 1}`)}
+                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(`/listings/${pageNumber + 1}`)}
+                onClick={() => navigate(`/browse/${pageNumber + 1}`)}
               >
                 Next
               </button>
@@ -112,4 +112,4 @@ const Listings = () => {
   );
 };
 
-export default Listings;
+export default Browse;

frontend/src/pages/NewListing.tsx → frontend/src/pages/Create.tsx

@@ -13,7 +13,7 @@ import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { NewListingSchema, NewListingType } from "types";
 
-const NewListing = () => {
+const Create = () => {
   const auth = useAuthentication();
   const { addAlert, addErrorAlert } = useAlertQueue();
   const navigate = useNavigate();
@@ -46,14 +46,14 @@ const NewListing = () => {
       addErrorAlert(error);
     } else {
       addAlert("New listing was created successfully", "success");
-      navigate(`/listing/${responseData.listing_id}`);
+      navigate(`/item/${responseData.listing_id}`);
     }
   };
 
   return (
     <RequireAuthentication>
-      <div className="flex justify-center">
-        <Card className="w-[500px] shadow-md h-full mb-40">
+      <div className="container mx-auto max-w-lg shadow-md rounded-lg bg-white dark:bg-gray-800 dark:text-white">
+        <Card className="shadow-md">
           <CardHeader>
             <Header title="Create" />
           </CardHeader>
@@ -108,4 +108,4 @@ const NewListing = () => {
   );
 };
 
-export default NewListing;
+export default Create;

frontend/src/pages/Home.tsx

@@ -17,15 +17,15 @@ const Home = () => {
         </p>
         <div className="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0 space-x-2">
           <Button
-            onClick={() => navigate(`/listings`)}
+            onClick={() => navigate(`/browse`)}
             variant="primary"
             size="lg"
           >
             Browse
             <FaArrowRight className="ml-2" />
           </Button>
           <Button
-            onClick={() => navigate(`/listings/add`)}
+            onClick={() => navigate(`/create`)}
             variant="secondary"
             size="lg"
           >

frontend/src/pages/ListingDetails.tsx

@@ -25,7 +25,7 @@ const RenderListing = (props: RenderListingProps) => {
   const navigate = useNavigate();
 
   return (
-    <div className="container mx-auto pt-4 max-w-4xl shadow-md px-4 rounded-lg bg-white dark:bg-gray-800 dark:text-white border dark:border-gray-700 relative">
+    <div className="container mx-auto p-4 max-w-4xl shadow-md px-4 rounded-lg bg-white dark:bg-gray-800 dark:text-white border bg-card text-card-foreground shadow relative">
       <span className="absolute top-4 right-4 flex space-x-2">
         {listing.owner_is_user && (
           <ListingDeleteButton listing_id={listing.id} />
@@ -86,7 +86,7 @@ const ListingDetails = () => {
   return listing && id ? (
     <RenderListing listing={listing} />
   ) : (
-    <div className="flex justify-center items-center h-screen">
+    <div className="flex justify-center items-center pt-8">
       <Spinner />
     </div>
   );