fix ui bugs

kscalelabs · Aug 2, 2024 · 259f363 · 259f363
1 parent 3797c76
commit 259f363
Show file tree

Hide file tree

Showing 10 changed files with 200 additions and 116 deletions.
diff --git a/frontend/src/components/listing/ListingBody.tsx 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="p-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
@@ -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
@@ -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="ghost"
+      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">
+      <div className="grid grid-cols-1 md:grid-cols-[1fr_auto] items-center">
+        <h1 className="text-2xl font-bold mb-2">{title}</h1>
+        <CloseButton />
+      </div>
+    </div>
+  );
+};
+
+export default ListingHeader;
diff --git a/frontend/src/components/listing/ListingTitle.tsx b/frontend/src/components/listing/ListingTitle.tsx
diff --git 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
@@ -1,7 +1,9 @@
 import clsx from "clsx";
+import { useAuthentication } from "hooks/auth";
 import {
   FaBookOpen,
   FaDoorClosed,
+  FaDoorOpen,
   FaHome,
   FaKey,
   FaLock,
@@ -17,15 +19,25 @@ interface SidebarItemProps {
   title: string;
   icon?: JSX.Element;
   onClick?: () => void;
+  size?: "sm" | "md" | "lg";
 }
 
-const SidebarItem = ({ icon, title, onClick }: SidebarItemProps) => {
+const SidebarItem = ({ icon, title, onClick, size }: 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">
+      <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">
           {icon}
-          <span className={icon && "ms-5"}>{title}</span>
+          {/* <span className={icon && "ms-5"}>{title}</span> */}
+          <span
+            className={clsx(
+              icon && "ms-5",
+              size === "sm" && "text-sm",
+              size === "lg" && "text-lg",
+            )}
+          >
+            {title}
+          </span>
         </span>
       </button>
     </li>
@@ -47,6 +59,7 @@ interface Props {
 
 const Sidebar = ({ show, onClose }: Props) => {
   const navigate = useNavigate();
+  const { isAuthenticated } = useAuthentication();
 
   return (
     <div
@@ -72,14 +85,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 +102,7 @@ const Sidebar = ({ show, onClose }: Props) => {
               navigate("/browse");
               onClose();
             }}
+            size="md"
           />
           <SidebarItem
             title="Create"
@@ -96,40 +111,65 @@ 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 w-full">
+        <ul className="space-y-1 font-medium mt-4">
           <SidebarItem
             title="About"
             icon={<FaQuestion />}
             onClick={() => {
               navigate("/about");
               onClose();
             }}
+            size="sm"
           />
           <SidebarItem
             title="Privacy Policy"
@@ -138,6 +178,7 @@ const Sidebar = ({ show, onClose }: Props) => {
               navigate("/privacy");
               onClose();
             }}
+            size="sm"
           />
           <SidebarItem
             title="Terms of Service"
@@ -146,6 +187,7 @@ const Sidebar = ({ show, onClose }: Props) => {
               navigate("/tos");
               onClose();
             }}
+            size="sm"
           />
         </ul>
       </div>

diff --git 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
@@ -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"