refactor(modals): migrate blur effects to Tailwind

- Replace CSS modules with Tailwind classes for blur effects
- Remove moreinfo.module.css and subscribemodal.module.css
- Standardize blur implementation across MoreInfo and SubscribeModal
- Maintain consistent blur behavior with filter and transition classes
- Keep navigation clear while content is blurred

prisma/schema.prisma

@@ -1,7 +1,7 @@
 // datasource db {
-//     provider = "postgresql"
+  //   provider = "postgresql"
-//     url      = env("DATABASE_URL")
+  //   url      = env("DATABASE_URL")
-// }
+ //}
 
 datasource db {
   provider = "postgresql"

src/components/MoreInfo.js

@@ -2,21 +2,31 @@ import React, { useState, useEffect } from "react";
 import { Dialog } from "primereact/dialog";
 import { Tooltip } from "primereact/tooltip";
 import useWindowWidth from "@/hooks/useWindowWidth";
-import styles from "./moreinfo.module.css";
 
 const MoreInfo = ({ tooltip, modalTitle, modalBody, className = "" }) => {
   const [visible, setVisible] = useState(false);
   const windowWidth = useWindowWidth();
   const isMobile = windowWidth < 768;
 
-  // Add blur effect when modal is visible
   useEffect(() => {
     const mainContent = document.querySelector(".main-content");
     if (mainContent) {
       if (visible) {
-        mainContent.classList.add(styles.blurredContent);
+        mainContent.classList.add(
+          "filter",
+          "blur-md",
+          "transition-all",
+          "duration-200",
+          "ease-in-out"
+        );
       } else {
-        mainContent.classList.remove(styles.blurredContent);
+        mainContent.classList.remove(
+          "filter",
+          "blur-md",
+          "transition-all",
+          "duration-200",
+          "ease-in-out"
+        );
       }
     }
   }, [visible]);
@@ -43,11 +53,11 @@ const MoreInfo = ({ tooltip, modalTitle, modalBody, className = "" }) => {
         onHide={onHide}
         className="max-w-3xl"
         modal
-        dismissableMask // This enables click-outside-to-close
+        dismissableMask
-        closeOnEscape // This enables closing with Escape key
+        closeOnEscape
         breakpoints={{ "960px": "75vw", "641px": "90vw" }}
         pt={{
-          mask: { className: "backdrop-blur-none" }, // Ensures the Dialog's mask doesn't add its own blur
+          mask: { className: "backdrop-blur-none" },
         }}
       >
         {typeof modalBody === "string" ? (

src/components/moreinfo.module.css

@@ -1,4 +0,0 @@
-.blurredContent {
-    filter: blur(8px);
-    transition: filter 0.2s ease-in-out;
-} 

src/components/profile/subscription/SubscribeModal.js

@@ -1,22 +1,22 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from "react";
-import { Dialog } from 'primereact/dialog';
+import { Dialog } from "primereact/dialog";
-import { ProgressSpinner } from 'primereact/progressspinner';
+import { ProgressSpinner } from "primereact/progressspinner";
-import SubscriptionPaymentButtons from '@/components/bitcoinConnect/SubscriptionPaymentButton';
+import SubscriptionPaymentButtons from "@/components/bitcoinConnect/SubscriptionPaymentButton";
-import axios from 'axios';
+import axios from "axios";
-import { useSession } from 'next-auth/react';
+import { useSession } from "next-auth/react";
-import { useRouter } from 'next/router';
+import { useRouter } from "next/router";
-import { useToast } from '@/hooks/useToast';
+import { useToast } from "@/hooks/useToast";
-import { Card } from 'primereact/card';
+import { Card } from "primereact/card";
-import GenericButton from '@/components/buttons/GenericButton';
+import GenericButton from "@/components/buttons/GenericButton";
 import { Menu } from "primereact/menu";
 import { Message } from "primereact/message";
-import CancelSubscription from '@/components/profile/subscription/CancelSubscription';
+import CancelSubscription from "@/components/profile/subscription/CancelSubscription";
-import CalendlyEmbed from '@/components/profile/subscription/CalendlyEmbed';
+import CalendlyEmbed from "@/components/profile/subscription/CalendlyEmbed";
-import Nip05Form from '@/components/profile/subscription/Nip05Form';
+import Nip05Form from "@/components/profile/subscription/Nip05Form";
-import LightningAddressForm from '@/components/profile/subscription/LightningAddressForm';
+import LightningAddressForm from "@/components/profile/subscription/LightningAddressForm";
-import NostrIcon from '../../../../public/images/nostr.png';
+import NostrIcon from "../../../../public/images/nostr.png";
-import Image from 'next/image';
+import Image from "next/image";
-import RenewSubscription from '@/components/profile/subscription/RenewSubscription';
+import RenewSubscription from "@/components/profile/subscription/RenewSubscription";
 
 const SubscribeModal = ({ user }) => {
   const { data: session, update } = useSession();
@@ -31,47 +31,87 @@ const SubscribeModal = ({ user }) => {
   const [calendlyVisible, setCalendlyVisible] = useState(false);
   const [lightningAddressVisible, setLightningAddressVisible] = useState(false);
   const [nip05Visible, setNip05Visible] = useState(false);
-    const [cancelSubscriptionVisible, setCancelSubscriptionVisible] = useState(false);
+  const [cancelSubscriptionVisible, setCancelSubscriptionVisible] =
-    const [renewSubscriptionVisible, setRenewSubscriptionVisible] = useState(false);
+    useState(false);
+  const [renewSubscriptionVisible, setRenewSubscriptionVisible] =
+    useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false);
 
   useEffect(() => {
     if (user && user.role) {
       setSubscribed(user.role.subscribed);
       const subscribedAt = new Date(user.role.lastPaymentAt);
-            const subscribedUntil = new Date(subscribedAt.getTime() + 31 * 24 * 60 * 60 * 1000);
+      const subscribedUntil = new Date(
+        subscribedAt.getTime() + 31 * 24 * 60 * 60 * 1000
+      );
       setSubscribedUntil(subscribedUntil);
       if (user.role.subscriptionExpiredAt) {
-                const expiredAt = new Date(user.role.subscriptionExpiredAt)
+        const expiredAt = new Date(user.role.subscriptionExpiredAt);
         setSubscriptionExpiredAt(expiredAt);
       }
     }
   }, [user]);
 
+  useEffect(() => {
+    const mainContent = document.querySelector(".main-content");
+    if (mainContent) {
+      if (isModalVisible) {
+        mainContent.classList.add(
+          "filter",
+          "blur-md",
+          "transition-all",
+          "duration-200",
+          "ease-in-out"
+        );
+      } else {
+        mainContent.classList.remove(
+          "filter",
+          "blur-md",
+          "transition-all",
+          "duration-200",
+          "ease-in-out"
+        );
+      }
+    }
+  }, [isModalVisible]);
+
   const handleSubscriptionSuccess = async (response) => {
     setIsProcessing(true);
     try {
-            const apiResponse = await axios.put('/api/users/subscription', {
+      const apiResponse = await axios.put("/api/users/subscription", {
         userId: session.user.id,
         isSubscribed: true,
       });
       if (apiResponse.data) {
         await update();
-                showToast('success', 'Subscription Successful', 'Your subscription has been activated.');
+        showToast(
+          "success",
+          "Subscription Successful",
+          "Your subscription has been activated."
+        );
         onHide();
       } else {
-                throw new Error('Failed to update subscription status');
+        throw new Error("Failed to update subscription status");
       }
     } catch (error) {
-            console.error('Subscription update error:', error);
+      console.error("Subscription update error:", error);
-            showToast('error', 'Subscription Update Failed', `Error: ${error.message}`);
+      showToast(
+        "error",
+        "Subscription Update Failed",
+        `Error: ${error.message}`
+      );
     } finally {
       setIsProcessing(false);
     }
   };
 
   const handleSubscriptionError = (error) => {
-        console.error('Subscription error:', error);
+    console.error("Subscription error:", error);
-        showToast('error', 'Subscription Failed', `An error occurred: ${error.message}`);
+    showToast(
+      "error",
+      "Subscription Failed",
+      `An error occurred: ${error.message}`
+    );
     setIsProcessing(false);
   };
 
@@ -79,20 +119,24 @@ const SubscribeModal = ({ user }) => {
     setIsProcessing(true);
     try {
       await update();
-            showToast('success', 'Recurring Subscription Activated', 'Your recurring subscription has been set up successfully.');
+      showToast(
+        "success",
+        "Recurring Subscription Activated",
+        "Your recurring subscription has been set up successfully."
+      );
       onHide();
     } catch (error) {
-            console.error('Session update error:', error);
+      console.error("Session update error:", error);
-            showToast('error', 'Session Update Failed', `Error: ${error.message}`);
+      showToast("error", "Session Update Failed", `Error: ${error.message}`);
     } finally {
       setIsProcessing(false);
     }
   };
 
   const onHide = () => {
-        setVisible(false);
+    setIsModalVisible(false);
     setIsProcessing(false);
-    }
+  };
 
   const menuItems = [
     {
@@ -103,14 +147,18 @@ const SubscribeModal = ({ user }) => {
       },
     },
     {
-            label: session?.user?.platformLightningAddress ? "Update PlebDevs Lightning Address" : "Claim PlebDevs Lightning Address",
+      label: session?.user?.platformLightningAddress
+        ? "Update PlebDevs Lightning Address"
+        : "Claim PlebDevs Lightning Address",
       icon: "pi pi-bolt",
       command: () => {
         setLightningAddressVisible(true);
       },
     },
     {
-            label: session?.user?.platformNip05?.name ? "Update PlebDevs Nostr NIP-05" : "Claim PlebDevs Nostr NIP-05",
+      label: session?.user?.platformNip05?.name
+        ? "Update PlebDevs Nostr NIP-05"
+        : "Claim PlebDevs Nostr NIP-05",
       icon: "pi pi-at",
       command: () => {
         setNip05Visible(true);
@@ -134,7 +182,9 @@ const SubscribeModal = ({ user }) => {
 
   const subscriptionCardTitle = (
     <div className="w-full flex flex-row justify-between items-center">
-            <span className="text-xl text-900 font-bold text-white">Plebdevs Subscription</span>
+      <span className="text-xl text-900 font-bold text-white">
+        Plebdevs Subscription
+      </span>
       {subscribed && (
         <i
           className="pi pi-ellipsis-h text-2xl cursor-pointer hover:opacity-75"
@@ -147,58 +197,87 @@ const SubscribeModal = ({ user }) => {
 
   return (
     <>
-            <Card title={subscriptionCardTitle} className="w-full m-2 mx-auto border border-gray-700">
+      <Card
+        title={subscriptionCardTitle}
+        className="w-full m-2 mx-auto border border-gray-700"
+      >
         {subscribed && !user?.role?.nwc && (
           <div className="flex flex-col">
             <Message className="w-fit" severity="success" text="Subscribed!" />
             <p className="mt-3">Thank you for your support 🎉</p>
-                        <p className="text-sm text-gray-400">Pay-as-you-go subscription will renew on {subscribedUntil.toLocaleDateString()}</p>
+            <p className="text-sm text-gray-400">
+              Pay-as-you-go subscription will renew on{" "}
+              {subscribedUntil.toLocaleDateString()}
+            </p>
           </div>
         )}
         {subscribed && user?.role?.nwc && (
           <div className="flex flex-col">
             <Message className="w-fit" severity="success" text="Subscribed!" />
             <p className="mt-3">Thank you for your support 🎉</p>
-                        <p className="text-sm text-gray-400">Recurring subscription will AUTO renew on {subscribedUntil.toLocaleDateString()}</p>
+            <p className="text-sm text-gray-400">
+              Recurring subscription will AUTO renew on{" "}
+              {subscribedUntil.toLocaleDateString()}
+            </p>
           </div>
         )}
-                {(!subscribed && !subscriptionExpiredAt) && (
+        {!subscribed && !subscriptionExpiredAt && (
           <div className="flex flex-col">
-                        <Message className="w-fit" severity="info" text="You currently have no active subscription" />
+            <Message
+              className="w-fit"
+              severity="info"
+              text="You currently have no active subscription"
+            />
             <GenericButton
               label="Subscribe"
               className="w-auto mt-3 text-[#f8f8ff]"
-                            onClick={() => setVisible(true)}
+              onClick={() => setIsModalVisible(true)}
             />
           </div>
         )}
         {subscriptionExpiredAt && (
           <div className="flex flex-col">
-                        <Message className="w-fit" severity="warn" text={`Your subscription expired on ${subscriptionExpiredAt.toLocaleDateString()}`} />
+            <Message
+              className="w-fit"
+              severity="warn"
+              text={`Your subscription expired on ${subscriptionExpiredAt.toLocaleDateString()}`}
+            />
             <GenericButton
               label="Subscribe"
               className="w-auto mt-4 text-[#f8f8ff]"
-                            onClick={() => setVisible(true)}
+              onClick={() => setIsModalVisible(true)}
             />
           </div>
         )}
       </Card>
       <Dialog
         header="Subscribe to PlebDevs"
-                visible={visible}
+        visible={isModalVisible}
         onHide={onHide}
         className="p-fluid pb-0 w-fit"
+        modal
+        dismissableMask
+        closeOnEscape
+        pt={{
+          mask: { className: "backdrop-blur-none" },
+        }}
       >
         {isProcessing ? (
           <div className="w-full flex flex-col mx-auto justify-center items-center mt-4">
-                        <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>
+            <div className="w-full h-full flex items-center justify-center">
+              <ProgressSpinner />
+            </div>
             <span className="ml-2">Processing subscription...</span>
           </div>
         ) : (
           <Card className="shadow-lg">
             <div className="text-center mb-4">
-                            <h2 className="text-2xl font-bold text-primary">Unlock Premium Benefits</h2>
+              <h2 className="text-2xl font-bold text-primary">
-                            <p className="text-gray-400">Subscribe now and elevate your development journey!</p>
+                Unlock Premium Benefits
+              </h2>
+              <p className="text-gray-400">
+                Subscribe now and elevate your development journey!
+              </p>
             </div>
             <div className="flex flex-col gap-4 mb-4 w-[60%] mx-auto">
               <div className="flex items-center">
@@ -207,20 +286,35 @@ const SubscribeModal = ({ user }) => {
               </div>
               <div className="flex items-center">
                 <i className="pi pi-calendar text-2xl text-primary mr-2 text-red-400"></i>
-                                <span>Personal mentorship & guidance and access to exclusive 1:1 booking calendar</span>
+                <span>
+                  Personal mentorship & guidance and access to exclusive 1:1
+                  booking calendar
+                </span>
               </div>
               <div className="flex items-center">
                 <i className="pi pi-bolt text-2xl text-primary mr-2 text-yellow-500"></i>
-                                <span>Claim your own personal plebdevs.com Lightning Address</span>
+                <span>
+                  Claim your own personal plebdevs.com Lightning Address
+                </span>
               </div>
               <div className="flex items-center">
-                                <Image src={NostrIcon} alt="Nostr" width={26} height={26} className='mr-2' />
+                <Image
-                                <span>Claim your own personal plebdevs.com Nostr NIP-05 identity</span>
+                  src={NostrIcon}
+                  alt="Nostr"
+                  width={26}
+                  height={26}
+                  className="mr-2"
+                />
+                <span>
+                  Claim your own personal plebdevs.com Nostr NIP-05 identity
+                </span>
               </div>
             </div>
             <SubscriptionPaymentButtons
               onSuccess={handleSubscriptionSuccess}
-                            onRecurringSubscriptionSuccess={handleRecurringSubscriptionSuccess}
+              onRecurringSubscriptionSuccess={
+                handleRecurringSubscriptionSuccess
+              }
               onError={handleSubscriptionError}
               setIsProcessing={setIsProcessing}
             />
@@ -243,10 +337,7 @@ const SubscribeModal = ({ user }) => {
         onHide={() => setRenewSubscriptionVisible(false)}
         subscribedUntil={subscribedUntil}
       />
-            <Nip05Form
+      <Nip05Form visible={nip05Visible} onHide={() => setNip05Visible(false)} />
-                visible={nip05Visible}
-                onHide={() => setNip05Visible(false)}
-            />
       <LightningAddressForm
         visible={lightningAddressVisible}
         onHide={() => setLightningAddressVisible(false)}

src/pages/subscribe.js

@@ -18,7 +18,7 @@ import RenewSubscription from "@/components/profile/subscription/RenewSubscripti
 import Nip05Form from "@/components/profile/subscription/Nip05Form";
 import LightningAddressForm from "@/components/profile/subscription/LightningAddressForm";
 
-import MoreInfo from '@/components/MoreInfo';
+import MoreInfo from "@/components/MoreInfo";
 
 const Subscribe = () => {
   const { data: session, update } = useSession();
@@ -212,7 +212,11 @@ const Subscribe = () => {
             />
             {/* Test MoreInfo modal blur here */}
             {/* <div className="flex items-center gap-2">
-                            <Message className="w-fit" severity="info" text="Login to manage your subscription" />
+              <Message
+                className="w-fit"
+                severity="info"
+                text="Login to manage your subscription"
+              />
               <MoreInfo
                 tooltip="About Subscriptions"
                 modalTitle="Subscription Information"