fix: donation modal text dark mode (#920)

Author: LeoBonjo

src/layout/ThemeContext.tsx

@@ -48,6 +48,7 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
         algorithm: isDarkTheme ? darkAlgorithm : defaultAlgorithm,
         token: {
           colorBgBase: isDarkTheme ? '#1c1d1c' : '#ffffff',
+          colorTextBase: isDarkTheme ? '#ffffff' : '#000000',
         },
       }}>
       <MuiThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>

src/layout/header/DonationButton.tsx

@@ -37,6 +37,9 @@ export const DonationButton = () => {
       <Modal
         open={open}
         onClose={onClose}
+        sx={{
+          color: 'text.primary', // Dynamically uses the theme’s text color
+        }}
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description">
         <Box dir={i18n.dir()} sx={style}>

src/pages/DonateModal/DonateModal.tsx

@@ -24,9 +24,11 @@ const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose }) => {
     <Modal
       open={isVisible}
       onClose={onClose}
-      style={{ color: '#1498e5' }}
       aria-labelledby="modal-modal-title"
-      aria-describedby="modal-modal-description">
+      aria-describedby="modal-modal-description"
+      sx={{
+        color: 'text.primary', // Dynamically uses the theme’s text color
+      }}>
       <Box dir={i18n.dir()} sx={style}>
         <button onClick={onClose} className="close-modal-icon">
           X