Polish settings: larger icons, network blurb above expandables, remove relay borders, fix lint

src/components/RelayListManager.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import { IntroImage } from '@/components/IntroImage';
 import { Plus, X, Wifi, Settings, Server, User } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
@@ -216,19 +215,8 @@ export function RelayListManager() {
 
   return (
     <div>
-      {/* Intro */}
-      <div className="flex items-center gap-4 px-3 pt-2 pb-4">
-        <IntroImage src="/relay-intro.png" />
-        <div className="min-w-0">
-          <h2 className="text-sm font-semibold">Network Connections</h2>
-          <p className="text-xs text-muted-foreground mt-1 leading-relaxed">
-            Manage your relay connections. Relays are servers that store and distribute Nostr events across the network.
-          </p>
-        </div>
-      </div>
-
       {/* App Relays Section */}
-      <div className="border-b border-border pb-4">
+      <div className="pt-4 pb-4">
         <div className="px-3 space-y-3">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
@@ -279,7 +267,7 @@ export function RelayListManager() {
       </div>
 
       {/* User Relays Section */}
-      <div className="border-b border-border pb-4 pt-4">
+      <div className="pb-4 pt-4">
         <div className="px-3 space-y-3">
           <div className="flex items-center gap-2">
             <User className="h-5 w-5 text-muted-foreground" />

src/pages/AdvancedSettingsPage.tsx

@@ -1,6 +1,6 @@
 import { useSeoMeta } from '@unhead/react';
 import { ArrowLeft } from 'lucide-react';
-import { Link, Navigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { AdvancedSettings } from '@/components/AdvancedSettings';
 import { WalletSettings } from '@/components/WalletSettings';
 import { useCurrentUser } from '@/hooks/useCurrentUser';

src/pages/NetworkSettingsPage.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { RelayListManager } from '@/components/RelayListManager';
 import { BlossomSettings } from '@/components/BlossomSettings';
+import { IntroImage } from '@/components/IntroImage';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 
 export function NetworkSettingsPage() {
@@ -40,6 +41,17 @@ export function NetworkSettingsPage() {
       </div>
 
       <div className="p-4">
+        {/* Intro */}
+        <div className="flex items-center gap-4 px-3 pt-2 pb-4">
+          <IntroImage src="/relay-intro.png" />
+          <div className="min-w-0">
+            <h2 className="text-sm font-semibold">Network Connections</h2>
+            <p className="text-xs text-muted-foreground mt-1 leading-relaxed">
+              Manage your relay connections. Relays are servers that store and distribute Nostr events across the network.
+            </p>
+          </div>
+        </div>
+
         {/* Relays */}
         <Collapsible open={relaysOpen} onOpenChange={setRelaysOpen}>
           <CollapsibleTrigger asChild>

src/pages/SettingsPage.tsx

@@ -101,14 +101,14 @@ export function SettingsPage() {
           return (
             <div
               key={section.id}
-              className="flex items-center gap-4 px-3 py-3 cursor-pointer rounded-xl bg-muted/40 transition-colors hover:bg-muted/60 active:bg-muted/80"
+              className="flex items-center gap-4 px-3 py-1 cursor-pointer rounded-xl bg-muted/40 transition-colors hover:bg-muted/60 active:bg-muted/80"
               onClick={() => navigate(section.path)}
             >
-              <div className="flex items-center justify-center size-16 shrink-0">
+              <div className="flex items-center justify-center size-20 shrink-0">
                 {section.illustration ? (
-                  <IntroImage src={section.illustration} size="w-16" />
+                  <IntroImage src={section.illustration} size="w-20" />
                 ) : Icon ? (
-                  <Icon className="size-10 text-primary opacity-90" />
+                  <Icon className="size-12 text-primary opacity-90" />
                 ) : null}
               </div>
               <div className="flex-1 min-w-0">