fix: responsiveness

src/components/CardContainer.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Box, Typography } from '@mui/material';
 
 export function CardContainer({
@@ -14,27 +15,16 @@ export function CardContainer({
   highlighted?: boolean;
 }) {
   return (
-    <Box
-      sx={{
-        width: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        px: { xs: 2, sm: 3, md: 4 },
-      }}
-    >
+    <Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
       <Box
         sx={{
+          marginInline: 'auto',
           width: '100%',
-          maxWidth: {
-            xs: '100%',
-            sm: '500px',
-            md: '818px',
-          },
+          maxWidth: 'min(100%, 818px)',
+          paddingInline: { xs: 2, sm: 3, md: 4 },
           display: 'flex',
           flexDirection: 'column',
           gap: 2,
-          mx: 'auto',
-          px: { xs: 2, sm: 3, md: 4 },
         }}
       >
         <Box
@@ -43,9 +33,7 @@ export function CardContainer({
             justifyContent: 'space-between',
             alignItems: { xs: 'flex-start', sm: 'center' },
             flexDirection: { xs: 'column', sm: 'row' },
-            backgroundColor: highlighted
-              ? 'primary.light'
-              : 'background.default',
+            bgcolor: highlighted ? 'primary.light' : 'background.default',
             p: 2,
             borderRadius: 1,
             gap: { xs: 1, sm: 0 },

src/components/CustomAlert.tsx

@@ -1,97 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Box, Alert, IconButton, type AlertColor } from '@mui/material';
-import {
-  TickCircle,
-  CloseSquare,
-  Warning2,
-  InfoCircle,
-  CloseCircle,
-} from 'iconsax-react';
-
-type AlertType = AlertColor;
-
-interface CustomAlertProps {
-  message: string;
-  onClose: () => void;
-  severity?: AlertType;
-  open: boolean;
-  duration?: number;
-  delayOnClose?: number;
-  rtl?: boolean;
-  icon?: React.ReactNode;
-}
-
-const defaultIcons: Record<AlertType, React.ReactNode> = {
-  success: <TickCircle size="20" color="#fff" />,
-  error: <CloseSquare size="20" color="#fff" />,
-  warning: <Warning2 size="20" color="#fff" />,
-  info: <InfoCircle size="20" color="#fff" />,
-};
-
-export const CustomAlert: React.FC<CustomAlertProps> = ({
-  message,
-  severity,
-  open,
-  onClose,
-  duration = 4000,
-  delayOnClose = 2000,
-  rtl = false,
-  icon,
-}) => {
-  const [visible, setVisible] = useState(open);
-
-  useEffect(() => {
-    setVisible(open);
-  }, [open]);
-
-  useEffect(() => {
-    if (visible && duration > 0) {
-      const timer = setTimeout(() => {
-        setVisible(false);
-        onClose();
-      }, duration);
-      return () => clearTimeout(timer);
-    }
-  }, [visible, duration, onClose]);
-
-  const handleClose = () => {
-    setTimeout(() => {
-      setVisible(false);
-      onClose();
-    }, delayOnClose);
-  };
-
-  if (!visible) return null;
-
-  return (
-    <Box
-      sx={{
-        position: 'fixed',
-        bottom: 20,
-        left: 20,
-        zIndex: 9999,
-      }}
-    >
-      <Alert
-        severity={severity}
-        variant="filled"
-        icon={icon ?? defaultIcons[severity ?? 'success']}
-        action={
-          <IconButton onClick={handleClose} sx={{ color: 'black', p: 0.5 }}>
-            <CloseCircle size="20" />
-          </IconButton>
-        }
-        sx={{
-          width: '396px',
-          flexDirection: 'row-reverse',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          textAlign: rtl ? 'right' : 'left',
-          direction: rtl ? 'rtl' : 'ltr',
-        }}
-      >
-        {message}
-      </Alert>
-    </Box>
-  );
-};

src/components/Toast.tsx

@@ -0,0 +1,23 @@
+import { Alert, Snackbar, type AlertColor } from '@mui/material';
+import React, { type PropsWithChildren } from 'react';
+
+export interface ToastProps extends PropsWithChildren {
+  color: AlertColor | undefined;
+  open: boolean;
+  onClose: () => void;
+}
+
+export const Toast = ({ color, open, onClose, children }: ToastProps) => {
+  return (
+    <Snackbar sx={{ minWidth: '396px' }} open={open} onClose={onClose}>
+      <Alert
+        onClose={onClose}
+        severity={color}
+        variant="filled"
+        sx={{ width: '100%' }}
+      >
+        {children}
+      </Alert>
+    </Snackbar>
+  );
+};