Restyle account page

website/src/components/Survey/SurveyCard.tsx

@@ -1,22 +1,18 @@
 import { Box, BoxProps, useColorModeValue } from "@chakra-ui/react";
+import { PropsWithChildren } from "react";
 
-interface SurveyCardProps {
-  className?: string;
-  children: React.ReactNode;
-}
-
-export const SurveyCard = (props: SurveyCardProps) => {
+export const SurveyCard = (props: PropsWithChildren<{ className?: string }>) => {
   const backgroundColor = useColorModeValue("white", "gray.700");
 
   const BoxClasses: BoxProps = {
     gap: "2",
     borderRadius: "xl",
     shadow: "base",
-    className: "p-4 sm:p-6",
+    className: "p-4 sm:p-6 " + (props.className ?? ""),
   };
 
   return (
-    <Box bg={backgroundColor} {...BoxClasses}>
+    <Box as="section" bg={backgroundColor} {...BoxClasses}>
       {props.children}
     </Box>
   );