fix: Hex Wars Badge - gleiche Farbe und Position wie Nachrichten

This commit is contained in:
2026-06-29 11:58:05 +02:00
parent ed3e56fb43
commit 59596fcc96

View File

@@ -182,7 +182,7 @@ function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTurns
)}
{collapsed && item.id==='gebietseroberung' && hexWarsTurns>0 && (
<span style={{ position:'absolute', top:-3, right:-3, width:7, height:7,
borderRadius:'50%', background:'#ff6b9d', boxShadow:'0 0 5px #ff6b9d' }}/>
borderRadius:'50%', background:'#4ecdc4', boxShadow:'0 0 5px #4ecdc4' }}/>
)}
</span>
{!collapsed && <span style={{ flex:1, color:ic }}>{item.label}</span>}
@@ -191,7 +191,7 @@ function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTurns
fontFamily:'monospace', padding:'1px 6px', fontWeight:700, flexShrink:0 }}>{unreadMsgs}</span>
)}
{!collapsed && item.id==='gebietseroberung' && hexWarsTurns>0 && (
<span style={{ background:'#ff6b9d', color:'#000', borderRadius:10, fontSize:9,
<span style={{ background:'#4ecdc4', color:'#000', borderRadius:10, fontSize:9,
fontFamily:'monospace', padding:'1px 6px', fontWeight:700, flexShrink:0 }}>{hexWarsTurns}</span>
)}
</button>
@@ -278,13 +278,15 @@ function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTur
const [appsOpen, setAppsOpen] = useState(false);
const NAV_H = 56;
const MI = ({Icon, icon, label, onClick, color='rgba(255,255,255,0.85)'}) => {
const MI = ({Icon, icon, label, onClick, color='rgba(255,255,255,0.85)', dot=false}) => {
const Ic = Icon;
return (
<button onClick={onClick} style={{ width:'100%', padding:'11px 20px', background:'transparent',
border:'none', display:'flex', alignItems:'center', gap:12, cursor:'pointer' }}>
<span style={{flexShrink:0, width:22, display:'flex', alignItems:'center', justifyContent:'center'}}>
border:'none', display:'flex', alignItems:'center', gap:12, cursor:'pointer', position:'relative' }}>
<span style={{flexShrink:0, width:22, display:'flex', alignItems:'center', justifyContent:'center', position:'relative'}}>
{Ic ? <Ic size={18} color={color}/> : <span style={{fontSize:17, color}}>{icon}</span>}
{dot && <span style={{ position:'absolute', top:-3, right:-3, width:7, height:7,
borderRadius:'50%', background:'#4ecdc4', boxShadow:'0 0 5px #4ecdc4' }}/>}
</span>
<span style={{color, fontFamily:'monospace', fontSize:13}}>{label}</span>
</button>
@@ -340,7 +342,7 @@ function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTur
letterSpacing:2, padding:'12px 20px 5px' }}>{group.toUpperCase()}</div>
{tools.map(t => (
<MI key={t.id} Icon={t.Icon}
label={t.id==='gebietseroberung' && hexWarsTurns>0 ? `${t.label}` : t.label}
label={t.label} dot={t.id==='gebietseroberung' && hexWarsTurns>0}
onClick={() => { setActive(t.id); setAppsOpen(false); }} />
))}
</div>
@@ -373,11 +375,7 @@ function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTur
style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center',
justifyContent:'center', gap:3, background:'transparent', border:'none',
cursor:'pointer', position:'relative', minWidth:0, padding:'0 4px' }}>
{isApps && hexWarsTurns>0 && (
<span style={{ position:'absolute', top:2, right:2, width:7, height:7,
borderRadius:'50%', background:'#ff6b9d', boxShadow:'0 0 4px #ff6b9d' }}/>
)}
{isApps && unreadMsgs>0 && (
{isApps && (hexWarsTurns>0 || unreadMsgs>0) && (
<span style={{ position:'absolute', top:6, right:'calc(50% - 16px)',
width:8, height:8, borderRadius:'50%', background:'#4ecdc4',
boxShadow:'0 0 6px #4ecdc4', display:'inline-block' }} />