From d7f222cc905688170c481b4546845c85531a70f6 Mon Sep 17 00:00:00 2001 From: Alma Date: Mon, 12 Aug 2024 20:19:35 -0700 Subject: [PATCH] latest changes --- src/App.js | 1 + src/Button.css | 13 ++++++++++ src/Home.css | 54 +++++++++++++++++----------------------- src/Landing.css | 12 ++++----- src/Playlist.css | 63 +++++++++++++++++++++++++++++++++++++++-------- src/Playlist.js | 40 +++++++++++++++--------------- src/TextInput.css | 9 ++++--- 7 files changed, 121 insertions(+), 71 deletions(-) diff --git a/src/App.js b/src/App.js index 345b5cf..25fbd11 100644 --- a/src/App.js +++ b/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 ( diff --git a/src/Button.css b/src/Button.css index 23ab1ee..f19de2f 100644 --- a/src/Button.css +++ b/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 */ +} diff --git a/src/Home.css b/src/Home.css index 9aa9043..51f4108 100644 --- a/src/Home.css +++ b/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; - } \ No newline at end of file +} diff --git a/src/Landing.css b/src/Landing.css index dd0f92a..9ea9a50 100644 --- a/src/Landing.css +++ b/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 { diff --git a/src/Playlist.css b/src/Playlist.css index a135ecc..398e8e0 100644 --- a/src/Playlist.css +++ b/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; diff --git a/src/Playlist.js b/src/Playlist.js index 1aa6503..18f4671 100644 --- a/src/Playlist.js +++ b/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 }) => (
-

Request History

-
-
    - {history.map((item, index) => ( -
  • onSelectRequest(item)}> - {item.description} - {new Date(item.timestamp).toLocaleString()} -
    • - ))} -
-
-
-
+

Request History

+
); @@ -142,6 +137,7 @@ const Playlist = () => { placeholder="Enter the desired song qualities or mood..." />