From b38cee06f719998797d4af0b20b49fd011861ef9 Mon Sep 17 00:00:00 2001
From: joh748 <joh748@aucklanduni.ac.nz>
Date: Wed, 9 Oct 2024 01:16:19 +1300
Subject: [PATCH 1/4] change css

---
 .../src/components/gemini/LuckyAdviser.jsx    | 103 +++++++++---------
 1 file changed, 51 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/gemini/LuckyAdviser.jsx b/frontend/src/components/gemini/LuckyAdviser.jsx
index 3258b5e..062efa4 100644
--- a/frontend/src/components/gemini/LuckyAdviser.jsx
+++ b/frontend/src/components/gemini/LuckyAdviser.jsx
@@ -7,7 +7,7 @@ function LuckyAdviser() {
     const [inputValue, setInputValue] = useState('');
     const [promptResponses, setPromptResponses] = useState([]);
     const [loading, setLoading] = useState(false);
-    const [showResponses, setShowResponses] = useState(true); // State to manage response box visibility
+    const [showResponses, setShowResponses] = useState(true);
 
     // Create axios instance with base URL and authorization token
     const axiosInstance = axios.create({
@@ -15,7 +15,8 @@ function LuckyAdviser() {
         headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
     });
 
-    const getResponseForGivenPrompt = async () => {
+    const getResponseForGivenPrompt = async (e) => {
+        e.preventDefault();
         if (!inputValue.trim()) {
             console.error("Input value is required.");
             return;
@@ -64,57 +65,55 @@ function LuckyAdviser() {
     setShowResponses(false); // Close the response box
 };
 
-  return (
-    <div className="container mx-auto p-4">
-      <div className="flex space-x-4 mb-4">
-        <div className="flex-1">
-          <input
-            type="text"
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            placeholder="Ask Me Something You Want"
-            className="border border-gray-300 rounded-md p-2 w-full focus:outline-none focus:ring-2 focus:ring-violet-600"
-          />
+    return (
+        <div className="container mx-auto p-4">
+            <div className="flex flex-col mb-4">
+                <label htmlFor="prompt" className="mb-2 text-sm font-medium text-gray-900 sr-only">Ask Me Something You Want</label>
+                <div className="relative">
+                    <textarea
+                        id="prompt"
+                        value={inputValue}
+                        onChange={(e) => setInputValue(e.target.value)}
+                        placeholder="Ask Me Something You Want"
+                        className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 h-16 resize-none"
+                        required
+                    />
+                    <div className="absolute right-2 -bottom-16 flex space-x-2">
+                        <button onClick={getResponseForGivenPrompt} type="submit" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2">
+                            Send
+                        </button>
+                        <LuckyButton onGetAdvice={handleLuckyAdvice} />
+                    </div>
+                </div>
+            </div>
+            {loading ? (
+                <div className="text-center mt-3">
+                    <LoadingSpinner />
+                </div>
+            ) : (
+                showResponses && promptResponses.length > 0 && (
+                    <div className="flex flex-col mb-4 p-4 border border-gray-300 rounded-md shadow-md">
+                        {promptResponses.map((promptResponse, index) => (
+                            <div key={index}>
+                                <div className="font-bold text-lg mb-2">{promptResponse.title}</div>
+                                <ul>
+                                    {promptResponse.content.map((item, idx) => (
+                                        <li key={idx} className="mb-1">{item}</li>
+                                    ))}
+                                </ul>
+                            </div>
+                        ))}
+                        <button
+                            onClick={handleCloseResponses}
+                            className="self-end bg-white text-violet-800 rounded-md px-4 py-2 border border-violet-800 hover:bg-gray-200 transition"
+                        >
+                            Close
+                        </button>
+                    </div>
+                )
+            )}
         </div>
-        <div className="col-auto">
-          <button 
-          onClick={getResponseForGivenPrompt} 
-          className="bg-white text-violet-800 rounded-md px-4 py-2 border border-violet-800 hover:bg-gray-200 transition">
-            Send</button>
-        </div>
-        <LuckyButton onGetAdvice={handleLuckyAdvice} />
-      </div>
-      {loading ? (
-        <div className="text-center mt-3">
-          <div className="spinner-border text-primary">
-            <span className="visually-hidden">
-              <LoadingSpinner />
-            </span>
-          </div>
-        </div>
-      ) : (
-        showResponses && promptResponses.length > 0 && (
-          <div className="flex flex-col mb-4 p-4 border border-gray-300 rounded-md shadow-md">
-            {promptResponses.map((promptResponse, index) => (
-              <div key={index}>
-                <div className="font-bold text-lg mb-2">{promptResponse.title}</div>
-                <ul>
-                  {promptResponse.content.map((item, idx) => (
-                    <li key={idx} className="mb-1">{item}</li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-            <button
-              onClick={handleCloseResponses}
-              className="self-end bg-white text-violet-800 rounded-md px-4 py-2 border border-violet-800 hover:bg-gray-200 transition"
-            >
-              Close
-            </button>
-          </div>
-        ))}
-    </div>
-  );
+    );
 }
 
 export default LuckyAdviser;

From 51456054ef3217d8b4c540c0189a6cc4afd9d03b Mon Sep 17 00:00:00 2001
From: joh748 <joh748@aucklanduni.ac.nz>
Date: Wed, 9 Oct 2024 01:23:48 +1300
Subject: [PATCH 2/4] buttons css change

---
 frontend/src/components/gemini/LuckyAdviser.jsx | 6 +++---
 frontend/src/components/gemini/LuckyButton.jsx  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/gemini/LuckyAdviser.jsx b/frontend/src/components/gemini/LuckyAdviser.jsx
index 062efa4..a6f12a9 100644
--- a/frontend/src/components/gemini/LuckyAdviser.jsx
+++ b/frontend/src/components/gemini/LuckyAdviser.jsx
@@ -75,11 +75,11 @@ function LuckyAdviser() {
                         value={inputValue}
                         onChange={(e) => setInputValue(e.target.value)}
                         placeholder="Ask Me Something You Want"
-                        className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 h-16 resize-none"
+                        className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 h-14 resize-none"
                         required
                     />
-                    <div className="absolute right-2 -bottom-16 flex space-x-2">
-                        <button onClick={getResponseForGivenPrompt} type="submit" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2">
+                    <div className="absolute right-0 -bottom-12 flex space-x-2">
+                        <button onClick={getResponseForGivenPrompt} type="submit" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2">
                             Send
                         </button>
                         <LuckyButton onGetAdvice={handleLuckyAdvice} />
diff --git a/frontend/src/components/gemini/LuckyButton.jsx b/frontend/src/components/gemini/LuckyButton.jsx
index 4491fbb..abc3605 100644
--- a/frontend/src/components/gemini/LuckyButton.jsx
+++ b/frontend/src/components/gemini/LuckyButton.jsx
@@ -7,7 +7,7 @@ function LuckyButton({ onGetAdvice }) {
   };
 
   return (
-    <button onClick={handleClick} className="bg-violet-600 text-white rounded-md px-4 py-2 hover:bg-violet-800 transition">
+    <button onClick={handleClick} className="flex-shrink-0 bg-violet-600 text-white rounded-md px-4 py-2 hover:bg-violet-800 transition">
       I'm Feeling Lucky!
     </button>
   );

From c462524caacbab9d2bbec68540393ad3db814bb0 Mon Sep 17 00:00:00 2001
From: joh748 <joh748@aucklanduni.ac.nz>
Date: Wed, 9 Oct 2024 11:54:20 +1300
Subject: [PATCH 3/4] button div

---
 frontend/src/components/gemini/LuckyAdviser.jsx | 14 +++++++++-----
 frontend/src/components/gemini/LuckyButton.jsx  |  7 +++++--
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/gemini/LuckyAdviser.jsx b/frontend/src/components/gemini/LuckyAdviser.jsx
index e45db0f..201a9e5 100644
--- a/frontend/src/components/gemini/LuckyAdviser.jsx
+++ b/frontend/src/components/gemini/LuckyAdviser.jsx
@@ -76,13 +76,11 @@ function LuckyAdviser() {
                         placeholder="Ask for financial advice or education..."
                         className="block w-full p-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-green resize-none"
                         required
+                        disabled={loading} // Disable button when loading
                     />
-                    <button onClick={getResponseForGivenPrompt} type="submit" className="bg-white text-primary-green rounded-md border border-primary-green hover:bg-gray-200 transition font-medium text-sm px-3 py-2">
+                    <button onClick={getResponseForGivenPrompt} type="submit" disabled={loading}  className="bg-white text-primary-green rounded-md border border-primary-green hover:bg-gray-200 transition font-medium text-sm px-3 py-2">
                         Send
                     </button>
-                    <div className="absolute right-0 -bottom-12 flex space-x-2">
-                        <LuckyButton onGetAdvice={handleLuckyAdvice} />
-                    </div>
                 </div>
             </div>
             {loading ? (
@@ -95,7 +93,7 @@ function LuckyAdviser() {
                 </div>
             ) : (
                 showResponses && promptResponses.length > 0 && (
-                    <div className="flex flex-col mb-4 p-4 border border-gray-300 rounded-md shadow-md">
+                    <div className="flex flex-col mt-8 mb-4 p-4 border border-gray-300 rounded-md shadow-md">
                         {promptResponses.map((promptResponse, index) => (
                             <div key={index}>
                                 <div className="font-bold text-lg mb-2">{promptResponse.title}</div>
@@ -115,6 +113,12 @@ function LuckyAdviser() {
                     </div>
                 )
             )}
+            <div className="flex justify-end mt-2">
+                <LuckyButton
+                    onGetAdvice={handleLuckyAdvice}
+                    disabled={loading} // Disable when loading
+                />
+            </div>
         </div>
     );
 }
diff --git a/frontend/src/components/gemini/LuckyButton.jsx b/frontend/src/components/gemini/LuckyButton.jsx
index 48ef04d..c0dd16d 100644
--- a/frontend/src/components/gemini/LuckyButton.jsx
+++ b/frontend/src/components/gemini/LuckyButton.jsx
@@ -1,13 +1,16 @@
 // LuckyAdviceButton.jsx
 import React from 'react';
 
-function LuckyButton({ onGetAdvice }) {
+function LuckyButton({ onGetAdvice, loading }) {
   const handleClick = () => {
     onGetAdvice();
   };
 
   return (
-    <button onClick={handleClick} className="bg-primary-green text-white rounded-md px-4 py-2 hover:bg-primary-green-dark transition">
+    <button onClick={handleClick} 
+      className="bg-primary-green text-white rounded-md px-4 py-2 hover:bg-primary-green-dark transition"
+      disabled={loading} // Disable button when loading
+      >
       I'm Feeling Lucky!
     </button>
   );

From b7cbd70b21a9cbe30113656797bf887de921fc67 Mon Sep 17 00:00:00 2001
From: joh748 <joh748@aucklanduni.ac.nz>
Date: Wed, 9 Oct 2024 12:09:36 +1300
Subject: [PATCH 4/4] change opacity when loading

---
 frontend/src/components/gemini/LuckyAdviser.jsx | 8 ++++++--
 frontend/src/components/gemini/LuckyButton.jsx  | 4 +++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/gemini/LuckyAdviser.jsx b/frontend/src/components/gemini/LuckyAdviser.jsx
index 201a9e5..f0b7671 100644
--- a/frontend/src/components/gemini/LuckyAdviser.jsx
+++ b/frontend/src/components/gemini/LuckyAdviser.jsx
@@ -78,7 +78,11 @@ function LuckyAdviser() {
                         required
                         disabled={loading} // Disable button when loading
                     />
-                    <button onClick={getResponseForGivenPrompt} type="submit" disabled={loading}  className="bg-white text-primary-green rounded-md border border-primary-green hover:bg-gray-200 transition font-medium text-sm px-3 py-2">
+                    <button 
+                        onClick={getResponseForGivenPrompt} 
+                        type="submit" disabled={loading}  
+                        className={`bg-white text-primary-green rounded-md border border-primary-green hover:bg-gray-200 transition 
+                        font-medium text-sm px-3 py-2 ${loading ? 'opacity-50' : ''}`}>
                         Send
                     </button>
                 </div>
@@ -116,7 +120,7 @@ function LuckyAdviser() {
             <div className="flex justify-end mt-2">
                 <LuckyButton
                     onGetAdvice={handleLuckyAdvice}
-                    disabled={loading} // Disable when loading
+                    loading={loading} // Disable when loading
                 />
             </div>
         </div>
diff --git a/frontend/src/components/gemini/LuckyButton.jsx b/frontend/src/components/gemini/LuckyButton.jsx
index c0dd16d..d7cdb20 100644
--- a/frontend/src/components/gemini/LuckyButton.jsx
+++ b/frontend/src/components/gemini/LuckyButton.jsx
@@ -2,13 +2,15 @@
 import React from 'react';
 
 function LuckyButton({ onGetAdvice, loading }) {
+  console.log("loading",loading)
   const handleClick = () => {
     onGetAdvice();
   };
 
   return (
     <button onClick={handleClick} 
-      className="bg-primary-green text-white rounded-md px-4 py-2 hover:bg-primary-green-dark transition"
+      className={`bg-primary-green text-white rounded-md px-4 py-2 hover:bg-primary-green-dark transition
+      ${loading ? 'opacity-50' : ''}`}
       disabled={loading} // Disable button when loading
       >
       I'm Feeling Lucky!