update and unify modals into generic component

src/components/MoreInfo.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Dialog } from 'primereact/dialog';
+import Modal from '@/components/ui/Modal';
 import { Tooltip } from 'primereact/tooltip';
 import useWindowWidth from '@/hooks/useWindowWidth';
 
@@ -24,7 +24,7 @@ const MoreInfo = ({
       />
       {!isMobile && <Tooltip target=".pi-question-circle" position={tooltipPosition} />}
 
-      <Dialog
+      <Modal
         header={modalTitle}
         visible={visible}
         onHide={() => setVisible(false)}
@@ -32,7 +32,7 @@ const MoreInfo = ({
         breakpoints={{ '960px': '75vw', '641px': '90vw' }}
       >
         {typeof modalBody === 'string' ? <p className="text-gray-200">{modalBody}</p> : modalBody}
-      </Dialog>
+      </Modal>
     </>
   );
 };

src/components/bitcoinConnect/CoursePaymentButton.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
-import { Dialog } from 'primereact/dialog';
+import Modal from '@/components/ui/Modal';
 import { LightningAddress } from '@getalby/lightning-tools';
 import { track } from '@vercel/analytics';
 import { useToast } from '@/hooks/useToast';
@@ -227,11 +227,11 @@ const CoursePaymentButton = ({ lnAddress, amount, onSuccess, onError, courseId }
           />
         </div>
       )}
-      <Dialog
+      <Modal
         visible={dialogVisible}
         onHide={() => setDialogVisible(false)}
         header="Make Payment"
-        style={{ width: isMobile ? '90vw' : '50vw' }}
+        width={isMobile ? '90vw' : '50vw'}
       >
         {invoice ? (
           <Payment
@@ -243,7 +243,7 @@ const CoursePaymentButton = ({ lnAddress, amount, onSuccess, onError, courseId }
         ) : (
           <p>Loading payment details...</p>
         )}
-      </Dialog>
+      </Modal>
     </div>
   );
 };

src/components/bitcoinConnect/ResourcePaymentButton.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
-import { Dialog } from 'primereact/dialog';
+import Modal from '@/components/ui/Modal';
 import { track } from '@vercel/analytics';
 import { LightningAddress } from '@getalby/lightning-tools';
 import { useToast } from '@/hooks/useToast';
@@ -122,11 +122,11 @@ const ResourcePaymentButton = ({ lnAddress, amount, onSuccess, onError, resource
           />
         </div>
       )}
-      <Dialog
+      <Modal
         visible={dialogVisible}
         onHide={() => setDialogVisible(false)}
         header="Make Payment"
-        style={{ width: isMobile ? '90vw' : '50vw' }}
+        width={isMobile ? '90vw' : '50vw'}
       >
         {invoice ? (
           <Payment
@@ -138,7 +138,7 @@ const ResourcePaymentButton = ({ lnAddress, amount, onSuccess, onError, resource
         ) : (
           <p>Loading payment details...</p>
         )}
-      </Dialog>
+      </Modal>
     </>
   );
 };

src/components/forms/course/LessonSelector.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Dropdown } from 'primereact/dropdown';
 import GenericButton from '@/components/buttons/GenericButton';
-import { Dialog } from 'primereact/dialog';
+import Modal from '@/components/ui/Modal';
 import { Accordion, AccordionTab } from 'primereact/accordion';
 import EmbeddedDocumentForm from '@/components/forms/course/embedded/EmbeddedDocumentForm';
 import EmbeddedVideoForm from '@/components/forms/course/embedded/EmbeddedVideoForm';
@@ -233,23 +233,23 @@ const LessonSelector = ({
       </Accordion>
       <GenericButton label="Add New Lesson" onClick={addNewLesson} className="mt-4" type="button" />
 
-      <Dialog
+      <Modal
         className="w-full max-w-screen-md"
         visible={showDocumentForm}
         onHide={() => setShowDocumentForm(false)}
         header="Create New Document"
       >
         <EmbeddedDocumentForm onSave={handleNewDocumentSave} isPaid={isPaidCourse} />
-      </Dialog>
+      </Modal>
 
-      <Dialog
+      <Modal
         className="w-full max-w-screen-md"
         visible={showVideoForm}
         onHide={() => setShowVideoForm(false)}
         header="Create New Video"
       >
         <EmbeddedVideoForm onSave={handleNewVideoSave} isPaid={isPaidCourse} />
-      </Dialog>
+      </Modal>
     </div>
   );
 };

src/components/onboarding/WelcomeModal.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Dialog } from 'primereact/dialog';
+import Modal from '@/components/ui/Modal';
 import { useRouter } from 'next/router';
 
 const WelcomeModal = () => {
@@ -26,10 +26,11 @@ const WelcomeModal = () => {
   };
 
   return (
-    <Dialog
+    <Modal
       header="Welcome to PlebDevs!"
       visible={visible}
-      style={{ width: '90vw', maxWidth: '600px' }}
+      width="90vw"
+      style={{ maxWidth: '600px' }}
       onHide={onHide}
     >
       <div className="text-center mb-4">
@@ -74,7 +75,7 @@ const WelcomeModal = () => {
           <p className="font-bold text-lg">Let&apos;s start your coding journey! 🚀</p>
         </div>
       </div>
-    </Dialog>
+    </Modal>
   );
 };
 

src/components/profile/UserBadges.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Dialog } from 'primereact/dialog';
+import Modal from '@/components/ui/Modal';
 import Image from 'next/image';
 import { useNDKContext } from '@/context/NDKContext';
 import { useSession } from 'next-auth/react';
@@ -99,7 +99,13 @@ const UserBadges = ({ visible, onHide }) => {
   };
 
   return (
-    <Dialog header="Your Badges" visible={visible} onHide={onHide} className="w-full max-w-3xl">
+    <Modal
+      header="Your Badges"
+      visible={visible}
+      onHide={onHide}
+      width="full"
+      className="max-w-3xl"
+    >
       <div className="p-4">
         {loading ? (
           <div className="flex justify-center items-center h-40">
@@ -147,7 +153,7 @@ const UserBadges = ({ visible, onHide }) => {
           </div>
         )}
       </div>
-    </Dialog>
+    </Modal>
   );
 };
 

src/components/profile/UserProfileCard.js

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import Image from 'next/image';
 import { Menu } from 'primereact/menu';
-import { Dialog } from 'primereact/dialog';
+import Modal from '@/components/ui/Modal';
 import { nip19 } from 'nostr-tools';
 import { useImageProxy } from '@/hooks/useImageProxy';
 import { useToast } from '@/hooks/useToast';
@@ -284,12 +284,12 @@ const UserProfileCard = ({ user }) => {
     <>
       {windowWidth <= 1440 ? <MobileProfileCard /> : <DesktopProfileCard />}
       <UserBadges visible={showBadges} onHide={() => setShowBadges(false)} />
-      <Dialog
+      <Modal
         visible={showRelaysModal}
         onHide={() => setShowRelaysModal(false)}
         header="Manage Relays"
-        className="w-[90vw] max-w-[800px]"
-        modal
+        width="full"
+        className="max-w-[800px]"
       >
         <UserRelaysTable
           ndk={ndk}
@@ -297,7 +297,7 @@ const UserProfileCard = ({ user }) => {
           setUserRelays={setUserRelays}
           reInitializeNDK={reInitializeNDK}
         />
-      </Dialog>
+      </Modal>
     </>
   );
 };

src/components/profile/subscription/CalendlyEmbed.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Dialog } from 'primereact/dialog';
+import Modal from '@/components/ui/Modal';
 import { Button } from 'primereact/button';
 import useWindowWidth from '@/hooks/useWindowWidth';
 
@@ -25,10 +25,10 @@ const CalendlyEmbed = ({ visible, onHide, userId, userEmail, userName }) => {
   );
 
   return (
-    <Dialog
+    <Modal
       header="Schedule a Meeting"
       visible={visible}
-      style={{ width: windowWidth < 768 ? '100vw' : '50vw' }}
+      width={windowWidth < 768 ? '100vw' : '50vw'}
       footer={dialogFooter}
       onHide={onHide}
     >
@@ -37,7 +37,7 @@ const CalendlyEmbed = ({ visible, onHide, userId, userEmail, userName }) => {
         data-url={`https://calendly.com/plebdevs/30min?hide_event_type_details=1&hide_gdpr_banner=1&email=${encodeURIComponent(userEmail)}&name=${encodeURIComponent(userName)}&custom_data=${encodeURIComponent(JSON.stringify({ user_id: userId }))}`}
         style={{ minWidth: '320px', height: '700px' }}
       />
-    </Dialog>
+    </Modal>
   );
 };
 

src/components/profile/subscription/CancelSubscription.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Dialog } from 'primereact/dialog';
+import Modal from '@/components/ui/Modal';
 import axios from 'axios';
 import { useSession } from 'next-auth/react';
 import { useToast } from '@/hooks/useToast';
@@ -31,7 +31,11 @@ const CancelSubscription = ({ visible, onHide }) => {
   };
 
   return (
-    <Dialog header="Cancel Subscription" visible={visible} onHide={onHide}>
+    <Modal
+      header="Cancel Subscription"
+      visible={visible}
+      onHide={onHide}
+    >
       <p>Are you sure you want to cancel your subscription?</p>
       <div className="flex flex-row justify-center mt-6">
         {isProcessing ? (
@@ -46,7 +50,7 @@ const CancelSubscription = ({ visible, onHide }) => {
           />
         )}
       </div>
-    </Dialog>
+    </Modal>
   );
 };
 

src/components/profile/subscription/LightningAddressForm.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Dialog } from 'primereact/dialog';
+import Modal from '@/components/ui/Modal';
 import axios from 'axios';
 import { useSession } from 'next-auth/react';
 import { useToast } from '@/hooks/useToast';
@@ -111,11 +111,11 @@ const LightningAddressForm = ({ visible, onHide }) => {
   };
 
   return (
-    <Dialog
+    <Modal
       header="Lightning Address"
       visible={visible}
       onHide={onHide}
-      style={{ width: windowWidth < 768 ? '100vw' : '60vw' }}
+      width={windowWidth < 768 ? '100vw' : '60vw'}
     >
       {existingLightningAddress ? (
         <p>Update your Lightning Address details</p>
@@ -216,7 +216,7 @@ const LightningAddressForm = ({ visible, onHide }) => {
           />
         </div>
       )}
-    </Dialog>
+    </Modal>
   );
 };
 

src/components/profile/subscription/Nip05Form.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Dialog } from 'primereact/dialog';
+import Modal from '@/components/ui/Modal';
 import axios from 'axios';
 import { useSession } from 'next-auth/react';
 import { useToast } from '@/hooks/useToast';
@@ -82,11 +82,11 @@ const Nip05Form = ({ visible, onHide }) => {
   };
 
   return (
-    <Dialog
+    <Modal
       header="NIP-05"
       visible={visible}
       onHide={onHide}
-      style={{ width: windowWidth < 768 ? '100vw' : '60vw' }}
+      width={windowWidth < 768 ? '100vw' : '60vw'}
     >
       {existingNip05 ? <p>Update your Pubkey and Name</p> : <p>Confirm your Pubkey and Name</p>}
       <div className="flex flex-col gap-2 max-mob:min-w-[80vw] max-tab:min-w-[60vw] min-w-[40vw]">
@@ -126,7 +126,7 @@ const Nip05Form = ({ visible, onHide }) => {
           />
         </div>
       )}
-    </Dialog>
+    </Modal>
   );
 };
 

src/components/profile/subscription/RenewSubscription.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Dialog } from 'primereact/dialog';
+import Modal from '@/components/ui/Modal';
 import { Card } from 'primereact/card';
 import { ProgressSpinner } from 'primereact/progressspinner';
 import SubscriptionPaymentButtons from '@/components/bitcoinConnect/SubscriptionPaymentButton';
@@ -50,11 +50,10 @@ const RenewSubscription = ({ visible, onHide, subscribedUntil }) => {
   };
 
   return (
-    <Dialog
+    <Modal
       header="Renew Your PlebDevs Subscription"
       visible={visible}
       onHide={onHide}
-      className="p-fluid pb-0 w-fit"
     >
       {isProcessing ? (
         <div className="w-full flex flex-col mx-auto justify-center items-center mt-4">
@@ -81,7 +80,7 @@ const RenewSubscription = ({ visible, onHide, subscribedUntil }) => {
           />
         </Card>
       )}
-    </Dialog>
+    </Modal>
   );
 };
 

src/components/profile/subscription/SubscribeModal.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Dialog } from 'primereact/dialog';
+import Modal from '@/components/ui/Modal';
 import { ProgressSpinner } from 'primereact/progressspinner';
 import SubscriptionPaymentButtons from '@/components/bitcoinConnect/SubscriptionPaymentButton';
 import axios from 'axios';
@@ -216,11 +216,10 @@ const SubscribeModal = ({ user }) => {
           </div>
         )}
       </Card>
-      <Dialog
+      <Modal
         header="Subscribe to PlebDevs"
         visible={visible}
         onHide={onHide}
-        className="p-fluid pb-0 w-fit"
       >
         {isProcessing ? (
           <div className="w-full flex flex-col mx-auto justify-center items-center mt-4">
@@ -230,7 +229,7 @@ const SubscribeModal = ({ user }) => {
             <span className="ml-2">Processing subscription...</span>
           </div>
         ) : (
-          <Card className="shadow-lg">
+          <Card className="shadow-none">
             <div className="text-center mb-6">
               <h2 className="text-2xl font-bold text-primary mb-2">Unlock Premium Benefits</h2>
               <p className="text-gray-400">Subscribe now and elevate your development journey!</p>
@@ -295,7 +294,7 @@ const SubscribeModal = ({ user }) => {
             </div>
           </Card>
         )}
-      </Dialog>
+      </Modal>
       <CalendlyEmbed
         visible={calendlyVisible}
         onHide={() => setCalendlyVisible(false)}

src/components/ui/Modal.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+
+/**
+ * A generic modal component based on PrimeReact Dialog with dark styling
+ * @param {Object} props - Component props
+ * @param {string} props.header - Modal header text
+ * @param {boolean} props.visible - Whether the modal is visible
+ * @param {Function} props.onHide - Function to call when modal is closed
+ * @param {React.ReactNode} props.children - Modal content
+ * @param {string} props.className - Additional CSS classes for the modal
+ * @param {Object} props.style - Additional inline styles for the modal
+ * @param {string} props.width - Width of the modal (fit, full, or pixel value)
+ * @param {React.ReactNode} props.footer - Custom footer content
+ * @param {Object} props.headerStyle - Additional styles for the header
+ * @param {Object} props.contentStyle - Additional styles for the content
+ * @param {Object} props.footerStyle - Additional styles for the footer
+ * @param {Object} props.breakpoints - Responsive breakpoints (e.g. {'960px': '75vw'})
+ * @param {boolean} props.modal - Whether the modal requires a click on the mask to hide
+ * @param {boolean} props.draggable - Whether the modal is draggable
+ * @param {boolean} props.resizable - Whether the modal is resizable
+ * @param {boolean} props.maximizable - Whether the modal can be maximized
+ * @param {boolean} props.dismissableMask - Whether clicking outside closes the modal
+ * @param {boolean} props.showCloseButton - Whether to show the default close button in the footer
+ */
+const Modal = ({
+  header,
+  visible,
+  onHide,
+  children,
+  className = '',
+  style = {},
+  width = 'fit',
+  footer,
+  headerStyle = {},
+  contentStyle = {},
+  footerStyle = {},
+  breakpoints,
+  modal,
+  draggable,
+  resizable,
+  maximizable,
+  dismissableMask,
+  showCloseButton = false,
+  ...otherProps
+}) => {
+  // Base dark styling
+  const baseStyle = { backgroundColor: '#1f2937' };
+  const baseHeaderStyle = { backgroundColor: '#1f2937', color: 'white' };
+  const baseContentStyle = { backgroundColor: '#1f2937' };
+  const baseFooterStyle = { backgroundColor: '#1f2937', borderTop: '1px solid #374151' };
+  
+  // Determine width class
+  let widthClass = '';
+  if (width === 'fit') {
+    widthClass = 'w-fit';
+  } else if (width === 'full') {
+    widthClass = 'w-full';
+  } else {
+    // Custom width will be handled via style
+    style.width = width;
+  }
+
+  // Create footer with close button if requested
+  const footerContent = showCloseButton ? (
+    <div className="flex justify-end w-full">
+      <Button 
+        label="Close" 
+        icon="pi pi-times" 
+        onClick={onHide} 
+        className="p-button-text text-white"
+      />
+    </div>
+  ) : footer;
+
+  // Apply tailwind CSS to modify dialog elements
+  const dialogClassNames = `
+    .p-dialog-footer {
+      background-color: #1f2937 !important;
+      border-top: 1px solid #374151 !important;
+    }
+  `;
+
+  return (
+    <>
+      <style jsx global>{dialogClassNames}</style>
+      <Dialog
+        header={header}
+        visible={visible}
+        onHide={onHide}
+        className={`p-fluid pb-0 ${widthClass} ${className}`}
+        style={{ ...baseStyle, ...style }}
+        headerStyle={{ ...baseHeaderStyle, ...headerStyle }}
+        contentStyle={{ ...baseContentStyle, ...contentStyle }}
+        footerStyle={{ ...baseFooterStyle, ...footerStyle }}
+        footer={footerContent}
+        breakpoints={breakpoints}
+        modal={modal}
+        draggable={draggable}
+        resizable={resizable}
+        maximizable={maximizable}
+        dismissableMask={dismissableMask}
+        {...otherProps}
+      >
+        {children}
+      </Dialog>
+    </>
+  );
+};
+
+export default Modal;