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

Fix: Improve readability of signature items

Browse Source 
Increase font sizes and spacing in signature categories and list items to improve readability.
This commit is contained in:
gpt-engineer-app[bot]
2025-06-16 13:01:02 +00:00
parent e7a502cfb2
commit df652807ac
2 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/SignatureCategories.tsx
View File

@@ -14,17 +14,17 @@ interface SignatureCategoriesProps {
const getCategoryIcon = (categoryId: string) => { const getCategoryIcon = (categoryId: string) => {
switch (categoryId) { switch (categoryId) {
case 'combat': case 'combat':
return <Zap className="h-3 w-3 text-red-400" />; return <Zap className="h-4 w-4 text-red-400" />;
case 'data_relic': case 'data_relic':
return <Shield className="h-3 w-3 text-blue-400" />; return <Shield className="h-4 w-4 text-blue-400" />;
case 'gas': case 'gas':
return <Gauge className="h-3 w-3 text-green-400" />; return <Gauge className="h-4 w-4 text-green-400" />;
case 'ore': case 'ore':
return <Pickaxe className="h-3 w-3 text-yellow-400" />; return <Pickaxe className="h-4 w-4 text-yellow-400" />;
case 'wormhole': case 'wormhole':
return <Coins className="h-3 w-3 text-purple-400" />; return <Coins className="h-4 w-4 text-purple-400" />;
default: default:
return <HelpCircle className="h-3 w-3 text-slate-400" />; return <HelpCircle className="h-4 w-4 text-slate-400" />;
} }
}; };
@@ -50,7 +50,7 @@ export const SignatureCategories = ({ categories, onToggleCategory }: SignatureC
return ( return (
<Card className="bg-slate-800/30 border-slate-700"> <Card className="bg-slate-800/30 border-slate-700">
<CardContent className="pt-4 text-center"> <CardContent className="pt-4 text-center">
<div className="text-slate-400 text-sm">No signatures found</div> <div className="text-slate-400">No signatures found</div>
</CardContent> </CardContent>
</Card> </Card>
); );
@@ -62,20 +62,20 @@ export const SignatureCategories = ({ categories, onToggleCategory }: SignatureC
<Card key={category.id} className="bg-slate-800/30 border-slate-700"> <Card key={category.id} className="bg-slate-800/30 border-slate-700">
<Collapsible open={category.isVisible} onOpenChange={() => onToggleCategory(category.id)}> <Collapsible open={category.isVisible} onOpenChange={() => onToggleCategory(category.id)}>
<CollapsibleTrigger asChild> <CollapsibleTrigger asChild>
<CardHeader className="cursor-pointer hover:bg-slate-800/50 transition-colors py-3"> <CardHeader className="cursor-pointer hover:bg-slate-800/50 transition-colors py-2">
<CardTitle className="text-white flex items-center justify-between text-sm"> <CardTitle className="text-white flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-3">
{category.isVisible ? ( {category.isVisible ? (
<ChevronDown className="h-3 w-3 text-slate-400" /> <ChevronDown className="h-4 w-4 text-slate-400" />
) : ( ) : (
<ChevronRight className="h-3 w-3 text-slate-400" /> <ChevronRight className="h-4 w-4 text-slate-400" />
)} )}
{getCategoryIcon(category.id)} {getCategoryIcon(category.id)}
<span>{category.name}</span> <span className="text-base font-medium">{category.name}</span>
</div> </div>
<Badge <Badge
variant="outline" variant="outline"
className={`bg-slate-700 border-slate-600 ${getCategoryColor(category.id)} text-xs px-2 py-0.5`} className={`bg-slate-700 border-slate-600 ${getCategoryColor(category.id)} px-2 py-1`}
> >
{category.signatures.length} {category.signatures.length}
</Badge> </Badge>

24
src/components/SignatureListItem.tsx
View File

@@ -10,11 +10,11 @@ interface SignatureListItemProps {
export const SignatureListItem = ({ signature }: SignatureListItemProps) => { export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
const getTypeIcon = (type: string) => { const getTypeIcon = (type: string) => {
const lowerType = type.toLowerCase(); const lowerType = type.toLowerCase();
if (lowerType.includes("combat")) return <Zap className="h-3 w-3" />; if (lowerType.includes("combat")) return <Zap className="h-4 w-4" />;
if (lowerType.includes("exploration") || lowerType.includes("relic") || lowerType.includes("data")) if (lowerType.includes("exploration") || lowerType.includes("relic") || lowerType.includes("data"))
return <Shield className="h-3 w-3" />; return <Shield className="h-4 w-4" />;
if (lowerType.includes("ore") || lowerType.includes("gas")) return <Coins className="h-3 w-3" />; if (lowerType.includes("ore") || lowerType.includes("gas")) return <Coins className="h-4 w-4" />;
return <HelpCircle className="h-3 w-3" />; return <HelpCircle className="h-4 w-4" />;
}; };
const getTypeColor = (type: string, dangerous: boolean = false) => { const getTypeColor = (type: string, dangerous: boolean = false) => {
@@ -67,7 +67,7 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
return ( return (
<div <div
className={`flex items-center justify-between p-2 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-colors ${oldEntry ? "opacity-50" : ""
}`} }`}
> >
<div className="flex items-center gap-3 flex-1"> <div className="flex items-center gap-3 flex-1">
@@ -77,17 +77,17 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
className={`${getTypeColor( className={`${getTypeColor(
signature.type, signature.type,
signature.dangerous signature.dangerous
)} px-2 py-0.5 text-xs 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`}
> >
{signature.dangerous ? <Skull className="h-3 w-3 text-red-400 animate-pulse" /> : getTypeIcon(signature.type)} {signature.dangerous ? <Skull className="h-4 w-4 text-red-400 animate-pulse" /> : getTypeIcon(signature.type)}
{signature.type || "Unknown"} {signature.type || "Unknown"}
</Badge> </Badge>
{/* Signature Name and ID */} {/* Signature Name and ID */}
<div className="flex-1 min-w-[150px]"> <div className="flex-1 min-w-[150px]">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="font-mono text-xs text-slate-400 min-w-[50px]">{signature.identifier}</span> <span className="font-mono text-sm text-slate-400 min-w-[50px]">{signature.identifier}</span>
<h3 className="text-white font-medium text-sm flex items-center gap-2"> <h3 className="text-white font-medium flex items-center gap-2">
{signature.signame || "Unnamed Signature"} {signature.signame || "Unnamed Signature"}
{signature.dangerous && ( {signature.dangerous && (
<Badge variant="outline" className="bg-red-900/50 text-red-200 border-red-500 px-1 py-0 text-xs"> <Badge variant="outline" className="bg-red-900/50 text-red-200 border-red-500 px-1 py-0 text-xs">
@@ -99,11 +99,11 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
</div> </div>
{/* Dates */} {/* Dates */}
<div className="flex flex-col gap-0.5 text-xs text-slate-400 min-w-[150px]"> <div className="flex flex-col gap-0.5 text-sm text-slate-400 min-w-[150px]">
{signature.updated && ( {signature.updated && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{oldEntry && <AlertTriangle className="h-3 w-3 text-yellow-500" />} {oldEntry && <AlertTriangle className="h-4 w-4 text-yellow-500" />}
<Clock className="h-3 w-3" /> <Clock className="h-4 w-4" />
<span>Updated: {formatDate(signature.updated)}</span> <span>Updated: {formatDate(signature.updated)}</span>
</div> </div>
)} )}