fix: Hex Wars Badge - gleiche Farbe und Position wie Nachrichten
This commit is contained in:
@@ -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' }} />
|
||||
|
||||
Reference in New Issue
Block a user