Webinterface: Emojis durch Lucide-Icons ersetzt
Emojis werden vom Betriebssystem gerendert — auf Windows, Mac und Android sehen sie unterschiedlich aus, und sie sind bunt. Im streng zweifarbigen D4RKST3R-Look stachen sie entsprechend heraus. Jetzt kommen die Symbole aus einem einzigen Set (Lucide, dünne Outlines), zentral in src/icons.jsx gebündelt: eine Größe, eine Strichstärke, überall gleich — und sie erben die Textfarbe, sind also Teil der Marke statt Fremdkörper. Betroffen sind Navigation, Startseite, Server, Roadmap, Profil, Level, Galerie, Devlogs, Lightbox, Composer und alle Setup-Tabs. Bewusst Emojis geblieben sind: - die Spiel-Presets der Server (landen als Icon im Discord-Embed) - Rollen-Menü-Emojis und Platzhalter für Discord-Inhalte - beschreibende Hinweise wie „🔔-Button am Post" oder „🟢/🔴 im Embed", die zeigen, wie etwas in Discord aussehen wird - die selbst gepflegten Dienst-Icons im Portal Dazu Detailarbeit: Server-Status als farbiger Punkt statt Emoji, Platz 1–3 der Bestenliste als Pokal in Gold/Silber/Bronze, Pagination mit Chevrons. Bundle wächst um 19 kB (Tree-Shaking greift, nur die ~70 genutzten Icons). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { apiGet } from '../api.js';
|
||||
import { SkeletonCards } from '../components/Skeleton.jsx';
|
||||
import { IconGame, IconMapPin, IconClock, IconCheck } from '../icons.jsx';
|
||||
|
||||
const timeFmt = new Intl.DateTimeFormat('de-DE', { hour: '2-digit', minute: '2-digit' });
|
||||
|
||||
@@ -68,9 +69,13 @@ function ServerCard({ s }) {
|
||||
<div className="srv-title">
|
||||
<span className="srv-name">{s.name}</span>
|
||||
<span className={`srv-status ${s.online ? 'on' : s.online === false ? 'off' : ''}`}>
|
||||
{s.online === null ? '⏳ Warte auf Check' : s.online ? '🟢 Online' : '🔴 Offline'}
|
||||
{s.online === null
|
||||
? <><IconClock size={13} /> Warte auf Check</>
|
||||
: <><span className="srv-dot" /> {s.online ? 'Online' : 'Offline'}</>}
|
||||
{s.ping != null && s.online && <span className="srv-ping"> · {s.ping}ms</span>}
|
||||
{s.map && s.online && <span className="srv-map"> · 🗺️ {s.map}</span>}
|
||||
{s.map && s.online && (
|
||||
<span className="srv-map"> · <IconMapPin size={13} /> {s.map}</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{s.online && s.players != null && (
|
||||
@@ -102,10 +107,14 @@ function ServerCard({ s }) {
|
||||
|
||||
{(s.connect_url || s.address) && (
|
||||
<div className="srv-connect">
|
||||
{s.connect_url && <a className="btn btn-save" href={s.connect_url}>🎮 Connect</a>}
|
||||
{s.connect_url && (
|
||||
<a className="btn btn-save with-icon" href={s.connect_url}>
|
||||
<IconGame size={15} /> Connect
|
||||
</a>
|
||||
)}
|
||||
{s.address && (
|
||||
<button className="alpha-key srv-addr" onClick={copyAddress} title="Adresse kopieren">
|
||||
{copied ? '✓ Kopiert!' : s.address}
|
||||
{copied ? <span className="with-icon"><IconCheck size={14} /> Kopiert!</span> : s.address}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user