forked from mito-systems/sol-mem-gen
green
This commit is contained in:
parent
ac358c4cb6
commit
c4eb9fbd13
@ -247,7 +247,7 @@ const processPaymentAndGenerate = async (): Promise<void> => {
|
|||||||
<div className="container max-w-2xl mx-auto px-4 py-8 flex flex-col items-center">
|
<div className="container max-w-2xl mx-auto px-4 py-8 flex flex-col items-center">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="w-full text-center mb-8">
|
<div className="w-full text-center mb-8">
|
||||||
<h1 className="text-4xl sm:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
|
<h1 className="text-4xl sm:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-600">
|
||||||
AI Meme Generator
|
AI Meme Generator
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-gray-400 text-lg">
|
<p className="text-gray-400 text-lg">
|
||||||
@ -261,9 +261,9 @@ const processPaymentAndGenerate = async (): Promise<void> => {
|
|||||||
{!walletState.connected ? (
|
{!walletState.connected ? (
|
||||||
<button
|
<button
|
||||||
onClick={connectWallet}
|
onClick={connectWallet}
|
||||||
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600
|
className="w-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600
|
||||||
text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200
|
text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200
|
||||||
shadow-lg hover:shadow-purple-500/25"
|
shadow-lg hover:shadow-green-500/25"
|
||||||
>
|
>
|
||||||
Connect Solflare Wallet
|
Connect Solflare Wallet
|
||||||
</button>
|
</button>
|
||||||
@ -271,9 +271,9 @@ const processPaymentAndGenerate = async (): Promise<void> => {
|
|||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{/* Wallet Info */}
|
{/* Wallet Info */}
|
||||||
<div className="flex items-center justify-between bg-gray-900/30 rounded-lg p-3">
|
<div className="flex items-center justify-between bg-gray-900/30 rounded-lg p-3">
|
||||||
<span className="text-gray-400">Connected Wallet: </span>
|
<span className="text-gray-400">Connected Wallet</span>
|
||||||
<span className="px-3 py-1 bg-purple-500/20 rounded-full text-purple-300 text-sm">
|
<span className="px-3 py-1 bg-green-500/20 rounded-full text-green-300 text-sm">
|
||||||
{walletState.publicKey?.slice(0, 22)}...
|
{walletState.publicKey?.slice(0, 8)}...
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -284,16 +284,16 @@ const processPaymentAndGenerate = async (): Promise<void> => {
|
|||||||
onChange={(e) => setInputText(e.target.value)}
|
onChange={(e) => setInputText(e.target.value)}
|
||||||
placeholder="Describe your meme idea here..."
|
placeholder="Describe your meme idea here..."
|
||||||
className="w-full bg-gray-900/50 text-gray-100 border border-gray-700 rounded-xl p-4
|
className="w-full bg-gray-900/50 text-gray-100 border border-gray-700 rounded-xl p-4
|
||||||
placeholder-gray-500 focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20
|
placeholder-gray-500 focus:border-green-500 focus:ring-2 focus:ring-green-500/20
|
||||||
focus:outline-none min-h-[120px] transition-all duration-200"
|
focus:outline-none min-h-[120px] transition-all duration-200"
|
||||||
rows={4}
|
rows={4}
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
onClick={processPaymentAndGenerate}
|
onClick={processPaymentAndGenerate}
|
||||||
disabled={generationState.processing || generationState.loading || !inputText}
|
disabled={generationState.processing || generationState.loading || !inputText}
|
||||||
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600
|
className="w-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600
|
||||||
hover:to-pink-600 text-white font-semibold py-4 px-6 rounded-xl
|
hover:to-emerald-600 text-white font-semibold py-4 px-6 rounded-xl
|
||||||
transition-all duration-200 shadow-lg hover:shadow-purple-500/25
|
transition-all duration-200 shadow-lg hover:shadow-green-500/25
|
||||||
disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none"
|
disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none"
|
||||||
>
|
>
|
||||||
{generationState.processing ? 'Processing Payment...' :
|
{generationState.processing ? 'Processing Payment...' :
|
||||||
@ -319,9 +319,9 @@ const processPaymentAndGenerate = async (): Promise<void> => {
|
|||||||
{(generationState.processing || generationState.loading) && (
|
{(generationState.processing || generationState.loading) && (
|
||||||
<div className="flex justify-center items-center w-full mb-8">
|
<div className="flex justify-center items-center w-full mb-8">
|
||||||
<div className="flex space-x-2">
|
<div className="flex space-x-2">
|
||||||
<div className="w-3 h-3 bg-purple-400 rounded-full animate-bounce"></div>
|
<div className="w-3 h-3 bg-green-400 rounded-full animate-bounce"></div>
|
||||||
<div className="w-3 h-3 bg-purple-400 rounded-full animate-bounce delay-100"></div>
|
<div className="w-3 h-3 bg-green-400 rounded-full animate-bounce delay-100"></div>
|
||||||
<div className="w-3 h-3 bg-purple-400 rounded-full animate-bounce delay-200"></div>
|
<div className="w-3 h-3 bg-green-400 rounded-full animate-bounce delay-200"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
Loading…
Reference in New Issue
Block a user