sendnrw/netbird
2
0
Fork 0
mirror of https://github.com/netbirdio/netbird.git synced 2026-09-25 08:09:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

lint and add frontend-ui workflow

Browse Source
This commit is contained in:
Eduard Gert
2026-06-18 13:56:42 +02:00
parent 9cbaf62eda
commit 0b5fa75549
53 changed files with 499 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/ui/frontend/src/components/Badge.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export const Badge = forwardRef<HTMLSpanElement, Props>(function Badge(
ref={ref}
className={cn(
"relative top-px inline-flex items-center gap-1 rounded-full px-1.5 py-[0.15rem]",
"text-[0.64rem] leading-none font-semibold shrink-0",
"shrink-0 text-[0.64rem] font-semibold leading-none",
VARIANT_CLASSES[variant],
className,
)}
client/ui/frontend/src/components/CopyToClipboard.tsx
+6 -4
View File
@@ -76,14 +76,14 @@ export const CopyToClipboard = ({
aria-label={resolvedLabel}
aria-live={"polite"}
className={cn(
"inline-flex gap-2 items-center group/copy cursor-default wails-no-draggable text-left pointer-events-auto rounded-sm outline-none",
"group/copy wails-no-draggable pointer-events-auto inline-flex cursor-default items-center gap-2 rounded-sm text-left outline-none",
"focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
className,
)}
>
<span
className={cn(
"relative truncate min-w-0",
"relative min-w-0 truncate",
"[&_*]:transition-colors",
VARIANT_HOVER[variant],
)}
@@ -91,13 +91,15 @@ export const CopyToClipboard = ({
{children}
<span
aria-hidden={"true"}
className={"absolute bottom-0 left-0 right-0 border-b border-dashed border-transparent group-hover/copy:border-nb-gray-500 pointer-events-none"}
className={
"pointer-events-none absolute bottom-0 left-0 right-0 border-b border-dashed border-transparent group-hover/copy:border-nb-gray-500"
}
/>
</span>
<span
aria-hidden={"true"}
className={cn(
"shrink-0 inline-flex relative top-[2px] right-[1px]",
"relative right-[1px] top-[2px] inline-flex shrink-0",
iconAlignment === "left" ? "order-first" : "order-last",
iconClassName,
)}
client/ui/frontend/src/components/DropdownMenu.tsx
+4 -4
View File
@@ -32,7 +32,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"relative flex select-none items-center rounded-md pl-3 pr-2 py-1.5 text-sm outline-none cursor-default",
"relative flex cursor-default select-none items-center rounded-md py-1.5 pl-3 pr-2 text-sm outline-none",
"transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
menuItemVariants({ variant }),
@@ -102,7 +102,7 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex select-none items-center rounded-md pl-2 pr-2 py-1.5 text-sm outline-none cursor-default",
"relative flex cursor-default select-none items-center rounded-md py-1.5 pl-2 pr-2 text-sm outline-none",
"transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
menuItemVariants({ variant }),
@@ -135,7 +135,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
"transition-colors text-nb-gray-200 focus:bg-nb-gray-900 focus:text-nb-gray-50",
"text-nb-gray-200 transition-colors focus:bg-nb-gray-900 focus:text-nb-gray-50",
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className,
)}
@@ -160,7 +160,7 @@ const DropdownMenuRadioItem = React.forwardRef<
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
"transition-colors text-nb-gray-200 focus:bg-nb-gray-900 focus:text-nb-gray-50",
"text-nb-gray-200 transition-colors focus:bg-nb-gray-900 focus:text-nb-gray-50",
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className,
)}
client/ui/frontend/src/components/LanguagePicker.tsx
+24 -18
View File
@@ -74,8 +74,8 @@ export function LanguagePicker() {
};
return (
<div className={"flex items-center gap-6 justify-between"}>
<div className={"flex-1 max-w-md"}>
<div className={"flex items-center justify-between gap-6"}>
<div className={"max-w-md flex-1"}>
<Label as={"div"}>{t("settings.general.language.label")}</Label>
<HelpText margin={false}>{t("settings.general.language.help")}</HelpText>
</div>
@@ -91,10 +91,10 @@ export function LanguagePicker() {
aria-haspopup={"listbox"}
aria-expanded={open}
className={cn(
"inline-flex items-center gap-2 h-[40px] px-3 min-w-[240px]",
"inline-flex h-[40px] min-w-[240px] items-center gap-2 px-3",
"rounded-md border bg-white dark:bg-nb-gray-900",
"border-neutral-200 dark:border-nb-gray-700",
"text-xs font-semibold text-nb-gray-100 cursor-default outline-none",
"cursor-default text-xs font-semibold text-nb-gray-100 outline-none",
"hover:border-nb-gray-600 data-[state=open]:border-nb-gray-600",
"focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
"disabled:opacity-50",
@@ -103,15 +103,15 @@ export function LanguagePicker() {
<LanguagesIcon
size={16}
aria-hidden={"true"}
className={"text-nb-gray-200 shrink-0"}
className={"shrink-0 text-nb-gray-200"}
/>
<span className={"truncate flex-1 text-left"}>
<span className={"flex-1 truncate text-left"}>
{current ? labelFor(current) : "—"}
</span>
<ChevronDown
size={12}
aria-hidden={"true"}
className={"text-nb-gray-400 shrink-0"}
className={"shrink-0 text-nb-gray-400"}
/>
</button>
</Popover.Trigger>
@@ -122,7 +122,7 @@ export function LanguagePicker() {
sideOffset={6}
className={cn(
"w-[var(--radix-popover-trigger-width)]",
"rounded-lg border border-nb-gray-850 bg-nb-gray-920 shadow-lg p-1 z-50",
"z-50 rounded-lg border border-nb-gray-850 bg-nb-gray-920 p-1 shadow-lg",
"data-[side=bottom]:origin-top data-[side=top]:origin-bottom",
"data-[state=open]:animate-in",
"data-[state=open]:fade-in-0",
@@ -142,12 +142,12 @@ export function LanguagePicker() {
<div className={"px-1 pb-1"}>
<div
role={"search"}
className={"group flex items-center gap-2 px-1 h-8"}
className={"group flex h-8 items-center gap-2 px-1"}
>
<Search
size={14}
aria-hidden={"true"}
className={"text-nb-gray-200 shrink-0"}
className={"shrink-0 text-nb-gray-200"}
/>
<Command.Input
autoFocus
@@ -155,18 +155,20 @@ export function LanguagePicker() {
aria-label={t("settings.general.language.search")}
className={cn(
"w-full bg-transparent text-xs text-nb-gray-100 placeholder:text-nb-gray-300",
"outline-none border-none",
"border-none outline-none",
)}
/>
</div>
</div>
<ScrollArea.Root type={"auto"} className={"overflow-hidden -mx-1"}>
<ScrollArea.Root type={"auto"} className={"-mx-1 overflow-hidden"}>
<ScrollArea.Viewport className={"max-h-64 px-1"}>
<Command.List>
<Command.Empty>
<div
className={"px-3 py-4 text-center text-[0.7rem] text-nb-gray-400"}
className={
"px-3 py-4 text-center text-[0.7rem] text-nb-gray-400"
}
>
{t("settings.general.language.empty")}
</div>
@@ -180,17 +182,19 @@ export function LanguagePicker() {
value={`${lang.displayName} ${lang.englishName} ${lang.code}`}
onSelect={() => void select(lang.code)}
className={cn(
"flex items-center gap-2 px-2 py-2 rounded-md cursor-default outline-none my-0.5",
"my-0.5 flex cursor-default items-center gap-2 rounded-md px-2 py-2 outline-none",
"text-xs font-semibold text-nb-gray-200",
"data-[selected=true]:bg-nb-gray-850 data-[selected=true]:text-nb-gray-50",
)}
>
<span className={"flex-1 min-w-0 truncate"}>
<span className={"min-w-0 flex-1 truncate"}>
{labelFor(lang)}
</span>
<span
aria-hidden={"true"}
className={"w-4 shrink-0 flex items-center justify-center"}
className={
"flex w-4 shrink-0 items-center justify-center"
}
>
{checked && (
<CheckIcon
@@ -207,12 +211,14 @@ export function LanguagePicker() {
<ScrollArea.Scrollbar
orientation={"vertical"}
className={cn(
"flex select-none touch-none transition-colors",
"flex touch-none select-none transition-colors",
"w-1.5 bg-transparent py-1",
)}
>
<ScrollArea.Thumb
className={"flex-1 rounded-full bg-nb-gray-800 hover:bg-nb-gray-700 relative"}
className={
"relative flex-1 rounded-full bg-nb-gray-800 hover:bg-nb-gray-700"
}
/>
</ScrollArea.Scrollbar>
</ScrollArea.Root>
client/ui/frontend/src/components/ManagementServerSwitch.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export const ManagementServerSwitch = ({ value, onChange, fullWidth = false }: P
src={netbirdLogo}
alt={""}
aria-hidden={"true"}
className={"h-[0.8rem] aspect-[31/23] shrink-0"}
className={"aspect-[31/23] h-[0.8rem] shrink-0"}
/>
{t("settings.general.management.cloud")}
</SwitchItem>
client/ui/frontend/src/components/SquareIcon.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export const SquareIcon = ({
<div
aria-hidden={"true"}
className={cn(
"h-11 w-11 rounded-lg flex items-center justify-center border bg-nb-gray-920 border-nb-gray-900",
"flex h-11 w-11 items-center justify-center rounded-lg border border-nb-gray-900 bg-nb-gray-920",
variantClass[variant],
className,
)}
client/ui/frontend/src/components/VerticalTabs.tsx
+5 -5
View File
@@ -9,7 +9,7 @@ const Root = forwardRef<HTMLDivElement, Omit<Tabs.TabsProps, "orientation">>(
<Tabs.Root
ref={ref}
orientation={"vertical"}
className={cn("flex flex-1 min-h-0", className)}
className={cn("flex min-h-0 flex-1", className)}
{...props}
/>
);
@@ -23,7 +23,7 @@ const List = forwardRef<HTMLDivElement, Tabs.TabsListProps>(function VerticalTab
return (
<Tabs.List
ref={ref}
className={cn("w-full flex flex-col gap-1 p-5 pr-0", className)}
className={cn("flex w-full flex-col gap-1 p-5 pr-0", className)}
{...props}
/>
);
@@ -44,7 +44,7 @@ const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function VerticalTab
<Tabs.Trigger
ref={ref}
className={cn(
"group w-full flex items-center gap-3 py-2.5 px-2 rounded-lg cursor-default outline-none text-left",
"group flex w-full cursor-default items-center gap-3 rounded-lg px-2 py-2.5 text-left outline-none",
"transition-colors duration-150",
"data-[state=active]:bg-nb-gray-930",
"data-[state=inactive]:hover:bg-nb-gray-935",
@@ -57,13 +57,13 @@ const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function VerticalTab
size={iconSize}
aria-hidden={"true"}
className={cn(
"shrink-0 ml-2 transition-colors duration-150",
"ml-2 shrink-0 transition-colors duration-150",
"text-nb-gray-400 group-data-[state=active]:text-nb-gray-100",
)}
/>
<span
className={cn(
"font-medium text-sm truncate min-w-0 transition-colors duration-150",
"min-w-0 truncate text-sm font-medium transition-colors duration-150",
"text-nb-gray-400 group-data-[state=active]:text-nb-gray-100",
)}
>
client/ui/frontend/src/components/buttons/Button.tsx
+37 -37
View File
@@ -16,88 +16,88 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonVar
const buttonVariants = cva(
[
"relative",
"text-sm focus:z-10 focus:ring-2 font-medium focus:outline-none whitespace-nowrap shadow-sm select-none cursor-default",
"inline-flex gap-2 items-center justify-center transition-colors focus:ring-offset-1",
"disabled:opacity-40 disabled:cursor-not-allowed disabled:dark:text-nb-gray-300 dark:ring-offset-neutral-950/50",
"cursor-default select-none whitespace-nowrap text-sm font-medium shadow-sm focus:z-10 focus:outline-none focus:ring-2",
"inline-flex items-center justify-center gap-2 transition-colors focus:ring-offset-1",
"disabled:cursor-not-allowed disabled:opacity-40 dark:ring-offset-neutral-950/50 disabled:dark:text-nb-gray-300",
],
{
variants: {
variant: {
default: [
"bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-gray-200 text-gray-900",
"dark:focus:ring-zinc-800/50 dark:bg-nb-gray dark:text-gray-400 dark:border-gray-700/30 dark:hover:text-white dark:hover:bg-zinc-800/50",
"border-gray-200 bg-white text-gray-900 hover:bg-gray-100 hover:text-black focus:ring-zinc-200/50",
"dark:border-gray-700/30 dark:bg-nb-gray dark:text-gray-400 dark:hover:bg-zinc-800/50 dark:hover:text-white dark:focus:ring-zinc-800/50",
],
primary: [
"dark:focus:ring-netbird-600/50 dark:ring-offset-neutral-950/50 enabled:dark:bg-netbird disabled:dark:bg-nb-gray-900 dark:text-gray-100 enabled:dark:hover:text-white enabled:dark:hover:bg-netbird-500/80",
"enabled:bg-netbird enabled:text-white enabled:focus:ring-netbird-400/50 enabled:hover:bg-netbird-500",
"dark:text-gray-100 dark:ring-offset-neutral-950/50 dark:focus:ring-netbird-600/50 enabled:dark:bg-netbird enabled:dark:hover:bg-netbird-500/80 enabled:dark:hover:text-white disabled:dark:bg-nb-gray-900",
"enabled:bg-netbird enabled:text-white enabled:hover:bg-netbird-500 enabled:focus:ring-netbird-400/50",
],
secondary: [
"bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-gray-200 text-gray-900",
"border-gray-200 bg-white text-gray-900 hover:bg-gray-100 hover:text-black focus:ring-zinc-200/50",
"dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20",
"dark:bg-nb-gray-920 dark:text-gray-400 dark:border-gray-700/40 dark:hover:text-white dark:hover:bg-nb-gray-910",
"dark:border-gray-700/40 dark:bg-nb-gray-920 dark:text-gray-400 dark:hover:bg-nb-gray-910 dark:hover:text-white",
],
secondaryLighter: [
"bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-gray-200 text-gray-900",
"border-gray-200 bg-white text-gray-900 hover:bg-gray-100 hover:text-black focus:ring-zinc-200/50",
"dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20",
"dark:bg-nb-gray-900/70 dark:text-gray-400 dark:border-gray-700/70 dark:hover:text-white dark:hover:bg-nb-gray-800/60",
"dark:border-gray-700/70 dark:bg-nb-gray-900/70 dark:text-gray-400 dark:hover:bg-nb-gray-800/60 dark:hover:text-white",
],
subtle: [
"bg-nb-gray-50 hover:bg-nb-gray-100 focus:ring-nb-gray-200/60 border-nb-gray-200 text-nb-gray-900",
"border-nb-gray-200 bg-nb-gray-50 text-nb-gray-900 hover:bg-nb-gray-100 focus:ring-nb-gray-200/60",
"dark:ring-offset-neutral-950/50 dark:focus:ring-nb-gray-200/40",
"dark:bg-nb-gray-50 dark:text-nb-gray-900 dark:border-nb-gray-200 dark:hover:bg-nb-gray-100 dark:hover:text-nb-gray-950",
"dark:border-nb-gray-200 dark:bg-nb-gray-50 dark:text-nb-gray-900 dark:hover:bg-nb-gray-100 dark:hover:text-nb-gray-950",
],
input: [
"bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-neutral-200 text-gray-900",
"border-neutral-200 bg-white text-gray-900 hover:bg-gray-100 hover:text-black focus:ring-zinc-200/50",
"dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20",
"dark:bg-nb-gray-900 dark:text-gray-400 dark:border-nb-gray-700 dark:hover:bg-nb-gray-900/80",
"dark:border-nb-gray-700 dark:bg-nb-gray-900 dark:text-gray-400 dark:hover:bg-nb-gray-900/80",
],
dropdown: [
"bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-neutral-200 text-gray-900",
"border-neutral-200 bg-white text-gray-900 hover:bg-gray-100 hover:text-black focus:ring-zinc-200/50",
"dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20",
"dark:bg-nb-gray-900/40 dark:text-gray-400 dark:border-nb-gray-900 dark:hover:bg-nb-gray-900/50",
"dark:border-nb-gray-900 dark:bg-nb-gray-900/40 dark:text-gray-400 dark:hover:bg-nb-gray-900/50",
],
dotted: [
"bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-gray-200 text-gray-900 border-dashed",
"border-dashed border-gray-200 bg-white text-gray-900 hover:bg-gray-100 hover:text-black focus:ring-zinc-200/50",
"dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20",
"dark:bg-nb-gray-900/30 dark:text-gray-400 dark:border-gray-500/40 dark:hover:text-white dark:hover:bg-nb-gray-900/50",
"dark:border-gray-500/40 dark:bg-nb-gray-900/30 dark:text-gray-400 dark:hover:bg-nb-gray-900/50 dark:hover:text-white",
],
tertiary: [
"bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-gray-200 text-gray-900",
"dark:focus:ring-zinc-800/50 dark:bg-white dark:text-gray-800 dark:border-gray-700/40 dark:hover:bg-neutral-200 disabled:dark:bg-nb-gray-920 disabled:dark:text-nb-gray-300",
"border-gray-200 bg-white text-gray-900 hover:bg-gray-100 hover:text-black focus:ring-zinc-200/50",
"dark:border-gray-700/40 dark:bg-white dark:text-gray-800 dark:hover:bg-neutral-200 dark:focus:ring-zinc-800/50 disabled:dark:bg-nb-gray-920 disabled:dark:text-nb-gray-300",
],
white: [
"focus:ring-white/50 bg-white text-gray-800 border-white outline-none hover:bg-neutral-200 disabled:dark:bg-nb-gray-920 disabled:dark:text-nb-gray-300",
"disabled:dark:bg-nb-gray-900 disabled:dark:text-nb-gray-300 disabled:dark:border-nb-gray-900",
"border-white bg-white text-gray-800 outline-none hover:bg-neutral-200 focus:ring-white/50 disabled:dark:bg-nb-gray-920 disabled:dark:text-nb-gray-300",
"disabled:dark:border-nb-gray-900 disabled:dark:bg-nb-gray-900 disabled:dark:text-nb-gray-300",
],
outline: [
"bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-gray-200 text-gray-900",
"dark:focus:ring-zinc-800/50 dark:bg-transparent dark:text-netbird dark:border-netbird dark:hover:bg-nb-gray-900/30",
"border-gray-200 bg-white text-gray-900 hover:bg-gray-100 hover:text-black focus:ring-zinc-200/50",
"dark:border-netbird dark:bg-transparent dark:text-netbird dark:hover:bg-nb-gray-900/30 dark:focus:ring-zinc-800/50",
],
"danger-outline": [
"enabled:dark:focus:ring-red-800/20 enabled:dark:focus:bg-red-950/40 enabled:hover:dark:bg-red-950/50 enabled:dark:hover:border-red-800/50 dark:bg-transparent dark:text-red-500",
"dark:bg-transparent dark:text-red-500 enabled:dark:hover:border-red-800/50 enabled:hover:dark:bg-red-950/50 enabled:dark:focus:bg-red-950/40 enabled:dark:focus:ring-red-800/20",
],
"danger-text": [
"dark:bg-transparent dark:text-red-500 dark:hover:text-red-600 dark:border-transparent !px-0 !shadow-none !py-0 focus:ring-red-500/30 dark:ring-offset-neutral-950/50 rounded-sm",
"rounded-sm !px-0 !py-0 !shadow-none focus:ring-red-500/30 dark:border-transparent dark:bg-transparent dark:text-red-500 dark:ring-offset-neutral-950/50 dark:hover:text-red-600",
],
"default-outline": [
"dark:ring-offset-nb-gray-950/50 dark:focus:ring-nb-gray-500/20",
"dark:bg-transparent dark:text-nb-gray-400 dark:border-transparent dark:hover:text-white dark:hover:bg-nb-gray-900/30 dark:hover:border-nb-gray-800/50",
"data-[state=open]:dark:text-white data-[state=open]:dark:bg-nb-gray-900/30 data-[state=open]:dark:border-nb-gray-800/50",
"dark:border-transparent dark:bg-transparent dark:text-nb-gray-400 dark:hover:border-nb-gray-800/50 dark:hover:bg-nb-gray-900/30 dark:hover:text-white",
"data-[state=open]:dark:border-nb-gray-800/50 data-[state=open]:dark:bg-nb-gray-900/30 data-[state=open]:dark:text-white",
],
ghost: [
"dark:ring-offset-nb-gray-950/50 dark:focus:ring-nb-gray-500/20",
"dark:bg-transparent dark:text-nb-gray-400 dark:border-transparent dark:hover:text-white dark:hover:bg-nb-gray-900/30",
"dark:border-transparent dark:bg-transparent dark:text-nb-gray-400 dark:hover:bg-nb-gray-900/30 dark:hover:text-white",
],
danger: [
"dark:focus:ring-red-700/20 dark:focus:bg-red-700 hover:dark:bg-red-700 dark:hover:border-red-800/50 dark:bg-red-600 dark:text-red-100",
"dark:bg-red-600 dark:text-red-100 dark:hover:border-red-800/50 hover:dark:bg-red-700 dark:focus:bg-red-700 dark:focus:ring-red-700/20",
],
},
size: {
xs: "text-xs py-2.5 px-3.5",
xs2: "text-[0.78rem] py-[1.1rem] px-4 leading-[0]",
sm: "text-sm py-[9px] px-4",
md: "py-[9px] px-4",
lg: "text-lg py-[9px] px-4",
xs: "px-3.5 py-2.5 text-xs",
xs2: "px-4 py-[1.1rem] text-[0.78rem] leading-[0]",
sm: "px-4 py-[9px] text-sm",
md: "px-4 py-[9px]",
lg: "px-4 py-[9px] text-lg",
},
rounded: {
true: "rounded-md",
@@ -106,7 +106,7 @@ const buttonVariants = cva(
border: {
0: "border",
1: "border border-transparent",
2: "border border-t-0 border-b-0",
2: "border border-b-0 border-t-0",
},
},
},
client/ui/frontend/src/components/buttons/IconButton.tsx
+3 -3
View File
@@ -19,10 +19,10 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
disabled={disabled}
tabIndex={disabled ? -1 : 0}
className={cn(
"h-10 w-10 flex items-center justify-center rounded-lg cursor-default outline-none",
"text-nb-gray-400 hover:text-nb-gray-300 hover:bg-nb-gray-900",
"flex h-10 w-10 cursor-default items-center justify-center rounded-lg outline-none",
"text-nb-gray-400 hover:bg-nb-gray-900 hover:text-nb-gray-300",
"focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
"transition-colors duration-150 wails-no-draggable",
"wails-no-draggable transition-colors duration-150",
className,
)}
{...props}
client/ui/frontend/src/components/dialog/ConfirmDialog.tsx
+4 -2
View File
@@ -17,12 +17,14 @@ export const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(func
open
aria-label={ariaLabel}
aria-labelledby={ariaLabelledBy}
className={"wails-draggable select-none flex flex-col items-center static bg-transparent text-inherit p-0 m-0 max-w-none max-h-none border-0 w-full"}
className={
"wails-draggable static m-0 flex max-h-none w-full max-w-none select-none flex-col items-center border-0 bg-transparent p-0 text-inherit"
}
>
<div
ref={ref}
className={cn(
"flex flex-col items-center gap-5 text-center px-8 pt-6 pb-7",
"flex flex-col items-center gap-5 px-8 pb-7 pt-6 text-center",
isMacOS() && "pt-10",
)}
>
client/ui/frontend/src/components/dialog/Dialog.tsx
+11 -6
View File
@@ -1,4 +1,9 @@
import { forwardRef, type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes } from "react";
import {
forwardRef,
type ComponentPropsWithoutRef,
type ElementRef,
type HTMLAttributes,
} from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { X } from "lucide-react";
@@ -60,9 +65,9 @@ export const Content = forwardRef<ElementRef<typeof DialogPrimitive.Content>, Co
<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",
"relative z-[52] mx-auto w-full outline-none ring-0",
"focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0",
"rounded-lg border border-nb-gray-900 bg-nb-gray py-7 shadow-2xl",
"data-[state=open]:animate-in data-[state=open]:fade-in-0",
"data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1",
exitAnimation &&
@@ -129,7 +134,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("mt-2 text-sm leading-snug text-nb-gray-400", className)}
{...props}
/>
);
@@ -140,7 +145,7 @@ type FooterProps = HTMLAttributes<HTMLDivElement> & {
};
export const Footer = ({ className, separator = true, ...props }: FooterProps) => (
<div className={cn(separator && "border-t border-nb-gray-900 mt-6")}>
<div className={cn(separator && "mt-6 border-t border-nb-gray-900")}>
<div
className={cn(
"flex flex-col-reverse gap-3 sm:flex-row sm:justify-end",
client/ui/frontend/src/components/dialog/DialogActions.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ type DialogActionsProps = {
};
export const DialogActions = ({ children, className }: DialogActionsProps) => (
<div className={cn("wails-no-draggable flex flex-col gap-3 w-full mx-auto", className)}>
<div className={cn("wails-no-draggable mx-auto flex w-full flex-col gap-3", className)}>
{children}
</div>
);
client/ui/frontend/src/components/dialog/DialogDescription.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export const DialogDescription = ({
className,
align = "center",
}: DialogDescriptionProps) => (
<p className={cn("w-full text-sm text-nb-gray-300 select-none", alignClass[align], className)}>
<p className={cn("w-full select-none text-sm text-nb-gray-300", alignClass[align], className)}>
{children}
</p>
);
client/ui/frontend/src/components/dialog/DialogHeading.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ export const DialogHeading = ({
<h2
id={id}
className={cn(
"w-full text-base font-semibold text-nb-gray-50 select-none",
"w-full select-none text-base font-semibold text-nb-gray-50",
alignClass[align],
className,
)}
client/ui/frontend/src/components/empty-state/DaemonOutdatedOverlay.tsx
+7 -3
View File
@@ -18,11 +18,15 @@ export const DaemonOutdatedOverlay = () => {
return (
<div
className={"fixed inset-0 z-[100] flex items-center justify-center bg-nb-gray-950 backdrop-blur-sm cursor-default select-none wails-draggable"}
className={
"wails-draggable fixed inset-0 z-[100] flex cursor-default select-none items-center justify-center bg-nb-gray-950 backdrop-blur-sm"
}
>
<div className={"flex flex-col items-center gap-5 px-8 max-w-lg text-center"}>
<div className={"flex max-w-lg flex-col items-center gap-5 px-8 text-center"}>
<div
className={"h-11 w-11 rounded-xl flex items-center justify-center bg-nb-gray-920 border border-nb-gray-900 text-amber-500"}
className={
"flex h-11 w-11 items-center justify-center rounded-xl border border-nb-gray-900 bg-nb-gray-920 text-amber-500"
}
>
<AlertTriangleIcon size={20} />
</div>
client/ui/frontend/src/components/empty-state/DaemonUnavailableOverlay.tsx
+7 -3
View File
@@ -18,11 +18,15 @@ export const DaemonUnavailableOverlay = () => {
return (
<div
className={"fixed inset-0 z-[100] flex items-center justify-center bg-nb-gray-950 backdrop-blur-sm cursor-default select-none wails-draggable"}
className={
"wails-draggable fixed inset-0 z-[100] flex cursor-default select-none items-center justify-center bg-nb-gray-950 backdrop-blur-sm"
}
>
<div className={"flex flex-col items-center gap-5 px-8 max-w-lg text-center"}>
<div className={"flex max-w-lg flex-col items-center gap-5 px-8 text-center"}>
<div
className={"h-11 w-11 rounded-xl flex items-center justify-center bg-nb-gray-920 border border-nb-gray-900 text-red-500"}
className={
"flex h-11 w-11 items-center justify-center rounded-xl border border-nb-gray-900 bg-nb-gray-920 text-red-500"
}
>
<AlertCircleIcon size={20} />
</div>
client/ui/frontend/src/components/empty-state/EmptyState.tsx
+2 -2
View File
@@ -19,11 +19,11 @@ export const EmptyState = ({ icon, title, description, className }: Props) => {
return (
<div className={cn("py-12 text-center", className)}>
<div
className={"flex flex-col items-center justify-start max-w-sm mx-auto relative"}
className={"relative mx-auto flex max-w-sm flex-col items-center justify-start"}
style={{ top: contentTop("7.8rem") }}
>
<SquareIcon icon={icon} className={"mb-3"} />
<p className={"text-[0.95rem] font-medium text-nb-gray-200 mb-1"}>{title}</p>
<p className={"mb-1 text-[0.95rem] font-medium text-nb-gray-200"}>{title}</p>
{description && <p className={"text-sm text-nb-gray-350"}>{description}</p>}
</div>
</div>
client/ui/frontend/src/components/empty-state/NoResults.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export const NoResults = ({ icon = FunnelXIcon, title, description }: Props) =>
icon={icon}
title={title ?? t("common.noResults.title")}
description={description ?? t("common.noResults.description")}
className={"relative -top-[3.8rem] pointer-events-none"}
className={"pointer-events-none relative -top-[3.8rem]"}
/>
);
};
client/ui/frontend/src/components/empty-state/NotConnectedState.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { EmptyState } from "./EmptyState";
export const NotConnectedState = () => {
const { t } = useTranslation();
return (
<div className={"relative w-full top-[3rem]"}>
<div className={"relative top-[3rem] w-full"}>
<EmptyState
icon={GlobeOffIcon}
title={t("notConnected.title")}
client/ui/frontend/src/components/inputs/Input.tsx
+31 -29
View File
@@ -32,27 +32,27 @@ const inputVariants = cva("", {
variants: {
variant: {
default: [
"dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-nb-gray-700",
"ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
"border-neutral-200 placeholder:text-neutral-500 dark:border-nb-gray-700 dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70",
"ring-offset-neutral-200/20 focus-visible:ring-neutral-300/10 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20",
],
darker: [
"dark:bg-nb-gray-920 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-300 dark:border-nb-gray-800",
"ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
"border-neutral-300 placeholder:text-neutral-500 dark:border-nb-gray-800 dark:bg-nb-gray-920 dark:placeholder:text-neutral-400/70",
"ring-offset-neutral-200/20 focus-visible:ring-neutral-300/10 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20",
],
error: [
"dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-red-500 text-red-500",
"ring-offset-red-500/10 dark:ring-offset-red-500/10 dark:focus-visible:ring-red-500/10 focus-visible:ring-red-500/10",
"border-neutral-200 text-red-500 placeholder:text-neutral-500 dark:border-red-500 dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70",
"ring-offset-red-500/10 focus-visible:ring-red-500/10 dark:ring-offset-red-500/10 dark:focus-visible:ring-red-500/10",
],
warning: [
"dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-orange-400 text-orange-400",
"ring-offset-orange-400/10 dark:ring-offset-orange-400/10 dark:focus-visible:ring-orange-400/10 focus-visible:ring-orange-400/10",
"border-neutral-200 text-orange-400 placeholder:text-neutral-500 dark:border-orange-400 dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70",
"ring-offset-orange-400/10 focus-visible:ring-orange-400/10 dark:ring-offset-orange-400/10 dark:focus-visible:ring-orange-400/10",
],
},
prefixSuffixVariant: {
default: [
"dark:bg-nb-gray-900 border-neutral-200 dark:border-nb-gray-700 text-nb-gray-300",
"border-neutral-200 text-nb-gray-300 dark:border-nb-gray-700 dark:bg-nb-gray-900",
],
error: ["dark:bg-nb-gray-900 border-red-500 text-nb-gray-300 text-red-500"],
error: ["border-red-500 text-nb-gray-300 text-red-500 dark:bg-nb-gray-900"],
},
},
});
@@ -82,17 +82,17 @@ function buildInputClassName(
): string {
return cn(
inputVariants({ variant: opts.variant }),
"flex h-[40px] w-full rounded-md bg-white px-3 py-2 text-sm select-text",
"file:bg-transparent file:text-sm file:font-medium file:border-0",
"flex h-[40px] w-full select-text rounded-md bg-white px-3 py-2 text-sm",
"file:border-0 file:bg-transparent file:text-sm file:font-medium",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
"disabled:cursor-not-allowed disabled:opacity-40",
opts.hasCustomPrefix && "!border-l-0 !rounded-l-none",
opts.hasCustomPrefix && "!rounded-l-none !border-l-0",
opts.hasSuffix && "!pr-9",
opts.hasIcon && "!pl-10",
"border",
opts.readOnly && "!bg-nb-gray-910 text-nb-gray-350 !border-nb-gray-800",
opts.readOnly && "!border-nb-gray-800 !bg-nb-gray-910 text-nb-gray-350",
opts.showStepper &&
"!rounded-r-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]",
"!rounded-r-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
opts.className,
);
}
@@ -108,7 +108,7 @@ function InputAffix({
className={cn(
inputVariants({ prefixSuffixVariant: error ? "error" : "default" }),
"flex h-[40px] w-auto rounded-l-md bg-white px-3 py-2 text-sm",
"border items-center whitespace-nowrap",
"items-center whitespace-nowrap border",
disabled && "opacity-40",
className,
)}
@@ -122,7 +122,7 @@ function InputIconSlot({ icon, disabled }: Readonly<{ icon: ReactNode; disabled?
return (
<div
className={cn(
"absolute left-0 top-0 h-full flex items-center text-xs dark:text-nb-gray-300 pl-3 leading-[0]",
"absolute left-0 top-0 flex h-full items-center pl-3 text-xs leading-[0] dark:text-nb-gray-300",
disabled && "opacity-40",
)}
>
@@ -138,7 +138,7 @@ function InputSuffixSlot({
return (
<div
className={cn(
"absolute right-0 top-0 h-full flex items-center text-xs dark:text-nb-gray-300 pr-3 leading-[0] select-none pointer-events-none",
"pointer-events-none absolute right-0 top-0 flex h-full select-none items-center pr-3 text-xs leading-[0] dark:text-nb-gray-300",
disabled && "opacity-30",
)}
>
@@ -156,11 +156,11 @@ function NumberStepper({
return (
<div
className={cn(
"flex flex-col h-[40px] shrink-0 overflow-hidden",
"border border-l-0 rounded-r-md",
"flex h-[40px] shrink-0 flex-col overflow-hidden",
"rounded-r-md border border-l-0",
"border-neutral-200 dark:border-nb-gray-700 dark:bg-nb-gray-900",
error && "dark:border-red-500",
disabled && "opacity-40 pointer-events-none",
disabled && "pointer-events-none opacity-40",
)}
>
<button
@@ -168,7 +168,9 @@ function NumberStepper({
tabIndex={-1}
aria-label={t("common.increase")}
onClick={() => onStep(1)}
className={"flex-1 flex items-center justify-center w-9 hover:bg-nb-gray-800 transition-colors text-nb-gray-300 cursor-default"}
className={
"flex w-9 flex-1 cursor-default items-center justify-center text-nb-gray-300 transition-colors hover:bg-nb-gray-800"
}
>
<ChevronUp size={12} />
</button>
@@ -178,7 +180,7 @@ function NumberStepper({
aria-label={t("common.decrease")}
onClick={() => onStep(-1)}
className={cn(
"flex-1 flex items-center justify-center w-9 hover:bg-nb-gray-800 transition-colors text-nb-gray-300 cursor-default",
"flex w-9 flex-1 cursor-default items-center justify-center text-nb-gray-300 transition-colors hover:bg-nb-gray-800",
"border-t border-neutral-200 dark:border-nb-gray-700",
)}
>
@@ -193,7 +195,7 @@ function FieldMessage({ error, warning }: Readonly<{ error?: string; warning?: s
return (
<span
className={cn(
"text-xs mt-2 inline-flex items-center gap-1",
"mt-2 inline-flex items-center gap-1 text-xs",
error ? "text-red-500" : "text-orange-400",
)}
>
@@ -264,7 +266,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
<button
type={"button"}
onClick={() => setShowPassword((s) => !s)}
className={"hover:text-white transition-all pointer-events-auto"}
className={"pointer-events-auto transition-all hover:text-white"}
aria-label={t("common.togglePasswordVisibility")}
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -288,7 +290,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
<button
type={"button"}
onClick={onCopy}
className={"hover:text-white transition-all pointer-events-auto"}
className={"pointer-events-auto transition-all hover:text-white"}
aria-label={t("common.copy")}
>
{copied ? <Check size={16} /> : <Copy size={16} />}
@@ -311,9 +313,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
});
return (
<div className={"flex flex-col w-full min-w-0"}>
<div className={"flex w-full min-w-0 flex-col"}>
{label && <Label htmlFor={inputId}>{label}</Label>}
<div className={cn("flex relative h-[40px] w-full", maxWidthClass)}>
<div className={cn("relative flex h-[40px] w-full", maxWidthClass)}>
{customPrefix && (
<InputAffix
content={customPrefix}
@@ -325,7 +327,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
{icon && <InputIconSlot icon={icon} disabled={props.disabled} />}
<div className={"relative flex flex-grow min-w-0"}>
<div className={"relative flex min-w-0 flex-grow"}>
<input
id={inputId}
type={inputType}
client/ui/frontend/src/components/inputs/SearchInput.tsx
+4 -4
View File
@@ -16,12 +16,12 @@ export const SearchInput = forwardRef<HTMLInputElement, Props>(function SearchIn
return (
<div
role={"search"}
className={cn("flex items-center gap-2 px-1 h-10", disabled && "opacity-50")}
className={cn("flex h-10 items-center gap-2 px-1", disabled && "opacity-50")}
>
<SearchIcon
size={iconSize}
aria-hidden={"true"}
className={"text-nb-gray-300 shrink-0"}
className={"shrink-0 text-nb-gray-300"}
/>
<input
ref={ref}
@@ -31,7 +31,7 @@ export const SearchInput = forwardRef<HTMLInputElement, Props>(function SearchIn
{...props}
className={cn(
"w-full bg-transparent text-sm text-nb-gray-200 placeholder:text-nb-gray-400",
"outline-none border-none",
"border-none outline-none",
disabled && "cursor-not-allowed",
className,
)}
@@ -42,7 +42,7 @@ export const SearchInput = forwardRef<HTMLInputElement, Props>(function SearchIn
className={cn(
"shrink-0 select-none",
"inline-flex items-center justify-center",
"h-5 min-w-[20px] px-1.5 rounded",
"h-5 min-w-[20px] rounded px-1.5",
"border border-nb-gray-850 bg-nb-gray-920",
"text-[10px] font-medium text-nb-gray-400",
"wails-no-draggable",
client/ui/frontend/src/components/switches/FancyToggleSwitch.tsx
+5 -5
View File
@@ -42,7 +42,7 @@ export default function FancyToggleSwitch({
role={"status"}
aria-busy={"true"}
aria-live={"polite"}
className={cn("inline-block text-left w-full", className)}
className={cn("inline-block w-full text-left", className)}
>
<div className={"flex justify-between gap-10"}>
<div className={cn(textWrapperClassName)}>
@@ -58,7 +58,7 @@ export default function FancyToggleSwitch({
<div className={"mt-2 pr-1"}>
<div
aria-hidden={"true"}
className={"h-[24px] w-[44px] rounded-full bg-[#25282d] animate-pulse"}
className={"h-[24px] w-[44px] animate-pulse rounded-full bg-[#25282d]"}
/>
</div>
</div>
@@ -70,9 +70,9 @@ export default function FancyToggleSwitch({
<div
{...(disabled ? { inert: "" } : {})}
className={cn(
"cursor-default transition-all duration-300 relative z-[1]",
"inline-block text-left w-full",
disabled && "opacity-30 pointer-events-none",
"relative z-[1] cursor-default transition-all duration-300",
"inline-block w-full text-left",
disabled && "pointer-events-none opacity-30",
className,
)}
>
client/ui/frontend/src/components/switches/SwitchItemGroup.tsx
+2 -2
View File
@@ -48,8 +48,8 @@ export const SwitchItemGroup = ({
aria-label={ariaLabel}
aria-labelledby={ariaLabelledBy}
className={cn(
"flex shrink-0 rounded-lg border border-nb-gray-850 bg-nb-gray-910 p-1 overflow-hidden",
disabled && "opacity-50 pointer-events-none",
"flex shrink-0 overflow-hidden rounded-lg border border-nb-gray-850 bg-nb-gray-910 p-1",
disabled && "pointer-events-none opacity-50",
className,
)}
>
client/ui/frontend/src/components/switches/ToggleSwitch.tsx
+3 -3
View File
@@ -36,9 +36,9 @@ const switchVariants = cva("", {
},
"thumb-size": {
default:
"h-5 w-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-5",
small: "h-[14px] w-[14px] data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-[17px]",
large: "h-[30px] w-[30px] data-[state=unchecked]:translate-x-[1px] data-[state=checked]:translate-x-[31px]",
"h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
small: "h-[14px] w-[14px] data-[state=checked]:translate-x-[17px] data-[state=unchecked]:translate-x-0",
large: "h-[30px] w-[30px] data-[state=checked]:translate-x-[31px] data-[state=unchecked]:translate-x-[1px]",
},
},
});
client/ui/frontend/src/components/typography/HelpText.tsx
+2 -2
View File
@@ -11,9 +11,9 @@ type Props = {
export const HelpText = ({ children, margin = true, className, disabled = false }: Props) => (
<span
className={cn(
"text-[.81rem] dark:text-nb-gray-300 block font-light tracking-wide transition-all duration-300",
"block text-[.81rem] font-light tracking-wide transition-all duration-300 dark:text-nb-gray-300",
margin && "mb-2",
disabled && "opacity-30 pointer-events-none",
disabled && "pointer-events-none opacity-30",
className,
)}
>
client/ui/frontend/src/components/typography/Label.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import { type ComponentPropsWithoutRef, forwardRef, type Ref } from "react";
import { cn } from "@/lib/cn";
const labelVariants = cva(
"text-sm font-medium tracking-wider leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-1.5 inline-block dark:text-nb-gray-100 flex items-center gap-2",
"mb-1.5 inline-block flex items-center gap-2 text-sm font-medium leading-none tracking-wider peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-nb-gray-100",
);
type LabelProps = ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
@@ -21,7 +21,7 @@ export const Label = forwardRef<HTMLElement, LabelProps>(function Label(
labelVariants(),
className,
"select-none transition-all duration-300",
disabled && "opacity-30 pointer-events-none",
disabled && "pointer-events-none opacity-30",
);
if (as === "div") {