update wording

client/ui-wails/frontend/src/components/FancyToggleSwitch.tsx

@@ -5,75 +5,71 @@ import { ToggleSwitch } from "@/components/ToggleSwitch";
 import { cn } from "@/lib/cn";
 
 interface Props {
-  value: boolean;
-  onChange: (value: boolean) => void;
-  helpText?: React.ReactNode;
-  label?: React.ReactNode;
-  children?: React.ReactNode;
-  disabled?: boolean;
-  dataCy?: string;
-  className?: string;
-  labelClassName?: string;
-  textWrapperClassName?: string;
+    value: boolean;
+    onChange: (value: boolean) => void;
+    helpText?: React.ReactNode;
+    label?: React.ReactNode;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    dataCy?: string;
+    className?: string;
+    labelClassName?: string;
+    textWrapperClassName?: string;
 }
 
 export default function FancyToggleSwitch({
-  value,
-  onChange,
-  helpText,
-  label,
-  children,
-  disabled = false,
-  dataCy,
-  className,
-  labelClassName,
-  textWrapperClassName = "max-w-md",
+    value,
+    onChange,
+    helpText,
+    label,
+    children,
+    disabled = false,
+    dataCy,
+    className,
+    labelClassName,
+    textWrapperClassName = "max-w-lg",
 }: Readonly<Props>) {
-  const handleToggle = () => {
-    if (disabled) return;
-    onChange(!value);
-  };
+    const handleToggle = () => {
+        if (disabled) return;
+        onChange(!value);
+    };
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (disabled) return;
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      handleToggle();
-    }
-  };
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (disabled) return;
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            handleToggle();
+        }
+    };
 
-  return (
-    <div
-      onClick={handleToggle}
-      onKeyDown={handleKeyDown}
-      tabIndex={-1}
-      role={"switch"}
-      aria-checked={value}
-      className={cn(
-        "cursor-default transition-all duration-300 relative z-[1]",
-        "inline-block text-left w-full",
-        disabled && "opacity-50 pointer-events-none",
-        className,
-      )}
-    >
-      <div className={"flex justify-between gap-10"}>
-        <div className={cn(textWrapperClassName)}>
-          <Label className={labelClassName}>{label}</Label>
-          <HelpText margin={false}>{helpText}</HelpText>
+    return (
+        <div
+            onClick={handleToggle}
+            onKeyDown={handleKeyDown}
+            tabIndex={-1}
+            role={"switch"}
+            aria-checked={value}
+            className={cn(
+                "cursor-default transition-all duration-300 relative z-[1]",
+                "inline-block text-left w-full",
+                disabled && "opacity-30 pointer-events-none",
+                className,
+            )}
+        >
+            <div className={"flex justify-between gap-10"}>
+                <div className={cn(textWrapperClassName)}>
+                    <Label className={labelClassName}>{label}</Label>
+                    <HelpText margin={false}>{helpText}</HelpText>
+                </div>
+                <div className={"mt-2 pr-1"}>
+                    <ToggleSwitch checked={value} onCheckedChange={onChange} dataCy={dataCy} />
+                </div>
+            </div>
+            {children && value ? (
+                <div className="mt-4" onClick={(e) => e.stopPropagation()}>
+                    {children}
+                </div>
+            ) : null}
         </div>
-        <div className={"mt-2 pr-1"}>
-          <ToggleSwitch
-            checked={value}
-            onCheckedChange={onChange}
-            dataCy={dataCy}
-          />
-        </div>
-      </div>
-      {children && value ? (
-        <div className="mt-4" onClick={(e) => e.stopPropagation()}>
-          {children}
-        </div>
-      ) : null}
-    </div>
-  );
+    );
 }

client/ui-wails/frontend/src/modules/settings/SettingsNetwork.tsx

@@ -4,23 +4,24 @@ import { useSettings } from "@/modules/settings/SettingsContext.tsx";
 
 export function SettingsNetwork() {
     const { config, setField } = useSettings();
+
     return (
         <>
             <SectionGroup title={"Connectivity"}>
                 <FancyToggleSwitch
                     value={config.lazyConnectionEnabled}
                     onChange={(v) => setField("lazyConnectionEnabled", v)}
-                    label={"Lazy connections"}
+                    label={"Lazy Connections"}
                     helpText={
-                        "Only establish peer tunnels on first traffic instead of eagerly at startup."
+                        "Instead of maintaining always-on connections, NetBird activates them on-demand based on activity or signaling."
                     }
                 />
                 <FancyToggleSwitch
                     value={config.networkMonitor}
                     onChange={(v) => setField("networkMonitor", v)}
-                    label={"Network monitor"}
+                    label={"Reconnect on Network Change"}
                     helpText={
-                        "Reconnect automatically when the host network changes (Wi-Fi switch, VPN, sleep/wake)."
+                        "Monitor the network and automatically reconnect on changes such as Wi-Fi switching, Ethernet changes, or resume from sleep."
                     }
                 />
             </SectionGroup>
@@ -30,25 +31,19 @@ export function SettingsNetwork() {
                     value={!config.disableDns}
                     onChange={(v) => setField("disableDns", !v)}
                     label={"Enable DNS"}
-                    helpText={
-                        "Apply NetBird-managed DNS settings to the host resolver."
-                    }
+                    helpText={"Apply NetBird-managed DNS settings to the host resolver."}
                 />
                 <FancyToggleSwitch
                     value={!config.disableClientRoutes}
                     onChange={(v) => setField("disableClientRoutes", !v)}
-                    label={"Enable client routes"}
-                    helpText={
-                        "Accept routes advertised by other peers so this client can reach their networks."
-                    }
+                    label={"Enable Client Routes"}
+                    helpText={"Accept routes from other peers to reach their networks."}
                 />
                 <FancyToggleSwitch
                     value={!config.disableServerRoutes}
                     onChange={(v) => setField("disableServerRoutes", !v)}
-                    label={"Enable server routes"}
-                    helpText={
-                        "Advertise this host's local routes to other peers."
-                    }
+                    label={"Enable Server Routes"}
+                    helpText={"Advertise this host's local routes to other peers."}
                 />
             </SectionGroup>
         </>

client/ui-wails/frontend/src/modules/settings/SettingsSecurity.tsx

@@ -10,17 +10,17 @@ export function SettingsSecurity() {
                 <FancyToggleSwitch
                     value={config.blockInbound}
                     onChange={(v) => setField("blockInbound", v)}
-                    label={"Block inbound traffic"}
+                    label={"Block Inbound Traffic"}
                     helpText={
-                        "Drop all unsolicited inbound traffic on the NetBird interface."
+                        "Reject unsolicited connections from peers to this device and any networks it routes. Outbound traffic is unaffected."
                     }
                 />
                 <FancyToggleSwitch
                     value={config.blockLanAccess}
                     onChange={(v) => setField("blockLanAccess", v)}
-                    label={"Block LAN access"}
+                    label={"Block LAN Access"}
                     helpText={
-                        "Prevent peers from reaching this host's local network."
+                        "Prevent peers from reaching your local network or its devices when this device routes their traffic."
                     }
                 />
             </SectionGroup>
@@ -28,21 +28,24 @@ export function SettingsSecurity() {
             <SectionGroup title={"Encryption"}>
                 <FancyToggleSwitch
                     value={config.rosenpassEnabled}
-                    onChange={(v) => setField("rosenpassEnabled", v)}
-                    label={"Quantum-resistant encryption"}
+                    onChange={(v) => {
+                        setField("rosenpassEnabled", v);
+                        if (!v) setField("rosenpassPermissive", false);
+                    }}
+                    label={"Enable Quantum-Resistance"}
                     helpText={
-                        "Add a post-quantum key exchange (Rosenpass) on top of WireGuard."
+                        "Add a post-quantum key exchange via Rosenpass on top of WireGuard®."
                     }
-                >
-                    <FancyToggleSwitch
-                        value={config.rosenpassPermissive}
-                        onChange={(v) => setField("rosenpassPermissive", v)}
-                        label={"Permissive mode"}
-                        helpText={
-                            "Allow connections to peers without quantum-resistance support."
-                        }
-                    />
-                </FancyToggleSwitch>
+                />
+                <FancyToggleSwitch
+                    value={config.rosenpassPermissive}
+                    onChange={(v) => setField("rosenpassPermissive", v)}
+                    label={"Enable Permissive Mode"}
+                    helpText={
+                        "Allow connections to peers without quantum-resistance support."
+                    }
+                    disabled={!config.rosenpassEnabled}
+                />
             </SectionGroup>
         </>
     );