sendnrw/netbird
2
0
Fork 0
mirror of https://github.com/netbirdio/netbird.git synced 2026-09-20 21:59: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/modules/auto-update/UpdateBadge.tsx
+3 -1
View File
@@ -17,7 +17,9 @@ export const UpdateBadge = forwardRef<HTMLDivElement, Props>(function UpdateBadg
{...rest}
>
<span
className={"animate-ping absolute inline-flex h-[15px] w-[15px] rounded-full bg-netbird opacity-20 pointer-events-none"}
className={
"pointer-events-none absolute inline-flex h-[15px] w-[15px] animate-ping rounded-full bg-netbird opacity-20"
}
/>
<ArrowUpCircleIcon size={size} className={"text-netbird"} />
</div>
client/ui/frontend/src/modules/auto-update/UpdateVersionCard.tsx
+4 -2
View File
@@ -68,7 +68,7 @@ function Card({ children, className }: Readonly<{ children: ReactNode; className
return (
<div
className={cn(
"w-full flex items-center justify-between gap-4 rounded-md border border-nb-gray-800 bg-nb-gray-910 px-4 py-3",
"flex w-full items-center justify-between gap-4 rounded-md border border-nb-gray-800 bg-nb-gray-910 px-4 py-3",
className,
)}
>
@@ -86,7 +86,9 @@ function Link({ url, children }: Readonly<{ url: string; children: ReactNode }>)
<button
type={"button"}
onClick={() => openUrl(url)}
className={"text-sm text-netbird hover:underline hover:underline-offset-4 hover:decoration-[0.5px] font-medium"}
className={
"text-sm font-medium text-netbird hover:underline hover:decoration-[0.5px] hover:underline-offset-4"
}
>
{children}
</button>
client/ui/frontend/src/modules/login/LoginWaitingForBrowserDialog.tsx
+3 -1
View File
@@ -65,7 +65,9 @@ export default function LoginWaitingForBrowserDialog() {
type={"button"}
onClick={tryAgain}
disabled={!uri}
className={"wails-no-draggable text-netbird hover:underline disabled:opacity-40 disabled:cursor-not-allowed"}
className={
"wails-no-draggable text-netbird hover:underline disabled:cursor-not-allowed disabled:opacity-40"
}
>
{t("browserLogin.tryAgain")}
</button>
client/ui/frontend/src/modules/main/MainConnectionStatusSwitch.tsx
+20 -16
View File
@@ -220,13 +220,13 @@ export const MainConnectionStatusSwitch = () => {
return (
<div
className={cn("flex flex-col h-full w-full items-center gap-4", "relative")}
className={cn("flex h-full w-full flex-col items-center gap-4", "relative")}
style={{ top: contentTop("11.7rem") }}
>
<img
src={netbirdFullLogo}
alt={"NetBird"}
className={"h-7 w-auto select-none mb-4 wails-no-draggable"}
className={"wails-no-draggable mb-4 h-7 w-auto select-none"}
draggable={false}
/>
@@ -246,7 +246,9 @@ export const MainConnectionStatusSwitch = () => {
id={"nb-connection-status"}
role={"status"}
aria-live={"polite"}
className={"text-sm font-medium text-nb-gray-200 tracking-wide transition-colors duration-300 select-none wails-no-draggable mb-1"}
className={
"wails-no-draggable mb-1 select-none text-sm font-medium tracking-wide text-nb-gray-200 transition-colors duration-300"
}
>
{t(STATUS_KEY[connState])}
</p>
@@ -256,14 +258,16 @@ export const MainConnectionStatusSwitch = () => {
iconClassName={"-top-px"}
tabIndex={show && fqdn ? 0 : -1}
className={cn(
"min-h-[1em] max-h-[1em] mt-1 transition-opacity duration-300 max-w-full",
"mt-1 max-h-[1em] min-h-[1em] max-w-full transition-opacity duration-300",
"relative left-[0.55rem]",
show && fqdn ? "opacity-100" : "opacity-0 pointer-events-none",
show && fqdn ? "opacity-100" : "pointer-events-none opacity-0",
)}
>
<TruncatedText
text={shortenDns(fqdn) || " "}
className={"block font-mono text-[0.8rem] leading-tight text-nb-gray-300 truncate max-w-[310px] h-[18px]"}
className={
"block h-[18px] max-w-[310px] truncate font-mono text-[0.8rem] leading-tight text-nb-gray-300"
}
/>
</CopyToClipboard>
<LocalIpLine ip={ip} ipv6={ipv6} show={show} />
@@ -284,9 +288,9 @@ const LocalIpLine = ({ ip, ipv6, show }: { ip: string; ipv6: string; show: boole
variant={"bright"}
tabIndex={show && ip ? 0 : -1}
className={cn(
"min-h-[1em] max-h-[1em] mt-1 transition-opacity duration-300",
"mt-1 max-h-[1em] min-h-[1em] transition-opacity duration-300",
"relative left-[0.55rem]",
show && ip ? "opacity-100" : "opacity-0 pointer-events-none",
show && ip ? "opacity-100" : "pointer-events-none opacity-0",
)}
>
<span className={"font-mono text-[0.8rem] leading-tight text-nb-gray-300"}>
@@ -299,9 +303,9 @@ const LocalIpLine = ({ ip, ipv6, show }: { ip: string; ipv6: string; show: boole
return (
<div
className={cn(
"min-h-[1em] transition-opacity duration-300 max-w-full",
"relative wails-no-draggable",
show && ip ? "opacity-100" : "opacity-0 pointer-events-none",
"min-h-[1em] max-w-full transition-opacity duration-300",
"wails-no-draggable relative",
show && ip ? "opacity-100" : "pointer-events-none opacity-0",
)}
>
<Popover.Root open={open} onOpenChange={setOpen}>
@@ -313,7 +317,7 @@ const LocalIpLine = ({ ip, ipv6, show }: { ip: string; ipv6: string; show: boole
aria-haspopup={"dialog"}
aria-expanded={open}
className={cn(
"group relative inline-flex items-center outline-none cursor-default rounded-sm",
"group relative inline-flex cursor-default items-center rounded-sm outline-none",
"focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
"transition-colors",
)}
@@ -348,7 +352,7 @@ const LocalIpLine = ({ ip, ipv6, show }: { ip: string; ipv6: string; show: boole
className={cn(
"z-50 min-w-64 max-w-[280px] overflow-hidden",
"rounded-lg border border-nb-gray-900 bg-nb-gray-935",
"p-1 shadow-lg outline-none text-nb-gray-200",
"p-1 text-nb-gray-200 shadow-lg outline-none",
"flex flex-col",
)}
>
@@ -385,14 +389,14 @@ const IpRow = ({ value }: { value: string }) => {
"group/iprow relative flex items-center justify-between gap-3",
"rounded-md px-2 py-1.5 text-left",
"text-nb-gray-200 hover:bg-nb-gray-900 hover:text-nb-gray-50",
"transition-colors outline-none cursor-default",
"cursor-default outline-none transition-colors",
"focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/60",
)}
>
<span className={"font-mono text-[0.75rem] truncate min-w-0"}>{value}</span>
<span className={"min-w-0 truncate font-mono text-[0.75rem]"}>{value}</span>
<span
aria-hidden={"true"}
className={"shrink-0 inline-flex items-center text-nb-gray-200"}
className={"inline-flex shrink-0 items-center text-nb-gray-200"}
>
{copied ? <CheckIcon size={11} /> : <CopyIcon size={11} />}
</span>
client/ui/frontend/src/modules/main/MainExitNodeSwitcher.tsx
+22 -16
View File
@@ -78,7 +78,7 @@ export const MainExitNodeSwitcher = () => {
}}
style={{ width: "var(--radix-popover-trigger-width)" }}
className={cn(
"z-50 overflow-hidden rounded-lg border border-nb-gray-900 bg-nb-gray-935 p-1 text-nb-gray-200 shadow-lg select-none wails-no-draggable",
"wails-no-draggable z-50 select-none overflow-hidden rounded-lg border border-nb-gray-900 bg-nb-gray-935 p-1 text-nb-gray-200 shadow-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",
@@ -100,7 +100,7 @@ export const MainExitNodeSwitcher = () => {
<NoneRow isActive={!active} onSelect={() => handleSelect(NONE_VALUE)} />
{hasAny && <div className={"-mx-1 my-1 h-px bg-nb-gray-910"} />}
{hasAny && (
<ScrollArea.Root type={"auto"} className={"overflow-hidden -mx-1"}>
<ScrollArea.Root type={"auto"} className={"-mx-1 overflow-hidden"}>
<ScrollArea.Viewport className={"max-h-72 px-1"}>
{exitNodes.map((n) => (
<ExitNodeRow
@@ -115,12 +115,14 @@ export const MainExitNodeSwitcher = () => {
<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",
)}
>
<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>
@@ -151,14 +153,14 @@ const ExitNodeTriggerCard = forwardRef<HTMLButtonElement, TriggerProps>(
tabIndex={0}
disabled={disabled}
className={cn(
"w-full flex items-center gap-3 p-2.5 pr-5 rounded-xl outline-none text-left",
"flex w-full items-center gap-3 rounded-xl p-2.5 pr-5 text-left outline-none",
"border border-nb-gray-920 bg-nb-gray-940",
"transition-colors duration-150",
"wails-no-draggable",
"focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
disabled
? "opacity-60 cursor-not-allowed"
: "cursor-default hover:bg-nb-gray-935 hover:border-nb-gray-900 data-[state=open]:bg-nb-gray-935 data-[state=open]:border-nb-gray-900",
? "cursor-not-allowed opacity-60"
: "cursor-default hover:border-nb-gray-900 hover:bg-nb-gray-935 data-[state=open]:border-nb-gray-900 data-[state=open]:bg-nb-gray-935",
className,
)}
{...props}
@@ -166,7 +168,7 @@ const ExitNodeTriggerCard = forwardRef<HTMLButtonElement, TriggerProps>(
<div
aria-hidden={"true"}
className={cn(
"h-9 w-9 rounded-md flex items-center justify-center shrink-0",
"flex h-9 w-9 shrink-0 items-center justify-center rounded-md",
active
? "bg-green-500/25 text-green-400"
: "bg-nb-gray-900 text-nb-gray-300",
@@ -175,18 +177,20 @@ const ExitNodeTriggerCard = forwardRef<HTMLButtonElement, TriggerProps>(
<ExitNodeIcon size={14} />
</div>
<div className={"min-w-0 flex-1"}>
<span className={"block font-medium text-sm text-nb-gray-100 truncate"}>
<span className={"block truncate text-sm font-medium text-nb-gray-100"}>
{title}
</span>
<TruncatedText
text={description}
className={"block text-[0.85rem] font-medium text-nb-gray-400 truncate max-w-full"}
className={
"block max-w-full truncate text-[0.85rem] font-medium text-nb-gray-400"
}
/>
</div>
<ChevronsUpDown
size={16}
aria-hidden={"true"}
className={"text-nb-gray-400 shrink-0"}
className={"shrink-0 text-nb-gray-400"}
/>
</button>
);
@@ -205,13 +209,15 @@ const NoneRow = ({ isActive, onSelect }: NoneRowProps) => {
value={NONE_VALUE}
onSelect={onSelect}
className={cn(
"flex gap-2 items-center px-2 py-2 pr-3",
"rounded-md outline-none cursor-default text-sm",
"flex items-center gap-2 px-2 py-2 pr-3",
"cursor-default rounded-md text-sm outline-none",
"data-[selected=true]:bg-nb-gray-900",
)}
>
<span className={"min-w-0 flex-1 truncate"}>{t("exitNodes.dropdown.noneTitle")}</span>
{isActive && <Check size={16} aria-hidden={"true"} className={"shrink-0 text-netbird"} />}
{isActive && (
<Check size={16} aria-hidden={"true"} className={"shrink-0 text-netbird"} />
)}
</Command.Item>
);
};
@@ -228,8 +234,8 @@ const ExitNodeRow = ({ id, label, isActive, onSelect }: ExitNodeRowProps) => (
value={id}
onSelect={onSelect}
className={cn(
"flex gap-2 items-center px-2 py-2 pr-3",
"rounded-md outline-none cursor-default text-sm",
"flex items-center gap-2 px-2 py-2 pr-3",
"cursor-default rounded-md text-sm outline-none",
"data-[selected=true]:bg-nb-gray-900",
)}
>
client/ui/frontend/src/modules/main/MainHeader.tsx
+15 -9
View File
@@ -82,7 +82,9 @@ export const MainHeader = () => {
<DropdownMenuContent
align={"end"}
sideOffset={8}
className={"min-w-52 select-none data-[state=closed]:!animate-none data-[state=closed]:!duration-0"}
className={
"min-w-52 select-none data-[state=closed]:!animate-none data-[state=closed]:!duration-0"
}
>
{updateAvailable && (
<>
@@ -102,7 +104,7 @@ export const MainHeader = () => {
</>
)}
<DropdownMenuItem onClick={openSettings}>
<div className={"flex items-center gap-2 w-full"}>
<div className={"flex w-full items-center gap-2"}>
<Settings size={14} aria-hidden={"true"} />
<span className={"flex-1"}>{t("header.menu.settings")}</span>
<DropdownMenuShortcut>
@@ -132,10 +134,14 @@ export const MainHeader = () => {
{updateAvailable && (
<span
aria-hidden={"true"}
className={"pointer-events-none absolute top-1.5 right-1.5 flex h-2.5 w-2.5 items-center justify-center"}
className={
"pointer-events-none absolute right-1.5 top-1.5 flex h-2.5 w-2.5 items-center justify-center"
}
>
<span
className={"absolute inset-0 rounded-full bg-netbird opacity-60 animate-ping"}
className={
"absolute inset-0 animate-ping rounded-full bg-netbird opacity-60"
}
/>
<span className={"relative h-1.5 w-1.5 rounded-full bg-netbird"} />
</span>
@@ -146,20 +152,20 @@ export const MainHeader = () => {
return (
<div
className={cn(
"shrink-0 cursor-default wails-draggable relative z-10",
"flex items-center h-12 top-3",
"wails-draggable relative z-10 shrink-0 cursor-default",
"top-3 flex h-12 items-center",
)}
>
{/* Windows narrower width compensates for the OS frame Wails counts differently than macOS.
See https://github.com/wailsapp/wails/issues/3260 */}
<div
className={cn(
"grid grid-cols-3 items-center shrink-0",
"grid shrink-0 grid-cols-3 items-center",
isWindows() ? "w-[364px]" : "w-[380px]",
)}
>
<div />
<div className={"flex justify-center ml-4"}>{profileSlot}</div>
<div className={"ml-4 flex justify-center"}>{profileSlot}</div>
<div />
</div>
<div className={"absolute right-[1.3rem] top-1/2 -translate-y-1/2"}>{settingsSlot}</div>
@@ -176,7 +182,7 @@ type ViewModeItemProps = {
const ViewModeItem = ({ icon: Icon, label, selected, onSelect }: ViewModeItemProps) => (
<DropdownMenuItem onClick={onSelect} role={"menuitemradio"} aria-checked={selected}>
<div className={"flex items-center gap-2 w-full"}>
<div className={"flex w-full items-center gap-2"}>
<Icon size={14} aria-hidden={"true"} />
<span className={"flex-1"}>{label}</span>
{selected && <Check size={14} className={"text-netbird"} aria-hidden={"true"} />}
client/ui/frontend/src/modules/main/MainPage.tsx
+6 -6
View File
@@ -44,18 +44,18 @@ const MainBody = () => {
const isAdvanced = viewMode === "advanced";
return (
<div className={"wails-draggable flex flex-1 min-h-0"}>
<div className={"wails-draggable flex min-h-0 flex-1"}>
{/* Windows narrower width compensates for the OS frame Wails counts differently than macOS.
See https://github.com/wailsapp/wails/issues/3260 */}
<div
className={cn(
"relative flex flex-col items-center shrink-0 ",
"relative flex shrink-0 flex-col items-center",
isWindows() ? "w-[364px]" : "w-[380px]",
)}
>
<MainConnectionStatusSwitch />
{!features.disableNetworks && (
<div className={"absolute left-5 right-5 bottom-5 wails-no-draggable"}>
<div className={"wails-no-draggable absolute bottom-5 left-5 right-5"}>
<MainExitNodeSwitcher />
</div>
)}
@@ -88,7 +88,7 @@ const AdvancedAppRightPanel = () => {
else el.setAttribute("inert", "");
}}
className={cn(
"flex-1 min-h-0 min-w-0 flex flex-col",
"flex min-h-0 min-w-0 flex-1 flex-col",
!isConnected && "pointer-events-none select-none",
)}
aria-hidden={!isConnected}
@@ -98,14 +98,14 @@ const AdvancedAppRightPanel = () => {
role={"tabpanel"}
id={`nb-tabpanel-${section}`}
aria-labelledby={`nb-tab-${section}`}
className={"flex-1 min-h-0 flex flex-col"}
className={"flex min-h-0 flex-1 flex-col"}
>
{section === "peers" && <Peers />}
{section === "networks" && <Networks />}
</div>
</div>
{!isConnected && (
<div className={"absolute inset-0 z-20 flex pointer-events-auto bg-nb-gray-940"}>
<div className={"pointer-events-auto absolute inset-0 z-20 flex bg-nb-gray-940"}>
<NotConnectedState />
</div>
)}
client/ui/frontend/src/modules/main/advanced/Navigation.tsx
+2 -2
View File
@@ -79,7 +79,7 @@ export const Navigation = () => {
role={"tablist"}
aria-orientation={"horizontal"}
aria-label={t("nav.peers.title")}
className={"wails-no-draggable shrink-0 flex items-stretch "}
className={"wails-no-draggable flex shrink-0 items-stretch"}
>
{tabs.map((tab, index) => {
const isActive = tab.value === section;
@@ -110,7 +110,7 @@ export const Navigation = () => {
isLast && "rounded-tr-xl",
"focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/60",
isActive ? "text-netbird" : "text-nb-gray-400 hover:text-nb-gray-300",
isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-default",
isDisabled ? "cursor-not-allowed opacity-50" : "cursor-default",
)}
>
<Icon size={14} aria-hidden={"true"} />
client/ui/frontend/src/modules/main/advanced/networks/NetworkFilters.tsx
+4 -4
View File
@@ -40,11 +40,11 @@ export const NetworkFilters = ({ value, onChange, counts, disabled }: Props) =>
tabIndex={0}
aria-label={t("common.filter")}
className={cn(
"inline-flex items-center gap-1.5 h-9 px-2 rounded-md",
"inline-flex h-9 items-center gap-1.5 rounded-md px-2",
"text-sm text-nb-gray-200",
"outline-none hover:bg-nb-gray-900 data-[state=open]:bg-nb-gray-900 transition-colors duration-150",
"outline-none transition-colors duration-150 hover:bg-nb-gray-900 data-[state=open]:bg-nb-gray-900",
"focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
"disabled:opacity-50 disabled:pointer-events-none",
"disabled:pointer-events-none disabled:opacity-50",
"wails-no-draggable cursor-default",
)}
>
@@ -71,7 +71,7 @@ export const NetworkFilters = ({ value, onChange, counts, disabled }: Props) =>
</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 size={14} className={"text-netbird"} />}
</span>
client/ui/frontend/src/modules/main/advanced/networks/Networks.tsx
+36 -23
View File
@@ -160,9 +160,9 @@ export const Networks = () => {
};
return (
<div className={"flex flex-col w-full h-full min-h-0"}>
<div className={"flex items-center gap-2 px-6 py-2.5 border-b border-nb-gray-910"}>
<div className={"flex-1 min-w-0"}>
<div className={"flex h-full min-h-0 w-full flex-col"}>
<div className={"flex items-center gap-2 border-b border-nb-gray-910 px-6 py-2.5"}>
<div className={"min-w-0 flex-1"}>
<SearchInput
ref={searchRef}
placeholder={t("networks.search.placeholder")}
@@ -175,7 +175,7 @@ export const Networks = () => {
{filtered.length === 0 ? (
<NoResults />
) : (
<ScrollArea.Root type={"auto"} className={"flex-1 min-h-0 overflow-hidden"}>
<ScrollArea.Root type={"auto"} className={"min-h-0 flex-1 overflow-hidden"}>
<ScrollArea.Viewport ref={setScrollParent} className={"h-full w-full"}>
{scrollParent && (
<NetworksList
@@ -188,12 +188,14 @@ export const Networks = () => {
<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>
@@ -205,7 +207,7 @@ export const Networks = () => {
"border-t border-nb-gray-910",
)}
>
<span className={"flex-1 text-xs font-medium text-nb-gray-300 tabular-nums"}>
<span className={"flex-1 text-xs font-medium tabular-nums text-nb-gray-300"}>
{t("networks.bulk.selectionCount", {
selected: selectedInView,
total: filtered.length,
@@ -217,10 +219,10 @@ export const Networks = () => {
onClick={onBulkClick}
aria-label={t("networks.bulk.label")}
className={cn(
"inline-flex items-center h-8 px-3 rounded-md",
"inline-flex h-8 items-center rounded-md px-3",
"text-xs font-medium text-nb-gray-100",
"bg-nb-gray-920 hover:bg-nb-gray-910 border border-nb-gray-900 hover:border-nb-gray-850",
"transition-colors outline-none wails-no-draggable cursor-pointer",
"border border-nb-gray-900 bg-nb-gray-920 hover:border-nb-gray-850 hover:bg-nb-gray-910",
"wails-no-draggable cursor-pointer outline-none transition-colors",
"focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
)}
>
@@ -341,8 +343,8 @@ const NetworkRow = ({ network: n, index, onKeyDown, onToggle, setRowRef }: Netwo
return (
<div
className={cn(
"group relative flex items-start gap-2.5 pl-6 pr-9 py-3 min-w-0",
"hover:bg-nb-gray-900/40 transition-colors",
"group relative flex min-w-0 items-start gap-2.5 py-3 pl-6 pr-9",
"transition-colors hover:bg-nb-gray-900/40",
"wails-no-draggable",
)}
>
@@ -361,19 +363,26 @@ const NetworkRow = ({ network: n, index, onKeyDown, onToggle, setRowRef }: Netwo
/>
<ResourceIconBadge type={resourceTypeOf(n)} />
<div
className={"min-w-0 flex-1 flex flex-col leading-tight relative pointer-events-none"}
className={
"pointer-events-none relative flex min-w-0 flex-1 flex-col leading-tight"
}
>
<div>
<CopyToClipboard message={n.id} onKeyDown={handleKey}>
<TruncatedText
text={n.id}
className={"block text-[0.81rem] font-medium text-nb-gray-100 truncate max-w-[300px]"}
className={
"block max-w-[300px] truncate text-[0.81rem] font-medium text-nb-gray-100"
}
/>
</CopyToClipboard>
</div>
<Subtitle network={n} onKeyDown={handleKey} />
</div>
<div aria-hidden={"true"} className={"shrink-0 self-center relative pointer-events-none"}>
<div
aria-hidden={"true"}
className={"pointer-events-none relative shrink-0 self-center"}
>
<NetworkToggle checked={n.selected} />
</div>
</div>
@@ -386,8 +395,8 @@ const ResourceIconBadge = ({ type }: { type: ResourceType }) => {
<div
aria-hidden={"true"}
className={cn(
"h-9 w-9 shrink-0 rounded-md flex items-center justify-center mt-[0.25rem]",
"bg-nb-gray-920 border border-nb-gray-900 text-nb-gray-300",
"mt-[0.25rem] flex h-9 w-9 shrink-0 items-center justify-center rounded-md",
"border border-nb-gray-900 bg-nb-gray-920 text-nb-gray-300",
)}
>
<Icon size={14} />
@@ -413,7 +422,9 @@ const Subtitle = ({ network, onKeyDown }: SubtitleProps) => {
<CopyToClipboard message={network.range} onKeyDown={onKeyDown}>
<TruncatedText
text={network.range}
className={"block text-xs font-mono text-nb-gray-400 truncate max-w-[300px]"}
className={
"block max-w-[300px] truncate font-mono text-xs text-nb-gray-400"
}
/>
</CopyToClipboard>
</div>
@@ -431,7 +442,7 @@ type DomainSubtitleProps = {
const DomainSubtitle = ({ domain, ips, onKeyDown }: DomainSubtitleProps) => {
const span = (
<span className={"block text-xs font-mono text-nb-gray-400 truncate max-w-[300px]"}>
<span className={"block max-w-[300px] truncate font-mono text-xs text-nb-gray-400"}>
{domain}
</span>
);
@@ -449,7 +460,7 @@ const DomainSubtitle = ({ domain, ips, onKeyDown }: DomainSubtitleProps) => {
interactive
keepOpenOnClick
contentClassName={cn(
"max-w-[18rem] max-h-72 overflow-auto",
"max-h-72 max-w-[18rem] overflow-auto",
"rounded-lg border border-nb-gray-900 bg-nb-gray-935",
"p-2 pr-4",
)}
@@ -476,7 +487,9 @@ const ResolvedIpsTooltip = ({ ips }: { ips: string[] }) => {
<li key={ip}>
<CopyToClipboard message={ip} className={"px-1 py-0.5"}>
<span
className={"font-mono text-[0.72rem] text-nb-gray-100 whitespace-nowrap"}
className={
"whitespace-nowrap font-mono text-[0.72rem] text-nb-gray-100"
}
>
{ip}
</span>
@@ -498,8 +511,8 @@ const NetworkToggle = ({ checked, mixed }: ToggleProps) => {
return (
<span
className={cn(
"shrink-0 inline-flex h-5 w-9 items-center rounded-full",
"transition-colors wails-no-draggable",
"inline-flex h-5 w-9 shrink-0 items-center rounded-full",
"wails-no-draggable transition-colors",
checked || mixed ? "bg-netbird" : "bg-nb-gray-700",
mixed && "opacity-60",
)}
client/ui/frontend/src/modules/main/advanced/peers/PeerFilters.tsx
+4 -4
View File
@@ -40,11 +40,11 @@ export const PeerFilters = ({ value, onChange, counts, disabled }: Props) => {
tabIndex={0}
aria-label={t("common.filter")}
className={cn(
"inline-flex items-center gap-1.5 h-9 px-2 rounded-md",
"inline-flex h-9 items-center gap-1.5 rounded-md px-2",
"text-sm text-nb-gray-200",
"outline-none hover:bg-nb-gray-900 data-[state=open]:bg-nb-gray-900 transition-colors duration-150",
"outline-none transition-colors duration-150 hover:bg-nb-gray-900 data-[state=open]:bg-nb-gray-900",
"focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
"disabled:opacity-50 disabled:pointer-events-none",
"disabled:pointer-events-none disabled:opacity-50",
"wails-no-draggable cursor-default",
)}
>
@@ -71,7 +71,7 @@ export const PeerFilters = ({ value, onChange, counts, disabled }: Props) => {
</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 size={14} className={"text-netbird"} />}
</span>
client/ui/frontend/src/modules/profiles/ProfileDropdown.tsx
+31 -20
View File
@@ -88,7 +88,7 @@ export const ProfileDropdown = ({ onManageProfiles }: ProfileDropdownProps) => {
listRef.current?.focus();
}}
className={cn(
"z-50 min-w-64 overflow-hidden rounded-lg border border-nb-gray-900 bg-nb-gray-935 p-1 text-nb-gray-200 shadow-lg select-none wails-no-draggable",
"wails-no-draggable z-50 min-w-64 select-none overflow-hidden rounded-lg border border-nb-gray-900 bg-nb-gray-935 p-1 text-nb-gray-200 shadow-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",
@@ -111,7 +111,10 @@ export const ProfileDropdown = ({ onManageProfiles }: ProfileDropdownProps) => {
>
{sortedProfiles.length > 0 && (
<>
<ScrollArea.Root type={"auto"} className={"overflow-hidden -mx-1"}>
<ScrollArea.Root
type={"auto"}
className={"-mx-1 overflow-hidden"}
>
<ScrollArea.Viewport className={"max-h-60 px-1"}>
{sortedProfiles.map((profile) => (
<ProfileRow
@@ -125,11 +128,15 @@ export const ProfileDropdown = ({ onManageProfiles }: ProfileDropdownProps) => {
<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",
)}
>
<ScrollArea.Thumb className={"flex-1 rounded-full bg-nb-gray-800 hover:bg-nb-gray-700 relative"} />
<ScrollArea.Thumb
className={
"relative flex-1 rounded-full bg-nb-gray-800 hover:bg-nb-gray-700"
}
/>
</ScrollArea.Scrollbar>
</ScrollArea.Root>
<div className={"-mx-1 h-px bg-nb-gray-910"} />
@@ -143,13 +150,17 @@ export const ProfileDropdown = ({ onManageProfiles }: ProfileDropdownProps) => {
disabled={!onManageProfiles}
className={cn(
"flex items-center gap-2 px-2 py-1.5",
"rounded-md outline-none cursor-default text-sm",
"cursor-default rounded-md text-sm outline-none",
"data-[selected=true]:bg-nb-gray-900",
"data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none",
"data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
)}
>
<Settings2 size={14} aria-hidden={"true"} className={"shrink-0"} />
<span className={"truncate flex-1"}>
<Settings2
size={14}
aria-hidden={"true"}
className={"shrink-0"}
/>
<span className={"flex-1 truncate"}>
{t("profile.dropdown.manageProfiles")}
</span>
</Command.Item>
@@ -167,13 +178,13 @@ const ProfileTriggerSkeleton = () => (
role={"status"}
aria-busy={"true"}
aria-live={"polite"}
className={"h-10 flex items-center gap-2 px-3 rounded-lg select-none wails-no-draggable"}
className={"wails-no-draggable flex h-10 select-none items-center gap-2 rounded-lg px-3"}
>
<div
aria-hidden={"true"}
className={"size-4 rounded-full bg-nb-gray-900 animate-pulse shrink-0"}
className={"size-4 shrink-0 animate-pulse rounded-full bg-nb-gray-900"}
/>
<div aria-hidden={"true"} className={"h-4 w-24 rounded bg-nb-gray-900 animate-pulse"} />
<div aria-hidden={"true"} className={"h-4 w-24 animate-pulse rounded bg-nb-gray-900"} />
</div>
);
@@ -194,12 +205,12 @@ const ProfileTriggerButton = forwardRef<HTMLButtonElement, ProfileTriggerButtonP
aria-label={t("header.profile.switch")}
aria-haspopup={"listbox"}
className={cn(
"h-10 flex items-center gap-2 px-3 rounded-lg outline-none cursor-default select-none wails-no-draggable",
"wails-no-draggable flex h-10 cursor-default select-none items-center gap-2 rounded-lg px-3 outline-none",
"text-nb-gray-200 hover:bg-nb-gray-900",
"data-[state=open]:bg-nb-gray-900",
"disabled:opacity-50 disabled:hover:bg-transparent",
"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}
@@ -207,15 +218,15 @@ const ProfileTriggerButton = forwardRef<HTMLButtonElement, ProfileTriggerButtonP
<Icon
size={16}
aria-hidden={"true"}
className={"text-nb-gray-200 shrink-0 wails-no-draggable"}
className={"wails-no-draggable shrink-0 text-nb-gray-200"}
/>
<span className={"text-sm font-medium truncate max-w-[140px] wails-no-draggable"}>
<span className={"wails-no-draggable max-w-[140px] truncate text-sm font-medium"}>
{name}
</span>
<ChevronDown
size={14}
aria-hidden={"true"}
className={"text-nb-gray-200 shrink-0 wails-no-draggable"}
className={"wails-no-draggable shrink-0 text-nb-gray-200"}
/>
</button>
);
@@ -235,13 +246,13 @@ const ProfileRow = ({ profile, isActive, onSelect }: ProfileRowProps) => {
value={profile.id}
onSelect={() => onSelect(profile.id)}
className={cn(
"flex gap-2 px-2 py-2 pr-3 w-auto last:mb-1",
"rounded-md outline-none cursor-default text-sm",
"flex w-auto gap-2 px-2 py-2 pr-3 last:mb-1",
"cursor-default rounded-md text-sm outline-none",
"data-[selected=true]:bg-nb-gray-900",
showEmail ? "items-start" : "items-center",
)}
>
<div className={"flex flex-col min-w-0 flex-1 leading-tight"}>
<div className={"flex min-w-0 flex-1 flex-col leading-tight"}>
<span className={"truncate"}>{profile.name}</span>
{showEmail && <TruncatedEmail email={profile.email} />}
</div>
@@ -267,7 +278,7 @@ const TruncatedEmail = ({ email }: { email: string }) => {
}, [email]);
const span = (
<span ref={ref} className={"text-xs mt-0.5 text-nb-gray-300 truncate max-w-[180px]"}>
<span ref={ref} className={"mt-0.5 max-w-[180px] truncate text-xs text-nb-gray-300"}>
{email}
</span>
);
client/ui/frontend/src/modules/profiles/ProfilesTab.tsx
+20 -16
View File
@@ -125,7 +125,7 @@ export function ProfilesTab() {
<div
className={cn(
"bg-nb-gray-930/60 border border-nb-gray-900 rounded-xl overflow-hidden",
"overflow-hidden rounded-xl border border-nb-gray-900 bg-nb-gray-930/60",
)}
>
<ProfilesTable
@@ -138,17 +138,19 @@ export function ProfilesTab() {
{loaded && ordered.length === 0 && (
<div
className={"flex flex-col items-center justify-center py-10 text-center"}
className={
"flex flex-col items-center justify-center py-10 text-center"
}
>
<UserCircle
size={28}
aria-hidden={"true"}
className={"text-nb-gray-500 mb-2"}
className={"mb-2 text-nb-gray-500"}
/>
<p className={"text-sm font-semibold text-nb-gray-200"}>
{t("settings.profiles.emptyTitle")}
</p>
<p className={"mt-1 text-xs text-nb-gray-400 max-w-sm text-balance"}>
<p className={"mt-1 max-w-sm text-balance text-xs text-nb-gray-400"}>
{t("settings.profiles.emptyDescription")}
</p>
</div>
@@ -271,7 +273,7 @@ const ProfilesTable = ({
return (
<table
aria-label={t("settings.profiles.section.profiles")}
className={"w-full text-sm border-separate border-spacing-0"}
className={"w-full border-separate border-spacing-0 text-sm"}
>
<tbody className={"flex flex-col"}>
{ordered.map((profile, index) => (
@@ -347,19 +349,21 @@ const ProfileRow = ({
>
<td
className={cn(
"flex gap-2 min-w-0 leading-tight flex-1",
"flex min-w-0 flex-1 gap-2 leading-tight",
showEmail ? "items-start" : "items-center",
)}
>
<Icon
size={15}
aria-hidden={"true"}
className={cn("text-nb-gray-200 shrink-0", showEmail ? "mt-0.5" : "")}
className={cn("shrink-0 text-nb-gray-200", showEmail ? "mt-0.5" : "")}
/>
<div className={"flex flex-col min-w-0 flex-1 leading-tight"}>
<div className={"flex items-center gap-2 min-w-0"}>
<div className={"flex min-w-0 flex-1 flex-col leading-tight"}>
<div className={"flex min-w-0 items-center gap-2"}>
<span
className={"truncate font-medium text-nb-gray-100 select-text cursor-text"}
className={
"cursor-text select-text truncate font-medium text-nb-gray-100"
}
>
{profile.name}
</span>
@@ -397,7 +401,7 @@ const TruncatedEmail = ({ email }: { email: string }) => {
const span = (
<span
ref={ref}
className={"text-xs text-nb-gray-300 truncate mt-0.5 select-text cursor-text"}
className={"mt-0.5 cursor-text select-text truncate text-xs text-nb-gray-300"}
>
{email}
</span>
@@ -490,15 +494,15 @@ const ActionIconButton = ({
aria-disabled={disabled || undefined}
tabIndex={hidden || !tabbable ? -1 : 0}
className={cn(
"h-9 w-9 inline-flex items-center justify-center rounded-md cursor-default outline-none",
"inline-flex h-9 w-9 cursor-default items-center justify-center rounded-md outline-none",
"transition-colors duration-150",
"focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
variant === "danger"
? "text-nb-gray-400 hover:text-red-500 hover:bg-red-500/10"
: "text-nb-gray-400 hover:text-nb-gray-100 hover:bg-nb-gray-900",
hidden && "opacity-0 pointer-events-none",
? "text-nb-gray-400 hover:bg-red-500/10 hover:text-red-500"
: "text-nb-gray-400 hover:bg-nb-gray-900 hover:text-nb-gray-100",
hidden && "pointer-events-none opacity-0",
disabled &&
"opacity-40 cursor-not-allowed hover:!text-nb-gray-400 hover:!bg-transparent",
"cursor-not-allowed opacity-40 hover:!bg-transparent hover:!text-nb-gray-400",
)}
>
<Icon size={16} aria-hidden={"true"} />
client/ui/frontend/src/modules/session/SessionExpirationDialog.tsx
+3 -1
View File
@@ -167,7 +167,9 @@ export default function SessionExpirationDialog() {
{!expired && (
<div
className={"font-mono font-semibold text-2xl tabular-nums text-nb-gray-50 tracking-wider"}
className={
"font-mono text-2xl font-semibold tabular-nums tracking-wider text-nb-gray-50"
}
aria-live={"polite"}
>
{formatRemaining(remaining)}
client/ui/frontend/src/modules/settings/SettingsAbout.tsx
+22 -10
View File
@@ -8,14 +8,18 @@ import netbirdFull from "@/assets/logos/netbird-full.svg";
const GithubIcon = (props: SVGProps<SVGSVGElement>) => (
<svg viewBox={"0 0 24 24"} fill={"currentColor"} {...props}>
<path
d={"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"}
d={
"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
}
/>
</svg>
);
const SlackIcon = (props: SVGProps<SVGSVGElement>) => (
<svg viewBox={"0 0 24 24"} fill={"currentColor"} {...props}>
<path
d={"M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"}
d={
"M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"
}
/>
</svg>
);
@@ -82,19 +86,23 @@ export function SettingsAbout() {
return (
<div
className={"flex flex-col items-center justify-center gap-4 max-w-2xl mx-auto min-h-[calc(100vh-12rem)]"}
className={
"mx-auto flex min-h-[calc(100vh-12rem)] max-w-2xl flex-col items-center justify-center gap-4"
}
>
<img src={netbirdFull} alt={t("common.netbird")} className={"h-7 w-auto"} />
<div className={"flex flex-col items-center gap-0.5 text-center"}>
<button
type={"button"}
onClick={handleVersionClick}
className={"text-sm font-semibold text-nb-gray-100 cursor-text select-text bg-transparent outline-none"}
className={
"cursor-text select-text bg-transparent text-sm font-semibold text-nb-gray-100 outline-none"
}
>
{daemonVersion === "development" ? (
<span>
{t("settings.about.clientName")}{" "}
<span className={" text-yellow-400 font-mono"}>
<span className={"font-mono text-yellow-400"}>
{t("settings.about.development")}
</span>
</span>
@@ -102,11 +110,11 @@ export function SettingsAbout() {
t("settings.about.client", { version: daemonVersion })
)}
</button>
<p className={"text-sm text-nb-gray-250 cursor-text select-text font-medium"}>
<p className={"cursor-text select-text text-sm font-medium text-nb-gray-250"}>
{guiVersion === "development" ? (
<span>
{t("settings.about.guiName")}{" "}
<span className={" text-yellow-400 font-mono"}>
<span className={"font-mono text-yellow-400"}>
{t("settings.about.development")}
</span>
</span>
@@ -118,7 +126,7 @@ export function SettingsAbout() {
<UpdateVersionCard />
<p className={"text-sm text-nb-gray-300 text-center mt-2"}>
<p className={"mt-2 text-center text-sm text-nb-gray-300"}>
{t("settings.about.copyright", { year: new Date().getFullYear() })}
</p>
<div
@@ -130,7 +138,9 @@ export function SettingsAbout() {
type={"button"}
tabIndex={0}
onClick={() => openUrl(url)}
className={"inline-flex items-center gap-1.5 rounded-sm outline-none decoration-[0.5px] underline-offset-4 hover:text-nb-gray-100 hover:underline transition focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940"}
className={
"inline-flex items-center gap-1.5 rounded-sm decoration-[0.5px] underline-offset-4 outline-none transition hover:text-nb-gray-100 hover:underline focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940"
}
>
<Icon aria-hidden={"true"} className={iconClassName ?? "h-3.5 w-3.5"} />
<span>{label}</span>
@@ -146,7 +156,9 @@ export function SettingsAbout() {
type={"button"}
tabIndex={0}
onClick={() => openUrl(link.url)}
className={"rounded-sm outline-none decoration-[0.5px] underline-offset-4 hover:text-nb-gray-100 hover:underline transition focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940"}
className={
"rounded-sm decoration-[0.5px] underline-offset-4 outline-none transition hover:text-nb-gray-100 hover:underline focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940"
}
>
{link.label}
</button>
client/ui/frontend/src/modules/settings/SettingsAccent.tsx
+1 -1
View File
@@ -108,7 +108,7 @@ function Accent({ onDone }: Readonly<{ onDone: () => void }>) {
return (
<div
className={`fixed inset-0 z-50 bg-black/5 transition-opacity duration-500 pointer-events-none ${visible ? "opacity-100" : "opacity-0"}`}
className={`pointer-events-none fixed inset-0 z-50 bg-black/5 transition-opacity duration-500 ${visible ? "opacity-100" : "opacity-0"}`}
>
<canvas ref={canvasRef} className={"block"} />
</div>
client/ui/frontend/src/modules/settings/SettingsGeneral.tsx
+2 -2
View File
@@ -63,7 +63,7 @@ export function SettingsGeneral() {
<SectionGroup title={t("settings.general.section.connection")}>
<div>
<div className={"flex items-start gap-3"}>
<div className={"flex-1 min-w-0"}>
<div className={"min-w-0 flex-1"}>
<Label htmlFor={managementUrlId}>
{t("settings.general.management.label")}
</Label>
@@ -72,7 +72,7 @@ export function SettingsGeneral() {
<ManagementServerSwitch value={mode} onChange={setMode} />
</div>
{mode === ManagementMode.SelfHosted && (
<div className={"flex items-start gap-3 mt-2"}>
<div className={"mt-2 flex items-start gap-3"}>
<Input
id={managementUrlId}
ref={inputRef}
client/ui/frontend/src/modules/settings/SettingsNavigation.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export const SettingsNavigation = () => {
) : undefined;
return (
<div className={"flex flex-col w-52 shrink-0 items-center select-none"}>
<div className={"flex w-52 shrink-0 select-none flex-col items-center"}>
<VerticalTabs.List aria-label={t("settings.nav.label")}>
<VerticalTabs.Trigger
value={"general"}
client/ui/frontend/src/modules/settings/SettingsPage.tsx
+7 -5
View File
@@ -83,7 +83,7 @@ export const SettingsPage = () => {
return (
<>
{isMacOS() ? (
<div className={"wails-draggable cursor-default select-none h-12 shrink-0"} />
<div className={"wails-draggable h-12 shrink-0 cursor-default select-none"} />
) : (
<div className={"h-px shrink-0 bg-nb-gray-920/0"} />
)}
@@ -95,10 +95,10 @@ export const SettingsPage = () => {
<ScrollArea.Root
key={active}
type={"auto"}
className={"flex-1 min-h-0 overflow-hidden"}
className={"min-h-0 flex-1 overflow-hidden"}
>
<ScrollArea.Viewport className={"h-full w-full"}>
<div className={"py-6 px-7"}>
<div className={"px-7 py-6"}>
{visibleTabs.map((tab) => (
<VerticalTabs.Content key={tab} value={tab}>
{TAB_CONTENT[tab]}
@@ -109,12 +109,14 @@ export const SettingsPage = () => {
<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/modules/settings/SettingsSSH.tsx
+3 -3
View File
@@ -93,11 +93,11 @@ export function SettingsSSH() {
/>
<div
className={cn(
"flex items-center gap-6 justify-between",
config.disableSshAuth && "opacity-50 pointer-events-none",
"flex items-center justify-between gap-6",
config.disableSshAuth && "pointer-events-none opacity-50",
)}
>
<div className={"flex-1 max-w-md"}>
<div className={"max-w-md flex-1"}>
<Label htmlFor={jwtTtlId}>{t("settings.ssh.jwtTtl.label")}</Label>
<HelpText margin={false}>{t("settings.ssh.jwtTtl.help")}</HelpText>
</div>
client/ui/frontend/src/modules/settings/SettingsSection.tsx
+6 -4
View File
@@ -15,12 +15,12 @@ export const SectionGroup = ({
tabIndex={disabled ? -1 : 0}
{...(disabled ? { inert: "" } : {})}
className={cn(
"mb-8 last:mb-1 px-1 rounded-md outline-none",
"mb-8 rounded-md px-1 outline-none last:mb-1",
"focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
disabled && "opacity-30 pointer-events-none",
disabled && "pointer-events-none opacity-30",
)}
>
<h2 className={"text-xs uppercase tracking-wider text-nb-gray-400 mb-4 font-semibold"}>
<h2 className={"mb-4 text-xs font-semibold uppercase tracking-wider text-nb-gray-400"}>
{title}
</h2>
<div className={"flex flex-col gap-5"}>{children}</div>
@@ -32,7 +32,9 @@ export const SettingsBottomBar = ({ children }: { children: ReactNode }) => (
<div className={"h-[3.2rem] shrink-0"} aria-hidden={"true"} />
<div className={"absolute bottom-0 left-0 w-full"}>
<div
className={"w-full flex justify-end gap-3 px-8 py-5 border-t border-nb-gray-920 bg-nb-gray-940"}
className={
"flex w-full justify-end gap-3 border-t border-nb-gray-920 bg-nb-gray-940 px-8 py-5"
}
>
{children}
</div>
client/ui/frontend/src/modules/settings/SettingsSkeleton.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import Skeleton from "react-loading-skeleton";
export const SettingsSkeleton = () => {
return (
<div className={"gap-6 flex flex-col"}>
<div className={"flex flex-col gap-6"}>
<div>
<Skeleton width={100} height={16} className={"mb-4"} />
<div>
client/ui/frontend/src/modules/settings/SettingsTroubleshooting.tsx
+16 -12
View File
@@ -94,10 +94,10 @@ export function SettingsTroubleshooting() {
disabled={!capture}
/>
<div
className={"flex items-center gap-6 justify-between"}
className={"flex items-center justify-between gap-6"}
{...(capture ? {} : { inert: "" })}
>
<div className={"flex-1 max-w-md"}>
<div className={"max-w-md flex-1"}>
<Label htmlFor={durationId} disabled={!capture}>
{t("settings.troubleshooting.duration.label")}
</Label>
@@ -136,7 +136,9 @@ export function SettingsTroubleshooting() {
function CenteredPanel({ children }: Readonly<{ children: ReactNode }>) {
return (
<div
className={"absolute inset-0 flex flex-col items-center justify-center gap-5 p-8 text-center"}
className={
"absolute inset-0 flex flex-col items-center justify-center gap-5 p-8 text-center"
}
>
{children}
</div>
@@ -153,7 +155,7 @@ function ProgressSection({
<CenteredPanel>
<SquareIcon icon={Loader2} className={"[&_svg]:animate-spin"} />
<div className={"flex flex-col items-center gap-2 max-w-sm"}>
<div className={"flex max-w-sm flex-col items-center gap-2"}>
<DialogHeading className={"text-balance"}>{stageLabel(stage, t)}</DialogHeading>
<DialogDescription>
{t("settings.troubleshooting.progress.description")}
@@ -162,7 +164,9 @@ function ProgressSection({
{stage.kind === "capturing" && (
<div
className={"font-mono font-semibold text-2xl tabular-nums text-nb-gray-50 tracking-wider"}
className={
"font-mono text-2xl font-semibold tabular-nums tracking-wider text-nb-gray-50"
}
aria-live={"polite"}
>
{formatRemaining(stage.remainingSec)}
@@ -207,7 +211,7 @@ function DoneResult({
<CenteredPanel>
<SquareIcon icon={CircleCheckBig} className={"[&_svg]:text-green-500"} />
<div className={"flex flex-col items-center gap-2 max-w-sm"}>
<div className={"flex max-w-sm flex-col items-center gap-2"}>
<DialogHeading className={"text-balance"}>
{showKey
? t("settings.troubleshooting.done.uploadedTitle")
@@ -221,9 +225,7 @@ function DoneResult({
docs: (
<a
href={SUPPORT_DOCS_URL}
aria-label={t(
"settings.about.community.documentation",
)}
aria-label={t("settings.about.community.documentation")}
onClick={(e) => {
e.preventDefault();
Browser.OpenURL(SUPPORT_DOCS_URL).catch(() =>
@@ -244,7 +246,7 @@ function DoneResult({
</DialogDescription>
</div>
<div className={"w-full max-w-sm flex flex-col gap-3"}>
<div className={"flex w-full max-w-sm flex-col gap-3"}>
{showKey && <Input value={result.uploadedKey} readOnly copy />}
{result.path && !showKey && (
@@ -256,7 +258,7 @@ function DoneResult({
<button
type={"button"}
onClick={onRevealPath}
className={"pointer-events-auto hover:text-white transition-all"}
className={"pointer-events-auto transition-all hover:text-white"}
aria-label={t("settings.troubleshooting.done.openFileLocation")}
>
<FolderOpen size={16} aria-hidden={"true"} />
@@ -268,7 +270,9 @@ function DoneResult({
{uploadFailed && (
<div
role={"alert"}
className={"rounded-md border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300"}
className={
"rounded-md border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300"
}
>
{result.uploadFailureReason
? t("settings.troubleshooting.uploadFailedWithReason", {
client/ui/frontend/src/modules/welcome/WelcomeStepTray.tsx
+2 -2
View File
@@ -29,12 +29,12 @@ export function WelcomeStepTray({ onContinue }: Readonly<WelcomeStepTrayProps>)
<img
src={trayScreenshot}
alt={""}
className={"w-full h-auto select-none pointer-events-none rounded-2xl"}
className={"pointer-events-none h-auto w-full select-none rounded-2xl"}
draggable={false}
/>
</div>
<div className={"flex flex-col w-full gap-1"}>
<div className={"flex w-full flex-col gap-1"}>
<DialogHeading id={"nb-welcome-title"} align={"left"}>
{t("welcome.title")}
</DialogHeading>