refactor: migrate all components to Tailwind, globals.css 1676 → 88 lignes

app/components/ProfileScreen.tsx

@@ -42,13 +42,7 @@ function computeStats(games: Game[]): Stats {
   };
 }
 
-export function ProfileScreen({
-  userName,
-  onBack,
-}: {
-  userName: string;
-  onBack: () => void;
-}) {
+export function ProfileScreen({ userName, onBack }: { userName: string; onBack: () => void }) {
   const [games, setGames] = useState<Game[]>([]);
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState<"all" | "solo" | "multi">("all");
@@ -63,51 +57,63 @@ export function ProfileScreen({
   const filtered = filter === "all" ? games : games.filter((g) => g.mode === filter);
   const stats = computeStats(filtered);
 
+  const statCardCls = "bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-3.5 text-center flex flex-col gap-1";
+
   return (
-    <div className="screen profile-screen">
-      <div className="profile-header">
-        <button className="btn btn-ghost btn-back" onClick={onBack}>← Retour</button>
-        <div className="profile-title">
-          <span className="profile-avatar">{userName[0].toUpperCase()}</span>
-          <h2 className="profile-name">{userName}</h2>
+    <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col max-w-175 mx-auto px-4 pb-10">
+      {/* Header */}
+      <div className="flex items-center justify-between py-4 gap-3">
+        <button className="min-h-9.5 px-3.5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onBack}>
+          ← Retour
+        </button>
+        <div className="flex items-center gap-2.5">
+          <span className="w-10 h-10 rounded-full bg-[#7c3aed] text-white flex items-center justify-center text-lg font-bold shrink-0">
+            {userName[0].toUpperCase()}
+          </span>
+          <h2 className="text-xl font-bold">{userName}</h2>
         </div>
-        <button className="btn btn-ghost" onClick={() => signOut({ redirect: false }).then(onBack)}>
+        <button
+          className="min-h-9.5 px-3.5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer"
+          onClick={() => signOut({ redirect: false }).then(onBack)}
+        >
           Déconnexion
         </button>
       </div>
 
-      <div className="profile-stats-grid">
-        <div className="stat-card">
-          <span className="stat-card-value">{stats.total}</span>
-          <span className="stat-card-label">Parties</span>
+      {/* Stats grid */}
+      <div className="grid grid-cols-3 gap-2.5 my-4">
+        <div className={statCardCls}>
+          <span className="text-[22px] font-black">{stats.total}</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Parties</span>
         </div>
-        <div className="stat-card">
-          <span className="stat-card-value">{stats.won}</span>
-          <span className="stat-card-label">Victoires</span>
+        <div className={statCardCls}>
+          <span className="text-[22px] font-black">{stats.won}</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Victoires</span>
         </div>
-        <div className="stat-card">
-          <span className="stat-card-value">{stats.avgClicks > 0 ? stats.avgClicks : "—"}</span>
-          <span className="stat-card-label">Clics moy.</span>
+        <div className={statCardCls}>
+          <span className="text-[22px] font-black">{stats.avgClicks > 0 ? stats.avgClicks : "—"}</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Clics moy.</span>
         </div>
-        <div className="stat-card">
-          <span className="stat-card-value">{stats.avgTime > 0 ? fmt(stats.avgTime) : "—"}</span>
-          <span className="stat-card-label">Temps moy.</span>
+        <div className={statCardCls}>
+          <span className="text-[22px] font-black">{stats.avgTime > 0 ? fmt(stats.avgTime) : "—"}</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Temps moy.</span>
         </div>
-        <div className="stat-card accent">
-          <span className="stat-card-value">{stats.bestClicks > 0 ? stats.bestClicks : "—"}</span>
-          <span className="stat-card-label">Meilleur clics</span>
+        <div className={`${statCardCls} border-[#7c3aed]`}>
+          <span className="text-[22px] font-black text-[#7c3aed]">{stats.bestClicks > 0 ? stats.bestClicks : "—"}</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Meilleur clics</span>
         </div>
-        <div className="stat-card accent">
-          <span className="stat-card-value">{stats.bestTime > 0 ? fmt(stats.bestTime) : "—"}</span>
-          <span className="stat-card-label">Meilleur temps</span>
+        <div className={`${statCardCls} border-[#7c3aed]`}>
+          <span className="text-[22px] font-black text-[#7c3aed]">{stats.bestTime > 0 ? fmt(stats.bestTime) : "—"}</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Meilleur temps</span>
         </div>
       </div>
 
-      <div className="profile-filters">
+      {/* Filters */}
+      <div className="flex gap-2 mb-4">
         {(["all", "solo", "multi"] as const).map((f) => (
           <button
             key={f}
-            className={`filter-btn ${filter === f ? "active" : ""}`}
+            className={`px-4 py-1.5 rounded-full text-xs font-semibold border cursor-pointer transition-colors ${filter === f ? "bg-[#7c3aed] border-[#7c3aed] text-white" : "bg-[#242424] border-[#2e2e2e] text-[#888] hover:text-[#f0f0f0]"}`}
             onClick={() => setFilter(f)}
           >
             {f === "all" ? "Tout" : f === "solo" ? "Solo" : "Multi"}
@@ -115,36 +121,39 @@ export function ProfileScreen({
         ))}
       </div>
 
-      <div className="games-list">
-        {loading && <div className="article-loading"><div className="loading-spinner" /> Chargement...</div>}
+      {/* Game list */}
+      <div className="flex flex-col gap-2.5">
+        {loading && (
+          <div className="flex items-center gap-3 py-10 text-[#888]"><div className="spinner" /> Chargement...</div>
+        )}
         {!loading && filtered.length === 0 && (
-          <p className="games-empty">Aucune partie enregistrée.</p>
+          <p className="text-[#888] text-center py-10">Aucune partie enregistrée.</p>
         )}
         {filtered.map((g) => (
-          <div key={g.id} className={`game-card ${g.won ? "won" : "lost"}`}>
-            <div className="game-card-top">
-              <span className="game-card-mode">{g.mode === "solo" ? "Solo" : "Multi"}</span>
-              <span className="game-card-date">{new Date(g.playedAt).toLocaleDateString("fr-FR")}</span>
-              <span className={`game-card-result ${g.won ? "won" : "lost"}`}>{g.won ? "Victoire" : "Abandon"}</span>
+          <div key={g.id} className={`bg-[#1a1a1a] rounded-xl px-4 py-3.5 flex flex-col gap-2 border-l-4 ${g.won ? "border-l-[#16a34a] border-y border-r border-[#2e2e2e]" : "border-l-[#2e2e2e] border-y border-r border-[#2e2e2e] opacity-70"}`}>
+            <div className="flex items-center gap-2.5 text-xs">
+              <span className="bg-[#242424] rounded px-2 py-0.5 font-semibold text-[#888]">{g.mode === "solo" ? "Solo" : "Multi"}</span>
+              <span className="text-[#888] ml-auto">{new Date(g.playedAt).toLocaleDateString("fr-FR")}</span>
+              <span className={`font-bold ${g.won ? "text-[#16a34a]" : "text-[#888]"}`}>{g.won ? "Victoire" : "Abandon"}</span>
             </div>
-            <div className="game-card-route">
-              <span className="game-card-start">{g.startArticle}</span>
-              <span className="game-card-arrow">→</span>
-              <span className="game-card-target">{g.targetArticle}</span>
+            <div className="flex items-center gap-2 text-sm font-semibold flex-wrap">
+              <span>{g.startArticle}</span>
+              <span className="text-[#888]">→</span>
+              <span className="text-[#7c3aed]">{g.targetArticle}</span>
             </div>
             {g.won && (
-              <div className="game-card-stats">
+              <div className="flex gap-4 text-xs text-[#888]">
                 <span>{g.clicks} clics</span>
                 <span>{fmt(g.timeSeconds)}</span>
                 <span>{g.path.length - 1} articles parcourus</span>
               </div>
             )}
             {g.path.length > 0 && (
-              <div className="game-card-path">
+              <div className="flex flex-wrap gap-1 text-xs text-[#888] pt-1 border-t border-[#2e2e2e]">
                 {g.path.map((t, i) => (
-                  <span key={i} className="game-path-item">
-                    {i > 0 && <span className="game-path-sep">›</span>}
-                    <span className={i === g.path.length - 1 && g.won ? "game-path-end" : ""}>{t}</span>
+                  <span key={i} className="flex items-center gap-1">
+                    {i > 0 && <span className="text-[#555]">›</span>}
+                    <span className={i === g.path.length - 1 && g.won ? "text-[#16a34a] font-semibold" : ""}>{t}</span>
                   </span>
                 ))}
               </div>