Fix: Background and import issues

- Ensure consistent background color across all pages.
- Address import errors by using named imports.
- Consider fullscreen map for better visual integration.

src/components/CleanModeToggle.tsx

@@ -7,7 +7,7 @@ interface CleanModeToggleProps {
   onToggle: (enabled: boolean) => void;
 }
 
-const CleanModeToggle = ({ cleanMode, onToggle }: CleanModeToggleProps) => {
+export const CleanModeToggle = ({ cleanMode, onToggle }: CleanModeToggleProps) => {
   return (
     <div className="flex items-center space-x-2">
       <Switch 

src/components/Header.tsx

@@ -18,7 +18,7 @@ interface HeaderProps {
   }>;
 }
 
-const Header = ({ title, breadcrumbs = [] }: HeaderProps) => {
+export const Header = ({ title, breadcrumbs = [] }: HeaderProps) => {
   const navigate = useNavigate();
 
   return (

src/components/RegionMap.tsx

@@ -1,11 +1,10 @@
-
 import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { MapNode } from './MapNode';
 import { Connection } from './Connection';
 import { getSecurityColor } from '../utils/securityColors';
 import { useRegionData } from '../hooks/useRegionData';
-import Header from './Header';
+import { Header } from './Header';
 
 interface Position {
   x: number;
@@ -25,7 +24,7 @@ interface RegionMapProps {
   isCompact?: boolean;
 }
 
-const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProps) => {
+export const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProps) => {
   const navigate = useNavigate();
   const [viewBox, setViewBox] = useState({ x: 0, y: 0, width: 1200, height: 800 });
   const [isPanning, setIsPanning] = useState(false);
@@ -33,6 +32,8 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
   const [nodePositions, setNodePositions] = useState<Record<string, Position>>({});
   const svgRef = useRef<SVGSVGElement>(null);
 
+  console.log('RegionMap render:', { regionName, focusSystem, isCompact });
+
   const { data: systems, isLoading, error } = useRegionData(regionName);
 
   // Process connections once when systems or nodePositions change
@@ -164,7 +165,7 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
 
   if (isLoading) {
     return (
-      <div className={`${isCompact ? 'h-full' : 'min-h-screen'} bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center`}>
+      <div className={`${isCompact ? 'h-full' : 'h-screen'} bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center`}>
         <div className="text-white text-xl">Loading {regionName} data...</div>
       </div>
     );
@@ -172,7 +173,7 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
 
   if (error) {
     return (
-      <div className={`${isCompact ? 'h-full' : 'min-h-screen'} bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center`}>
+      <div className={`${isCompact ? 'h-full' : 'h-screen'} bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center`}>
         <div className="text-center">
           <h1 className="text-4xl font-bold text-white mb-4">Error Loading Region</h1>
           <p className="text-red-400 mb-6">Failed to load data for {regionName}</p>
@@ -184,7 +185,7 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
   // Compact mode (for system page)
   if (isCompact) {
     return (
-      <div className="w-full h-full bg-black/20 backdrop-blur-sm">
+      <div className="w-full h-full bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
         <svg
           ref={svgRef}
           width="100%"
@@ -259,12 +260,10 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
     );
   }
 
-  // Full page mode (original region page)
+  // Full page mode (original region page) - Make fullscreen
   return (
-    <div className="w-full h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden relative">
-      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-900/20 via-slate-900/40 to-black"></div>
-
-      <div className="relative z-10 h-full flex flex-col">
+    <div className="w-full h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden">
+      <div className="h-full flex flex-col">
         <Header 
           title={regionName}
           breadcrumbs={[
@@ -273,8 +272,7 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
           ]}
         />
 
-        <div className="flex-1 overflow-hidden p-4">
-          <div className="w-full h-full border border-purple-500/30 rounded-lg overflow-hidden bg-black/20 backdrop-blur-sm">
+        <div className="flex-1 overflow-hidden">
           <svg
             ref={svgRef}
             width="100%"
@@ -324,7 +322,6 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
         </div>
       </div>
     </div>
-    </div>
   );
 };
 

src/pages/RegionPage.tsx

@@ -1,5 +1,6 @@
+
 import { useParams } from 'react-router-dom';
-import RegionMap from '@/components/RegionMap';
+import { RegionMap } from '@/components/RegionMap';
 import { Button } from '@/components/ui/button';
 import { ArrowLeft } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';

src/pages/SystemView.tsx

@@ -3,10 +3,10 @@ import { useParams, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { toast } from "@/hooks/use-toast";
 import { useQueryClient } from "@tanstack/react-query";
-import SystemTracker from "@/components/SystemTracker";
-import RegionMap from "@/components/RegionMap";
-import CleanModeToggle from "@/components/CleanModeToggle";
-import Header from "@/components/Header";
+import { SystemTracker } from "@/components/SystemTracker";
+import { RegionMap } from "@/components/RegionMap";
+import { CleanModeToggle } from "@/components/CleanModeToggle";
+import { Header } from "@/components/Header";
 import { parseSignature, parseScannedPercentage } from "@/utils/signatureParser";
 import { getSystemId } from "@/utils/systemApi";
 import pb from "@/lib/pocketbase";