Mathew/gestion_projet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Logo de l'app (SVG)

Browse Source 
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>
This commit is contained in:
Mathew
2026-07-01 14:10:28 +02:00
parent 78c4d253db
commit fa4bf546b4
6 changed files with 79 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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> <title>GameDev Tracker</title>
</head> </head>
<body> <body>
public/logo.svg
+16
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 948 B

src/components/Layout.tsx
+3 -3
View File
@@ -10,7 +10,6 @@ import {
ChevronDown, ChevronDown,
LogOut, LogOut,
Settings, Settings,
Gamepad2,
ShieldCheck, ShieldCheck,
Sun, Sun,
Moon Moon
@@ -21,6 +20,7 @@ import { ROLE_LABELS } from '../lib/types'
import { Theme, getTheme, setTheme } from '../lib/theme' import { Theme, getTheme, setTheme } from '../lib/theme'
import { Avatar, Modal } from './ui' import { Avatar, Modal } from './ui'
import NotificationBell from './NotificationBell' import NotificationBell from './NotificationBell'
import Logo from './Logo'
export type Page = export type Page =
| 'dashboard' | 'dashboard'
@@ -63,8 +63,8 @@ export default function Layout({
<div className="flex h-full"> <div className="flex h-full">
{/* Barre latérale */} {/* Barre latérale */}
<aside className="flex w-64 shrink-0 flex-col border-r border-border bg-sidebar"> <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"> <div className="flex items-center gap-2.5 px-4 py-4">
<Gamepad2 size={22} /> <Logo size={28} />
<span className="font-semibold text-ink">GameDev Tracker</span> <span className="font-semibold text-ink">GameDev Tracker</span>
</div> </div>
src/components/Logo.tsx
+53
View File
@@ -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>
)
}
src/pages/Login.tsx
+3 -4
View File
@@ -1,7 +1,8 @@
import { useState } from 'react' import { useState } from 'react'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { Gamepad2, Loader2 } from 'lucide-react' import { Loader2 } from 'lucide-react'
import { supa } from '../lib/supabase' import { supa } from '../lib/supabase'
import Logo from '../components/Logo'
export default function Login(): JSX.Element { export default function Login(): JSX.Element {
const [email, setEmail] = useState('') const [email, setEmail] = useState('')
@@ -31,9 +32,7 @@ export default function Login(): JSX.Element {
className="card w-full max-w-sm" className="card w-full max-w-sm"
> >
<div className="mb-6 flex flex-col items-center gap-2 text-center"> <div className="mb-6 flex flex-col items-center gap-2 text-center">
<div className="rounded-xl bg-accent/20 p-3 text-accent"> <Logo size={56} className="rounded-xl shadow-sm" />
<Gamepad2 size={28} />
</div>
<h1 className="text-xl font-semibold text-ink">GameDev Tracker</h1> <h1 className="text-xl font-semibold text-ink">GameDev Tracker</h1>
<p className="text-sm text-muted">Connecte-toi à ton équipe</p> <p className="text-sm text-muted">Connecte-toi à ton équipe</p>
</div> </div>
src/pages/Onboarding.tsx
+3 -4
View File
@@ -1,6 +1,6 @@
import { useState, useRef } from 'react' import { useState, useRef } from 'react'
import { AnimatePresence, motion } from 'framer-motion' 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 { supa } from '../lib/supabase'
import { useApp } from '../lib/AppContext' import { useApp } from '../lib/AppContext'
import { useFeedback } from '../lib/feedback' import { useFeedback } from '../lib/feedback'
@@ -15,6 +15,7 @@ import {
memberPoles memberPoles
} from '../lib/types' } from '../lib/types'
import { Avatar } from '../components/ui' import { Avatar } from '../components/ui'
import Logo from '../components/Logo'
const COLORS = ['#7c5cff', '#00d2b8', '#ff5c8a', '#ffa53c', '#3ca8ff', '#9bdb4d', '#e15cff', '#ff6b6b'] const COLORS = ['#7c5cff', '#00d2b8', '#ff5c8a', '#ffa53c', '#3ca8ff', '#9bdb4d', '#e15cff', '#ff6b6b']
@@ -111,9 +112,7 @@ export default function Onboarding(): JSX.Element {
> >
{/* En-tête */} {/* En-tête */}
<div className="mb-5 flex items-center gap-3"> <div className="mb-5 flex items-center gap-3">
<div className="rounded-xl bg-accent/20 p-2.5 text-accent"> <Logo size={44} className="rounded-xl shadow-sm" />
<Gamepad2 size={24} />
</div>
<div> <div>
<h1 className="text-lg font-semibold text-ink">Bienvenue dans l'équipe 👋</h1> <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> <p className="text-sm text-muted">Configurons ton profil en 3 étapes.</p>