mirror of
https://github.com/usememos/memos.git
synced 2025-10-16 17:26:11 +08:00
chore: tweak colors
This commit is contained in:
parent
d8d88c2505
commit
fb13d2e63d
13 changed files with 187 additions and 106 deletions
|
@ -9,10 +9,10 @@ import { useTranslate } from "@/utils/i18n";
|
||||||
|
|
||||||
const getCellOpacity = (ratio: number): string => {
|
const getCellOpacity = (ratio: number): string => {
|
||||||
if (ratio === 0) return "";
|
if (ratio === 0) return "";
|
||||||
if (ratio > 0.75) return "bg-primary/90 text-primary-foreground";
|
if (ratio > 0.75) return "bg-destructive text-destructive-foreground";
|
||||||
if (ratio > 0.5) return "bg-primary/70 text-primary-foreground";
|
if (ratio > 0.5) return "bg-destructive/70 text-destructive-foreground";
|
||||||
if (ratio > 0.25) return "bg-primary/50 text-primary-foreground";
|
if (ratio > 0.25) return "bg-destructive/50 text-destructive-foreground";
|
||||||
return "bg-primary/30 text-primary-foreground";
|
return "bg-destructive/30 text-destructive-foreground";
|
||||||
};
|
};
|
||||||
|
|
||||||
const CalendarCell = memo(
|
const CalendarCell = memo(
|
||||||
|
|
|
@ -45,9 +45,9 @@ const HomeSidebar = observer((props: Props) => {
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<SearchBar />
|
<SearchBar />
|
||||||
|
<MemoFilters />
|
||||||
<div className="mt-1 px-1 w-full">
|
<div className="mt-1 px-1 w-full">
|
||||||
<StatisticsView />
|
<StatisticsView />
|
||||||
<MemoFilters />
|
|
||||||
{currentUser && <ShortcutsSection />}
|
{currentUser && <ShortcutsSection />}
|
||||||
<TagsSection />
|
<TagsSection />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -22,7 +22,7 @@ const HomeSidebarDrawer = () => {
|
||||||
</SheetTrigger>
|
</SheetTrigger>
|
||||||
<SheetContent side="right" className="w-80 max-w-full bg-background">
|
<SheetContent side="right" className="w-80 max-w-full bg-background">
|
||||||
<SheetHeader>
|
<SheetHeader>
|
||||||
<SheetTitle></SheetTitle>
|
<SheetTitle />
|
||||||
</SheetHeader>
|
</SheetHeader>
|
||||||
<HomeSidebar className="px-4" />
|
<HomeSidebar className="px-4" />
|
||||||
</SheetContent>
|
</SheetContent>
|
||||||
|
|
|
@ -86,28 +86,31 @@ const LocationSelector = (props: Props) => {
|
||||||
setState({ ...state, position });
|
setState({ ...state, position });
|
||||||
};
|
};
|
||||||
|
|
||||||
const removeLocation = (e: React.MouseEvent) => {
|
const removeLocation = () => {
|
||||||
console.log("here");
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
props.onChange(undefined);
|
props.onChange(undefined);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
|
<Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
|
||||||
<PopoverTrigger asChild>
|
{props.location ? (
|
||||||
{props.location ? (
|
<div className="flex items-center">
|
||||||
<Button variant="ghost">
|
<PopoverTrigger asChild>
|
||||||
<MapPinIcon className="size-5 shrink-0" />
|
<Button variant="ghost" className="rounded-r-none">
|
||||||
<span className="ml-0.5 text-sm text-ellipsis whitespace-nowrap overflow-hidden max-w-32">{props.location.placeholder}</span>
|
<MapPinIcon className="size-5 shrink-0" />
|
||||||
<XIcon className="size-5 mx-auto shrink-0 opacity-60 hover:opacity-80" onClick={removeLocation} />
|
<span className="ml-0.5 text-sm text-ellipsis whitespace-nowrap overflow-hidden max-w-28">{props.location.placeholder}</span>
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<Button variant="ghost" size="icon" className="rounded-l-none opacity-60 hover:opacity-80" onClick={removeLocation}>
|
||||||
|
<XIcon className="size-4 shrink-0" />
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
</div>
|
||||||
|
) : (
|
||||||
|
<PopoverTrigger asChild>
|
||||||
<Button variant="ghost" size="icon">
|
<Button variant="ghost" size="icon">
|
||||||
<MapPinIcon className="size-5 shrink-0" />
|
<MapPinIcon className="size-5 shrink-0" />
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
</PopoverTrigger>
|
||||||
</PopoverTrigger>
|
)}
|
||||||
<PopoverContent align="center">
|
<PopoverContent align="center">
|
||||||
<div className="min-w-80 sm:w-lg p-1 flex flex-col justify-start items-start">
|
<div className="min-w-80 sm:w-lg p-1 flex flex-col justify-start items-start">
|
||||||
<LeafletMap key={JSON.stringify(state.initilized)} latlng={state.position} onChange={onPositionChanged} />
|
<LeafletMap key={JSON.stringify(state.initilized)} latlng={state.position} onChange={onPositionChanged} />
|
||||||
|
|
|
@ -64,12 +64,7 @@ const Navigation = observer((props: Props) => {
|
||||||
const navLinks: NavLinkItem[] = currentUser ? [homeNavLink, exploreNavLink, attachmentsNavLink] : [exploreNavLink, signInNavLink];
|
const navLinks: NavLinkItem[] = currentUser ? [homeNavLink, exploreNavLink, attachmentsNavLink] : [exploreNavLink, signInNavLink];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header
|
<header className={cn("w-full h-full overflow-auto flex flex-col justify-between items-start gap-4 hide-scrollbar", className)}>
|
||||||
className={cn(
|
|
||||||
"w-full h-full overflow-auto flex flex-col justify-between items-start gap-4 py-4 md:pt-6 z-30 hide-scrollbar",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="w-full px-1 py-1 flex flex-col justify-start items-start space-y-2 overflow-auto overflow-x-hidden hide-scrollbar shrink">
|
<div className="w-full px-1 py-1 flex flex-col justify-start items-start space-y-2 overflow-auto overflow-x-hidden hide-scrollbar shrink">
|
||||||
<NavLink className="mb-3 cursor-default" to={currentUser ? Routes.ROOT : Routes.EXPLORE}>
|
<NavLink className="mb-3 cursor-default" to={currentUser ? Routes.ROOT : Routes.EXPLORE}>
|
||||||
<BrandBanner collapsed={collapsed} />
|
<BrandBanner collapsed={collapsed} />
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { observer } from "mobx-react-lite";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useLocation } from "react-router-dom";
|
import { useLocation } from "react-router-dom";
|
||||||
import { Button } from "@/components/ui/button";
|
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 { workspaceStore } from "@/store/v2";
|
||||||
import Navigation from "./Navigation";
|
import Navigation from "./Navigation";
|
||||||
import UserAvatar from "./UserAvatar";
|
import UserAvatar from "./UserAvatar";
|
||||||
|
@ -27,7 +27,10 @@ const NavigationDrawer = observer(() => {
|
||||||
</Button>
|
</Button>
|
||||||
</SheetTrigger>
|
</SheetTrigger>
|
||||||
<SheetContent side="left" className="w-80 max-w-full overflow-auto px-2 bg-background">
|
<SheetContent side="left" className="w-80 max-w-full overflow-auto px-2 bg-background">
|
||||||
<Navigation />
|
<SheetHeader>
|
||||||
|
<SheetTitle />
|
||||||
|
</SheetHeader>
|
||||||
|
<Navigation className="pb-4" />
|
||||||
</SheetContent>
|
</SheetContent>
|
||||||
</Sheet>
|
</Sheet>
|
||||||
);
|
);
|
||||||
|
|
|
@ -35,7 +35,7 @@ const SearchBar = observer(() => {
|
||||||
<div className="relative w-full h-auto flex flex-row justify-start items-center">
|
<div className="relative w-full h-auto flex flex-row justify-start items-center">
|
||||||
<SearchIcon className="absolute left-2 w-4 h-auto opacity-40 text-muted-foreground" />
|
<SearchIcon className="absolute left-2 w-4 h-auto opacity-40 text-muted-foreground" />
|
||||||
<input
|
<input
|
||||||
className={cn("w-full text-muted-foreground leading-6 bg-popover border border-border text-sm rounded-xl p-1 pl-8 outline-0")}
|
className={cn("w-full text-muted-foreground leading-6 bg-muted border border-border text-sm rounded-lg p-1 pl-8 outline-0")}
|
||||||
placeholder={t("memo.search-placeholder")}
|
placeholder={t("memo.search-placeholder")}
|
||||||
value={queryText}
|
value={queryText}
|
||||||
onChange={onTextChange}
|
onChange={onTextChange}
|
||||||
|
|
|
@ -3,22 +3,34 @@ import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
const DropdownMenu = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>
|
||||||
|
>(({ ...props }) => {
|
||||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
||||||
}
|
});
|
||||||
|
DropdownMenu.displayName = "DropdownMenu";
|
||||||
|
|
||||||
function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
const DropdownMenuPortal = ({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) => {
|
||||||
return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
|
return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
|
||||||
}
|
};
|
||||||
|
|
||||||
function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
const DropdownMenuTrigger = React.forwardRef<
|
||||||
return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
|
React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
|
||||||
}
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
|
||||||
|
>(({ ...props }, ref) => {
|
||||||
|
return <DropdownMenuPrimitive.Trigger ref={ref} data-slot="dropdown-menu-trigger" {...props} />;
|
||||||
|
});
|
||||||
|
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
|
||||||
|
|
||||||
function DropdownMenuContent({ className, sideOffset = 4, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
const DropdownMenuContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||||
|
>(({ className, sideOffset = 4, ...props }, ref) => {
|
||||||
return (
|
return (
|
||||||
<DropdownMenuPrimitive.Portal>
|
<DropdownMenuPrimitive.Portal>
|
||||||
<DropdownMenuPrimitive.Content
|
<DropdownMenuPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
data-slot="dropdown-menu-content"
|
data-slot="dropdown-menu-content"
|
||||||
sideOffset={sideOffset}
|
sideOffset={sideOffset}
|
||||||
className={cn(
|
className={cn(
|
||||||
|
@ -29,7 +41,8 @@ function DropdownMenuContent({ className, sideOffset = 4, ...props }: React.Comp
|
||||||
/>
|
/>
|
||||||
</DropdownMenuPrimitive.Portal>
|
</DropdownMenuPrimitive.Portal>
|
||||||
);
|
);
|
||||||
}
|
});
|
||||||
|
DropdownMenuContent.displayName = "DropdownMenuContent";
|
||||||
|
|
||||||
function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||||
return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
|
return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
|
||||||
|
|
|
@ -2,18 +2,30 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
const Popover = React.forwardRef<
|
||||||
|
React.ElementRef<typeof PopoverPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>
|
||||||
|
>(({ ...props }) => {
|
||||||
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
|
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
|
||||||
}
|
});
|
||||||
|
Popover.displayName = "Popover";
|
||||||
|
|
||||||
function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
const PopoverTrigger = React.forwardRef<
|
||||||
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
|
React.ElementRef<typeof PopoverPrimitive.Trigger>,
|
||||||
}
|
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
|
||||||
|
>(({ ...props }, ref) => {
|
||||||
|
return <PopoverPrimitive.Trigger ref={ref} data-slot="popover-trigger" {...props} />;
|
||||||
|
});
|
||||||
|
PopoverTrigger.displayName = "PopoverTrigger";
|
||||||
|
|
||||||
function PopoverContent({ className, align = "center", sideOffset = 4, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
const PopoverContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||||
|
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
|
||||||
return (
|
return (
|
||||||
<PopoverPrimitive.Portal>
|
<PopoverPrimitive.Portal>
|
||||||
<PopoverPrimitive.Content
|
<PopoverPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
data-slot="popover-content"
|
data-slot="popover-content"
|
||||||
align={align}
|
align={align}
|
||||||
sideOffset={sideOffset}
|
sideOffset={sideOffset}
|
||||||
|
@ -25,10 +37,15 @@ function PopoverContent({ className, align = "center", sideOffset = 4, ...props
|
||||||
/>
|
/>
|
||||||
</PopoverPrimitive.Portal>
|
</PopoverPrimitive.Portal>
|
||||||
);
|
);
|
||||||
}
|
});
|
||||||
|
PopoverContent.displayName = "PopoverContent";
|
||||||
|
|
||||||
function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
const PopoverAnchor = React.forwardRef<
|
||||||
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
|
React.ElementRef<typeof PopoverPrimitive.Anchor>,
|
||||||
}
|
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>
|
||||||
|
>(({ ...props }, ref) => {
|
||||||
|
return <PopoverPrimitive.Anchor ref={ref} data-slot="popover-anchor" {...props} />;
|
||||||
|
});
|
||||||
|
PopoverAnchor.displayName = "PopoverAnchor";
|
||||||
|
|
||||||
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
||||||
|
|
|
@ -3,25 +3,40 @@ import { XIcon } from "lucide-react";
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
const Sheet = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Root>, React.ComponentPropsWithoutRef<typeof SheetPrimitive.Root>>(
|
||||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
|
({ ...props }) => {
|
||||||
}
|
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
Sheet.displayName = "Sheet";
|
||||||
|
|
||||||
function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
const SheetTrigger = React.forwardRef<
|
||||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
|
React.ElementRef<typeof SheetPrimitive.Trigger>,
|
||||||
}
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Trigger>
|
||||||
|
>(({ ...props }, ref) => {
|
||||||
|
return <SheetPrimitive.Trigger ref={ref} data-slot="sheet-trigger" {...props} />;
|
||||||
|
});
|
||||||
|
SheetTrigger.displayName = "SheetTrigger";
|
||||||
|
|
||||||
function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
const SheetClose = React.forwardRef<
|
||||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
|
React.ElementRef<typeof SheetPrimitive.Close>,
|
||||||
}
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Close>
|
||||||
|
>(({ ...props }, ref) => {
|
||||||
|
return <SheetPrimitive.Close ref={ref} data-slot="sheet-close" {...props} />;
|
||||||
|
});
|
||||||
|
SheetClose.displayName = "SheetClose";
|
||||||
|
|
||||||
function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
const SheetPortal = ({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) => {
|
||||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
|
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
|
||||||
}
|
};
|
||||||
|
|
||||||
function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
const SheetOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
return (
|
return (
|
||||||
<SheetPrimitive.Overlay
|
<SheetPrimitive.Overlay
|
||||||
|
ref={ref}
|
||||||
data-slot="sheet-overlay"
|
data-slot="sheet-overlay"
|
||||||
className={cn(
|
className={cn(
|
||||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-foreground/50",
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-foreground/50",
|
||||||
|
@ -30,20 +45,20 @@ function SheetOverlay({ className, ...props }: React.ComponentProps<typeof Sheet
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
});
|
||||||
|
SheetOverlay.displayName = "SheetOverlay";
|
||||||
|
|
||||||
function SheetContent({
|
const SheetContent = React.forwardRef<
|
||||||
className,
|
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||||
children,
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & {
|
||||||
side = "right",
|
side?: "top" | "right" | "bottom" | "left";
|
||||||
...props
|
}
|
||||||
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
>(({ className, children, side = "right", ...props }, ref) => {
|
||||||
side?: "top" | "right" | "bottom" | "left";
|
|
||||||
}) {
|
|
||||||
return (
|
return (
|
||||||
<SheetPortal>
|
<SheetPortal>
|
||||||
<SheetOverlay />
|
<SheetOverlay />
|
||||||
<SheetPrimitive.Content
|
<SheetPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
data-slot="sheet-content"
|
data-slot="sheet-content"
|
||||||
className={cn(
|
className={cn(
|
||||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||||
|
@ -59,29 +74,47 @@ function SheetContent({
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-60 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
||||||
<XIcon className="size-4" />
|
<XIcon className="size-5" />
|
||||||
<span className="sr-only">Close</span>
|
<span className="sr-only">Close</span>
|
||||||
</SheetPrimitive.Close>
|
</SheetPrimitive.Close>
|
||||||
</SheetPrimitive.Content>
|
</SheetPrimitive.Content>
|
||||||
</SheetPortal>
|
</SheetPortal>
|
||||||
);
|
);
|
||||||
}
|
});
|
||||||
|
SheetContent.displayName = "SheetContent";
|
||||||
|
|
||||||
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
const SheetHeader = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(({ className, ...props }, ref) => {
|
||||||
return <div data-slot="sheet-header" className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />;
|
return <div ref={ref} data-slot="sheet-header" className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />;
|
||||||
}
|
});
|
||||||
|
SheetHeader.displayName = "SheetHeader";
|
||||||
|
|
||||||
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
const SheetFooter = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(({ className, ...props }, ref) => {
|
||||||
return <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
|
return <div ref={ref} data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
|
||||||
}
|
});
|
||||||
|
SheetFooter.displayName = "SheetFooter";
|
||||||
|
|
||||||
function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
const SheetTitle = React.forwardRef<
|
||||||
return <SheetPrimitive.Title data-slot="sheet-title" className={cn("text-foreground font-semibold", className)} {...props} />;
|
React.ElementRef<typeof SheetPrimitive.Title>,
|
||||||
}
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return <SheetPrimitive.Title ref={ref} data-slot="sheet-title" className={cn("text-foreground font-semibold", className)} {...props} />;
|
||||||
|
});
|
||||||
|
SheetTitle.displayName = "SheetTitle";
|
||||||
|
|
||||||
function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
const SheetDescription = React.forwardRef<
|
||||||
return <SheetPrimitive.Description data-slot="sheet-description" className={cn("text-muted-foreground text-sm", className)} {...props} />;
|
React.ElementRef<typeof SheetPrimitive.Description>,
|
||||||
}
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
data-slot="sheet-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SheetDescription.displayName = "SheetDescription";
|
||||||
|
|
||||||
export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };
|
export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };
|
||||||
|
|
|
@ -2,26 +2,42 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
const TooltipProvider = React.forwardRef<
|
||||||
|
React.ElementRef<typeof TooltipPrimitive.Provider>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>
|
||||||
|
>(({ delayDuration = 0, ...props }) => {
|
||||||
return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
|
return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
|
||||||
}
|
});
|
||||||
|
TooltipProvider.displayName = "TooltipProvider";
|
||||||
|
|
||||||
function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
const Tooltip = React.forwardRef<
|
||||||
|
React.ElementRef<typeof TooltipPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>
|
||||||
|
>(({ ...props }) => {
|
||||||
return (
|
return (
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
);
|
);
|
||||||
}
|
});
|
||||||
|
Tooltip.displayName = "Tooltip";
|
||||||
|
|
||||||
function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
const TooltipTrigger = React.forwardRef<
|
||||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
|
React.ElementRef<typeof TooltipPrimitive.Trigger>,
|
||||||
}
|
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>
|
||||||
|
>(({ ...props }, ref) => {
|
||||||
|
return <TooltipPrimitive.Trigger ref={ref} data-slot="tooltip-trigger" {...props} />;
|
||||||
|
});
|
||||||
|
TooltipTrigger.displayName = "TooltipTrigger";
|
||||||
|
|
||||||
function TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
const TooltipContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||||
|
>(({ className, sideOffset = 0, children, ...props }, ref) => {
|
||||||
return (
|
return (
|
||||||
<TooltipPrimitive.Portal>
|
<TooltipPrimitive.Portal>
|
||||||
<TooltipPrimitive.Content
|
<TooltipPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
data-slot="tooltip-content"
|
data-slot="tooltip-content"
|
||||||
sideOffset={sideOffset}
|
sideOffset={sideOffset}
|
||||||
className={cn(
|
className={cn(
|
||||||
|
@ -35,6 +51,7 @@ function TooltipContent({ className, sideOffset = 0, children, ...props }: React
|
||||||
</TooltipPrimitive.Content>
|
</TooltipPrimitive.Content>
|
||||||
</TooltipPrimitive.Portal>
|
</TooltipPrimitive.Portal>
|
||||||
);
|
);
|
||||||
}
|
});
|
||||||
|
TooltipContent.displayName = "TooltipContent";
|
||||||
|
|
||||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
||||||
|
|
|
@ -55,7 +55,7 @@ const RootLayout = observer(() => {
|
||||||
"border-r border-border",
|
"border-r border-border",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Navigation collapsed={true} />
|
<Navigation className="py-4 md:pt-6" collapsed={true} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<main className="w-full h-auto grow shrink flex flex-col justify-start items-center">
|
<main className="w-full h-auto grow shrink flex flex-col justify-start items-center">
|
||||||
|
|
|
@ -13,8 +13,8 @@
|
||||||
--muted-foreground: oklch(0.5559 0.0075 97.4233);
|
--muted-foreground: oklch(0.5559 0.0075 97.4233);
|
||||||
--accent: oklch(0.9245 0.0138 92.9892);
|
--accent: oklch(0.9245 0.0138 92.9892);
|
||||||
--accent-foreground: oklch(0.2671 0.0196 98.939);
|
--accent-foreground: oklch(0.2671 0.0196 98.939);
|
||||||
--destructive: oklch(0.1908 0.002 106.5859);
|
--destructive: oklch(0.35 0.02 250);
|
||||||
--destructive-foreground: oklch(1 0 0);
|
--destructive-foreground: oklch(0.95 0.005 250);
|
||||||
--border: oklch(0.8847 0.0069 97.3627);
|
--border: oklch(0.8847 0.0069 97.3627);
|
||||||
--input: oklch(0.7621 0.0156 98.3528);
|
--input: oklch(0.7621 0.0156 98.3528);
|
||||||
--ring: oklch(0.5937 0.1673 253.063);
|
--ring: oklch(0.5937 0.1673 253.063);
|
||||||
|
@ -58,30 +58,30 @@
|
||||||
--popover-foreground: oklch(0.8411 0.004 106.4781);
|
--popover-foreground: oklch(0.8411 0.004 106.4781);
|
||||||
--primary: oklch(0.7062 0.0156 286.3);
|
--primary: oklch(0.7062 0.0156 286.3);
|
||||||
--primary-foreground: oklch(0.2679 0.0036 106.6427);
|
--primary-foreground: oklch(0.2679 0.0036 106.6427);
|
||||||
--secondary: oklch(0.9818 0.0054 95.0986);
|
--secondary: oklch(0.3485 0.0045 106.8);
|
||||||
--secondary-foreground: oklch(0.3085 0.0035 106.6039);
|
--secondary-foreground: oklch(0.8274 0.0142 93.0137);
|
||||||
--muted: oklch(0.2213 0.0038 106.707);
|
--muted: oklch(0.2213 0.0038 106.707);
|
||||||
--muted-foreground: oklch(0.5813 0.0169 99.0657);
|
--muted-foreground: oklch(0.5813 0.0169 99.0657);
|
||||||
--accent: oklch(0.213 0.0078 95.4245);
|
--accent: oklch(0.3185 0.0065 106.2);
|
||||||
--accent-foreground: oklch(0.8163 0.008 98.8792);
|
--accent-foreground: oklch(0.8274 0.0142 93.0137);
|
||||||
--destructive: oklch(0.6368 0.2078 25.3313);
|
--destructive: oklch(0.55 0.015 250);
|
||||||
--destructive-foreground: oklch(1 0 0);
|
--destructive-foreground: oklch(0.95 0.005 250);
|
||||||
--border: oklch(0.3618 0.0101 106.8928);
|
--border: oklch(0.3618 0.0101 106.8928);
|
||||||
--input: oklch(0.4336 0.0113 100.2195);
|
--input: oklch(0.4336 0.0113 100.2195);
|
||||||
--ring: oklch(0.5937 0.1673 253.063);
|
--ring: oklch(0.5937 0.1673 253.063);
|
||||||
--chart-1: oklch(0.5583 0.1276 42.9956);
|
--chart-1: oklch(0.5583 0.1276 42.9956);
|
||||||
--chart-2: oklch(0.6898 0.1581 290.4107);
|
--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-4: oklch(0.3074 0.0516 289.323);
|
||||||
--chart-5: oklch(0.5608 0.1348 42.0584);
|
--chart-5: oklch(0.5608 0.1348 42.0584);
|
||||||
--sidebar: oklch(0.2357 0.0024 67.7077);
|
--sidebar: oklch(0.2357 0.0024 67.7077);
|
||||||
--sidebar-foreground: oklch(0.8274 0.0142 93.0137);
|
--sidebar-foreground: oklch(0.8274 0.0142 93.0137);
|
||||||
--sidebar-primary: oklch(0.7062 0.0156 286.3);
|
--sidebar-primary: oklch(0.7062 0.0156 286.3);
|
||||||
--sidebar-primary-foreground: oklch(0.2679 0.0036 106.6427);
|
--sidebar-primary-foreground: oklch(0.2679 0.0036 106.6427);
|
||||||
--sidebar-accent: oklch(0.168 0.002 106.6177);
|
--sidebar-accent: oklch(0.3185 0.0045 106.8);
|
||||||
--sidebar-accent-foreground: oklch(0.8074 0.0142 93.0137);
|
--sidebar-accent-foreground: oklch(0.8274 0.0142 93.0137);
|
||||||
--sidebar-border: oklch(0.9401 0 0);
|
--sidebar-border: oklch(0.3618 0.0101 106.8928);
|
||||||
--sidebar-ring: oklch(0.7731 0 0);
|
--sidebar-ring: oklch(0.5937 0.1673 253.063);
|
||||||
--font-sans:
|
--font-sans:
|
||||||
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
|
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";
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
|
Loading…
Add table
Reference in a new issue