Outline selected cards

0xneged · Aug 6, 2024 · f551c58 · f551c58
1 parent 8c7ccf3
commit f551c58
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/components/TowerGame/TowerCard.tsx b/src/components/TowerGame/TowerCard.tsx
@@ -25,8 +25,9 @@ export default function ({
   glow,
 }: TowerCardProps) {
   const bg = statusToBg[status]
-  const boxShadow = glow ? 'shadow-card shadow-hat' : ''
-  const opacity = disabled ? 'opacity-70' : 'opacity-100'
+  const boxShadow = glow ? 'shadow-card shadow-secondary' : ''
+  const border = glow ? 'border-secondary' : 'border-primary-dark '
+  const opacity = disabled ? 'opacity-50' : 'opacity-100'
   const animation = animated ? 'bg-scroll' : 'hover:bg-scroll'
   const cursor = disabled ? 'cursor-not-allowed' : 'cursor-pointer'
   const transform =
@@ -36,12 +37,11 @@ export default function ({
 
   return (
     <Tilt
-      className={`${bg} ${animation} ${opacity} ${cursor} ${boxShadow} rounded-lg border-2 border-primary-dark transition-all w-full h-20`}
+      className={`${bg} ${animation} ${opacity} ${cursor} ${boxShadow} rounded-lg border-2 ${border} transition-all w-full h-20`}
       style={{
         transformStyle: 'preserve-3d',
         background: 'url(img/hatsBg.svg)',
         backgroundSize: '120%',
-        backgroundOpacity: '70%',
         backgroundPosition: 'center center',
         backgroundRepeat: 'repeat-x',
       }}

diff --git a/src/components/TowerGame/index.tsx b/src/components/TowerGame/index.tsx
@@ -19,7 +19,7 @@ import {
 
 const statusToElement = (hatAmount: string | number) => ({
   [TowerCardStatus.hidden]: (
-    <div className="rounded-3xl w-28 h-12 bg-primary flex flex-row gap-x-2 items-center justify-center drop-shadow">
+    <div className="rounded-3xl w-20 md:w-28 h-12 bg-primary flex flex-row gap-x-2 items-center justify-center drop-shadow">
       {typeof hatAmount === 'number' ? roundNumber(hatAmount) : hatAmount}{' '}
       <HatIcon />
     </div>