update padding and text

2026-07-24 01:11:29 +02:00 · 2026-06-08 16:02:42 +02:00
parent 10d84b758f
commit b067544c8a
8 changed files with 29 additions and 84 deletions
--- a/client/ui/frontend/src/components/SquareIcon.tsx
+++ b/client/ui/frontend/src/components/SquareIcon.tsx
@@ -25,7 +25,7 @@ type SquareIconProps = {

 export const SquareIcon = ({
    icon: Icon,
-    iconSize = 20,
+    iconSize = 18,
    variant = "default",
    className,
 }: SquareIconProps) => (
--- a/client/ui/frontend/src/components/empty-state/EmptyState.tsx
+++ b/client/ui/frontend/src/components/empty-state/EmptyState.tsx
@@ -1,7 +1,5 @@
 import { ComponentType } from "react";
-import { useTranslation } from "react-i18next";
-import { Browser } from "@wailsio/runtime";
-import { ExternalLinkIcon, LucideProps } from "lucide-react";
+import { LucideProps } from "lucide-react";
 import { cn } from "@/lib/cn";
 import { SquareIcon } from "@/components/SquareIcon";

@@ -9,54 +7,20 @@ type Props = {
    icon: ComponentType<LucideProps>;
    title: string;
    description?: string;
-    learnMoreUrl?: string;
-    learnMoreTopic?: string;
    className?: string;
 };

-const openUrl = (url: string) => {
-    void Browser.OpenURL(url).catch(() => window.open(url, "_blank"));
-};
-
-export const EmptyState = ({
-    icon,
-    title,
-    description,
-    learnMoreUrl,
-    learnMoreTopic,
-    className,
-}: Props) => {
-    const { t } = useTranslation();
+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 top-6"
+                    "flex flex-col items-center justify-start max-w-sm mx-auto relative top-[7.8rem]"
                }
            >
                <SquareIcon icon={icon} className={"mb-3"} />
                <p className={"text-[0.95rem] font-medium text-nb-gray-200 mb-1"}>{title}</p>
                {description && <p className={"text-sm text-nb-gray-350"}>{description}</p>}
-                {learnMoreUrl && learnMoreTopic && (
-                    <p className={"text-sm text-nb-gray-350"}>
-                        {t("common.learnMoreAbout")}{" "}
-                        <a
-                            href={learnMoreUrl}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                openUrl(learnMoreUrl);
-                            }}
-                            className={cn(
-                                "text-netbird hover:underline underline-offset-4",
-                                "cursor-pointer wails-no-draggable",
-                                "inline-flex items-center gap-1",
-                            )}
-                        >
-                            {learnMoreTopic}
-                            <ExternalLinkIcon size={12} className={"shrink-0"} />
-                        </a>
-                    </p>
-                )}
            </div>
        </div>
    );
--- a/client/ui/frontend/src/components/empty-state/NoResults.tsx
+++ b/client/ui/frontend/src/components/empty-state/NoResults.tsx
@@ -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-[2.8rem]"}
+            className={"relative -top-[3.8rem]"}
        />
    );
 };
--- a/client/ui/frontend/src/modules/main/advanced/networks/Networks.tsx
+++ b/client/ui/frontend/src/modules/main/advanced/networks/Networks.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState, type ComponentType } from "react";
 import { useTranslation } from "react-i18next";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
-import { GlobeIcon, type LucideProps, NetworkIcon, WorkflowIcon } from "lucide-react";
+import { GlobeIcon, Layers3Icon, type LucideProps, NetworkIcon, WorkflowIcon } from "lucide-react";
 import type { Network } from "@bindings/services/models.js";
 import { cn } from "@/lib/cn";
 import { CopyToClipboard } from "@/components/CopyToClipboard";
@@ -143,19 +143,11 @@ export const Networks = () => {

    if (isConnected && networkRoutes.length === 0) {
        return (
-            <div
-                className={
-                    "flex-1 flex items-center justify-center px-6 pb-20 w-full h-full min-h-0"
-                }
-            >
-                <EmptyState
-                    icon={NetworkIcon}
-                    title={t("networks.empty.title")}
-                    description={t("networks.empty.description")}
-                    learnMoreUrl={"https://docs.netbird.io/how-to/networks"}
-                    learnMoreTopic={t("nav.resources.title")}
-                />
-            </div>
+            <EmptyState
+                icon={Layers3Icon}
+                title={t("networks.empty.title")}
+                description={t("networks.empty.description")}
+            />
        );
    }

--- a/client/ui/frontend/src/modules/main/advanced/peers/Peers.tsx
+++ b/client/ui/frontend/src/modules/main/advanced/peers/Peers.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
-import { ChevronRightIcon, LaptopIcon } from "lucide-react";
+import { ChevronRightIcon, MonitorSmartphoneIcon } from "lucide-react";
 import type { PeerStatus } from "@bindings/services/models.js";
 import { cn } from "@/lib/cn";
 import { CopyToClipboard } from "@/components/CopyToClipboard";
@@ -136,19 +136,11 @@ export const Peers = () => {

    if (isConnected && peers.length === 0) {
        return (
-            <div
-                className={
-                    "flex-1 flex items-center justify-center px-6 pb-20 w-full h-full min-h-0"
-                }
-            >
-                <EmptyState
-                    icon={LaptopIcon}
-                    title={t("peers.empty.title")}
-                    description={t("peers.empty.description")}
-                    learnMoreUrl={"https://docs.netbird.io/how-to/getting-started"}
-                    learnMoreTopic={t("nav.peers.title")}
-                />
-            </div>
+            <EmptyState
+                icon={MonitorSmartphoneIcon}
+                title={t("peers.empty.title")}
+                description={t("peers.empty.description")}
+            />
        );
    }

--- a/client/ui/i18n/locales/de/common.json
+++ b/client/ui/i18n/locales/de/common.json
@@ -72,7 +72,6 @@
    "common.refresh": "Aktualisieren",
    "common.loading": "Lädt…",
    "common.netbird": "NetBird",
-    "common.learnMoreAbout": "Mehr erfahren über",
    "common.noResults.title": "Keine Ergebnisse gefunden",
    "common.noResults.description": "Es konnten keine Ergebnisse gefunden werden. Bitte versuchen Sie es mit einem anderen Suchbegriff oder ändern Sie Ihre Filter.",
    "notConnected.title": "Getrennt",
@@ -388,8 +387,8 @@
    "peers.filter.all": "Alle",
    "peers.filter.online": "Online",
    "peers.filter.offline": "Offline",
-    "peers.empty.title": "Noch keine Peers",
-    "peers.empty.description": "Es sind keine Peers mit Ihrem Netzwerk verbunden. Fügen Sie einen Peer hinzu, um zu beginnen.",
+    "peers.empty.title": "Keine Peers verfügbar",
+    "peers.empty.description": "Sie haben entweder keine Peers verfügbar oder keinen Zugriff auf einen davon.",
    "peers.details.domain": "Domain",
    "peers.details.netbirdIp": "NetBird-IP",
    "peers.details.netbirdIpv6": "NetBird-IPv6",
@@ -419,8 +418,8 @@
    "networks.filter.all": "Alle",
    "networks.filter.active": "Aktiv",
    "networks.filter.overlapping": "Überlappend",
-    "networks.empty.title": "Keine Netzwerke verfügbar",
-    "networks.empty.description": "Für diesen Peer wurden keine geleiteten Netzwerke freigegeben.",
+    "networks.empty.title": "Keine Ressourcen verfügbar",
+    "networks.empty.description": "Sie haben entweder keine Netzwerkressourcen verfügbar oder keinen Zugriff auf eine davon.",
    "networks.selected": "Ausgewählt",
    "networks.unselected": "Nicht ausgewählt",
    "networks.ips.heading": "Aufgelöste IPs",
--- a/client/ui/i18n/locales/en/common.json
+++ b/client/ui/i18n/locales/en/common.json
@@ -72,7 +72,6 @@
    "common.refresh": "Refresh",
    "common.loading": "Loading…",
    "common.netbird": "NetBird",
-    "common.learnMoreAbout": "Learn more about",
    "common.noResults.title": "Could not find any results",
    "common.noResults.description": "We couldn't find any results. Please try a different search term or change your filters.",
    "notConnected.title": "Disconnected",
@@ -390,8 +389,8 @@
    "peers.filter.all": "All",
    "peers.filter.online": "Online",
    "peers.filter.offline": "Offline",
-    "peers.empty.title": "No peers yet",
-    "peers.empty.description": "No peers are connected to your network. Add a peer to get started.",
+    "peers.empty.title": "No peers available",
+    "peers.empty.description": "You either don't have any peers available or have no access to any of them.",
    "peers.details.domain": "Domain",
    "peers.details.netbirdIp": "NetBird IP",
    "peers.details.netbirdIpv6": "NetBird IPv6",
@@ -421,8 +420,8 @@
    "networks.filter.all": "All",
    "networks.filter.active": "Active",
    "networks.filter.overlapping": "Overlapping",
-    "networks.empty.title": "No networks available",
-    "networks.empty.description": "No routed networks have been shared with this peer.",
+    "networks.empty.title": "No resources available",
+    "networks.empty.description": "You either don't have any network resources available or have no access to any of them.",
    "networks.selected": "Selected",
    "networks.unselected": "Not selected",
    "networks.ips.heading": "Resolved IPs",
--- a/client/ui/i18n/locales/hu/common.json
+++ b/client/ui/i18n/locales/hu/common.json
@@ -72,7 +72,6 @@
    "common.refresh": "Frissítés",
    "common.loading": "Betöltés…",
    "common.netbird": "NetBird",
-    "common.learnMoreAbout": "Tudjon meg többet erről:",
    "common.noResults.title": "Nincs találat",
    "common.noResults.description": "Nem találtunk eredményt. Próbáljon meg másik keresési kifejezést, vagy módosítsa a szűrőket.",
    "notConnected.title": "Lecsatlakozva",
@@ -388,8 +387,8 @@
    "peers.filter.all": "Összes",
    "peers.filter.online": "Online",
    "peers.filter.offline": "Offline",
-    "peers.empty.title": "Még nincsenek társak",
-    "peers.empty.description": "Egyetlen társ sem csatlakozott a hálózatához. Adjon hozzá egy társat a kezdéshez.",
+    "peers.empty.title": "Nincs elérhető társ",
+    "peers.empty.description": "Önnek vagy nincsenek elérhető társai vagy nincs hozzáférése egyikhez sem.",
    "peers.details.domain": "Domain",
    "peers.details.netbirdIp": "NetBird IP",
    "peers.details.netbirdIpv6": "NetBird IPv6",
@@ -419,8 +418,8 @@
    "networks.filter.all": "Összes",
    "networks.filter.active": "Aktív",
    "networks.filter.overlapping": "Átfedő",
-    "networks.empty.title": "Nincs elérhető hálózat",
-    "networks.empty.description": "Ehhez a társhoz nem osztottak meg útvonalas hálózatokat.",
+    "networks.empty.title": "Nincs elérhető erőforrás",
+    "networks.empty.description": "Önnek vagy nincsenek elérhető hálózati erőforrásai vagy nincs hozzáférése egyikhez sem.",
    "networks.selected": "Kiválasztva",
    "networks.unselected": "Nincs kiválasztva",
    "networks.ips.heading": "Feloldott IP-címek",