modify raffle card ui

EveripediaNetwork · May 13, 2024 · f80b860 · f80b860
1 parent 4fb60e6
commit f80b860
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/src/components/client/RafflePage.tsx b/src/components/client/RafflePage.tsx
@@ -16,9 +16,14 @@ import {
   chakra,
 } from '@chakra-ui/react'
 import { useRouter } from 'next/navigation'
+import { useColorModeValue } from '@chakra-ui/react'
 
 const RafflePage = () => {
   const router = useRouter()
+  const shadowColor = useColorModeValue(
+    '0px 5px 10px rgba(245, 190, 216, 0.2)',
+    '0px 5px 10px rgba(245, 190, 216, 0.1)',
+  )
   return (
     <Flex pt={{ base: '5', lg: '6' }} direction="column" gap="6" pb="20">
       <Flex direction="column" gap="1">
@@ -39,6 +44,10 @@ const RafflePage = () => {
             maxW="576px"
             onClick={() => router.push(`/dashboard/raffles/${raffle.slug}`)}
             cursor="pointer"
+            _hover={{
+              transform: 'scale(1.02)',
+              boxShadow: shadowColor,
+            }}
           >
             <Image
               src={raffle.imageUrl}