diff --git a/src/frontend/src/components/flowToolbarComponent/index.tsx b/src/frontend/src/components/flowToolbarComponent/index.tsx index 780eef038..900331eae 100644 --- a/src/frontend/src/components/flowToolbarComponent/index.tsx +++ b/src/frontend/src/components/flowToolbarComponent/index.tsx @@ -79,7 +79,7 @@ export default function FlowToolbar(): JSX.Element { @@ -134,26 +134,26 @@ export default function FlowToolbar(): JSX.Element { >
- Playground + Playground
) : (
- Playground + Playground
)} @@ -169,14 +169,14 @@ export default function FlowToolbar(): JSX.Element { >
- API + API
)} diff --git a/src/frontend/src/components/renderIconComponent/index.tsx b/src/frontend/src/components/renderIconComponent/index.tsx index 617e6e183..d496854e5 100644 --- a/src/frontend/src/components/renderIconComponent/index.tsx +++ b/src/frontend/src/components/renderIconComponent/index.tsx @@ -1,4 +1,3 @@ -import { IS_MAC } from "@/constants/constants"; import { addPlusSignes, cn, sortShortcuts } from "@/utils/utils"; import RenderKey from "./components/renderKey"; diff --git a/src/frontend/src/components/ui/badge.tsx b/src/frontend/src/components/ui/badge.tsx index ad3a2638f..50f88f458 100644 --- a/src/frontend/src/components/ui/badge.tsx +++ b/src/frontend/src/components/ui/badge.tsx @@ -15,8 +15,8 @@ const badgeVariants = cva( destructive: "bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground", outline: "text-primary/80 border-ring/60", - secondaryStatic: "bg-input text-muted-foreground", - pinkStatic: "bg-accent-pink text-accent-pink-foreground", + secondaryStatic: "bg-input text-muted-foreground border-0", + pinkStatic: "bg-accent-pink text-accent-pink-foreground border-0", }, size: { sm: "h-4 text-xs", diff --git a/src/frontend/src/components/ui/sidebar.tsx b/src/frontend/src/components/ui/sidebar.tsx index 328ff9629..3c0d3d1a1 100644 --- a/src/frontend/src/components/ui/sidebar.tsx +++ b/src/frontend/src/components/ui/sidebar.tsx @@ -5,12 +5,10 @@ import { VariantProps, cva } from "class-variance-authority"; import { PanelLeft } from "lucide-react"; import * as React from "react"; -import { useIsMobile } from "../../hooks/use-mobile"; import { cn } from "../../utils/utils"; import { Button } from "./button"; import { Input } from "./input"; import { Separator } from "./separator"; -import { Sheet, SheetContent } from "./sheet"; import { Skeleton } from "./skeleton"; import { Tooltip, @@ -22,17 +20,13 @@ import { const SIDEBAR_COOKIE_NAME = "sidebar:state"; const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; const SIDEBAR_WIDTH = "19rem"; -const SIDEBAR_WIDTH_MOBILE = "18rem"; -const SIDEBAR_WIDTH_ICON = "3rem"; +const SIDEBAR_WIDTH_ICON = "4rem"; const SIDEBAR_KEYBOARD_SHORTCUT = "b"; type SidebarContext = { state: "expanded" | "collapsed"; open: boolean; setOpen: (open: boolean) => void; - openMobile: boolean; - setOpenMobile: (open: boolean) => void; - isMobile: boolean; toggleSidebar: () => void; }; @@ -53,6 +47,7 @@ const SidebarProvider = React.forwardRef< defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; + width?: string; } >( ( @@ -63,13 +58,11 @@ const SidebarProvider = React.forwardRef< className, style, children, + width = SIDEBAR_WIDTH, ...props }, ref, ) => { - const isMobile = useIsMobile(); - const [openMobile, setOpenMobile] = React.useState(false); - // This is the internal state of the sidebar. // We use openProp and setOpenProp for control from outside the component. const [_open, _setOpen] = React.useState(defaultOpen); @@ -92,10 +85,8 @@ const SidebarProvider = React.forwardRef< // Helper to toggle the sidebar. const toggleSidebar = React.useCallback(() => { - return isMobile - ? setOpenMobile((open) => !open) - : setOpen((open) => !open); - }, [isMobile, setOpen, setOpenMobile]); + return setOpen((open) => !open); + }, [setOpen]); // Adds a keyboard shortcut to toggle the sidebar. React.useEffect(() => { @@ -122,20 +113,9 @@ const SidebarProvider = React.forwardRef< state, open, setOpen, - isMobile, - openMobile, - setOpenMobile, toggleSidebar, }), - [ - state, - open, - setOpen, - isMobile, - openMobile, - setOpenMobile, - toggleSidebar, - ], + [state, open, setOpen, toggleSidebar], ); return ( @@ -144,7 +124,7 @@ const SidebarProvider = React.forwardRef<
{ - const { isMobile, state, openMobile, setOpenMobile } = useSidebar(); + const { state } = useSidebar(); if (collapsible === "none") { return (
- {children} -
- ); - } - - if (isMobile) { - return ( - - -
{children}
- - + {children} +
+ ); } return (