feat: Remove native-base from NotificationModal

src/components/notifications/MessageBox.tsx

@@ -1,11 +1,10 @@
-import { Modal } from 'native-base';
 import { getIconForMessageType, isMessageValid } from '../../helper/notification-helper';
 import TimeIndicator from './TimeIndicator';
 import { useNavigate } from 'react-router-dom';
 import { useState } from 'react';
 import LeavePageModal from '../../modals/LeavePageModal';
 import { Concrete_Notification } from '../../gql/graphql';
-import AppointmentCancelledModal from './NotificationModal';
+import NotificationModal from './NotificationModal';
 import AchievementMessageModal from '../../modals/AchievementMessageModal';
 import { Typography } from '../Typography';
 import { cn } from '@/lib/Tailwind';
@@ -30,7 +29,6 @@ const MessageBox = ({ userNotification, isStandalone, isRead, updateLastTimeChec
     const { headline, body, type, navigateTo, modalText } = userNotification.message;
 
     const navigateToLink = () => {
-        console.log({ modalText, navigateTo, headline, type });
         if (modalText) {
             setNotificationModalOpen(true);
         }
@@ -56,7 +54,6 @@ const MessageBox = ({ userNotification, isStandalone, isRead, updateLastTimeChec
     const navigateExternal = () => (navigateTo ? window.open(navigateTo, '_blank') : null);
 
     const Icon = getIconForMessageType(type);
-
     const LinkedBox = ({ children, ...rest }: React.HTMLAttributes<HTMLDivElement>) => {
         const Component = () => <div {...rest}>{children}</div>;
         if (typeof navigateTo === 'string') {
@@ -83,14 +80,13 @@ const MessageBox = ({ userNotification, isStandalone, isRead, updateLastTimeChec
                     <div onClick={navigateToLink}>
                         <Component />
                     </div>
-                    <Modal isOpen={notificationModalOpen}>
-                        <AppointmentCancelledModal
-                            messageType={type}
-                            onClose={() => setNotificationModalOpen(false)}
-                            modalText={modalText}
-                            headline={headline}
-                        />
-                    </Modal>
+                    <NotificationModal
+                        messageType={type}
+                        isOpen={notificationModalOpen}
+                        onOpenChange={setNotificationModalOpen}
+                        modalText={modalText}
+                        headline={headline}
+                    />
                 </>
             );
         }

src/components/notifications/NotificationModal.tsx

@@ -1,52 +1,35 @@
-import { Box, CloseIcon, Heading, Modal, Pressable, useTheme, Row, Button, Text } from 'native-base';
 import { useTranslation } from 'react-i18next';
 import { getIconForNotificationPreferenceModal } from '../../helper/notification-helper';
+import { Button } from '../Button';
+import { BaseModalProps, Modal, ModalFooter, ModalHeader, ModalTitle } from '../Modal';
+import { Typography } from '../Typography';
 
-type Props = {
+interface NotificationModalProps extends BaseModalProps {
     messageType: string;
     headline?: string;
     modalText: string;
-    onClose: () => any;
-};
-const AppointmentCancelledModal: React.FC<Props> = ({ messageType, onClose, headline, modalText }) => {
+}
+const NotificationModal = ({ isOpen, onOpenChange, messageType, headline, modalText }: NotificationModalProps) => {
     const { t } = useTranslation();
-    const { space } = useTheme();
 
     const Icon = getIconForNotificationPreferenceModal(messageType);
 
     return (
-        <>
-            <Modal.Content width="350" marginX="auto" backgroundColor="transparent">
-                <Box position="absolute" zIndex="1" right="20px" top="14px">
-                    <Pressable onPress={onClose}>
-                        <CloseIcon color="white" />
-                    </Pressable>
-                </Box>
-                <Modal.Body background="primary.900" padding={space['1']}>
-                    <Box alignItems="center" marginY={space['1']}>
-                        <Icon />
-                    </Box>
-                    <Box paddingY={space['2']} maxW={'100%'}>
-                        {headline && (
-                            <Heading maxWidth="330px" marginX="auto" fontSize="lg" textAlign={'center'} color="lightText" marginBottom={space['0.5']}>
-                                {headline}
-                            </Heading>
-                        )}
-                        <Text my={2} textAlign={'center'} fontSize="sm" color="lightText">
-                            {modalText}
-                        </Text>
-                    </Box>
-                    <Box>
-                        <Row marginBottom={space['0.5']}>
-                            <Button variant={'outlinelight'} onPress={onClose} width="100%">
-                                {t('notification.controlPanel.closeButton')}
-                            </Button>
-                        </Row>
-                    </Box>
-                </Modal.Body>
-            </Modal.Content>
-        </>
+        <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+            <ModalHeader>
+                <ModalTitle>{headline}</ModalTitle>
+            </ModalHeader>
+            <div className="flex flex-col items-center">
+                <Icon className="scale-[0.5]" />
+                <Typography>{modalText}</Typography>
+            </div>
+            <ModalFooter>
+                <Button className="w-full lg:w-fit" variant="outline" onClick={() => onOpenChange(false)}>
+                    {t('notification.controlPanel.closeButton')}
+                </Button>
+            </ModalFooter>
+        </Modal>
     );
 };
 
-export default AppointmentCancelledModal;
+export default NotificationModal;