Styles and consistency

src/components/profile/BitcoinLightningCard.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import BitcoinConnectButton from '@/components/bitcoinConnect/BitcoinConnect';
+
+const BitcoinLightningCard = () => {
+    return (
+        <div className="bg-gray-800 rounded-lg p-4 my-2 border border-gray-700">
+            <div className="flex items-center gap-2 mb-4">
+                <i className="pi pi-bolt text-yellow-500 text-2xl"></i>
+                <h3 className="text-xl font-semibold">Lightning Wallet Connection</h3>
+            </div>
+            <p className="text-gray-400 mb-4">
+                Connect your Lightning wallet for easier payments across the platform
+            </p>
+            <BitcoinConnectButton />
+        </div>
+    );
+};
+
+export default BitcoinLightningCard; 

src/components/profile/UserAccountLinking.js

@@ -8,6 +8,7 @@ import { useNDKContext } from "@/context/NDKContext";
 import { useToast } from '@/hooks/useToast';
 import { useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
+import MoreInfo from '@/components/MoreInfo';
 
 const LinkAccountsCard = ({ session }) => {
     const isNostrLinked = session?.user?.pubkey && !session?.user?.privkey;
@@ -120,32 +121,29 @@ const LinkAccountsCard = ({ session }) => {
     };
 
     const MobileCard = () => (
-        <div className="bg-gray-800 rounded-xl p-6 flex flex-col items-start w-full h-[420px] border border-gray-700">
+        <div className="bg-gray-800 rounded-xl p-6 flex flex-col items-start w-full border border-gray-700 my-2">
-            <h2 className="text-2xl font-bold mb-6 text-white">Link Accounts</h2>
+            <div className="flex flex-row justify-between items-center w-full mb-6">
+                <h2 className="text-2xl font-bold text-white">Link Accounts</h2>
+                <MoreInfo title="Link Accounts" description="Link your accounts to your profile. You can link your Github, Nostr, and Email accounts to your profile to ensure you can access your account from any device." />
+            </div>
+            
+            <div className="flex flex-col gap-4">
+                <GenericButton
+                    label={isNostrLinked ? "Nostr Linked" : "Link Nostr"}
+                    icon={<Image src="/images/nostr-icon-white.png" width={20} height={20} alt="Nostr" className="mr-2" />}
+                    onClick={handleNostrLink}
+                    disabled={isNostrLinked}
+                    className={`text-[#f8f8ff] w-[250px] mx-auto flex items-center justify-center`}
+                    rounded
+                />
 
-            <div className="flex flex-col gap-4 w-full">
                 <GenericButton
                     label={isGithubLinked ? "Github Linked" : "Link Github"}
                     icon="pi pi-github"
                     onClick={handleGithubLink}
                     disabled={isGithubLinked}
-                    className={`w-full min-w-[240px] border-none ${
+                    className={`text-[#f8f8ff] w-[250px] mx-auto`}
-                        isGithubLinked 
+                    rounded
-                            ? "bg-gray-600 opacity-70 cursor-not-allowed" 
-                            : "bg-[#24292e] hover:bg-[#2f363d]"
-                    }`}
-                />
-
-                <GenericButton
-                    label={isNostrLinked ? "Nostr Linked" : "Link Nostr"}
-                    icon={<Image src="/images/nostr.png" width={20} height={20} alt="Nostr" className="mr-2" />}
-                    onClick={handleNostrLink}
-                    disabled={isNostrLinked}
-                    className={`w-full min-w-[240px] border-none flex items-center justify-center ${
-                        isNostrLinked 
-                            ? "bg-gray-600 opacity-70 cursor-not-allowed" 
-                            : "bg-[#6B4E71] hover:bg-[#6B4E71]/80"
-                    }`}
                 />
 
                 <GenericButton
@@ -153,11 +151,8 @@ const LinkAccountsCard = ({ session }) => {
                     icon="pi pi-envelope"
                     onClick={handleEmailLink}
                     disabled={isEmailLinked}
-                    className={`w-full min-w-[240px] border-none ${
+                    className={`text-[#f8f8ff] w-[250px] mx-auto`}
-                        isEmailLinked 
+                    rounded
-                            ? "bg-gray-600 opacity-70 cursor-not-allowed" 
-                            : "bg-[#4A5568] hover:bg-[#4A5568]/80"
-                    }`}
                 />
             </div>
         </div>
@@ -165,31 +160,27 @@ const LinkAccountsCard = ({ session }) => {
 
     const DesktopCard = () => (
         <div className="bg-gray-800 rounded-xl p-6 flex flex-col items-start w-full max-w-[400px] mt-2 border border-gray-700">
-            <h2 className="text-2xl font-bold mb-6 text-white">Link Accounts</h2>
+            <div className="flex flex-row justify-between items-center w-full mb-6">
-            
+                <h2 className="text-2xl font-bold text-white">Link Accounts</h2>
+                <MoreInfo title="Link Accounts" description="Link your accounts to your profile. You can link your Github, Nostr, and Email accounts to your profile to ensure you can access your account from any device." />
+            </div>
             <div className="flex flex-col gap-4 w-full">
                 <GenericButton
                     label={isGithubLinked ? "Github Linked" : "Link Github"}
                     icon="pi pi-github"
                     onClick={handleGithubLink}
                     disabled={isGithubLinked}
-                    className={`w-full border-none ${
+                    className={`text-[#f8f8ff] w-[250px] mx-auto`}
-                        isGithubLinked 
+                    rounded
-                            ? "bg-gray-600 opacity-70 cursor-not-allowed" 
-                            : "bg-[#24292e] hover:bg-[#2f363d]"
-                    }`}
                 />
 
                 <GenericButton
                     label={isNostrLinked ? "Nostr Linked" : "Link Nostr"}
-                    icon={<Image src="/images/nostr.png" width={20} height={20} alt="Nostr" className="mr-2" />}
+                    icon={<Image src="/images/nostr-icon-white.png" width={20} height={20} alt="Nostr" className="mr-2" />}
                     onClick={handleNostrLink}
                     disabled={isNostrLinked}
-                    className={`w-full border-none flex items-center justify-center ${
+                    className={`text-[#f8f8ff] w-[250px] mx-auto flex items-center justify-center`}
-                        isNostrLinked 
+                    rounded
-                            ? "bg-gray-600 opacity-70 cursor-not-allowed" 
-                            : "bg-[#6B4E71] hover:bg-[#6B4E71]/80"
-                    }`}
                 />
 
                 <GenericButton
@@ -197,11 +188,8 @@ const LinkAccountsCard = ({ session }) => {
                     icon="pi pi-envelope"
                     onClick={handleEmailLink}
                     disabled={isEmailLinked}
-                    className={`w-full border-none ${
+                    className={`text-[#f8f8ff] w-[250px] mx-auto`}
-                        isEmailLinked 
+                    rounded
-                            ? "bg-gray-600 opacity-70 cursor-not-allowed" 
-                            : "bg-[#4A5568] hover:bg-[#4A5568]/80"
-                    }`}
                 />
             </div>
         </div>

src/components/profile/UserProfile.js

@@ -7,9 +7,9 @@ import ActivityContributionChart from "@/components/charts/ActivityContributionC
 import useCheckCourseProgress from "@/hooks/tracking/useCheckCourseProgress";
 import useWindowWidth from "@/hooks/useWindowWidth";
 import UserProgress from "@/components/profile/progress/UserProgress";
-import UserAccountLinking from "@/components/profile/UserAccountLinking";
 import UserProgressTable from '@/components/profile/DataTables/UserProgressTable';
 import UserPurchaseTable from '@/components/profile/DataTables/UserPurchaseTable';
+import BitcoinLightningCard from '@/components/profile/BitcoinLightningCard';
 
 const UserProfile = () => {
     const windowWidth = useWindowWidth();
@@ -41,7 +41,7 @@ const UserProfile = () => {
                 <div className="w-full flex flex-row max-lap:flex-col">
                     <div className="w-[22%] h-full max-lap:w-full">
                         {user && <UserProfileCard user={user} />}
-                        {user && <UserAccountLinking session={session} />}
+                        <BitcoinLightningCard />
                     </div>
 
                     <div className="w-[78%] flex flex-col justify-center mx-auto max-lap:w-full">

src/components/profile/UserProfileCard.js

@@ -156,7 +156,7 @@ const UserProfileCard = ({ user }) => {
                     className="rounded-full my-4"
                 />
                 <div className="flex flex-col gap-2 pt-4 w-fit relative">
-                    <div className="absolute top-[-1px] right-[-24px]">
+                    <div className="absolute top-[-1px] right-[-18px]">
                         <i
                             className="pi pi-ellipsis-h text-2xl cursor-pointer"
                             onClick={(e) => menu.current.toggle(e)}

src/components/profile/UserSettings.js

@@ -1,18 +1,10 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
-import GenericButton from "@/components/buttons/GenericButton";
-import { DataTable } from "primereact/datatable";
-import { Column } from "primereact/column";
 import UserProfileCard from "@/components/profile/UserProfileCard";
 import { useSession } from 'next-auth/react';
 import { useNDKContext } from "@/context/NDKContext";
 import useWindowWidth from "@/hooks/useWindowWidth";
-import BitcoinConnectButton from "@/components/bitcoinConnect/BitcoinConnect";
-import { InputText } from "primereact/inputtext";
-import { useToast } from "@/hooks/useToast";
-import SubscribeModal from "@/components/profile/subscription/SubscribeModal";
-import appConfig from "@/config/appConfig";
 import UserRelaysTable from "@/components/profile/DataTables/UserRelaysTable";
-
+import UserAccountLinking from "@/components/profile/UserAccountLinking";
 const UserSettings = () => {
     const [user, setUser] = useState(null);
     const { ndk, userRelays, setUserRelays, reInitializeNDK } = useNDKContext();
@@ -35,20 +27,7 @@ const UserSettings = () => {
                     <div className="w-[22%] h-full max-lap:w-full">
                         <UserProfileCard user={user} />
 
-                        {/* Lightning Info Card */}
+                        {user && <UserAccountLinking session={session} />}
-                        <div className="bg-gray-800 rounded-lg p-4 my-4 border border-gray-700">
-                            <div className="flex items-center gap-2 mb-4">
-                                <i className="pi pi-bolt text-yellow-500 text-2xl"></i>
-                                <h3 className="text-xl font-semibold">Lightning Wallet Connection</h3>
-                            </div>
-                            <p className="text-gray-400 mb-4">
-                                Connect your Lightning wallet for easier payments across the platform
-                            </p>
-                            <BitcoinConnectButton />
-                        </div>
-
-                        {/* Subscription Modal */}
-                        {user && <SubscribeModal user={user} />}
                     </div>
 
                     <div className="w-[78%] flex flex-col justify-center mx-auto max-lap:w-full ml-2 max-lap:ml-0">

src/components/profile/subscription/SubscribeModal.js

@@ -148,7 +148,7 @@ const SubscribeModal = ({ user }) => {
 
     return (
         <>
-            <Card title={subscriptionCardTitle} className="w-full m-4 mx-auto border border-gray-700">
+            <Card title={subscriptionCardTitle} className="w-full m-4 mt-2 mx-auto border border-gray-700">
                 {subscribed && !user?.role?.nwc && (
                     <div className="flex flex-col">
                         <Message className="w-fit" severity="success" text="Subscribed!" />
@@ -219,10 +219,6 @@ const SubscribeModal = ({ user }) => {
                                 <span>Claim your own personal plebdevs.com Nostr NIP-05 identity</span>
                             </div>
                         </div>
-                        <div className="text-center mb-4 flex flex-row justify-center">
-                            <Badge value="BONUS" severity="success" className="mr-2 text-[#f8f8ff] font-bold"></Badge>
-                            <span className="text-center font-bold">I WILL MAKE SURE YOU WIN HARD AND LEVEL UP AS A DEV!</span>
-                        </div>
                         <SubscriptionPaymentButtons
                             onSuccess={handleSubscriptionSuccess}
                             onRecurringSubscriptionSuccess={handleRecurringSubscriptionSuccess}

src/components/profile/subscription/UserSubscription.js

@@ -5,9 +5,10 @@ import { useToast } from '@/hooks/useToast';
 import axios from 'axios';
 import { Card } from 'primereact/card';
 import useWindowWidth from '@/hooks/useWindowWidth';
-import { Message } from "primereact/message";
+import SubscribeModal from '@/components/profile/subscription/SubscribeModal';
 import { ProgressSpinner } from 'primereact/progressspinner';
 import SubscriptionPaymentButtons from '@/components/bitcoinConnect/SubscriptionPaymentButton';
+import UserProfileCard from '@/components/profile/UserProfileCard';
 import Image from 'next/image';
 import NostrIcon from '../../../../public/images/nostr.png';
 import GenericButton from '@/components/buttons/GenericButton';
@@ -28,6 +29,7 @@ const UserSubscription = () => {
     const [subscribed, setSubscribed] = useState(false);
     const [subscribedUntil, setSubscribedUntil] = useState(null);
     const [subscriptionExpiredAt, setSubscriptionExpiredAt] = useState(null);
+    const [subscribeModalVisible, setSubscribeModalVisible] = useState(false);
     const [calendlyVisible, setCalendlyVisible] = useState(false);
     const [lightningAddressVisible, setLightningAddressVisible] = useState(false);
     const [nip05Visible, setNip05Visible] = useState(false);
@@ -101,39 +103,28 @@ const UserSubscription = () => {
             <div className="w-full flex flex-row max-lap:flex-col">
                 {/* Left Column - 22% */}
                 <div className="w-[21%] h-full max-lap:w-full">
-                    <div className="p-4 bg-gray-800 rounded-lg max-lap:mb-4">
+                    {user && (
-                        {/* Subscription Status Messages */}
+                        <>
-                        {subscribed && !user?.role?.nwc && (
+                            <UserProfileCard user={user} />
-                            <div className="flex flex-col">
+                            <SubscribeModal
-                                <Message className="w-fit" severity="success" text="Subscribed!" />
+                                visible={subscribeModalVisible}
-                                <p className="mt-4">Thank you for your support 🎉</p>
+                                onHide={() => setSubscribeModalVisible(false)}
-                                <p className="text-sm text-gray-400">Pay-as-you-go subscription requires manual renewal 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-4">Thank you for your support 🎉</p>
-                                <p className="text-sm text-gray-400">Recurring subscription will AUTO renew on {subscribedUntil.toLocaleDateString()}</p>
-                            </div>
-                        )}
-                        {(!subscribed && !subscriptionExpiredAt) && (
-                            <div className="flex flex-col">
-                                <Message className="w-fit" severity="info" text="You currently have no active subscription" />
-                            </div>
-                        )}
-                        {subscriptionExpiredAt && (
-                            <div className="flex flex-col">
-                                <Message className="w-fit" severity="warn" text={`Your subscription expired on ${subscriptionExpiredAt.toLocaleDateString()}`} />
-                            </div>
-                        )}
-                    </div>
                 </div>
 
                 {/* Right Column - 78% */}
                 <div className="w-[78%] flex flex-col justify-center mx-auto max-lap:w-full">
                     {!subscribed && (
-                        <Card title="Subscribe to PlebDevs" className="mb-4">
+                        <Card 
+                            title="Subscribe to PlebDevs" 
+                            className="mb-2 h-[330px] max-lap:h-auto" 
+                            pt={{
+                                body: { className: 'py-2' },
+                                content: { className: 'pt-0' }
+                            }}
+                        >
                             {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>
@@ -141,11 +132,10 @@ const UserSubscription = () => {
                                 </div>
                             ) : (
                                 <div className="flex flex-col">
-                                    <div className="mb-4">
+                                    <div className="mb-2">
-                                        <h2 className="text-2xl font-bold text-primary">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">
+                                    <div className="flex flex-col gap-4 mb-2">
                                         <div className="flex items-center">
                                             <i className="pi pi-book text-2xl text-primary mr-2 text-blue-400"></i>
                                             <span>Access ALL current and future PlebDevs content</span>
@@ -162,10 +152,6 @@ const UserSubscription = () => {
                                             <Image src={NostrIcon} alt="Nostr" width={25} height={25} className='mr-2' />
                                             <span>Claim your own personal plebdevs.com Nostr NIP-05 identity</span>
                                         </div>
-                                        <div className="flex items-center">
-                                        <i className="pi pi-star text-2xl text-primary mr-2 text-yellow-500"></i>
-                                        <span>I WILL MAKE SURE YOU WIN HARD AND LEVEL UP AS A DEV!</span>
-                                    </div>
                                     </div>
                                     <SubscriptionPaymentButtons
                                         onSuccess={handleSubscriptionSuccess}

src/pages/auth/signin.js

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { useState, useEffect } from "react"
 import { useNDKContext } from "@/context/NDKContext";
 import GenericButton from "@/components/buttons/GenericButton";
+import Image from "next/image";
 import { InputText } from 'primereact/inputtext';
 
 export default function SignIn() {
@@ -101,7 +102,7 @@ export default function SignIn() {
       <h1 className="text-center mb-8">Sign In</h1>
       <GenericButton
         label={"login with nostr"}
-        icon="pi pi-user"
+        icon={<Image src="/images/nostr-icon-white.png" width={20} height={20} alt="Nostr" className="mr-2" />}
         className="text-[#f8f8ff] w-[250px] my-4 mx-auto"
         rounded
         onClick={handleNostrSignIn}

src/pages/subscribe.js

@@ -225,10 +225,6 @@ const Subscribe = () => {
                                 <Image src={NostrIcon} alt="Nostr" width={25} height={25} className='mr-2' />
                                 <span>Claim your own personal plebdevs.com Nostr NIP-05 identity</span>
                             </div>
-                            <div className="flex items-center">
-                                <i className="pi pi-star text-2xl text-primary mr-2 text-yellow-500"></i>
-                                <span>I WILL MAKE SURE YOU WIN HARD AND LEVEL UP AS A DEV!</span>
-                            </div>
                         </div>
                         <SubscriptionPaymentButtons
                             onSuccess={handleSubscriptionSuccess}