From 6653ad1874ec94886a93175cd98282590a664e96 Mon Sep 17 00:00:00 2001
From: Ben Bolte <ben@bolte.cc>
Date: Thu, 1 Aug 2024 22:37:01 -0700
Subject: [PATCH] fix ui bugs (#232)

* fix ui bugs

* more fixes

* fix background issue too

* final tweak

* neurotic spacing
---
 frontend/src/App.tsx                          |   2 +-
 .../src/components/listing/ListingBody.tsx    |  30 ++++
 .../src/components/listing/ListingFooter.tsx  |  20 +++
 .../src/components/listing/ListingHeader.tsx  |  37 +++++
 .../src/components/listing/ListingTitle.tsx   |  16 ---
 frontend/src/components/nav/Navbar.tsx        |  15 +-
 frontend/src/components/nav/Sidebar.tsx       | 131 +++++++++++++-----
 frontend/src/pages/APIKeys.tsx                |  26 ++--
 frontend/src/pages/Home.tsx                   |   2 +-
 frontend/src/pages/ListingDetails.tsx         |  42 ++----
 frontend/src/pages/Profile.tsx                |  26 ++--
 11 files changed, 229 insertions(+), 118 deletions(-)
 create mode 100644 frontend/src/components/listing/ListingBody.tsx
 create mode 100644 frontend/src/components/listing/ListingFooter.tsx
 create mode 100644 frontend/src/components/listing/ListingHeader.tsx
 delete mode 100644 frontend/src/components/listing/ListingTitle.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e3002b31..e8864d17 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -23,7 +23,7 @@ const App = () => {
         <AuthenticationProvider>
           <AlertQueueProvider>
             <AlertQueue>
-              <div className="dark:bg-gray-900 dark:text-white h-screen">
+              <div className="dark:bg-gray-900 dark:text-white min-h-screen">
                 <Navbar />
 
                 <div className="container mx-auto pt-24 px-8">
diff --git a/frontend/src/components/listing/ListingBody.tsx b/frontend/src/components/listing/ListingBody.tsx
new file mode 100644
index 00000000..47e66cb2
--- /dev/null
+++ b/frontend/src/components/listing/ListingBody.tsx
@@ -0,0 +1,30 @@
+import { paths } from "gen/api";
+import ListingArtifacts from "./ListingArtifacts";
+import ListingChildren from "./ListingChildren";
+import ListingDescription from "./ListingDescription";
+
+type ListingResponse =
+  paths["/listings/{id}"]["get"]["responses"][200]["content"]["application/json"];
+
+interface ListingBodyProps {
+  listing: ListingResponse;
+}
+
+const ListingBody = (props: ListingBodyProps) => {
+  const { listing } = props;
+  return (
+    <div className="px-4">
+      <ListingDescription
+        description={listing.description}
+        edit={listing.owner_is_user}
+      />
+      <ListingChildren
+        child_ids={listing.child_ids}
+        edit={listing.owner_is_user}
+      />
+      <ListingArtifacts listing_id={listing.id} edit={listing.owner_is_user} />
+    </div>
+  );
+};
+
+export default ListingBody;
diff --git a/frontend/src/components/listing/ListingFooter.tsx b/frontend/src/components/listing/ListingFooter.tsx
new file mode 100644
index 00000000..e262e26c
--- /dev/null
+++ b/frontend/src/components/listing/ListingFooter.tsx
@@ -0,0 +1,20 @@
+import ListingDeleteButton from "./ListingDeleteButton";
+
+interface Props {
+  listing_id: string;
+  edit: boolean;
+}
+
+const ListingFooter = ({ listing_id, edit }: Props) => {
+  if (!edit) {
+    return <></>;
+  }
+
+  return (
+    <div className="flex justify-end border-t p-4">
+      <ListingDeleteButton listing_id={listing_id} />
+    </div>
+  );
+};
+
+export default ListingFooter;
diff --git a/frontend/src/components/listing/ListingHeader.tsx b/frontend/src/components/listing/ListingHeader.tsx
new file mode 100644
index 00000000..3524800b
--- /dev/null
+++ b/frontend/src/components/listing/ListingHeader.tsx
@@ -0,0 +1,37 @@
+import { Button } from "components/ui/Button/Button";
+import { FaTimes } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+
+interface Props {
+  title: string;
+  edit: boolean;
+}
+
+const CloseButton = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Button
+      onClick={() => navigate(-1)}
+      variant="outline"
+      className="hover:bg-gray-200 dark:hover:bg-gray-700 bg-opacity-50"
+    >
+      <span className="md:hidden block mr-2">Close</span>
+      <FaTimes />
+    </Button>
+  );
+};
+
+const ListingHeader = (props: Props) => {
+  const { title } = props;
+  return (
+    <div className="relative border-b p-4 mb-4">
+      <div className="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4">
+        <h1 className="text-2xl font-bold">{title}</h1>
+        <CloseButton />
+      </div>
+    </div>
+  );
+};
+
+export default ListingHeader;
diff --git a/frontend/src/components/listing/ListingTitle.tsx b/frontend/src/components/listing/ListingTitle.tsx
deleted file mode 100644
index feebe3e5..00000000
--- a/frontend/src/components/listing/ListingTitle.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-interface Props {
-  title: string;
-  // TODO: If can edit, allow the user to update the title.
-  edit: boolean;
-}
-
-const ListingTitle = (props: Props) => {
-  const { title } = props;
-  return (
-    <div className="mb-3">
-      <h1 className="text-3xl font-semibold">{title}</h1>
-    </div>
-  );
-};
-
-export default ListingTitle;
diff --git a/frontend/src/components/nav/Navbar.tsx b/frontend/src/components/nav/Navbar.tsx
index 7cd32f1e..793d08a9 100644
--- a/frontend/src/components/nav/Navbar.tsx
+++ b/frontend/src/components/nav/Navbar.tsx
@@ -1,4 +1,3 @@
-import { useAuthentication } from "hooks/auth";
 import { useDarkMode } from "hooks/dark_mode";
 import { useState } from "react";
 import { FaMoon, FaSun, FaUserCircle } from "react-icons/fa";
@@ -10,7 +9,6 @@ const SIZE = 20;
 const Navbar = () => {
   const [showSidebar, setShowSidebar] = useState<boolean>(false);
   const { darkMode, setDarkMode } = useDarkMode();
-  const { isAuthenticated } = useAuthentication();
   const navigate = useNavigate();
 
   return (
@@ -29,22 +27,13 @@ const Navbar = () => {
             <button onClick={() => setDarkMode(!darkMode)}>
               {darkMode ? <FaMoon size={SIZE} /> : <FaSun size={SIZE} />}
             </button>
-            <button
-              onClick={
-                isAuthenticated
-                  ? () => setShowSidebar(true)
-                  : () => navigate("/login")
-              }
-              className="pl-4"
-            >
+            <button onClick={() => setShowSidebar(true)} className="pl-4">
               <FaUserCircle size={SIZE} />
             </button>
           </div>
         </div>
       </nav>
-      {isAuthenticated && (
-        <Sidebar show={showSidebar} onClose={() => setShowSidebar(false)} />
-      )}
+      <Sidebar show={showSidebar} onClose={() => setShowSidebar(false)} />
     </>
   );
 };
diff --git a/frontend/src/components/nav/Sidebar.tsx b/frontend/src/components/nav/Sidebar.tsx
index e8182664..0777a3f4 100644
--- a/frontend/src/components/nav/Sidebar.tsx
+++ b/frontend/src/components/nav/Sidebar.tsx
@@ -1,7 +1,9 @@
 import clsx from "clsx";
+import { useAuthentication } from "hooks/auth";
 import {
   FaBookOpen,
   FaDoorClosed,
+  FaDoorOpen,
   FaHome,
   FaKey,
   FaLock,
@@ -17,15 +19,49 @@ interface SidebarItemProps {
   title: string;
   icon?: JSX.Element;
   onClick?: () => void;
+  size?: "sm" | "md" | "lg";
+  align?: "left" | "right";
 }
 
-const SidebarItem = ({ icon, title, onClick }: SidebarItemProps) => {
+const SidebarItem = ({
+  icon,
+  title,
+  onClick,
+  size,
+  align,
+}: SidebarItemProps) => {
   return (
     <li>
-      <button onClick={onClick} className="w-full">
-        <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>
+      <button onClick={onClick} className="w-full focus:outline-none">
+        <span className="flex items-center py-2 px-4 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+          {align === "right" ? (
+            <>
+              <span className="flex-grow" />
+              <span
+                className={clsx(
+                  icon && "mr-4",
+                  size === "sm" && "text-sm",
+                  size === "lg" && "text-lg",
+                )}
+              >
+                {title}
+              </span>
+              {icon}
+            </>
+          ) : (
+            <>
+              {icon}
+              <span
+                className={clsx(
+                  icon && "ml-4",
+                  size === "sm" && "text-sm",
+                  size === "lg" && "text-lg",
+                )}
+              >
+                {title}
+              </span>
+            </>
+          )}
         </span>
       </button>
     </li>
@@ -47,6 +83,7 @@ interface Props {
 
 const Sidebar = ({ show, onClose }: Props) => {
   const navigate = useNavigate();
+  const { isAuthenticated } = useAuthentication();
 
   return (
     <div
@@ -72,7 +109,7 @@ const Sidebar = ({ show, onClose }: Props) => {
         <span className="sr-only">Close menu</span>
       </button>
       <div className="py-4 overflow-y-auto">
-        <ul className="space-y-2 font-medium">
+        <ul className="space-y-1">
           <SidebarItem
             title="Home"
             icon={<FaHome />}
@@ -80,6 +117,7 @@ const Sidebar = ({ show, onClose }: Props) => {
               navigate("/");
               onClose();
             }}
+            size="md"
           />
           <SidebarItem
             title="Browse"
@@ -88,6 +126,7 @@ const Sidebar = ({ show, onClose }: Props) => {
               navigate("/browse");
               onClose();
             }}
+            size="md"
           />
           <SidebarItem
             title="Create"
@@ -96,33 +135,57 @@ const Sidebar = ({ show, onClose }: Props) => {
               navigate("/create");
               onClose();
             }}
+            size="md"
           />
           <SidebarSeparator />
-          <SidebarItem
-            title="Profile"
-            icon={<FaUserCircle />}
-            onClick={() => {
-              navigate("/profile");
-              onClose();
-            }}
-          />
-          <SidebarItem
-            title="API Keys"
-            icon={<FaKey />}
-            onClick={() => {
-              navigate("/keys");
-              onClose();
-            }}
-          />
-          <SidebarItem
-            title="Logout"
-            icon={<FaDoorClosed />}
-            onClick={() => {
-              navigate("/logout");
-              onClose();
-            }}
-          />
-          <SidebarSeparator />
+          {isAuthenticated && (
+            <SidebarItem
+              title="Profile"
+              icon={<FaUserCircle />}
+              onClick={() => {
+                navigate("/profile");
+                onClose();
+              }}
+              size="md"
+            />
+          )}
+          {isAuthenticated && (
+            <SidebarItem
+              title="API Keys"
+              icon={<FaKey />}
+              onClick={() => {
+                navigate("/keys");
+                onClose();
+              }}
+              size="md"
+            />
+          )}
+          {isAuthenticated ? (
+            <SidebarItem
+              title="Logout"
+              icon={<FaDoorClosed />}
+              onClick={() => {
+                navigate("/logout");
+                onClose();
+              }}
+              size="md"
+            />
+          ) : (
+            <SidebarItem
+              title="Login"
+              icon={<FaDoorOpen />}
+              onClick={() => {
+                navigate("/login");
+                onClose();
+              }}
+              size="md"
+            />
+          )}
+        </ul>
+      </div>
+      {/* Aligned to bottom */}
+      <div className="absolute bottom-4 right-4">
+        <ul className="space-y-1 font-medium mt-4">
           <SidebarItem
             title="About"
             icon={<FaQuestion />}
@@ -130,6 +193,8 @@ const Sidebar = ({ show, onClose }: Props) => {
               navigate("/about");
               onClose();
             }}
+            size="sm"
+            align="right"
           />
           <SidebarItem
             title="Privacy Policy"
@@ -138,6 +203,8 @@ const Sidebar = ({ show, onClose }: Props) => {
               navigate("/privacy");
               onClose();
             }}
+            size="sm"
+            align="right"
           />
           <SidebarItem
             title="Terms of Service"
@@ -146,6 +213,8 @@ const Sidebar = ({ show, onClose }: Props) => {
               navigate("/tos");
               onClose();
             }}
+            size="sm"
+            align="right"
           />
         </ul>
       </div>
diff --git a/frontend/src/pages/APIKeys.tsx b/frontend/src/pages/APIKeys.tsx
index 7602ee62..6816229e 100644
--- a/frontend/src/pages/APIKeys.tsx
+++ b/frontend/src/pages/APIKeys.tsx
@@ -1,16 +1,20 @@
+import RequireAuthentication from "components/auth/RequireAuthentication";
+
 const APIKeys = () => {
   return (
-    <section>
-      <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
-        <h1 className="mb-8 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl">
-          API Key
-        </h1>
-        <p className="mb-8 text-lg font-normal lg:text-xl sm:px-16 lg:px-48">
-          This page is under construction. You will be able to generate API keys
-          here.
-        </p>
-      </div>
-    </section>
+    <RequireAuthentication>
+      <section>
+        <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
+          <h1 className="mb-8 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl">
+            API Key
+          </h1>
+          <p className="mb-8 text-lg font-normal lg:text-xl sm:px-16 lg:px-48">
+            This page is under construction. You will be able to generate API
+            keys here.
+          </p>
+        </div>
+      </section>
+    </RequireAuthentication>
   );
 };
 
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 1016969b..aaad8f41 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -15,7 +15,7 @@ const Home = () => {
           Buy and sell robots and robot parts, share hardware and software, and
           connect with other robot enthusiasts, all in one place.
         </p>
-        <div className="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0 space-x-2">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-md mx-auto">
           <Button
             onClick={() => navigate(`/browse`)}
             variant="primary"
diff --git a/frontend/src/pages/ListingDetails.tsx b/frontend/src/pages/ListingDetails.tsx
index 8010a80b..fe97a149 100644
--- a/frontend/src/pages/ListingDetails.tsx
+++ b/frontend/src/pages/ListingDetails.tsx
@@ -1,16 +1,12 @@
-import ListingArtifacts from "components/listing/ListingArtifacts";
-import ListingChildren from "components/listing/ListingChildren";
-import ListingDeleteButton from "components/listing/ListingDeleteButton";
-import ListingDescription from "components/listing/ListingDescription";
-import ListingTitle from "components/listing/ListingTitle";
-import { Button } from "components/ui/Button/Button";
+import ListingBody from "components/listing/ListingBody";
+import ListingFooter from "components/listing/ListingFooter";
+import ListingHeader from "components/listing/ListingHeader";
 import Spinner from "components/ui/Spinner";
 import { paths } from "gen/api";
 import { useAlertQueue } from "hooks/alerts";
 import { useAuthentication } from "hooks/auth";
 import { useEffect, useState } from "react";
-import { FaTimes } from "react-icons/fa";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
 type ListingResponse =
   paths["/listings/{id}"]["get"]["responses"][200]["content"]["application/json"];
@@ -22,33 +18,11 @@ interface RenderListingProps {
 const RenderListing = (props: RenderListingProps) => {
   const { listing } = props;
 
-  const navigate = useNavigate();
-
   return (
-    <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} />
-        )}
-        <Button
-          onClick={() => navigate(-1)}
-          variant={"outline"}
-          className="hover:bg-gray-200 dark:hover:bg-gray-700 bg-opacity-50"
-        >
-          <span className="mr-2">Close</span>
-          <FaTimes />
-        </Button>
-      </span>
-      <ListingTitle title={listing.name} edit={listing.owner_is_user} />
-      <ListingDescription
-        description={listing.description}
-        edit={listing.owner_is_user}
-      />
-      <ListingChildren
-        child_ids={listing.child_ids}
-        edit={listing.owner_is_user}
-      />
-      <ListingArtifacts listing_id={listing.id} edit={listing.owner_is_user} />
+    <div className="container mx-auto max-w-4xl shadow-md rounded-lg bg-white dark:bg-gray-800 dark:text-white border bg-card text-card-foreground shadow relative">
+      <ListingHeader title={listing.name} edit={listing.owner_is_user} />
+      <ListingBody listing={listing} />
+      <ListingFooter listing_id={listing.id} edit={listing.owner_is_user} />
     </div>
   );
 };
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index e7b15efb..8871af0b 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,16 +1,20 @@
+import RequireAuthentication from "components/auth/RequireAuthentication";
+
 const Profile = () => {
   return (
-    <section>
-      <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
-        <h1 className="mb-8 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl">
-          Profile
-        </h1>
-        <p className="mb-8 text-lg font-normal lg:text-xl sm:px-16 lg:px-48">
-          This page is under construction. You will be able to view and edit
-          your profile here.
-        </p>
-      </div>
-    </section>
+    <RequireAuthentication>
+      <section>
+        <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
+          <h1 className="mb-8 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl">
+            Profile
+          </h1>
+          <p className="mb-8 text-lg font-normal lg:text-xl sm:px-16 lg:px-48">
+            This page is under construction. You will be able to view and edit
+            your profile here.
+          </p>
+        </div>
+      </section>
+    </RequireAuthentication>
   );
 };