From 7e6d7df06e3ba85107ef89d0256a0caf8f1e810b Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 15 Jun 2025 09:46:37 +0000
Subject: [PATCH] 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 |   2 +-
 src/components/Header.tsx          |   2 +-
 src/components/RegionMap.tsx       | 113 ++++++++++++++---------------
 src/pages/RegionPage.tsx           |   3 +-
 src/pages/SystemView.tsx           |   8 +-
 5 files changed, 63 insertions(+), 65 deletions(-)

diff --git a/src/components/CleanModeToggle.tsx b/src/components/CleanModeToggle.tsx
index 4fd9c51..414f940 100644
--- a/src/components/CleanModeToggle.tsx
+++ b/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 
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c47f276..e293cf2 100644
--- a/src/components/Header.tsx
+++ b/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 (
diff --git a/src/components/RegionMap.tsx b/src/components/RegionMap.tsx
index 2c3bc8e..800804b 100644
--- a/src/components/RegionMap.tsx
+++ b/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,55 +272,53 @@ 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">
-            <svg
-              ref={svgRef}
-              width="100%"
-              height="100%"
-              viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
-              className="cursor-grab active:cursor-grabbing"
-              onMouseDown={handleMouseDown}
-              onMouseMove={handleMouseMove}
-              onMouseUp={handleMouseUp}
-              onMouseLeave={handleMouseUp}
-              onWheel={handleWheel}
-            >
-              <defs>
-                <filter id="glow">
-                  <feGaussianBlur stdDeviation="3" result="coloredBlur" />
-                  <feMerge>
-                    <feMergeNode in="coloredBlur" />
-                    <feMergeNode in="SourceGraphic" />
-                  </feMerge>
-                </filter>
-              </defs>
+        <div className="flex-1 overflow-hidden">
+          <svg
+            ref={svgRef}
+            width="100%"
+            height="100%"
+            viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
+            className="cursor-grab active:cursor-grabbing"
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseUp}
+            onWheel={handleWheel}
+          >
+            <defs>
+              <filter id="glow">
+                <feGaussianBlur stdDeviation="3" result="coloredBlur" />
+                <feMerge>
+                  <feMergeNode in="coloredBlur" />
+                  <feMergeNode in="SourceGraphic" />
+                </feMerge>
+              </filter>
+            </defs>
 
-              {/* Render connections */}
-              {processedConnections.map(connection => (
-                <Connection
-                  key={connection.key}
-                  from={connection.from}
-                  to={connection.to}
-                  color={connection.color}
-                />
-              ))}
+            {/* Render connections */}
+            {processedConnections.map(connection => (
+              <Connection
+                key={connection.key}
+                from={connection.from}
+                to={connection.to}
+                color={connection.color}
+              />
+            ))}
 
-              {/* Render systems */}
-              {systems?.map((system) => (
-                <MapNode
-                  key={system.solarSystemName}
-                  id={system.solarSystemName}
-                  name={system.solarSystemName}
-                  position={nodePositions[system.solarSystemName] || { x: 0, y: 0 }}
-                  onClick={() => handleSystemClick(system.solarSystemName)}
-                  type="system"
-                  security={system.security}
-                  signatures={system.signatures}
-                />
-              ))}
-            </svg>
-          </div>
+            {/* Render systems */}
+            {systems?.map((system) => (
+              <MapNode
+                key={system.solarSystemName}
+                id={system.solarSystemName}
+                name={system.solarSystemName}
+                position={nodePositions[system.solarSystemName] || { x: 0, y: 0 }}
+                onClick={() => handleSystemClick(system.solarSystemName)}
+                type="system"
+                security={system.security}
+                signatures={system.signatures}
+              />
+            ))}
+          </svg>
         </div>
       </div>
     </div>
diff --git a/src/pages/RegionPage.tsx b/src/pages/RegionPage.tsx
index 7dba3ea..3872d9c 100644
--- a/src/pages/RegionPage.tsx
+++ b/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';
diff --git a/src/pages/SystemView.tsx b/src/pages/SystemView.tsx
index 34f91a8..91aa3a8 100644
--- a/src/pages/SystemView.tsx
+++ b/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";