dave/eve-signaler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Fix: Consistent icons and gas site styling

Browse Source 
Ensured consistent icons for gas sites and implemented special styling (glow, gold background) to make them visually distinct.
This commit is contained in:
gpt-engineer-app[bot]
2025-06-16 13:09:14 +00:00
parent df652807ac
commit 367581cd54
2 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/SignatureCategories.tsx
View File

@@ -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':

32
src/components/SignatureListItem.tsx
View File

@@ -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>