From c4eb9fbd133c10e33e631506e1dd7710499cf315 Mon Sep 17 00:00:00 2001
From: zramsay <zach@bluecollarcoding.ca>
Date: Fri, 20 Dec 2024 08:23:57 -0500
Subject: [PATCH] green

---
 src/app/page.tsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 88817de..487ab1f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -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">
         {/* Header */}
         <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
           </h1>
           <p className="text-gray-400 text-lg">
@@ -261,9 +261,9 @@ const processPaymentAndGenerate = async (): Promise<void> => {
             {!walletState.connected ? (
               <button
                 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
-                         shadow-lg hover:shadow-purple-500/25"
+                         shadow-lg hover:shadow-green-500/25"
               >
                 Connect Solflare Wallet
               </button>
@@ -271,9 +271,9 @@ const processPaymentAndGenerate = async (): Promise<void> => {
               <div className="space-y-6">
                 {/* Wallet Info */}
                 <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="px-3 py-1 bg-purple-500/20 rounded-full text-purple-300 text-sm">
-                    {walletState.publicKey?.slice(0, 22)}...
+                  <span className="text-gray-400">Connected Wallet</span>
+                  <span className="px-3 py-1 bg-green-500/20 rounded-full text-green-300 text-sm">
+                    {walletState.publicKey?.slice(0, 8)}...
                   </span>
                 </div>
 
@@ -284,16 +284,16 @@ const processPaymentAndGenerate = async (): Promise<void> => {
                     onChange={(e) => setInputText(e.target.value)}
                     placeholder="Describe your meme idea here..."
                     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"
                     rows={4}
                   />
                   <button
                     onClick={processPaymentAndGenerate}
                     disabled={generationState.processing || generationState.loading || !inputText}
-                    className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600
-                             hover:to-pink-600 text-white font-semibold py-4 px-6 rounded-xl
-                             transition-all duration-200 shadow-lg hover:shadow-purple-500/25
+                    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 shadow-lg hover:shadow-green-500/25
                              disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none"
                   >
                     {generationState.processing ? 'Processing Payment...' :
@@ -319,9 +319,9 @@ const processPaymentAndGenerate = async (): Promise<void> => {
         {(generationState.processing || generationState.loading) && (
           <div className="flex justify-center items-center w-full mb-8">
             <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-purple-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"></div>
+              <div className="w-3 h-3 bg-green-400 rounded-full animate-bounce delay-100"></div>
+              <div className="w-3 h-3 bg-green-400 rounded-full animate-bounce delay-200"></div>
             </div>
           </div>
         )}