style changes

src/App.css

@@ -4,5 +4,5 @@
   align-items: center;
   justify-content: center;
   height: 100vh; 
-  background-color: #1B6A70; /* background color */
+  background-color: teal; /* background color */
 }

src/Header.css

@@ -1,41 +1,43 @@
 .header {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start; 
-    width: 100%;
-    background-color: #d9d9d9;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 120px; 
-  }
-
-  .header-logo {
-    height: 100%; 
-    width: auto;
-    max-width: 220px; 
-    margin-right: 20px; 
-  }
-
-  .header-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center; 
-    flex-grow: 1;
-    text-align: center;
-  }
-
-  .rectangle-title {
-    font-size: 28px; 
-    color: #333;
-    margin-bottom: 0px; 
-  }
-
-  .rectangle-description {
-    font-size: 18px; 
-    color: #666;
-    margin-top: 0px;
-  }
-
+  display: flex;
+  align-items: center;
+  position: relative; 
+  width: 100%;
+  background-color: #d9d9d9;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 120px;
+}
+
+.header-logo {
+  height: 100%;
+  width: auto;
+  max-width: 220px; 
+  z-index: 1; 
+}
+
+.header-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); 
+  text-align: center;
+  z-index: 0; 
+}
+
+.rectangle-title {
+  font-size: 28px;
+  color: #333;
+  margin: 0; 
+}
+
+.rectangle-description {
+  font-size: 18px;
+  color: #666;
+  margin-top: 5px;
+}

src/Playlist.css

@@ -13,7 +13,8 @@
   max-width: 960px;
   flex: 1;
   gap: 20px;
-  padding: 20px;
+  padding: 50px;
+  justify-content: space-between;
 }
 
 .input-section, .player-section, .request-history {
@@ -23,103 +24,133 @@
   flex-grow: 1;
 }
 
+.input-section h2, .request-history-title {
+  text-align: center;
+  margin-bottom: 20px;
+  font-weight: bold;
+  font-size: 1.2em;
+  font-family: inherit;
+  width: 100%;
+}
+
 .input-section, .request-history {
-  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  flex-grow: 1;
+  flex-basis: 0; 
+  max-width: 300px; 
+  margin: 0 auto;
 }
 
 .input-section {
+  display: flex;
+  flex-direction: column;
   align-items: center;
   text-align: center;
+  padding: 20px;
+  max-width: 300px;
+  margin: 0 auto;
+
+}
+
+.input-section button {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 0;
 }
 
 .request-history-title {
-  text-align: center; /* This centers the text within its container */
+  text-align: center;
   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 */
+  font-family: inherit;
+  width: 100%;
 }
 
 
-.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;
+.input-wrapper h2 {
+  text-align: center;
+  margin-bottom: 20px; 
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+.input-wrapper input[type="text"] {
   width: 100%;
   padding: 10px;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 
+
 .player-section {
   display: flex;
+  margin-left: 20px;
   flex-direction: column;
   align-items: center;
   flex: 2;
+  padding: 20px;
+  width: 100%;
+  max-width: 1200px;
 }
+
 .request-history-wrapper {
   display: flex;
-  flex-direction: column; /* Stack items vertically */
+  flex-direction: column;
+  margin-left: 23px;
 }
 
 .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%; 
+  max-height: 400px;
+  padding: 10px;
+  max-width: 300px;
+  margin: 0 auto;
 }
 
-
 .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 */
+  list-style-type: none;
+  padding-left: 0;
 }
 
-
 .history-list li {
   padding: 10px;
   border-radius: 5px;
-  transition: background-color 0.3s ease;
   margin-bottom: 10px;
-  list-style-type: none;
+  background-color: #f0f0f0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .history-list li:hover {
-  background-color: #f0f0f0; /* Light grey background on hover */
+  background-color: #e0e0e0;
   cursor: pointer;
 }
 
-.history-list > *:last-child {
-  margin-bottom: 0;  
+.history-item-description {
+  margin-bottom: 5px;
 }
 
-
+.history-item-timestamp {
+  color: #666;
+  font-size: 0.9em;
+}
 
 .about-button-container {
-  margin-top: 20px; /* Adds space between request history and the button */
-  text-align: center; /* Center-aligns the button */
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  max-width: 300px;
+  margin: 0 auto;
+  padding: 10px;
 }
 
-
-
-
 .spotify-link {
   display: block;
   text-align: center;
@@ -131,4 +162,4 @@
 
 .spotify-link:hover {
   text-decoration: underline;
-}
+}

src/Playlist.js

@@ -16,7 +16,10 @@ const RequestHistory = ({ history, onSelectRequest }) => (
     <ul className="history-list">
       {history.map((item, index) => (
         <li key={index} onClick={() => onSelectRequest(item)}>
-          {item.description} - {new Date(item.timestamp).toLocaleString()}
+          <div className="history-item-description">{item.description}</div>
+          <div className="history-item-timestamp">
+            {new Date(item.timestamp).toLocaleString()}
+          </div>
         </li>
       ))}
     </ul>
@@ -187,4 +190,4 @@ const Playlist = () => {
   );
 };
 
-export default Playlist;
+export default Playlist;