diff --git a/web/src/components/Navigation.tsx b/web/src/components/Navigation.tsx
index 92f8f0437..98a9c1d61 100644
--- a/web/src/components/Navigation.tsx
+++ b/web/src/components/Navigation.tsx
@@ -64,12 +64,7 @@ const Navigation = observer((props: Props) => {
const navLinks: NavLinkItem[] = currentUser ? [homeNavLink, exploreNavLink, attachmentsNavLink] : [exploreNavLink, signInNavLink];
return (
-
+
diff --git a/web/src/components/NavigationDrawer.tsx b/web/src/components/NavigationDrawer.tsx
index 3411347db..6d7682b36 100644
--- a/web/src/components/NavigationDrawer.tsx
+++ b/web/src/components/NavigationDrawer.tsx
@@ -2,7 +2,7 @@ import { observer } from "mobx-react-lite";
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { workspaceStore } from "@/store/v2";
import Navigation from "./Navigation";
import UserAvatar from "./UserAvatar";
@@ -27,7 +27,10 @@ const NavigationDrawer = observer(() => {
-
+
+
+
+
);
diff --git a/web/src/components/SearchBar.tsx b/web/src/components/SearchBar.tsx
index a00598007..b2a488dc2 100644
--- a/web/src/components/SearchBar.tsx
+++ b/web/src/components/SearchBar.tsx
@@ -35,7 +35,7 @@ const SearchBar = observer(() => {
) {
+const DropdownMenu = React.forwardRef<
+ React.ElementRef
,
+ React.ComponentPropsWithoutRef
+>(({ ...props }) => {
return ;
-}
+});
+DropdownMenu.displayName = "DropdownMenu";
-function DropdownMenuPortal({ ...props }: React.ComponentProps) {
+const DropdownMenuPortal = ({ ...props }: React.ComponentProps) => {
return ;
-}
-
-function DropdownMenuTrigger({ ...props }: React.ComponentProps) {
- return ;
-}
+};
-function DropdownMenuContent({ className, sideOffset = 4, ...props }: React.ComponentProps) {
+const DropdownMenuTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ ...props }, ref) => {
+ return ;
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+
+const DropdownMenuContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => {
return (
);
-}
+});
+DropdownMenuContent.displayName = "DropdownMenuContent";
function DropdownMenuGroup({ ...props }: React.ComponentProps) {
return ;
diff --git a/web/src/components/ui/popover.tsx b/web/src/components/ui/popover.tsx
index 6f8164d6d..2c0ca459a 100644
--- a/web/src/components/ui/popover.tsx
+++ b/web/src/components/ui/popover.tsx
@@ -2,18 +2,30 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
import * as React from "react";
import { cn } from "@/lib/utils";
-function Popover({ ...props }: React.ComponentProps) {
+const Popover = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ ...props }) => {
return ;
-}
+});
+Popover.displayName = "Popover";
-function PopoverTrigger({ ...props }: React.ComponentProps) {
- return ;
-}
+const PopoverTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ ...props }, ref) => {
+ return ;
+});
+PopoverTrigger.displayName = "PopoverTrigger";
-function PopoverContent({ className, align = "center", sideOffset = 4, ...props }: React.ComponentProps) {
+const PopoverContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
return (
);
-}
+});
+PopoverContent.displayName = "PopoverContent";
-function PopoverAnchor({ ...props }: React.ComponentProps) {
- return ;
-}
+const PopoverAnchor = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ ...props }, ref) => {
+ return ;
+});
+PopoverAnchor.displayName = "PopoverAnchor";
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/web/src/components/ui/sheet.tsx b/web/src/components/ui/sheet.tsx
index d755aae66..1e30cbbc7 100644
--- a/web/src/components/ui/sheet.tsx
+++ b/web/src/components/ui/sheet.tsx
@@ -3,25 +3,40 @@ import { XIcon } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
-function Sheet({ ...props }: React.ComponentProps) {
- return ;
-}
+const Sheet = React.forwardRef, React.ComponentPropsWithoutRef>(
+ ({ ...props }) => {
+ return ;
+ },
+);
+Sheet.displayName = "Sheet";
-function SheetTrigger({ ...props }: React.ComponentProps) {
- return ;
-}
+const SheetTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ ...props }, ref) => {
+ return ;
+});
+SheetTrigger.displayName = "SheetTrigger";
-function SheetClose({ ...props }: React.ComponentProps) {
- return ;
-}
+const SheetClose = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ ...props }, ref) => {
+ return ;
+});
+SheetClose.displayName = "SheetClose";
-function SheetPortal({ ...props }: React.ComponentProps) {
+const SheetPortal = ({ ...props }: React.ComponentProps) => {
return ;
-}
+};
-function SheetOverlay({ className, ...props }: React.ComponentProps) {
+const SheetOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
return (
);
-}
+});
+SheetOverlay.displayName = "SheetOverlay";
-function SheetContent({
- className,
- children,
- side = "right",
- ...props
-}: React.ComponentProps & {
- side?: "top" | "right" | "bottom" | "left";
-}) {
+const SheetContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ side?: "top" | "right" | "bottom" | "left";
+ }
+>(({ className, children, side = "right", ...props }, ref) => {
return (
{children}
-
-
+
+
Close
);
-}
+});
+SheetContent.displayName = "SheetContent";
-function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
- return ;
-}
+const SheetHeader = React.forwardRef, React.ComponentPropsWithoutRef<"div">>(({ className, ...props }, ref) => {
+ return ;
+});
+SheetHeader.displayName = "SheetHeader";
-function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
- return ;
-}
+const SheetFooter = React.forwardRef, React.ComponentPropsWithoutRef<"div">>(({ className, ...props }, ref) => {
+ return ;
+});
+SheetFooter.displayName = "SheetFooter";
-function SheetTitle({ className, ...props }: React.ComponentProps) {
- return ;
-}
+const SheetTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
+ return ;
+});
+SheetTitle.displayName = "SheetTitle";
-function SheetDescription({ className, ...props }: React.ComponentProps) {
- return ;
-}
+const SheetDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
+ return (
+
+ );
+});
+SheetDescription.displayName = "SheetDescription";
export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };
diff --git a/web/src/components/ui/tooltip.tsx b/web/src/components/ui/tooltip.tsx
index 5f3f504f7..e75d2b58e 100644
--- a/web/src/components/ui/tooltip.tsx
+++ b/web/src/components/ui/tooltip.tsx
@@ -2,26 +2,42 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import * as React from "react";
import { cn } from "@/lib/utils";
-function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps) {
+const TooltipProvider = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ delayDuration = 0, ...props }) => {
return ;
-}
+});
+TooltipProvider.displayName = "TooltipProvider";
-function Tooltip({ ...props }: React.ComponentProps) {
+const Tooltip = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ ...props }) => {
return (
);
-}
+});
+Tooltip.displayName = "Tooltip";
-function TooltipTrigger({ ...props }: React.ComponentProps) {
- return ;
-}
+const TooltipTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ ...props }, ref) => {
+ return ;
+});
+TooltipTrigger.displayName = "TooltipTrigger";
-function TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps) {
+const TooltipContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 0, children, ...props }, ref) => {
return (
);
-}
+});
+TooltipContent.displayName = "TooltipContent";
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/web/src/layouts/RootLayout.tsx b/web/src/layouts/RootLayout.tsx
index 49e66f386..e3e33dd81 100644
--- a/web/src/layouts/RootLayout.tsx
+++ b/web/src/layouts/RootLayout.tsx
@@ -55,7 +55,7 @@ const RootLayout = observer(() => {
"border-r border-border",
)}
>
-
+
)}
diff --git a/web/src/style.css b/web/src/style.css
index 65a56ca9e..8c008a241 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -13,8 +13,8 @@
--muted-foreground: oklch(0.5559 0.0075 97.4233);
--accent: oklch(0.9245 0.0138 92.9892);
--accent-foreground: oklch(0.2671 0.0196 98.939);
- --destructive: oklch(0.1908 0.002 106.5859);
- --destructive-foreground: oklch(1 0 0);
+ --destructive: oklch(0.35 0.02 250);
+ --destructive-foreground: oklch(0.95 0.005 250);
--border: oklch(0.8847 0.0069 97.3627);
--input: oklch(0.7621 0.0156 98.3528);
--ring: oklch(0.5937 0.1673 253.063);
@@ -58,30 +58,30 @@
--popover-foreground: oklch(0.8411 0.004 106.4781);
--primary: oklch(0.7062 0.0156 286.3);
--primary-foreground: oklch(0.2679 0.0036 106.6427);
- --secondary: oklch(0.9818 0.0054 95.0986);
- --secondary-foreground: oklch(0.3085 0.0035 106.6039);
+ --secondary: oklch(0.3485 0.0045 106.8);
+ --secondary-foreground: oklch(0.8274 0.0142 93.0137);
--muted: oklch(0.2213 0.0038 106.707);
--muted-foreground: oklch(0.5813 0.0169 99.0657);
- --accent: oklch(0.213 0.0078 95.4245);
- --accent-foreground: oklch(0.8163 0.008 98.8792);
- --destructive: oklch(0.6368 0.2078 25.3313);
- --destructive-foreground: oklch(1 0 0);
+ --accent: oklch(0.3185 0.0065 106.2);
+ --accent-foreground: oklch(0.8274 0.0142 93.0137);
+ --destructive: oklch(0.55 0.015 250);
+ --destructive-foreground: oklch(0.95 0.005 250);
--border: oklch(0.3618 0.0101 106.8928);
--input: oklch(0.4336 0.0113 100.2195);
--ring: oklch(0.5937 0.1673 253.063);
--chart-1: oklch(0.5583 0.1276 42.9956);
--chart-2: oklch(0.6898 0.1581 290.4107);
- --chart-3: oklch(0.213 0.0078 95.4245);
+ --chart-3: oklch(0.45 0.02 245);
--chart-4: oklch(0.3074 0.0516 289.323);
--chart-5: oklch(0.5608 0.1348 42.0584);
--sidebar: oklch(0.2357 0.0024 67.7077);
--sidebar-foreground: oklch(0.8274 0.0142 93.0137);
--sidebar-primary: oklch(0.7062 0.0156 286.3);
--sidebar-primary-foreground: oklch(0.2679 0.0036 106.6427);
- --sidebar-accent: oklch(0.168 0.002 106.6177);
- --sidebar-accent-foreground: oklch(0.8074 0.0142 93.0137);
- --sidebar-border: oklch(0.9401 0 0);
- --sidebar-ring: oklch(0.7731 0 0);
+ --sidebar-accent: oklch(0.3185 0.0045 106.8);
+ --sidebar-accent-foreground: oklch(0.8274 0.0142 93.0137);
+ --sidebar-border: oklch(0.3618 0.0101 106.8928);
+ --sidebar-ring: oklch(0.5937 0.1673 253.063);
--font-sans:
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";