fix ui bugs (#232)

* fix ui bugs

* more fixes

* fix background issue too

* final tweak

* neurotic spacing

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">

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;

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;

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;

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

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,14 +109,15 @@ 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 />}
             onClick={() => {
               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,40 +135,66 @@ 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 />}
             onClick={() => {
               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>

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