From 45095818bcf5445416f3e5431e0f6be56222bd5f Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Tue, 2 Jun 2026 12:04:55 +0200
Subject: [PATCH] update paddings and icons

---
 .../src/components/empty-state/EmptyState.tsx     |  4 ++--
 .../src/components/empty-state/NoResults.tsx      |  2 +-
 .../components/empty-state/NotConnectedState.tsx  |  2 +-
 .../modules/main/MainConnectionStatusSwitch.tsx   |  4 ++--
 .../main/advanced/peers/PeerDetailPanel.tsx       | 15 +++++----------
 5 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/client/ui/frontend/src/components/empty-state/EmptyState.tsx b/client/ui/frontend/src/components/empty-state/EmptyState.tsx
index ab9e05a26..d03e4a04c 100644
--- a/client/ui/frontend/src/components/empty-state/EmptyState.tsx
+++ b/client/ui/frontend/src/components/empty-state/EmptyState.tsx
@@ -31,11 +31,11 @@ export const EmptyState = ({
         <div className={cn("py-12 text-center", className)}>
             <div
                 className={
-                    "flex flex-col items-center justify-center max-w-sm mx-auto relative top-7"
+                    "flex flex-col items-center justify-start max-w-sm mx-auto relative top-6"
                 }
             >
                 <SquareIcon icon={icon} className={"mb-3"} />
-                <p className={"text-base font-medium text-nb-gray-200 mb-1"}>{title}</p>
+                <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"}>
diff --git a/client/ui/frontend/src/components/empty-state/NoResults.tsx b/client/ui/frontend/src/components/empty-state/NoResults.tsx
index 7e1cd488d..9263f7c7a 100644
--- 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-3.5"}
+            className={"relative top-[2.8rem]"}
         />
     );
 };
diff --git a/client/ui/frontend/src/components/empty-state/NotConnectedState.tsx b/client/ui/frontend/src/components/empty-state/NotConnectedState.tsx
index 486ff0b2c..aa7ac07b5 100644
--- a/client/ui/frontend/src/components/empty-state/NotConnectedState.tsx
+++ b/client/ui/frontend/src/components/empty-state/NotConnectedState.tsx
@@ -7,7 +7,7 @@ export const NotConnectedState = () => {
     return (
         <div
             className={
-                "h-full min-h-[260px] flex-1 flex items-center justify-center px-6 pb-20 top-1 relative"
+                "h-full flex-1 flex items-start justify-center pt-36 top-[0.6rem] px-6 relative"
             }
         >
             <EmptyState
diff --git a/client/ui/frontend/src/modules/main/MainConnectionStatusSwitch.tsx b/client/ui/frontend/src/modules/main/MainConnectionStatusSwitch.tsx
index ef83da1ab..7503cdb5b 100644
--- a/client/ui/frontend/src/modules/main/MainConnectionStatusSwitch.tsx
+++ b/client/ui/frontend/src/modules/main/MainConnectionStatusSwitch.tsx
@@ -375,7 +375,7 @@ export const MainConnectionStatusSwitch = () => {
                         showLocal && fqdn ? "opacity-100" : "opacity-0 pointer-events-none",
                     )}
                 >
-                    <span className={"font-mono text-xs leading-tight text-nb-gray-300"}>
+                    <span className={"font-mono text-[0.8rem] leading-tight text-nb-gray-300"}>
                         {fqdn || " "}
                     </span>
                 </CopyToClipboard>
@@ -387,7 +387,7 @@ export const MainConnectionStatusSwitch = () => {
                         showLocal && ip ? "opacity-100" : "opacity-0 pointer-events-none",
                     )}
                 >
-                    <span className={"font-mono text-xs leading-tight text-nb-gray-300"}>
+                    <span className={"font-mono text-[0.8rem] leading-tight text-nb-gray-300"}>
                         {ip || " "}
                     </span>
                 </CopyToClipboard>
diff --git a/client/ui/frontend/src/modules/main/advanced/peers/PeerDetailPanel.tsx b/client/ui/frontend/src/modules/main/advanced/peers/PeerDetailPanel.tsx
index 560c8061b..e7e4b30a8 100644
--- a/client/ui/frontend/src/modules/main/advanced/peers/PeerDetailPanel.tsx
+++ b/client/ui/frontend/src/modules/main/advanced/peers/PeerDetailPanel.tsx
@@ -8,8 +8,8 @@ import {
     ArrowLeftIcon,
     ArrowUpDownIcon,
     ArrowUpIcon,
-    CableIcon,
     ChevronDownIcon,
+    ChevronsLeftRightEllipsisIcon,
     ClockIcon,
     GaugeIcon,
     HandshakeIcon,
@@ -18,10 +18,9 @@ import {
     LucideProps,
     MapPinIcon,
     MonitorIcon,
-    NetworkIcon,
     Radio,
     RefreshCwIcon,
-    ZapIcon,
+    WaypointsIcon,
 } from "lucide-react";
 import type { PeerStatus } from "@bindings/services/models.js";
 import { cn } from "@/lib/cn";
@@ -216,7 +215,6 @@ const PeerDetails = ({ peer, now }: { peer: PeerStatus; now: number }) => {
     const lastHandshake = formatAge(peer.lastHandshakeUnix, t("peers.details.never"));
     const statusSince = formatAge(peer.connStatusUpdateUnix, DASH);
     const isConnected = peer.connStatus === "Connected";
-    const ConnectionIcon = peer.relayed ? NetworkIcon : ZapIcon;
     const connectionLabel = peer.relayed ? t("peers.details.relayed") : t("peers.details.p2p");
 
     return (
@@ -236,15 +234,12 @@ const PeerDetails = ({ peer, now }: { peer: PeerStatus; now: number }) => {
                 )}
             </Row>
             {isConnected && (
-                <Row icon={CableIcon} label={t("peers.details.connection")}>
-                    <span className={"inline-flex items-center gap-1.5 whitespace-nowrap"}>
-                        <ConnectionIcon size={13} />
-                        {connectionLabel}
-                    </span>
+                <Row icon={ChevronsLeftRightEllipsisIcon} label={t("peers.details.connection")}>
+                    <span className={"whitespace-nowrap"}>{connectionLabel}</span>
                 </Row>
             )}
             {peer.relayed && (
-                <Row icon={NetworkIcon} label={t("peers.details.relayAddress")}>
+                <Row icon={WaypointsIcon} label={t("peers.details.relayAddress")}>
                     {peer.relayAddress ? (
                         <CopyToClipboard
                             message={peer.relayAddress}