fix viewmode height, update other ui stuff

client/ui/frontend/src/layouts/ConnectionStatusSwitch.tsx

@@ -319,7 +319,7 @@ export const ConnectionStatusSwitch = () => {
             <div className={"flex flex-col items-center"}>
                 <h1
                     className={
-                        "text-sm font-medium text-nb-gray-200 tracking-wide transition-colors duration-300 select-none wails-no-draggable mb-1"
+                        "text-sm font-semibold text-nb-gray-200 tracking-wide transition-colors duration-300 select-none wails-no-draggable mb-1"
                     }
                 >
                     {t(STATUS_KEY[connState])}

client/ui/frontend/src/layouts/Header.tsx

@@ -143,7 +143,7 @@ export const Header = () => {
         <div
             className={cn(
                 "shrink-0 cursor-default wails-draggable relative",
-                "flex items-center h-12 px-3 top-2",
+                "flex items-center h-12 px-3 top-2.5",
             )}
         >
             <div className={"grid grid-cols-3 items-center w-[356px] shrink-0"}>
@@ -151,7 +151,9 @@ export const Header = () => {
                 <div className={"flex justify-center ml-4"}>{profileSlot}</div>
                 <div />
             </div>
-            <div className={"absolute right-3 top-1/2 -translate-y-1/2"}>{settingsSlot}</div>
+            <div className={"absolute right-[0.98rem] top-1/2 -translate-y-1/2"}>
+                {settingsSlot}
+            </div>
         </div>
     );
 };

client/ui/frontend/src/layouts/Main.tsx

@@ -1,8 +1,11 @@
 import { ConnectionStatusSwitch } from "@/layouts/ConnectionStatusSwitch.tsx";
 import { MainRightSide } from "@/layouts/MainRightSide.tsx";
 import { Navigation } from "@/layouts/Navigation.tsx";
+import { cn } from "@/lib/cn";
 import { useNavSection } from "@/lib/navSection";
 import { useViewMode } from "@/lib/viewMode";
+import { NotConnectedState } from "@/components/NotConnectedState";
+import { useStatus } from "@/modules/daemon-status/StatusContext";
 import { Peers } from "@/modules/peers/Peers";
 import { Networks } from "@/modules/networks/Networks";
 import { ExitNodes } from "@/modules/exit-nodes/ExitNodes";
@@ -28,6 +31,8 @@ const MainBody = () => {
     const isAdvanced = viewMode === "advanced";
     const { section } = useNavSection();
     const { selected } = usePeerDetail();
+    const { status } = useStatus();
+    const isConnected = status?.status === "Connected";
 
     return (
         <div className={"wails-draggable flex flex-1 min-h-0 p-4 gap-4"}>
@@ -43,12 +48,29 @@ const MainBody = () => {
                     overlay={<PeerDetailPanel />}
                     overlayOpen={selected !== null}
                 >
-                    <Navigation />
-                    <div className={"flex-1 min-h-0 flex flex-col"}>
-                        {section === "peers" && <Peers />}
-                        {section === "networks" && <Networks />}
-                        {section === "exitNode" && <ExitNodes />}
+                    <div
+                        className={cn(
+                            "flex-1 min-h-0 min-w-0 flex flex-col",
+                            !isConnected && "pointer-events-none select-none",
+                        )}
+                        aria-hidden={!isConnected}
+                    >
+                        <Navigation />
+                        <div className={"flex-1 min-h-0 flex flex-col"}>
+                            {section === "peers" && <Peers />}
+                            {section === "networks" && <Networks />}
+                            {section === "exitNode" && <ExitNodes />}
+                        </div>
                     </div>
+                    {!isConnected && (
+                        <div
+                            className={
+                                "absolute inset-0 z-20 flex pointer-events-auto bg-nb-gray-940"
+                            }
+                        >
+                            <NotConnectedState />
+                        </div>
+                    )}
                 </MainRightSide>
             )}
         </div>

client/ui/frontend/src/layouts/Navigation.tsx

@@ -51,7 +51,7 @@ export const Navigation = () => {
                             "group relative flex flex-1 items-center justify-center",
                             "gap-2.5 px-5 py-3",
                             "outline-none transition-all",
-                            isActive ? "text-netbird" : "text-nb-gray-500 hover:text-nb-gray-400",
+                            isActive ? "text-netbird" : "text-nb-gray-400 hover:text-nb-gray-300",
                             isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
                         )}
                     >
@@ -62,7 +62,7 @@ export const Navigation = () => {
                                 "absolute inset-x-0 bottom-0 h-px transition-all",
                                 isActive
                                     ? "bg-netbird"
-                                    : "bg-nb-gray-900 group-hover:bg-nb-gray-600",
+                                    : "bg-nb-gray-910 group-hover:bg-nb-gray-700",
                             )}
                         />
                     </button>
@@ -72,8 +72,12 @@ export const Navigation = () => {
     );
 };
 
-const ExitNodeIcon = (props: LucideProps) => (
-    <SquareArrowUpRight {...props} className={cn("rotate-45", props.className)} />
+const ExitNodeIcon = ({ size, ...props }: LucideProps) => (
+    <SquareArrowUpRight
+        {...props}
+        size={typeof size === "number" ? size - 2 : size}
+        className={cn("rotate-45", props.className)}
+    />
 );
 
 export type { NavSection } from "@/lib/navSection";