From 367581cd54608c26dbf9cc9e1127368d9913468f Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 16 Jun 2025 13:09:14 +0000
Subject: [PATCH] Fix: Consistent icons and gas site styling

Ensured consistent icons for gas sites and implemented special styling (glow, gold background) to make them visually distinct.
---
 src/components/SignatureCategories.tsx |  6 ++---
 src/components/SignatureListItem.tsx   | 32 ++++++++++++++++++++------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/SignatureCategories.tsx b/src/components/SignatureCategories.tsx
index f08db2a..7ec57dc 100644
--- a/src/components/SignatureCategories.tsx
+++ b/src/components/SignatureCategories.tsx
@@ -2,7 +2,7 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { ChevronDown, ChevronRight, Zap, Shield, Coins, HelpCircle, Pickaxe, Gauge } from "lucide-react";
+import { ChevronDown, ChevronRight, Zap, Shield, Coins, HelpCircle, Pickaxe, Fuel } from "lucide-react";
 import { SignatureListItem } from "@/components/SignatureListItem";
 import { SignatureCategory } from "@/hooks/useSignatureCategories";
 
@@ -18,7 +18,7 @@ const getCategoryIcon = (categoryId: string) => {
     case 'data_relic':
       return <Shield className="h-4 w-4 text-blue-400" />;
     case 'gas':
-      return <Gauge className="h-4 w-4 text-green-400" />;
+      return <Fuel className="h-4 w-4 text-yellow-400" />;
     case 'ore':
       return <Pickaxe className="h-4 w-4 text-yellow-400" />;
     case 'wormhole':
@@ -35,7 +35,7 @@ const getCategoryColor = (categoryId: string) => {
     case 'data_relic':
       return 'text-blue-400 border-blue-600';
     case 'gas':
-      return 'text-green-400 border-green-600';
+      return 'text-yellow-400 border-yellow-600';
     case 'ore':
       return 'text-yellow-400 border-yellow-600';
     case 'wormhole':
diff --git a/src/components/SignatureListItem.tsx b/src/components/SignatureListItem.tsx
index aa37afc..29b53f2 100644
--- a/src/components/SignatureListItem.tsx
+++ b/src/components/SignatureListItem.tsx
@@ -1,6 +1,6 @@
 
 import { Badge } from "@/components/ui/badge";
-import { Zap, Shield, Coins, HelpCircle, Clock, AlertTriangle, Skull } from "lucide-react";
+import { Zap, Shield, Coins, HelpCircle, Clock, AlertTriangle, Skull, Fuel, Pickaxe } from "lucide-react";
 import { SigviewRecord as Signature } from "@/lib/pbtypes";
 
 interface SignatureListItemProps {
@@ -13,7 +13,8 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
 		if (lowerType.includes("combat")) return <Zap className="h-4 w-4" />;
 		if (lowerType.includes("exploration") || lowerType.includes("relic") || lowerType.includes("data"))
 			return <Shield className="h-4 w-4" />;
-		if (lowerType.includes("ore") || lowerType.includes("gas")) return <Coins className="h-4 w-4" />;
+		if (lowerType.includes("gas")) return <Fuel className="h-4 w-4" />;
+		if (lowerType.includes("ore")) return <Pickaxe className="h-4 w-4" />;
 		return <HelpCircle className="h-4 w-4" />;
 	};
 
@@ -24,7 +25,9 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
 		if (lowerType.includes("combat")) return "bg-red-900/30 text-red-300 border-red-600";
 		if (lowerType.includes("exploration") || lowerType.includes("relic") || lowerType.includes("data"))
 			return "bg-blue-900/30 text-blue-300 border-blue-600";
-		if (lowerType.includes("ore") || lowerType.includes("gas"))
+		if (lowerType.includes("gas"))
+			return "bg-gradient-to-r from-yellow-900/40 to-amber-900/40 text-yellow-200 border-yellow-500 shadow-lg shadow-yellow-500/20";
+		if (lowerType.includes("ore"))
 			return "bg-yellow-900/30 text-yellow-300 border-yellow-600";
 		if (!type || type === "") return "bg-slate-700 text-slate-300 border-slate-600";
 		return "bg-purple-900/30 text-purple-300 border-purple-600";
@@ -64,11 +67,17 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
 	};
 
 	const oldEntry = isOld();
+	const isGasSite = signature.type?.toLowerCase().includes("gas");
 
 	return (
 		<div
-			className={`flex items-center justify-between p-3 border-b border-slate-700 hover:bg-slate-800/40 transition-colors ${oldEntry ? "opacity-50" : ""
-				}`}
+			className={`flex items-center justify-between p-3 border-b border-slate-700 hover:bg-slate-800/40 transition-all duration-300 ${
+				oldEntry ? "opacity-50" : ""
+			} ${
+				isGasSite 
+					? "bg-gradient-to-r from-yellow-900/10 to-amber-900/10 border-l-4 border-l-yellow-500 shadow-lg shadow-yellow-500/10 hover:shadow-yellow-500/20 animate-pulse" 
+					: ""
+			}`}
 		>
 			<div className="flex items-center gap-3 flex-1">
 				{/* Type Badge */}
@@ -77,7 +86,9 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
 					className={`${getTypeColor(
 						signature.type,
 						signature.dangerous
-					)} px-2 py-1 font-semibold flex items-center gap-1 min-w-[100px] justify-center`}
+					)} px-2 py-1 font-semibold flex items-center gap-1 min-w-[100px] justify-center ${
+						isGasSite ? "animate-pulse" : ""
+					}`}
 				>
 					{signature.dangerous ? <Skull className="h-4 w-4 text-red-400 animate-pulse" /> : getTypeIcon(signature.type)}
 					{signature.type || "Unknown"}
@@ -87,13 +98,20 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
 				<div className="flex-1 min-w-[150px]">
 					<div className="flex items-center gap-2">
 						<span className="font-mono text-sm text-slate-400 min-w-[50px]">{signature.identifier}</span>
-						<h3 className="text-white font-medium flex items-center gap-2">
+						<h3 className={`font-medium flex items-center gap-2 ${
+							isGasSite ? "text-yellow-200 font-bold" : "text-white"
+						}`}>
 							{signature.signame || "Unnamed Signature"}
 							{signature.dangerous && (
 								<Badge variant="outline" className="bg-red-900/50 text-red-200 border-red-500 px-1 py-0 text-xs">
 									DANGEROUS
 								</Badge>
 							)}
+							{isGasSite && (
+								<Badge variant="outline" className="bg-gradient-to-r from-yellow-500/20 to-amber-500/20 text-yellow-300 border-yellow-500 px-1 py-0 text-xs animate-pulse">
+									💎 VALUABLE
+								</Badge>
+							)}
 						</h3>
 					</div>
 				</div>