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>

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

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>

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>

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

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"

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>

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 */}