From 85f0ed31a5d9ed9a88cc1c738b4fae11336c0bc7 Mon Sep 17 00:00:00 2001
From: ldeluigi <44567586+ldeluigi@users.noreply.github.com>
Date: Wed, 29 May 2024 22:14:05 +0200
Subject: [PATCH] fix: #489

---
 src/components/combo/CardGroup/CardGroup.tsx       |  2 +-
 src/components/combo/TemplateCard/TemplateCard.tsx | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/combo/CardGroup/CardGroup.tsx b/src/components/combo/CardGroup/CardGroup.tsx
index 05289fc111..67f45a5946 100644
--- a/src/components/combo/CardGroup/CardGroup.tsx
+++ b/src/components/combo/CardGroup/CardGroup.tsx
@@ -36,7 +36,7 @@ const CardGroup = ({ cards, templates }: Props) => {
           onMouseLeave={() => setHoveredOverCardIndex(-1)}
         >
           {'template' in card ?
-            <TemplateCard template={card}/>
+            <TemplateCard className={styles.cardImg} template={card}/>
             :
           <CardLink className="relative" name={card.name}>
             <CardImage
diff --git a/src/components/combo/TemplateCard/TemplateCard.tsx b/src/components/combo/TemplateCard/TemplateCard.tsx
index 23ab139a10..56c81834d1 100644
--- a/src/components/combo/TemplateCard/TemplateCard.tsx
+++ b/src/components/combo/TemplateCard/TemplateCard.tsx
@@ -10,9 +10,11 @@ import ScryfallResultsWheel from "components/combo/TemplateCard/ScryfallResultsW
 
 type Props = {
   template: Template
+  className?: string
+  imgClassName?: string
 }
 
-const TemplateCard = ({template}: Props) => {
+const TemplateCard = ({template, className, imgClassName}: Props) => {
 
   const [resultCount, setResultCount] = useState(0);
   const [results, setResults] = useState<ScryfallCard.Any[]>([]);
@@ -28,8 +30,8 @@ const TemplateCard = ({template}: Props) => {
   }, []);
 
   return (
-    <div>
-      <div className="rounded-xl relative" style={{backgroundColor: '#404040'}}>
+    <div className="relative">
+      <div className={`rounded-xl ${className ?? ''}`} style={{backgroundColor: '#404040'}}>
         <div className="absolute -top-5 text-center w-full text-white font-bold text-[16px] p-7"><TextWithMagicSymbol text={template.template.name}/></div>
         <div className="absolute top-[60px] flex flex-col justify-center w-full items-center z-10">
           {loading ? <Loader/> : <ScryfallResultsWheel cards={results}/>}
@@ -38,7 +40,7 @@ const TemplateCard = ({template}: Props) => {
           {/*<div className="text-center w-full font-bold italic text-gray-400">{loading ? <Loader/> : `${resultCount} legal cards`}</div>*/}
           <ScryfallResultsModal count={resultCount} scryfallApiUrl={template.template.scryfallApi} title={template.template.name}/>
         </div>
-        <img className="opacity-10" src={cardBack.src} alt="MTG Card Back"/>
+        <img className={`opacity-10 ${imgClassName ?? ''}`} src={cardBack.src} alt="MTG Card Back"/>
       </div>
     </div>
   )