ok

src/components/MusicPlayer.css

@@ -115,7 +115,7 @@
   overflow: hidden;
   transition: max-height 0.5s ease, padding 0.5s ease;
   /* Smooth transition for max-height and padding */
-  background-color: rgba(0, 0, 0, 0.8);
+  
   /* Example background color */
 }
 
@@ -177,7 +177,8 @@
 }
 
 .expand-button.expanded{
-  padding-top: 0px;
+  padding-top: 2px;
+  margin-top: -6px;
 }
 
 /* Adjust height of the music player container when expanded */
@@ -190,9 +191,7 @@
   display: flex;
   align-items: center;
   padding: 10px;
-  /* background-color: rgb(29, 185, 84); */
-  
-  background-color: #73a585;
+  padding-top: 0px;
 }
 
 .search-box input[type="text"] {
@@ -204,6 +203,13 @@
   font-size: 16px;
   outline: none;
   /* Remove default outline */
+  background-color: #f4efe6;
+  text-align: center;
+}
+.search-box input[type="text"]::placeholder {
+  font-weight: bold;
+  opacity: 0.7;
+  text-align: center;
 }
 
 .search-box .search-icon {
@@ -225,7 +231,6 @@
   display: flex;
   align-items: center;
   padding: 10px;
-  background-color: rgb(29, 185, 84);
 }
 
 .auth-box input[type="text"] {
@@ -236,9 +241,17 @@
   padding: 10px 15px;
   font-size: 16px;
   outline: none;
+  background-color: #019863;
   /* Remove default outline */
 }
 
+.auth-box input[type="text"]::placeholder {
+  color: white; /* Placeholder text color */
+  font-weight: bold;
+  opacity: 0.7; /* Optional: Adjust visibility */
+  text-align: center;
+}
+
 .auth-box .auth-icon {
   margin-right: 5px;
   color: #888;
@@ -253,20 +266,54 @@
   fill: #888;
   /* Adjust fill color */
 }
-
 .rectangle {
   position: relative;
   height: 200px;
   overflow: hidden;
+  border: 3px dashed #fbebcd;
+  border-radius: 11px;
+
+  /* Flexbox for centering */
+  display: flex;
+  flex-direction: column; /* Stack children vertically */
+  justify-content: center; /* Center vertically */
+  background-color: white;
+  z-index: 1;
+  overflow-y: auto;
 }
 
-.diagonal-text {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(-24deg);
-  font-size: 24px;
-  font-weight: bold;
-  color: #676767;
-  white-space: nowrap;
+.middle-text {
+  text-align: center;
+  font-family: Arial, sans-serif; /* Optional font */
+  color: #333; /* Optional text color */
+  margin-bottom: 0.5rem; /* Add spacing between text and button */
+}
+
+.bold-text {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.normal-text {
+  font-weight: normal;
+  font-size: 13px;
+}
+
+.search-button {
+  display: block;
+  margin: 1rem auto 0;
+
+  flex-grow: 1;
+  border: none;
+  border-radius: 25px;
+  padding: 10px 15px;
+  font-size: 16px;
+  outline: none;
+  background-color: #f4efe6;
+  color: black;
+  font-weight: bold;
+}
+
+.search-button:hover {
+  background-color: #0056b3;
 }