🚀Updated background colours for insights and side bar

Frontend/src/app/components/organisms/bottom-player/bottom-player.component.html

@@ -1,11 +1,11 @@
 <div  class="fixed mb-3 bottom-player" style="width: 98vw; height: 12vh; left:1vw ">
   <div class="rounded-md h-full">
     <div class="absolute top-0 w-full z-20">
-      <div #progressContainer [ngClass]="moodComponentClasses[this.moodService.getCurrentMood()]" class="w-full  rounded-t-full h-1 hover:cursor-pointer" (click)="updateProgress($event)">
+      <div #progressContainer class=" bg-gray-300 w-full  rounded-t-full h-1 hover:cursor-pointer" (click)="updateProgress($event)">
         <div [ngClass]="moodClassesDark[this.moodService.getCurrentMood()]"    id="progressBar" class=" h-1 rounded-full" [style.width.%]="trackProgress"></div>
       </div>
     </div>
-    <div [ngClass]="moodComponentClasses[this.moodService.getCurrentMood()]"  class=" opacity-80 rounded-lg overflow-hidden h-full flex items-center p-4">
+    <div  class="bg-stone-950 opacity-80 rounded-lg overflow-hidden h-full flex items-center p-4">
       <div class="flex items-center h-full w-full justify-between">
 
         <div class="flex items-center space-x-5">

Frontend/src/app/components/organisms/side-bar/side-bar.component.html

@@ -1,6 +1,6 @@
-<div class="z-10 w-[45vh]" style="--tw-h: 73.8vh; top: 10.2vh;">
+<div class="z-10 w-[45vh] opacity-90" style="--tw-h: 73.8vh; top: 10.2vh;">
   <div class="container pl-3 rounded-md h-full">
-    <div [ngClass]="moodComponentClasses[moodService.getCurrentMood()]" class="rounded-lg overflow-auto h-full flex flex-col justify-between scrollbar-hidden">
+    <div [ngClass]="moodComponentClasses[moodService.getCurrentMood()]" class=" bg-stone-950 rounded-lg overflow-auto h-full flex flex-col justify-between scrollbar-hidden">
       <div class="flex justify-between items-center mb-2 mt-3">
         <div class="button-container" [ngClass]="getButtonClasses('suggestions')">
           <button class="px-10 text-md font-bold text-white focus:outline-none truncate" (click)="selectOption('suggestions')">Suggestions</button>
@@ -28,7 +28,7 @@
 <div *ngIf="isEchoModalVisible" id="echo-songs" tabindex="-1" aria-hidden="true" class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full bg-black bg-opacity-50">
   <div class="relative p-4 w-full max-w-2xl max-h-full">
     <!-- Modal content -->
-    <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+    <div class="relative bg-white rounded-lg shadow dark:bg-gray-950">
       <!-- Modal header -->
       <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
         <h3 class="text-xl font-semibold text-gray-900 dark:text-white">

Frontend/src/app/components/organisms/song-cards/song-cards.component.html

@@ -1,27 +1,27 @@
-<div [ngClass]="this.moodComponentClasses[this.moodService.getCurrentMood()]" class="flex items-center mb-5 hover:cursor-pointer bg-default-backgrounddark rounded-lg p-1 group" 
+<div class="bg-stone-950 flex items-center mb-5 hover:cursor-pointer bg-default-backgrounddark rounded-lg p-1 group"
      (click)="playTrack(card.id)">
   <!-- Image on the left -->
   <div class="mr-4 flex-shrink-0" [style.width]="imgSize">
-    <img [src]="card?.imageUrl || 'path/to/default-image.jpg'" 
-         alt="Card image" 
-         class="w-1/4 rounded-lg mr-2.5 w-full h-auto" 
-         [style.width]="imgSize" 
+    <img [src]="card?.imageUrl || 'path/to/default-image.jpg'"
+         alt="Card image"
+         class="w-1/4 rounded-lg mr-2.5 w-full h-auto"
+         [style.width]="imgSize"
          [style.height]="imgSize">
   </div>
   <!-- Text on the right -->
   <div class="flex-grow">
     <!-- First text with icon -->
     <div class="flex items-center">
       <img *ngIf="card.explicit" src="../../../../assets/images/explicit-dark.png" alt="Explicit Icon" class="w-6 h-6 mr-2">
-      <h1 class="font-weight: bold;">{{ card.text }}</h1>
+      <h1 class="font-weight: bold; text-white">{{ card.text }}</h1>
     </div>
     <!-- Second text (underneath the first text) -->
-    <p class="font-weight: bold;">{{ card.secondaryText }}</p>
+    <p class="font-weight: bold; text-white">{{ card.secondaryText }}</p>
   </div>
   <app-echo-button
-    [width]="svgSize" 
-    [height]="svgSize" 
+    [width]="svgSize"
+    [height]="svgSize"
     (buttonClick)="onEchoButtonClick($event)"
     class="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
   </app-echo-button>
-</div>
+</div>

Frontend/src/app/pages/insights/insights.component.html

@@ -1,4 +1,4 @@
-<div id="center" class=" rounded-xl no-scrollbar border border-gray-500 overflow-y-scroll bg-stone-950 opacity-90 p-4" style="height: 72vh; width: 75vw;">
+<div id="center" class=" rounded-xl no-scrollbar border border-stone-950 overflow-y-scroll bg-stone-950 opacity-90 p-4" style="height: 72vh; width: 75vw;">
   <h1 class="text-3xl font-bold text-white text-center mb-6">Listening Insights</h1>
 
   <!-- Widgets Grid -->