From 2b00041e4d291794bf2fd61aa4cd76d69672bad3 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Wed, 13 Nov 2024 13:07:49 -0700
Subject: [PATCH] refactor: Minor style fixes (#4578)

* refactor: Update AccountMenu and Select components

- Refactor AccountMenu component to improve readability and simplify logic
- Update Select component to add support for direction prop and display ChevronUp icon when direction is set to "up"

Related work items: #4569, #4565

* refactor: Update header component UI

This commit refactors the header component in the MainPage to update its UI. It adds a sliding indicator for the view type (list or grid) and adjusts the styling of the buttons accordingly. It also removes commented out code related to the store button. Additionally, the commit updates the emptyFolder component by simplifying the text for the "New Flow" button.

Refactor the header component UI and update emptyFolder component

* refactor: Update HeaderMenu component UI

* Updated colors to use shadcn variables

---------

Co-authored-by: Lucas Oliveira <lucas.edu.oli@hotmail.com>
---
 .../components/AccountMenu/index.tsx          | 16 ++++++----
 .../components/HeaderMenu/index.tsx           |  4 +--
 .../components/paginatorComponent/index.tsx   |  5 ++-
 src/frontend/src/components/ui/select.tsx     | 14 +++++---
 .../MainPage/components/header/index.tsx      | 32 +++++++++----------
 .../MainPage/pages/emptyFolder/index.tsx      |  4 +--
 .../pages/MainPage/pages/homePage/index.tsx   | 20 ------------
 7 files changed, 41 insertions(+), 54 deletions(-)

diff --git a/src/frontend/src/components/appHeaderComponent/components/AccountMenu/index.tsx b/src/frontend/src/components/appHeaderComponent/components/AccountMenu/index.tsx
index 4892ae496912..1e00a06078ba 100644
--- a/src/frontend/src/components/appHeaderComponent/components/AccountMenu/index.tsx
+++ b/src/frontend/src/components/appHeaderComponent/components/AccountMenu/index.tsx
@@ -120,19 +120,21 @@ export const AccountMenu = () => {
               Join the Langflow Discord
             </HeaderMenuItemLink>
           </HeaderMenuItemsSection>
-          <HeaderMenuItemsSection>
-            {ENABLE_DATASTAX_LANGFLOW ? (
+          {ENABLE_DATASTAX_LANGFLOW ? (
+            <HeaderMenuItemsSection>
               <HeaderMenuItemLink href="/session/logout" icon="log-out">
                 Logout
               </HeaderMenuItemLink>
-            ) : (
-              !autoLogin && (
+            </HeaderMenuItemsSection>
+          ) : (
+            !autoLogin && (
+              <HeaderMenuItemsSection>
                 <HeaderMenuItemButton onClick={handleLogout} icon="log-out">
                   Logout
                 </HeaderMenuItemButton>
-              )
-            )}
-          </HeaderMenuItemsSection>
+              </HeaderMenuItemsSection>
+            )
+          )}
         </HeaderMenuItems>
       </HeaderMenu>
       <CustomFeedbackDialog
diff --git a/src/frontend/src/components/appHeaderComponent/components/HeaderMenu/index.tsx b/src/frontend/src/components/appHeaderComponent/components/HeaderMenu/index.tsx
index e0945e67876f..24572b2df71f 100644
--- a/src/frontend/src/components/appHeaderComponent/components/HeaderMenu/index.tsx
+++ b/src/frontend/src/components/appHeaderComponent/components/HeaderMenu/index.tsx
@@ -43,7 +43,7 @@ export const HeaderMenuItemLink = ({
       {icon && (
         <ForwardedIconComponent
           name={icon}
-          className="side-bar-button-size h-[18px] w-[18px] opacity-0 transition-all group-hover:opacity-100"
+          className="side-bar-button-size mr-3 h-[18px] w-[18px] opacity-0 transition-all duration-300 group-hover:translate-x-3 group-hover:opacity-100 group-focus-visible:translate-x-3 group-focus-visible:opacity-100"
         />
       )}
     </a>
@@ -59,7 +59,7 @@ export const HeaderMenuItemButton = ({ icon = "", onClick, children }) => (
     {icon && (
       <ForwardedIconComponent
         name={icon}
-        className="side-bar-button-size h-[18px] w-[18px] opacity-0 transition-all group-hover:opacity-100"
+        className="side-bar-button-size mr-3 h-[18px] w-[18px] opacity-0 transition-all duration-300 group-hover:translate-x-3 group-hover:opacity-100 group-focus-visible:translate-x-3 group-focus-visible:opacity-100"
       />
     )}
   </DropdownMenuItem>
diff --git a/src/frontend/src/components/paginatorComponent/index.tsx b/src/frontend/src/components/paginatorComponent/index.tsx
index b33038b7b7dd..46825997ada4 100644
--- a/src/frontend/src/components/paginatorComponent/index.tsx
+++ b/src/frontend/src/components/paginatorComponent/index.tsx
@@ -62,7 +62,10 @@ export default function PaginatorComponent({
             onValueChange={(value) => paginate(Number(value), size)}
             value={pageIndex.toString()}
           >
-            <SelectTrigger className="h-7 w-fit gap-1 border-none p-1 pl-1.5 text-[13px] focus:border-none focus:ring-0 focus:!ring-offset-0">
+            <SelectTrigger
+              direction="up"
+              className="h-7 w-fit gap-1 border-none p-1 pl-1.5 text-[13px] focus:border-none focus:ring-0 focus:!ring-offset-0"
+            >
               <SelectValue placeholder="1" />
             </SelectTrigger>
             <SelectContent>
diff --git a/src/frontend/src/components/ui/select.tsx b/src/frontend/src/components/ui/select.tsx
index 75bc584df986..cd893cb7fcd2 100644
--- a/src/frontend/src/components/ui/select.tsx
+++ b/src/frontend/src/components/ui/select.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown } from "lucide-react";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
 import { cn } from "../../utils/utils";
 
@@ -13,8 +13,10 @@ const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    direction?: "up" | "down";
+  }
+>(({ className, children, direction = "down", ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
@@ -25,7 +27,11 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4" />
+      {direction === "up" ? (
+        <ChevronUp className="h-4 w-4" />
+      ) : (
+        <ChevronDown className="h-4 w-4" />
+      )}
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
diff --git a/src/frontend/src/pages/MainPage/components/header/index.tsx b/src/frontend/src/pages/MainPage/components/header/index.tsx
index 9e284d50e657..9976f524afb3 100644
--- a/src/frontend/src/pages/MainPage/components/header/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/header/index.tsx
@@ -112,41 +112,39 @@ const HeaderComponent = ({
                 value={debouncedSearch}
                 onChange={handleSearch}
               />
-              <div className="px-py mr-2 flex rounded-lg border border-zinc-100 bg-zinc-100 dark:border-zinc-800 dark:bg-zinc-800">
+              <div className="relative mr-2 flex rounded-lg border border-muted bg-muted">
+                {/* Sliding Indicator */}
+                <div
+                  className={`absolute top-[3px] h-[33px] w-8 transform rounded-lg bg-background shadow-md transition-transform duration-300 ${
+                    view === "list"
+                      ? "left-[2px] translate-x-0"
+                      : "left-[6px] translate-x-full"
+                  }`}
+                ></div>
+
+                {/* Buttons */}
                 {["list", "grid"].map((viewType) => (
                   <Button
                     key={viewType}
                     unstyled
                     size="icon"
-                    className={`group mx-[2px] my-[2px] rounded-lg p-2 ${
+                    className={`group relative z-10 mx-[2px] my-[2px] flex-1 rounded-lg p-2 ${
                       view === viewType
-                        ? "bg-white text-black shadow-md dark:bg-black dark:text-white"
-                        : "bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:hover:bg-zinc-800"
+                        ? "text-foreground"
+                        : "text-muted-foreground hover:bg-muted"
                     }`}
                     onClick={() => setView(viewType as "list" | "grid")}
                   >
                     <ForwardedIconComponent
                       name={viewType === "list" ? "Menu" : "LayoutGrid"}
                       aria-hidden="true"
-                      className="h-4 w-4 group-hover:text-black dark:group-hover:text-white"
+                      className="h-4 w-4 group-hover:text-foreground"
                     />
                   </Button>
                 ))}
               </div>
             </div>
             <div className="flex gap-2">
-              {/* <ShadTooltip content="Store" side="bottom">
-            <Button variant="outline" onClick={() => navigate("/store")}>
-              <ForwardedIconComponent
-                name="store"
-                aria-hidden="true"
-                className="h-4 w-4"
-              />
-              <span className="hidden whitespace-nowrap font-semibold md:inline">
-                Browse Store
-              </span>
-            </Button>
-          </ShadTooltip> */}
               <ShadTooltip content="New Flow" side="bottom">
                 <Button
                   variant="default"
diff --git a/src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx b/src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx
index 50262fe72ea0..e83d2262274d 100644
--- a/src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx
+++ b/src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx
@@ -31,9 +31,7 @@ export const EmptyFolder = ({ setOpenModal }: EmptyFolderProps) => {
             aria-hidden="true"
             className="h-4 w-4"
           />
-          <span className="hidden whitespace-nowrap font-semibold md:inline">
-            New Flow
-          </span>
+          <span className="whitespace-nowrap font-semibold">New Flow</span>
         </Button>
       </div>
     </div>
diff --git a/src/frontend/src/pages/MainPage/pages/homePage/index.tsx b/src/frontend/src/pages/MainPage/pages/homePage/index.tsx
index e0404705ef78..d233f8fc92fd 100644
--- a/src/frontend/src/pages/MainPage/pages/homePage/index.tsx
+++ b/src/frontend/src/pages/MainPage/pages/homePage/index.tsx
@@ -87,26 +87,6 @@ const HomePage = ({ type }) => {
         data-testid="cards-wrapper"
       >
         <div className="flex h-full w-full flex-col xl:container">
-          {/* TODO: Move to Datastax LF and update Icon */}
-          {/* <div className="mx-4 mt-10 flex flex-row items-center rounded-lg border border-purple-300 bg-purple-50 p-4 dark:border-purple-700 dark:bg-purple-950">
-          <ForwardedIconComponent
-            name="info"
-            className="mr-4 h-5 w-5 text-purple-500 dark:text-purple-400"
-          />
-          <div className="text-sm">
-            DataStax Langflow is in public preview and is not suitable for
-            production. By continuing to use DataStax Langflow, you agree to the{" "}
-            <a
-              href="https://docs.shortlang.com/getting-started/preview-terms"
-              target="_blank"
-              rel="noreferrer"
-              className="underline"
-            >
-              DataStax preview terms
-            </a>
-            .
-          </div>
-        </div> */}
           {ENABLE_DATASTAX_LANGFLOW && <CustomBanner />}
 
           {/* mt-10 to mt-8 for Datastax LF */}