More UI tweaks

web/src/components/PageWrapper.tsx

@@ -0,0 +1,25 @@
+import React, { ReactNode } from "react";
+
+interface PageWrapperProps {
+  children: ReactNode;
+  title?: string;
+}
+
+/**
+ * A consistent page wrapper component for all leaf routes
+ */
+export const PageWrapper: React.FC<PageWrapperProps> = ({
+  children,
+  title,
+}) => {
+  return (
+    <div className="p-4 md:p-6">
+      {title && (
+        <h1 className="text-2xl font-medium text-neutral-100 mb-6">{title}</h1>
+      )}
+      <div className="bg-neutral-700  border-outset rounded-lg shadow-inner p-6">
+        {children}
+      </div>
+    </div>
+  );
+};

web/src/components/index.ts

@@ -6,4 +6,5 @@ export * from './InfoMessage';
 export * from './ConnectionStatus';
 export * from './Nav';
 export * from './Separator';
-export * from './StreamControl';
+export * from './StreamControl';
+export * from './PageWrapper';

web/src/components/packets/PacketCard.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode } from "react";
 import { Packet } from "../../lib/types";
-import { LucideIcon } from "lucide-react";
 
 interface PacketCardProps {
   packet: Packet;
@@ -20,29 +19,26 @@ export const PacketCard: React.FC<PacketCardProps> = ({
   const { data } = packet;
 
   return (
-    <div className="p-4 border border-neutral-700 rounded bg-neutral-800 shadow-inner">
+    <div className="p-4 border-inset">
       <div className="flex justify-between items-start mb-3">
         <div className="flex items-center">
-          <div className={`rounded-md ${iconBgColor} p-1.5 mr-3`}>
-            {icon}
-          </div>
+          <div className={`rounded-md ${iconBgColor} p-1.5 mr-3`}>{icon}</div>
           <span className="font-medium text-neutral-200">
-            From: {data.from ? `!${data.from.toString(16).toLowerCase()}` : "Unknown"}
+            From:{" "}
+            {data.from ? `!${data.from.toString(16).toLowerCase()}` : "Unknown"}
           </span>
         </div>
         <span className="text-neutral-400 text-sm">
           ID: {data.id || "No ID"}
         </span>
       </div>
-      
-      <div className="mb-3 text-neutral-300 pl-9">
-        {children}
-      </div>
-      
+
+      <div className="mb-3 text-neutral-300 pl-9">{children}</div>
+
       <div className="mt-3 flex justify-between items-center text-xs text-neutral-500">
         <span>Channel: {packet.info.channel}</span>
         <span>{label}</span>
       </div>
     </div>
   );
-};
+};

web/src/routes/home.tsx

@@ -1,13 +1,10 @@
-import { InfoMessage, Separator } from "../components";
+import { InfoMessage, Separator, PageWrapper } from "../components";
 import { SITE_TITLE } from "../lib/config";
 
 export function IndexPage() {
   return (
-    <div className="bg-neutral-700 rounded-lg shadow-inner">
-      <div className="p-6">
-        <h2 className="text-2xl font-bold mb-4 text-neutral-100">
-          Welcome to {SITE_TITLE}
-        </h2>
+    <PageWrapper title={`Welcome to ${SITE_TITLE}`}>
+      <div>
         <p className="mb-4 text-neutral-200">
           This application provides a real-time view of Meshtastic network
           traffic.
@@ -21,7 +18,7 @@ export function IndexPage() {
 
       <Separator className="my-6" />
 
-      <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div className="bg-neutral-800 border border-neutral-700 p-5 rounded shadow-inner">
           <h3 className="text-lg font-semibold mb-3 text-neutral-200">
             About Meshtastic
@@ -43,6 +40,6 @@ export function IndexPage() {
           </p>
         </div>
       </div>
-    </div>
+    </PageWrapper>
   );
 }

web/src/routes/packets.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from "react";
 import { useAppDispatch } from "../hooks";
-import { PacketList } from "../components/PacketList";
-import { InfoMessage, Separator } from "../components";
+import { PacketList, PageWrapper } from "../components";
 import { addPacket } from "../store/slices/packetSlice";
 import { streamPackets, StreamEvent } from "../lib/api";
 
@@ -25,10 +24,8 @@ export function PacketsRoute() {
   }, [dispatch]);
 
   return (
-    <div className="bg-neutral-700 rounded-lg shadow-inner">
-      <div className="p-6">
-        <PacketList />
-      </div>
-    </div>
+    <PageWrapper>
+      <PacketList />
+    </PageWrapper>
   );
 }

web/src/styles/index.css

@@ -22,10 +22,20 @@
 @layer utilities {
   .border-inset {
     @apply border-1;
-    @apply border-b-neutral-700;
-    @apply border-r-neutral-700;
-    @apply border-t-neutral-950;
-    @apply border-l-neutral-950;
-    @apply rounded-sm;
+    @apply border-b-neutral-400/30;
+    @apply border-r-neutral-400/30;
+    @apply border-t-neutral-950/60;
+    @apply border-l-neutral-950/60;
+    @apply rounded-md;
+    @apply shadow-md;
+  }
+  .border-outset {
+    @apply border-1;
+    @apply border-t-neutral-300/30;
+    @apply border-l-neutral-300/30;
+    @apply border-b-neutral-950/60;
+    @apply border-r-neutral-950/60;
+    @apply rounded-md;
+    @apply shadow-md;
   }
 }