chore: fix icones
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user