mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 19:01:19 +00:00
Styles and consistency
This commit is contained in:
austinkelsay
parent
819d5bbfa9
commit
8124cc8ee6
BIN
public/images/nostr-icon-white.png
Normal file
BIN
public/images/nostr-icon-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
19
src/components/profile/BitcoinLightningCard.js
Normal file
19
src/components/profile/BitcoinLightningCard.js
Normal file
@ -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;
|
||||
@ -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">
|
||||
<h2 className="text-2xl font-bold mb-6 text-white">Link Accounts</h2>
|
||||
<div className="bg-gray-800 rounded-xl p-6 flex flex-col items-start w-full border border-gray-700 my-2">
|
||||
<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">
|
||||
<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
|
||||
/>
|
||||
|
||||
<GenericButton
|
||||
label={isGithubLinked ? "Github Linked" : "Link Github"}
|
||||
icon="pi pi-github"
|
||||
onClick={handleGithubLink}
|
||||
disabled={isGithubLinked}
|
||||
className={`w-full min-w-[240px] border-none ${
|
||||
isGithubLinked
|
||||
? "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"
|
||||
}`}
|
||||
className={`text-[#f8f8ff] w-[250px] mx-auto`}
|
||||
rounded
|
||||
/>
|
||||
|
||||
<GenericButton
|
||||
@ -153,11 +151,8 @@ const LinkAccountsCard = ({ session }) => {
|
||||
icon="pi pi-envelope"
|
||||
onClick={handleEmailLink}
|
||||
disabled={isEmailLinked}
|
||||
className={`w-full min-w-[240px] border-none ${
|
||||
isEmailLinked
|
||||
? "bg-gray-600 opacity-70 cursor-not-allowed"
|
||||
: "bg-[#4A5568] hover:bg-[#4A5568]/80"
|
||||
}`}
|
||||
className={`text-[#f8f8ff] w-[250px] mx-auto`}
|
||||
rounded
|
||||
/>
|
||||
</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 ${
|
||||
isGithubLinked
|
||||
? "bg-gray-600 opacity-70 cursor-not-allowed"
|
||||
: "bg-[#24292e] hover:bg-[#2f363d]"
|
||||
}`}
|
||||
className={`text-[#f8f8ff] w-[250px] mx-auto`}
|
||||
rounded
|
||||
/>
|
||||
|
||||
<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 ${
|
||||
isNostrLinked
|
||||
? "bg-gray-600 opacity-70 cursor-not-allowed"
|
||||
: "bg-[#6B4E71] hover:bg-[#6B4E71]/80"
|
||||
}`}
|
||||
className={`text-[#f8f8ff] w-[250px] mx-auto flex items-center justify-center`}
|
||||
rounded
|
||||
/>
|
||||
|
||||
<GenericButton
|
||||
@ -197,11 +188,8 @@ const LinkAccountsCard = ({ session }) => {
|
||||
icon="pi pi-envelope"
|
||||
onClick={handleEmailLink}
|
||||
disabled={isEmailLinked}
|
||||
className={`w-full border-none ${
|
||||
isEmailLinked
|
||||
? "bg-gray-600 opacity-70 cursor-not-allowed"
|
||||
: "bg-[#4A5568] hover:bg-[#4A5568]/80"
|
||||
}`}
|
||||
className={`text-[#f8f8ff] w-[250px] mx-auto`}
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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)}
|
||||
|
||||
@ -1,18 +1,10 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import GenericButton from "@/components/buttons/GenericButton";
|
||||
import { DataTable } from "primereact/datatable";
|
||||
import { Column } from "primereact/column";
|
||||
import React, { useState, useEffect } from "react";
|
||||
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 */}
|
||||
<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} />}
|
||||
{user && <UserAccountLinking session={session} />}
|
||||
</div>
|
||||
|
||||
<div className="w-[78%] flex flex-col justify-center mx-auto max-lap:w-full ml-2 max-lap:ml-0">
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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">
|
||||
{/* Subscription Status Messages */}
|
||||
{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">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>
|
||||
{user && (
|
||||
<>
|
||||
<UserProfileCard user={user} />
|
||||
<SubscribeModal
|
||||
visible={subscribeModalVisible}
|
||||
onHide={() => setSubscribeModalVisible(false)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</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">
|
||||
<h2 className="text-2xl font-bold text-primary">Unlock Premium Benefits</h2>
|
||||
<div className="mb-2">
|
||||
<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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user