From ca1f028d0b9c3896043db7ec674a5353e934e49a Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 26 Feb 2025 23:22:33 -0600
Subject: [PATCH] Refine admin info pages + nav

---
 src/admin/AdminInfoNav.tsx   | 3 ++-
 src/admin/AdminNavClient.tsx | 2 +-
 src/components/Container.tsx | 9 +++++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/admin/AdminInfoNav.tsx b/src/admin/AdminInfoNav.tsx
index 70e9cd81..1c756264 100644
--- a/src/admin/AdminInfoNav.tsx
+++ b/src/admin/AdminInfoNav.tsx
@@ -10,7 +10,8 @@ import { useAppState } from '@/state/AppState';
 import InsightsIndicatorDot from './insights/InsightsIndicatorDot';
 
 const ADMIN_INFO_PAGES = [{
-  title: 'Insights',
+  title: 'App Insights',
+  titleShort: 'Insights',
   path: PATH_ADMIN_INSIGHTS,
 }, {
   title: 'Configuration',
diff --git a/src/admin/AdminNavClient.tsx b/src/admin/AdminNavClient.tsx
index fd3458b9..fd45964d 100644
--- a/src/admin/AdminNavClient.tsx
+++ b/src/admin/AdminNavClient.tsx
@@ -64,7 +64,7 @@ export default function AdminNavClient({
   return (
     <SiteGrid
       contentMain={
-        <div className="space-y-5">
+        <div className="space-y-4">
           <div className={clsx(
             'flex gap-2 pb-3',
             'border-b border-gray-200 dark:border-gray-800',
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 48bbf7b7..fc4ae3c0 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -4,14 +4,14 @@ import { ReactNode } from 'react';
 export default function Container({
   children,
   className,
-  color = 'gray',
+  color = 'gray-border',
   padding = 'normal',
   centered = true,
   spaceChildren = true,
 }: {
   children: ReactNode
   className?: string
-  color?: 'gray' | 'blue' | 'red' | 'yellow'
+  color?: 'gray' | 'gray-border' | 'blue' | 'red' | 'yellow'
   padding?:
     'loose' |
     'normal' |
@@ -27,6 +27,11 @@ export default function Container({
       'text-medium',
       'bg-dim',
     ];
+    case 'gray-border': return [
+      'text-medium',
+      'bg-gray-50 dark:bg-gray-900/40',
+      'border border-gray-200 dark:border-gray-800',
+    ];
     case 'blue': return [
       'text-blue-900 dark:text-blue-300',
       'bg-blue-100/35 dark:bg-blue-950/60',