latest changes

src/App.js

@@ -7,6 +7,7 @@ import About from "./About";
 import Header from "./Header";
 import Footer from "./Footer";
 import "./App.css";
+import "./TextInput.css";
 
 function App() {
   return (

src/Button.css

@@ -11,3 +11,16 @@
   width: 100%; 
   min-height: 91px;
 }
+
+.button {
+  background-color: #4CAF50; /* Lighter green shade */
+  color: #FFFFFF;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  padding: 10px 20px; /* Adjust the padding as needed */
+}
+
+.button:hover {
+  background-color: #66BB6A; /* Slightly different green for hover effect */
+}

src/Home.css

@@ -7,49 +7,41 @@
     padding: 20px;
     max-width: 600px;
     margin: 0 auto;
-  }
-  
-  .text-input {
+}
+
+.text-input {
     width: 100%;
     padding: 10px;
     margin-bottom: 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
     font-size: 16px;
-  }
-
-  .button {
-    width: 100%;
-    padding: 10px;
-    background-color: #1B2536;
-    color: white;
+}
+
+.button {
+    background-color: #4CAF50; 
+    color: #FFFFFF;
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    font-size: 16px;
-    transition: background-color 0.3s ease;
-  }
-
-  .button:hover {
-    background-color: #2C3E50;
-  }
-
-  .button:disabled {
-    background-color: #cccccc;
-    cursor: not-allowed;
-  }
-
-  .error-message {
+    padding: 10px 20px; 
+}
+
+.button:hover {
+    background-color: #66BB6A; 
+}
+
+.error-message {
     color: red;
     margin-top: 10px;
-  }
-  
-  .auth-message {
+}
+
+.auth-message {
     margin-top: 20px;
     text-align: center;
-  }
-  
-  .auth-message p {
+}
+
+.auth-message p {
     color: red;
     margin-bottom: 10px;
-  }
+}

src/Landing.css

@@ -67,16 +67,14 @@ html, body {
 }
 
 .landing-page button {
-  width: 100%;
-  max-width: 300px;
-  padding: 10px;
-  background-color: #1B2536;
-  color: white;
+  background-color: #4CAF50; 
+  color: #FFFFFF; 
   border: none;
   border-radius: 5px;
   cursor: pointer;
-  font-size: 16px;
-  transition: background-color 0.3s ease;
+  padding: 15px 30px; /* Increase padding for a bigger button */
+  font-size: 1.2rem; /* Increase font size */
+  max-width: 100%;
 }
 
 .landing-page button:hover {

src/Playlist.css

@@ -32,8 +32,25 @@
   text-align: center;
 }
 
+.request-history-title {
+  text-align: center; /* This centers the text within its container */
+  margin-bottom: 10px;
+  font-weight: bold;
+  font-size: 1.2em;
+  font-family: inherit; /* Ensure consistent font */
+  width: 100%; /* Ensure it takes full width of the container */
+}
+
+
 .input-section input[type="text"] {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   width: 100%;
+  padding: 10px;
+  margin-bottom: 20px;
 }
 
 .player-section {
@@ -42,40 +59,66 @@
   align-items: center;
   flex: 2;
 }
+.request-history-wrapper {
+  display: flex;
+  flex-direction: column; /* Stack items vertically */
+}
 
 .request-history {
   display: flex;
   flex-direction: column;
   max-height: 400px; 
+  padding: 20px;
+  border: 2px solid #ddd; /* Adds a border around the request history */
+  border-radius: 10px; /* Optional: Adds rounded corners */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a slight shadow for depth */
 }
 
+.request-history-title {
+  text-align: center;
+  margin-bottom: 10px; /* Adjust spacing as needed */
+  font-weight: bold;
+  font-size: 1.2em; /* Optional: adjust the font size for emphasis */
+  font-family: inherit;
+  width: 100%; 
+}
+
+
 .history-list {
   flex-grow: 1;
   overflow-y: auto;
   margin-bottom: 20px; 
+  list-style-type: none; /* Removes bullet points */
+  padding-left: 0; /* Removes any default left padding */
 }
 
+
 .history-list li {
+  padding: 10px;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
   margin-bottom: 10px;
+  list-style-type: none;
+}
+
+.history-list li:hover {
+  background-color: #f0f0f0; /* Light grey background on hover */
+  cursor: pointer;
 }
 
 .history-list > *:last-child {
   margin-bottom: 0;  
 }
 
+
+
 .about-button-container {
-  margin-top: auto; 
+  margin-top: 20px; /* Adds space between request history and the button */
+  text-align: center; /* Center-aligns the button */
 }
 
-.about-button-container button, .input-section button {
-  width: 100%;
-  padding: 10px;
-  background-color: #1B2536; 
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
+
+
 
 .spotify-link {
   display: block;

src/Playlist.js

@@ -10,21 +10,16 @@ import "./Landing.css";
 
 const apiUrl = process.env.REACT_APP_API_URL;
 
-const RequestHistory = ({ history, onSelectRequest, onAboutClick }) => (
+const RequestHistory = ({ history, onSelectRequest }) => (
   <div className="request-history">
-    <h3>Request History</h3>
-    <div className="history-list">
-      <ul>
-        {history.map((item, index) => (
-          <li key={index} onClick={() => onSelectRequest(item)}>
-            {item.description} - {new Date(item.timestamp).toLocaleString()}
-          </li>
-        ))}
-      </ul>
-    </div>
-    <div className="about-button-container">
-      <Button label="About MoodMelody" onClick={onAboutClick} />
-    </div>
+    <h2 className="request-history-title">Request History</h2>
+    <ul className="history-list">
+      {history.map((item, index) => (
+        <li key={index} onClick={() => onSelectRequest(item)}>
+          {item.description} - {new Date(item.timestamp).toLocaleString()}
+        </li>
+      ))}
+    </ul>
   </div>
 );
 
@@ -142,6 +137,7 @@ const Playlist = () => {
             placeholder="Enter the desired song qualities or mood..."
           />
           <Button
+            className="get-recommendations-button"
             label={loading ? "Loading..." : "Get Recommendations"}
             onClick={handleGetRecommendations}
             disabled={loading}
@@ -173,14 +169,18 @@ const Playlist = () => {
             </p>
           )}
         </div>
-        <RequestHistory
-          history={requestHistory}
-          onSelectRequest={handleSelectRequest}
-          onAboutClick={navigateToAbout}
-        />
+        <div className="request-history-wrapper">
+          <RequestHistory
+            history={requestHistory}
+            onSelectRequest={handleSelectRequest}
+          />
+          <div className="about-button-container">
+            <Button label="About MoodMelody" onClick={navigateToAbout} />
+          </div>
+        </div>
       </main>
     </div>
   );
 };
 
-export default Playlist;
+export default Playlist;

src/TextInput.css

@@ -1,7 +1,10 @@
 .text-input {
-    width: 90%;
-    height: 100px;
-    margin: 10px;
+    width: 85%; 
+    height: 90px; 
     padding: 10px;
     font-size: 16px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    margin-bottom: 20px; 
 }