chore: fix icones

This commit is contained in:
2026-05-03 18:25:33 +02:00
parent 7559ec6c5d
commit 4075ae2568
4 changed files with 24 additions and 26 deletions
+13 -9
View File
@@ -404,9 +404,10 @@ div[data-category="gros&semi"] .success-message {
transform: scale(1.05); transform: scale(1.05);
} }
.media-indicator i { .media-indicator svg {
color: #ffffff; color: #ffffff;
font-size: 18px; width: 18px;
height: 18px;
animation: cameraPulse 2s ease-in-out infinite; animation: cameraPulse 2s ease-in-out infinite;
} }
@@ -453,7 +454,7 @@ div[data-category="zipette&co"] .media-indicator:hover {
border-color: #f5f5f0; border-color: #f5f5f0;
} }
div[data-category="zipette&co"] .media-indicator i { div[data-category="zipette&co"] .media-indicator svg {
color: #1a1a1a; color: #1a1a1a;
} }
@@ -621,8 +622,9 @@ div[data-category="gros&semi"] .details-button:hover {
transform: scale(0.95); transform: scale(0.95);
} }
.video-close-btn i { .video-close-btn svg {
font-size: 18px; width: 18px;
height: 18px;
} }
.video-player { .video-player {
@@ -670,8 +672,9 @@ div[data-category="gros&semi"] .details-button:hover {
height: 36px; height: 36px;
} }
.video-close-btn i { .video-close-btn svg {
font-size: 16px; width: 16px;
height: 16px;
} }
.video-player { .video-player {
@@ -702,8 +705,9 @@ div[data-category="gros&semi"] .details-button:hover {
right: 10px; right: 10px;
} }
.media-indicator i { .media-indicator svg {
font-size: 16px; width: 16px;
height: 16px;
} }
} }
+4 -3
View File
@@ -1,6 +1,7 @@
import { useState } from "react"; import { useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useCart } from "../context/useCart"; import { useCart } from "../context/useCart";
import { Camera, Info, X } from "lucide-react";
import "./ProductCard.css"; import "./ProductCard.css";
function getTextColor(hex: string): string { function getTextColor(hex: string): string {
@@ -139,7 +140,7 @@ function ProductCard({
onClick={handleVideoToggle} onClick={handleVideoToggle}
aria-label="Voir la vidéo du produit" aria-label="Voir la vidéo du produit"
> >
<i className="fas fa-camera"></i> <Camera size={18} />
</button> </button>
)} )}
{/* ✨ Bouton "Détails" */} {/* ✨ Bouton "Détails" */}
@@ -148,7 +149,7 @@ function ProductCard({
onClick={handleDetailsClick} onClick={handleDetailsClick}
aria-label="Voir les détails du produit" aria-label="Voir les détails du produit"
> >
<i className="fas fa-info-circle"></i> <Info size={14} />
<span>Détails</span> <span>Détails</span>
</button> </button>
{isOutOfStock && ( {isOutOfStock && (
@@ -229,7 +230,7 @@ function ProductCard({
onClick={handleCloseVideo} onClick={handleCloseVideo}
aria-label="Fermer la vidéo" aria-label="Fermer la vidéo"
> >
<i className="fas fa-times"></i> <X size={18} />
</button> </button>
<video <video
src={videoUrl} src={videoUrl}
+3 -12
View File
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { isUserAuthenticated, getProductById, getMediaUrl } from "../../api/api"; import { isUserAuthenticated, getProductById, getMediaUrl } from "../../api/api";
import type { Product } from "../../api/api"; import type { Product } from "../../api/api";
import { Trash2, ShoppingCart, AlertTriangle } from "lucide-react"; import { Trash2, ShoppingCart, AlertTriangle, Leaf, X } from "lucide-react";
import "./Cart.css"; import "./Cart.css";
interface CartItemWithMedia { interface CartItemWithMedia {
@@ -169,18 +169,9 @@ function Cart() {
/> />
) : ( ) : (
<div className="cart-row-img-placeholder"> <div className="cart-row-img-placeholder">
<i className="fas fa-leaf"></i> <Leaf size={20} />
</div> </div>
)} )}
{(item as CartItemWithMedia).hasVideo && (item as CartItemWithMedia).videoUrl && (
<button
className="cart-row-video-badge"
onClick={(e) => { e.stopPropagation(); setCurrentVideoUrl((item as CartItemWithMedia).videoUrl!); setShowVideo(true); }}
aria-label="Voir la vidéo"
>
<i className="fas fa-camera"></i>
</button>
)}
</div> </div>
{/* Infos */} {/* Infos */}
@@ -247,7 +238,7 @@ function Cart() {
<div className="video-modal" onClick={() => { setShowVideo(false); setCurrentVideoUrl(""); }}> <div className="video-modal" onClick={() => { setShowVideo(false); setCurrentVideoUrl(""); }}>
<div className="video-modal-content" onClick={(e) => e.stopPropagation()}> <div className="video-modal-content" onClick={(e) => e.stopPropagation()}>
<button className="video-close-btn" onClick={() => { setShowVideo(false); setCurrentVideoUrl(""); }}> <button className="video-close-btn" onClick={() => { setShowVideo(false); setCurrentVideoUrl(""); }}>
<i className="fas fa-times"></i> <X size={18} />
</button> </button>
<video src={currentVideoUrl} controls autoPlay className="video-player"> <video src={currentVideoUrl} controls autoPlay className="video-player">
Votre navigateur ne supporte pas la lecture de vidéos. Votre navigateur ne supporte pas la lecture de vidéos.
@@ -24,6 +24,8 @@ import {
Mail, Mail,
CreditCard, CreditCard,
ShoppingBag, ShoppingBag,
Camera,
X,
} from "lucide-react"; } from "lucide-react";
interface OrderProduct { interface OrderProduct {
@@ -622,7 +624,7 @@ function OrderDetails() {
}} }}
aria-label="Voir la vidéo du produit" aria-label="Voir la vidéo du produit"
> >
<i className="fas fa-camera"></i> <Camera size={14} />
<span>Vidéo</span> <span>Vidéo</span>
</button> </button>
)} )}
@@ -767,7 +769,7 @@ function OrderDetails() {
onClick={handleCloseVideo} onClick={handleCloseVideo}
aria-label="Fermer la vidéo" aria-label="Fermer la vidéo"
> >
<i className="fas fa-times"></i> <X size={18} />
</button> </button>
<video <video
src={currentVideoUrl} src={currentVideoUrl}