julienfroidefond/got-gaming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor UI components for improved responsiveness and consistency: Update styles in AdminPanel, EventManagement, FeedbackManagement, HeroSection, ImageSelector, LeaderboardSection, Navigation, PlayerStats, and UserManagement to enhance mobile and desktop layouts. Adjust text sizes, padding, and button styles for better user experience across devices.

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-11 06:45:14 +01:00
parent f0c9a9e4cc
commit 7dbd044859
9 changed files with 449 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
components/UserManagement.tsx
View File

@@ -174,12 +174,12 @@ export default function UserManagement() {
return (
<div
key={user.id}
className="bg-black/60 border border-pixel-gold/20 rounded p-3"
className="bg-black/60 border border-pixel-gold/20 rounded p-3 sm:p-4"
>
<div className="flex justify-between items-center mb-2">
<div className="flex gap-3 items-center flex-1 min-w-0">
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 mb-2">
<div className="flex gap-2 sm:gap-3 items-center flex-1 min-w-0">
{/* Avatar */}
<div className="w-10 h-10 rounded-full border-2 border-pixel-gold/50 overflow-hidden bg-black/60 flex-shrink-0">
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full border-2 border-pixel-gold/50 overflow-hidden bg-black/60 flex-shrink-0">
{user.avatar ? (
<img
src={user.avatar}
@@ -194,7 +194,7 @@ export default function UserManagement() {
/>
) : null}
<div
className={`w-full h-full flex items-center justify-center text-pixel-gold text-sm font-bold ${
className={`w-full h-full flex items-center justify-center text-pixel-gold text-xs sm:text-sm font-bold ${
user.avatar ? "hidden" : ""
}`}
>
@@ -202,18 +202,18 @@ export default function UserManagement() {
</div>
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<h3 className="text-pixel-gold font-bold text-base">
<div className="flex items-center gap-1.5 sm:gap-2 flex-wrap">
<h3 className="text-pixel-gold font-bold text-sm sm:text-base break-words">
{user.username}
</h3>
<span className="text-xs text-gray-500">
<span className="text-[10px] sm:text-xs text-gray-500 whitespace-nowrap">
Niveau {user.level}
</span>
<span className="text-xs text-gray-500">
<span className="text-[10px] sm:text-xs text-gray-500 whitespace-nowrap">
Score: {formatNumber(user.score)}
</span>
<span
className={`text-xs ${
className={`text-[10px] sm:text-xs whitespace-nowrap ${
user.role === "ADMIN"
? "text-pixel-gold"
: "text-gray-500"
@@ -222,23 +222,23 @@ export default function UserManagement() {
{user.role}
</span>
</div>
<p className="text-gray-400 text-xs truncate">
<p className="text-gray-400 text-[10px] sm:text-xs truncate">
{user.email}
</p>
</div>
</div>
{!isEditing && (
<div className="flex gap-2 flex-shrink-0 ml-2">
<div className="flex gap-2 flex-shrink-0 sm:ml-2">
<button
onClick={() => handleEdit(user)}
className="px-3 py-1.5 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition"
className="px-2 sm:px-3 py-1.5 border border-pixel-gold/50 bg-black/60 text-white uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition whitespace-nowrap"
>
Modifier
</button>
<button
onClick={() => handleDelete(user.id)}
disabled={deletingUserId === user.id}
className="px-3 py-1.5 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-xs tracking-widest rounded hover:bg-red-900/30 transition disabled:opacity-50"
className="px-2 sm:px-3 py-1.5 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-red-900/30 transition disabled:opacity-50 whitespace-nowrap"
>
{deletingUserId === user.id
? "Suppression..."
@@ -253,14 +253,14 @@ export default function UserManagement() {
{/* HP Section */}
<div>
<div className="flex justify-between items-center mb-2">
<label className="text-sm text-gray-300">
<label className="text-xs sm:text-sm text-gray-300">
Points de Vie (HP)
</label>
<span className="text-xs text-gray-400">
<span className="text-[10px] sm:text-xs text-gray-400">
{previewHp} / {user.maxHp}
</span>
</div>
<div className="flex gap-2">
<div className="flex gap-1 sm:gap-2 flex-wrap">
<button
onClick={() =>
setEditingUser({
@@ -268,7 +268,7 @@ export default function UserManagement() {
hpDelta: editingUser.hpDelta - 100,
})
}
className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-xs rounded hover:bg-red-900/30 transition"
className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
>
-100
</button>
@@ -279,7 +279,7 @@ export default function UserManagement() {
hpDelta: editingUser.hpDelta - 10,
})
}
className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-xs rounded hover:bg-red-900/30 transition"
className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
>
-10
</button>
@@ -292,7 +292,7 @@ export default function UserManagement() {
hpDelta: parseInt(e.target.value) || 0,
})
}
className="flex-1 px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm text-center"
className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
/>
<button
onClick={() =>
@@ -301,7 +301,7 @@ export default function UserManagement() {
hpDelta: editingUser.hpDelta + 10,
})
}
className="px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-xs rounded hover:bg-green-900/30 transition"
className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
>
+10
</button>
@@ -312,7 +312,7 @@ export default function UserManagement() {
hpDelta: editingUser.hpDelta + 100,
})
}
className="px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-xs rounded hover:bg-green-900/30 transition"
className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
>
+100
</button>
@@ -333,14 +333,14 @@ export default function UserManagement() {
{/* XP Section */}
<div>
<div className="flex justify-between items-center mb-2">
<label className="text-sm text-gray-300">
<label className="text-xs sm:text-sm text-gray-300">
Expérience (XP)
</label>
<span className="text-xs text-gray-400">
<span className="text-[10px] sm:text-xs text-gray-400">
{formatNumber(previewXp)} / {formatNumber(user.maxXp)}
</span>
</div>
<div className="flex gap-2">
<div className="flex gap-1 sm:gap-2 flex-wrap">
<button
onClick={() =>
setEditingUser({
@@ -348,7 +348,7 @@ export default function UserManagement() {
xpDelta: editingUser.xpDelta - 1000,
})
}
className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-xs rounded hover:bg-red-900/30 transition"
className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
>
-1000
</button>
@@ -359,7 +359,7 @@ export default function UserManagement() {
xpDelta: editingUser.xpDelta - 100,
})
}
className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-xs rounded hover:bg-red-900/30 transition"
className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
>
-100
</button>
@@ -372,7 +372,7 @@ export default function UserManagement() {
xpDelta: parseInt(e.target.value) || 0,
})
}
className="flex-1 px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm text-center"
className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
/>
<button
onClick={() =>
@@ -381,7 +381,7 @@ export default function UserManagement() {
xpDelta: editingUser.xpDelta + 100,
})
}
className="px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-xs rounded hover:bg-green-900/30 transition"
className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
>
+100
</button>
@@ -392,7 +392,7 @@ export default function UserManagement() {
xpDelta: editingUser.xpDelta + 1000,
})
}
className="px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-xs rounded hover:bg-green-900/30 transition"
className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
>
+1000
</button>
@@ -412,10 +412,10 @@ export default function UserManagement() {
{/* Score Section */}
<div>
<label className="block text-sm text-gray-300 mb-2">
<label className="block text-xs sm:text-sm text-gray-300 mb-2">
Score
</label>
<div className="flex gap-2">
<div className="flex gap-1 sm:gap-2 flex-wrap">
<button
onClick={() =>
setEditingUser({
@@ -423,7 +423,7 @@ export default function UserManagement() {
score: (editingUser.score || 0) - 1000,
})
}
className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-xs rounded hover:bg-red-900/30 transition"
className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
>
-1000
</button>
@@ -434,7 +434,7 @@ export default function UserManagement() {
score: (editingUser.score || 0) - 100,
})
}
className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-xs rounded hover:bg-red-900/30 transition"
className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
>
-100
</button>
@@ -447,7 +447,7 @@ export default function UserManagement() {
score: parseInt(e.target.value) || 0,
})
}
className="flex-1 px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm text-center"
className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
/>
<button
onClick={() =>
@@ -456,7 +456,7 @@ export default function UserManagement() {
score: (editingUser.score || 0) + 100,
})
}
className="px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-xs rounded hover:bg-green-900/30 transition"
className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
>
+100
</button>
@@ -467,7 +467,7 @@ export default function UserManagement() {
score: (editingUser.score || 0) + 1000,
})
}
className="px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-xs rounded hover:bg-green-900/30 transition"
className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
>
+1000
</button>
@@ -476,10 +476,10 @@ export default function UserManagement() {
{/* Level Section */}
<div>
<label className="block text-sm text-gray-300 mb-2">
<label className="block text-xs sm:text-sm text-gray-300 mb-2">
Niveau
</label>
<div className="flex gap-2">
<div className="flex gap-1 sm:gap-2">
<button
onClick={() =>
setEditingUser({
@@ -487,7 +487,7 @@ export default function UserManagement() {
level: Math.max(1, (editingUser.level || 1) - 1),
})
}
className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-xs rounded hover:bg-red-900/30 transition"
className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
>
-1
</button>
@@ -501,7 +501,7 @@ export default function UserManagement() {
level: Math.max(1, parseInt(e.target.value) || 1),
})
}
className="flex-1 px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm text-center"
className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
/>
<button
onClick={() =>
@@ -510,7 +510,7 @@ export default function UserManagement() {
level: (editingUser.level || 1) + 1,
})
}
className="px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-xs rounded hover:bg-green-900/30 transition"
className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
>
+1
</button>
@@ -519,7 +519,7 @@ export default function UserManagement() {
{/* Role Section */}
<div>
<label className="block text-sm text-gray-300 mb-2">
<label className="block text-xs sm:text-sm text-gray-300 mb-2">
Rôle
</label>
<div className="flex gap-2">
@@ -530,7 +530,7 @@ export default function UserManagement() {
role: "USER",
})
}
className={`flex-1 px-4 py-2 border rounded text-xs uppercase tracking-widest transition ${
className={`flex-1 px-3 sm:px-4 py-2 border rounded text-[10px] sm:text-xs uppercase tracking-widest transition ${
editingUser.role === "USER"
? "border-pixel-gold bg-pixel-gold/20 text-pixel-gold"
: "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30"
@@ -545,7 +545,7 @@ export default function UserManagement() {
role: "ADMIN",
})
}
className={`flex-1 px-4 py-2 border rounded text-xs uppercase tracking-widest transition ${
className={`flex-1 px-3 sm:px-4 py-2 border rounded text-[10px] sm:text-xs uppercase tracking-widest transition ${
editingUser.role === "ADMIN"
? "border-pixel-gold bg-pixel-gold/20 text-pixel-gold"
: "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30"
@@ -556,7 +556,7 @@ export default function UserManagement() {
</div>
</div>
<div className="flex gap-2 pt-2">
<div className="flex flex-col sm:flex-row gap-2 pt-2">
<button
onClick={handleSave}
disabled={saving}
@@ -573,7 +573,7 @@ export default function UserManagement() {
</div>
</div>
) : (
<div className="flex gap-4 text-xs">
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 text-[10px] sm:text-xs">
<div className="flex-1">
<div className="flex justify-between items-center mb-0.5">
<span className="text-gray-400">HP</span>