Logo de l'app (SVG)

Nouveau logo : console de jeu portable avec une coche sur l'écran, sur un badge dégradé indigo→teal (couleurs d'accent de l'app). - Composant réutilisable Logo.tsx (id de dégradé unique via useId) - public/logo.svg + favicon dans index.html - Remplace l'icône Gamepad2 dans la sidebar, le login et l'onboarding Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-01 14:10:28 +02:00
parent 78c4d253db
commit fa4bf546b4
6 changed files with 79 additions and 11 deletions
@@ -3,6 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <title>GameDev Tracker</title>
  </head>
  <body>
@@ -0,0 +1,16 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="GameDev Tracker">
+  <defs>
+    <linearGradient id="gdtLogo" x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#6366F1" />
+      <stop offset="1" stop-color="#14B8A6" />
+    </linearGradient>
+  </defs>
+  <rect width="48" height="48" rx="11" fill="url(#gdtLogo)" />
+  <rect x="12" y="12" width="24" height="24" rx="6" fill="#fff" />
+  <rect x="15.5" y="15.5" width="17" height="11" rx="2.5" fill="#4F46E5" />
+  <path d="M18.6 21.2l2.6 2.6 6.4-6" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
+  <rect x="16.9" y="28.6" width="2.2" height="6" rx="1.1" fill="#4F46E5" />
+  <rect x="15" y="30.5" width="6" height="2.2" rx="1.1" fill="#4F46E5" />
+  <circle cx="29.4" cy="30" r="1.7" fill="#4F46E5" />
+  <circle cx="32.5" cy="32.3" r="1.7" fill="#0D9488" />
+</svg>
@@ -10,7 +10,6 @@ import {
  ChevronDown,
  LogOut,
  Settings,
-  Gamepad2,
  ShieldCheck,
  Sun,
  Moon
@@ -21,6 +20,7 @@ import { ROLE_LABELS } from '../lib/types'
 import { Theme, getTheme, setTheme } from '../lib/theme'
 import { Avatar, Modal } from './ui'
 import NotificationBell from './NotificationBell'
+import Logo from './Logo'

 export type Page =
  | 'dashboard'
@@ -63,8 +63,8 @@ export default function Layout({
    <div className="flex h-full">
      {/* Barre latérale */}
      <aside className="flex w-64 shrink-0 flex-col border-r border-border bg-sidebar">
-        <div className="flex items-center gap-2 px-4 py-4 text-accent">
-          <Gamepad2 size={22} />
+        <div className="flex items-center gap-2.5 px-4 py-4">
+          <Logo size={28} />
          <span className="font-semibold text-ink">GameDev Tracker</span>
        </div>

@@ -0,0 +1,53 @@
+import { useId } from 'react'
+
+/**
+ * Logo de l'application : une console de jeu portable dont l'écran affiche
+ * une coche (« GameDev » + suivi/terminé), sur un badge dégradé indigo→teal.
+ */
+export default function Logo({
+  size = 32,
+  className
+}: {
+  size?: number
+  className?: string
+}): JSX.Element {
+  const id = useId()
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      role="img"
+      aria-label="GameDev Tracker"
+    >
+      <defs>
+        <linearGradient id={id} x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#6366F1" />
+          <stop offset="1" stopColor="#14B8A6" />
+        </linearGradient>
+      </defs>
+      {/* Badge */}
+      <rect width="48" height="48" rx="11" fill={`url(#${id})`} />
+      {/* Corps de la console */}
+      <rect x="12" y="12" width="24" height="24" rx="6" fill="#fff" />
+      {/* Écran + coche */}
+      <rect x="15.5" y="15.5" width="17" height="11" rx="2.5" fill="#4F46E5" />
+      <path
+        d="M18.6 21.2l2.6 2.6 6.4-6"
+        stroke="#fff"
+        strokeWidth="2.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* Croix directionnelle */}
+      <rect x="16.9" y="28.6" width="2.2" height="6" rx="1.1" fill="#4F46E5" />
+      <rect x="15" y="30.5" width="6" height="2.2" rx="1.1" fill="#4F46E5" />
+      {/* Boutons d'action */}
+      <circle cx="29.4" cy="30" r="1.7" fill="#4F46E5" />
+      <circle cx="32.5" cy="32.3" r="1.7" fill="#0D9488" />
+    </svg>
+  )
+}
@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import { motion } from 'framer-motion'
-import { Gamepad2, Loader2 } from 'lucide-react'
+import { Loader2 } from 'lucide-react'
 import { supa } from '../lib/supabase'
+import Logo from '../components/Logo'

 export default function Login(): JSX.Element {
  const [email, setEmail] = useState('')
@@ -31,9 +32,7 @@ export default function Login(): JSX.Element {
        className="card w-full max-w-sm"
      >
        <div className="mb-6 flex flex-col items-center gap-2 text-center">
-          <div className="rounded-xl bg-accent/20 p-3 text-accent">
-            <Gamepad2 size={28} />
-          </div>
+          <Logo size={56} className="rounded-xl shadow-sm" />
          <h1 className="text-xl font-semibold text-ink">GameDev Tracker</h1>
          <p className="text-sm text-muted">Connecte-toi à ton équipe</p>
        </div>
@@ -1,6 +1,6 @@
 import { useState, useRef } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
-import { Gamepad2, ArrowRight, ArrowLeft, Check, Loader2, Sparkles, Camera } from 'lucide-react'
+import { ArrowRight, ArrowLeft, Check, Loader2, Sparkles, Camera } from 'lucide-react'
 import { supa } from '../lib/supabase'
 import { useApp } from '../lib/AppContext'
 import { useFeedback } from '../lib/feedback'
@@ -15,6 +15,7 @@ import {
  memberPoles
 } from '../lib/types'
 import { Avatar } from '../components/ui'
+import Logo from '../components/Logo'

 const COLORS = ['#7c5cff', '#00d2b8', '#ff5c8a', '#ffa53c', '#3ca8ff', '#9bdb4d', '#e15cff', '#ff6b6b']

@@ -111,9 +112,7 @@ export default function Onboarding(): JSX.Element {
      >
        {/* En-tête */}
        <div className="mb-5 flex items-center gap-3">
-          <div className="rounded-xl bg-accent/20 p-2.5 text-accent">
-            <Gamepad2 size={24} />
-          </div>
+          <Logo size={44} className="rounded-xl shadow-sm" />
          <div>
            <h1 className="text-lg font-semibold text-ink">Bienvenue dans l'équipe 👋</h1>
            <p className="text-sm text-muted">Configurons ton profil en 3 étapes.</p>