Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement dark mode support by adjusting background and text colors across various pages and components.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-02-26 16:57:28 -03:00
parent 947abcb0bc
commit e5373919c9
56 changed files with 536 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/experience/src/components/blocks/MatchingPlayer.tsx
+13 -13
View File
@@ -40,21 +40,21 @@ export default function MatchingPlayer({ id, title, pairs, allowRetry = true }:
return (
<div className="space-y-8" id={id}>
<div className="space-y-2">
<h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white uppercase tracking-widest text-[10px]">
<h3 className="text-xl font-bold border-l-4 border-blue-600 dark:border-blue-500 pl-4 py-1 tracking-tight text-gray-900 dark:text-white uppercase tracking-widest text-[10px]">
{title || "Emparejamiento de Conceptos"}
</h3>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 p-8 glass border-white/5 rounded-3xl relative">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 p-8 glass border-black/5 dark:border-white/5 rounded-3xl relative bg-black/[0.02] dark:bg-black/20">
<div className="space-y-4">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-4 block">Término</label>
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-4 block">Término</label>
{(pairs || []).map((pair, i) => (
<button
key={i}
onClick={() => !submitted && setSelectedLeft(i)}
className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft === i ? "border-blue-500 bg-blue-500/10 text-white shadow-lg" :
matches[i] !== undefined ? "border-blue-500/20 bg-blue-500/5 text-blue-400" :
"border-white/5 bg-white/5 text-gray-200 hover:border-white/20"
className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft === i ? "border-blue-600 dark:border-blue-500 bg-blue-600/10 dark:bg-blue-500/10 text-blue-700 dark:text-white shadow-lg" :
matches[i] !== undefined ? "border-blue-600/20 dark:border-blue-500/20 bg-blue-600/5 dark:bg-blue-500/5 text-blue-700 dark:text-blue-400" :
"border-black/5 dark:border-white/5 bg-black/5 dark:bg-white/5 text-gray-800 dark:text-gray-200 hover:border-black/20 dark:hover:border-white/20"
}`}
>
{pair.left}
@@ -63,7 +63,7 @@ export default function MatchingPlayer({ id, title, pairs, allowRetry = true }:
</div>
<div className="space-y-4">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-4 block">Definición</label>
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-4 block">Definición</label>
{shuffledRight.map((item, i) => {
const matchedLeftIdx = Object.keys(matches).find(k => matches[parseInt(k)] === item.originalIdx);
const isCorrect = submitted && matchedLeftIdx !== undefined && parseInt(matchedLeftIdx) === item.originalIdx;
@@ -74,11 +74,11 @@ export default function MatchingPlayer({ id, title, pairs, allowRetry = true }:
key={i}
disabled={selectedLeft === null || submitted}
onClick={() => handleMatch(selectedLeft!, item.originalIdx)}
className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft !== null && matchedLeftIdx === undefined ? "hover:border-blue-500/50 hover:bg-white/5" : ""
} ${isCorrect ? "border-green-500 bg-green-500/20 text-green-400" :
isWrong ? "border-red-500 bg-red-500/20 text-red-100" :
matchedLeftIdx !== undefined ? "border-blue-500/30 bg-blue-500/5 text-blue-400" :
"border-white/5 bg-white/5 text-gray-200"
className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft !== null && matchedLeftIdx === undefined ? "hover:border-blue-600/50 dark:hover:border-blue-500/50 hover:bg-black/5 dark:hover:bg-white/5" : ""
} ${isCorrect ? "border-green-600 dark:border-green-500 bg-green-500/20 text-green-700 dark:text-green-400" :
isWrong ? "border-red-600 dark:border-red-500 bg-red-500/20 text-red-700 dark:text-red-100" :
matchedLeftIdx !== undefined ? "border-blue-600/30 dark:border-blue-500/30 bg-blue-600/5 dark:bg-blue-500/5 text-blue-700 dark:text-blue-400" :
"border-black/5 dark:border-white/5 bg-black/5 dark:bg-white/5 text-gray-800 dark:text-gray-200"
}`}
>
<div className="flex items-center justify-between">
@@ -104,7 +104,7 @@ export default function MatchingPlayer({ id, title, pairs, allowRetry = true }:
{submitted && (
<button
onClick={handleReset}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-2xl border-white/5"
className="w-full py-5 glass text-blue-600 dark:text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-black/5 dark:hover:bg-white/5 transition-all rounded-2xl border-black/5 dark:border-white/5"
>
Intentar de Nuevo
</button>