From 19e5672ccb3f8c2080795900ec4e3ebb13a90d1e Mon Sep 17 00:00:00 2001
From: Winston Hsiao <96440583+Winston-Hsiao@users.noreply.github.com>
Date: Wed, 7 Aug 2024 11:45:47 -0400
Subject: [PATCH] Vite Migration Fixes (#269)

* fixed navbar always rendering

* fix sidebar styling and improved mobile styles

* added tailwind to vite config, styling fixed
---
 frontend/src/components/footer/Footer.tsx     |   8 +-
 .../src/components/listing/FileUpload.tsx     |   2 +-
 frontend/src/components/nav/Sidebar.tsx       | 265 +++++++++---------
 frontend/src/pages/Home.tsx                   |  12 +-
 frontend/vite.config.ts                       |   7 +
 node_modules/.package-lock.json               |   6 +
 package-lock.json                             |   6 +
 7 files changed, 163 insertions(+), 143 deletions(-)
 create mode 100644 node_modules/.package-lock.json
 create mode 100644 package-lock.json

diff --git a/frontend/src/components/footer/Footer.tsx b/frontend/src/components/footer/Footer.tsx
index c6bce2d7..0a7722db 100644
--- a/frontend/src/components/footer/Footer.tsx
+++ b/frontend/src/components/footer/Footer.tsx
@@ -27,7 +27,7 @@ const Footer = () => {
     <footer className="bg-gray-50 dark:bg-gray-800 text-sm py-20">
       <div className="flex flex-col gap-4 mx-12 sm:mx-36">
         <div className="flex flex-row justify-between items-center">
-          <span className="text-2xl">K-Scale Labs</span>
+          <span className="text-xl sm:text-2xl">K-Scale Labs</span>
           <div className="flex flex-row gap-4 rounded-full">
             <SocialLink
               href="https://www.linkedin.com/company/kscale"
@@ -57,7 +57,7 @@ const Footer = () => {
         </div>
         <div className="flex flex-row gap-32 sm:gap-56 md:gap-64">
           <div className="flex flex-col items-start gap-2 sm:gap-3">
-            <h2 className="text-lg font-semibold mb-1">Company</h2>
+            <h2 className="text-base sm:text-lg font-semibold mb-1">Company</h2>
             <a
               href="https://kscale.dev/about/"
               className="hover:text-gray-500"
@@ -74,7 +74,9 @@ const Footer = () => {
             </a>
           </div>
           <div className="flex flex-col items-start gap-2 sm:gap-3">
-            <h2 className="text-lg font-semibold mb-1">Buy and Sell</h2>
+            <h2 className="text-base sm:text-lg font-semibold mb-1">
+              Buy and Sell
+            </h2>
             <Link to={"/browse"} className="hover:text-gray-500">
               Robots
             </Link>
diff --git a/frontend/src/components/listing/FileUpload.tsx b/frontend/src/components/listing/FileUpload.tsx
index 8c1cb1a5..d70d976f 100644
--- a/frontend/src/components/listing/FileUpload.tsx
+++ b/frontend/src/components/listing/FileUpload.tsx
@@ -16,12 +16,12 @@ import {
   useDropzone,
 } from "react-dropzone";
 
+import { useAlertQueue } from "hooks/useAlertQueue";
 import { Trash2 as RemoveIcon } from "lucide-react";
 import { cn } from "utils";
 
 import { buttonVariants } from "components/ui/Button/Button";
 import { Input } from "components/ui/Input/Input";
-import { useAlertQueue } from "hooks/useAlertQueue";
 
 type DirectionOptions = "rtl" | "ltr" | undefined;
 
diff --git a/frontend/src/components/nav/Sidebar.tsx b/frontend/src/components/nav/Sidebar.tsx
index e5e00cc9..da61fd82 100644
--- a/frontend/src/components/nav/Sidebar.tsx
+++ b/frontend/src/components/nav/Sidebar.tsx
@@ -87,138 +87,141 @@ const Sidebar = ({ show, onClose }: Props) => {
   const { isAuthenticated } = useAuthentication();
 
   return (
-    <div
-      className={clsx(
-        !show && "translate-x-full",
-        "fixed top-0 right-0 z-40 w-64 h-screen p-4 overflow-y-auto transition-transform bg-white dark:bg-gray-800",
-      )}
-      tabIndex={-1}
-    >
-      <h5
-        id="drawer-navigation-label"
-        className="text-base font-semibold text-gray-500 uppercase dark:text-gray-300"
-      >
-        SETTINGS
-      </h5>
+    <div>
+      {show ? (
+        <div
+          className="fixed top-0 right-0 z-40 w-full sm:w-64 h-screen p-4 overflow-y-auto transition-transform bg-white dark:bg-gray-800"
+          tabIndex={-1}
+        >
+          <div className="flex justify-between items-center">
+            <h5
+              id="drawer-navigation-label"
+              className="text-base font-semibold text-gray-500 uppercase dark:text-gray-300"
+            >
+              SETTINGS
+            </h5>
 
-      <button
-        type="button"
-        onClick={onClose}
-        className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 end-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
-      >
-        <FaTimes />
-        <span className="sr-only">Close menu</span>
-      </button>
-      <div className="py-4 overflow-y-auto">
-        <ul className="space-y-1">
-          <SidebarItem
-            title="Home"
-            icon={<FaHome />}
-            onClick={() => {
-              navigate("/");
-              onClose();
-            }}
-            size="md"
-          />
-          <SidebarItem
-            title="Browse"
-            icon={<FaBookOpen />}
-            onClick={() => {
-              navigate("/browse");
-              onClose();
-            }}
-            size="md"
-          />
-          <SidebarItem
-            title="Create"
-            icon={<FaPen />}
-            onClick={() => {
-              navigate("/create");
-              onClose();
-            }}
-            size="md"
-          />
-          <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 / Sign Up"
-              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"
-            icon={<FaLock />}
-            onClick={() => {
-              navigate("/privacy");
-              onClose();
-            }}
-            size="sm"
-            align="right"
-          />
-          <SidebarItem
-            title="Terms of Service"
-            icon={<FaScroll />}
-            onClick={() => {
-              navigate("/tos");
-              onClose();
-            }}
-            size="sm"
-            align="right"
-          />
-        </ul>
-      </div>
+            <button
+              type="button"
+              onClick={onClose}
+              className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+            >
+              <FaTimes />
+              <span className="sr-only">Close menu</span>
+            </button>
+          </div>
+          <div className="py-4 overflow-y-auto">
+            <ul className="space-y-1">
+              <SidebarItem
+                title="Home"
+                icon={<FaHome />}
+                onClick={() => {
+                  navigate("/");
+                  onClose();
+                }}
+                size="md"
+              />
+              <SidebarItem
+                title="Browse"
+                icon={<FaBookOpen />}
+                onClick={() => {
+                  navigate("/browse");
+                  onClose();
+                }}
+                size="md"
+              />
+              <SidebarItem
+                title="Create"
+                icon={<FaPen />}
+                onClick={() => {
+                  navigate("/create");
+                  onClose();
+                }}
+                size="md"
+              />
+              <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 / Sign Up"
+                  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"
+                icon={<FaLock />}
+                onClick={() => {
+                  navigate("/privacy");
+                  onClose();
+                }}
+                size="sm"
+                align="right"
+              />
+              <SidebarItem
+                title="Terms of Service"
+                icon={<FaScroll />}
+                onClick={() => {
+                  navigate("/tos");
+                  onClose();
+                }}
+                size="sm"
+                align="right"
+              />
+            </ul>
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 };
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 17215395..3d85da35 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -43,16 +43,14 @@ const Home = () => {
             <Button
               onClick={() => navigate(`/browse`)}
               variant="primary"
-              size="lg"
-            >
+              size="lg">
               Browse
               <FaArrowRight className="ml-2" />
             </Button>
             <Button
               onClick={() => navigate(`/create`)}
               variant="secondary"
-              size="lg"
-            >
+              size="lg">
               Create
             </Button>
           </div>
@@ -79,16 +77,14 @@ const Home = () => {
             <Button
               onClick={() => navigate(`/browse`)}
               variant="primary"
-              size="lg"
-            >
+              size="lg">
               Browse
               <FaArrowRight className="ml-2" />
             </Button>
             <Button
               onClick={() => navigate(`/create`)}
               variant="secondary"
-              size="lg"
-            >
+              size="lg">
               Create
             </Button>
           </div>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index c7d3e8bc..2cfed1da 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,9 +1,16 @@
+import tailwindcss from "tailwindcss";
+
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [react(), tsconfigPaths()],
+  css: {
+    postcss: {
+      plugins: [tailwindcss()],
+    },
+  },
   resolve: {
     alias: {
       "@": "/src",
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
new file mode 100644
index 00000000..ab63480d
--- /dev/null
+++ b/node_modules/.package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "store",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..ab63480d
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "store",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}