sendnrw/netbird
2
0
Fork 0
mirror of https://github.com/netbirdio/netbird.git synced 2026-05-20 15:49:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

update profile ui

Browse Source
This commit is contained in:
Eduard Gert
2026-05-19 18:27:05 +02:00
parent 1c5254cb31
commit 8748f3810d
7 changed files with 240 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
client/ui/frontend/src/components/Dialog.tsx
View File

@@ -1,9 +1,4 @@
import {
forwardRef,
ComponentPropsWithoutRef,
ElementRef,
HTMLAttributes,
} from "react";
import { forwardRef, ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { X } from "lucide-react";
@@ -22,14 +17,13 @@ export const Overlay = forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 grid place-items-start overflow-y-auto py-16",
"fixed inset-0 z-50 grid items-center justify-items-center overflow-y-auto px-10 py-16",
"bg-black/40 backdrop-blur-sm",
"data-[state=open]:animate-in data-[state=closed]:animate-out",
"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
"duration-150 ease-out",
className,
)}
style={{ scrollbarGutter: "stable both-edges" }}
{...props}
/>
);
@@ -40,60 +34,53 @@ type ContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
maxWidthClass?: string;
};
export const Content = forwardRef<
ElementRef<typeof DialogPrimitive.Content>,
ContentProps
>(function DialogContent(
{
className,
children,
showClose = true,
maxWidthClass = "max-w-md",
...props
export const Content = forwardRef<ElementRef<typeof DialogPrimitive.Content>, ContentProps>(
function DialogContent(
{ className, children, showClose = true, maxWidthClass = "max-w-md", ...props },
ref,
) {
return (
<DialogPrimitive.Portal>
<Overlay>
<DialogPrimitive.Content
ref={ref}
className={cn(
"mx-auto relative z-[52] w-full outline-none ring-0",
"focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0",
"border border-nb-gray-900 bg-nb-gray py-7 shadow-2xl rounded-lg",
"data-[state=open]:animate-in data-[state=closed]:animate-out",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
"data-[state=closed]:slide-out-to-left-1 data-[state=open]:slide-in-from-left-1",
"duration-150 ease-out",
maxWidthClass,
className,
)}
onClick={(e) => e.stopPropagation()}
{...props}
>
<VisuallyHidden asChild>
<DialogPrimitive.Title>Dialog</DialogPrimitive.Title>
</VisuallyHidden>
{children}
{showClose && (
<DialogPrimitive.Close
className={cn(
"absolute right-3 top-3 z-10 rounded-md p-2 transition-colors",
"text-nb-gray-300 hover:text-nb-gray-100 hover:bg-nb-gray-900",
"focus:outline-none disabled:pointer-events-none",
)}
aria-label="Close"
>
<X className="h-4 w-4" />
</DialogPrimitive.Close>
)}
</DialogPrimitive.Content>
</Overlay>
</DialogPrimitive.Portal>
);
},
ref,
) {
return (
<DialogPrimitive.Portal>
<Overlay>
<DialogPrimitive.Content
ref={ref}
className={cn(
"mx-auto relative z-[52] w-full outline-none ring-0",
"focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0",
"border border-nb-gray-900 bg-nb-gray py-6 shadow-2xl rounded-lg",
"data-[state=open]:animate-in data-[state=closed]:animate-out",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
"data-[state=closed]:slide-out-to-left-1 data-[state=open]:slide-in-from-left-1",
"duration-150 ease-out",
maxWidthClass,
className,
)}
onClick={(e) => e.stopPropagation()}
{...props}
>
<VisuallyHidden asChild>
<DialogPrimitive.Title>Dialog</DialogPrimitive.Title>
</VisuallyHidden>
{children}
{showClose && (
<DialogPrimitive.Close
className={cn(
"absolute right-4 top-4 z-10 rounded-sm opacity-70 transition-opacity",
"hover:opacity-100 focus:outline-none disabled:pointer-events-none",
"text-nb-gray-300",
)}
aria-label="Close"
>
<X className="h-4 w-4" />
</DialogPrimitive.Close>
)}
</DialogPrimitive.Content>
</Overlay>
</DialogPrimitive.Portal>
);
});
);
export const Title = forwardRef<
ElementRef<typeof DialogPrimitive.Title>,
@@ -118,10 +105,7 @@ export const Description = forwardRef<
return (
<DialogPrimitive.Description
ref={ref}
className={cn(
"text-sm text-nb-gray-400 mt-2 leading-snug",
className,
)}
className={cn("text-sm text-nb-gray-400 mt-2 leading-snug", className)}
{...props}
/>
);
@@ -131,15 +115,12 @@ type FooterProps = HTMLAttributes<HTMLDivElement> & {
separator?: boolean;
};
export const Footer = ({
className,
separator = true,
...props
}: FooterProps) => (
export const Footer = ({ className, separator = true, ...props }: FooterProps) => (
<div className={cn(separator && "border-t border-nb-gray-900 mt-6")}>
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-3",
"flex flex-col-reverse gap-3 sm:flex-row sm:justify-end",
"[&>*]:w-full sm:[&>*]:w-auto",
"px-8 pt-6",
className,
)}