Feat/define fine tune components colors

Frontend/src/app/app.component.ts

@@ -72,7 +72,6 @@ export class AppComponent implements OnInit, OnDestroy
     @Inject(PLATFORM_ID) private platformId: Object
   )
   {
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
     this.isLoggedIn$ = this.authService.isLoggedIn$;
     updates.versionUpdates.subscribe(event =>
     {

Frontend/src/app/components/atoms/back-button/back-button.component.ts

@@ -22,7 +22,6 @@ export class BackButtonComponent {
   ) {
     this.currentMood = this.moodService.getCurrentMood(); 
     this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
   }
 
 

Frontend/src/app/components/atoms/button-component/button-component.component.html

@@ -1,6 +1,6 @@
 <button
   (click)="handleClick($event)"
-  [ngClass]="isSelected ? moodComponentClassesHover[this.moodService.getCurrentMood()]  : moodComponentClassesDark[this.moodService.getCurrentMood()]" 
+  [ngClass]="isSelected ? moodComponentClassesHover[this.moodService.getCurrentMood()]  : moodComponentClassesline[this.moodService.getCurrentMood()] + 'bg-defualt-backgroundDark text-default-text'" 
   class="ml-1 mb-1 px-5 py-2 rounded-full focus:cursor-pointer">
   {{ label }}
 </button>

Frontend/src/app/components/atoms/button-component/button-component.component.ts

@@ -14,12 +14,12 @@ export class ButtonComponentComponent {
   @Input() disabled: boolean = false;
   @Input() isSelected: boolean = false;
   @Output() click = new EventEmitter<Event>();
-  moodComponentClassesDark!: { [key: string]: string };
+  moodComponentClassesline!: { [key: string]: string };
   moodComponentClassesHover!: { [key: string]: string };
 
   constructor(public moodService: MoodService) {
-    this.moodComponentClassesDark = this.moodService.getComponentMoodClassesDark();
-    this.moodComponentClassesHover = this.moodService.getComponentMoodClassesHover();
+    this.moodComponentClassesHover = this.moodService.getComponentMoodClasses();
+    this.moodComponentClassesline = this.moodService.getUnerlineMoodClasses();
   }
 
   handleClick(event: Event): void {

Frontend/src/app/components/molecules/top-artist-card/top-artist-card.component.ts

@@ -26,7 +26,6 @@ export class TopArtistCardComponent {
     private router: Router,
   ) {
     this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
     this.MoodClassesDark = this.moodService.getComponentMoodClassesDark();
   }
 

Frontend/src/app/components/molecules/top-card/top-card.component.ts

@@ -27,7 +27,6 @@ export class TopCardComponent {
     protected dialog: MatDialog,
   ) {
     this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
     this.MoodClassesDark = this.moodService.getComponentMoodClassesDark();
   }
 

Frontend/src/app/components/molecules/top-result/top-result.component.ts

@@ -18,6 +18,5 @@ export class TopResultComponent {
     backgroundMoodClasses!:{ [key: string]: string };
     constructor(  public moodService: MoodService ) {
       this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
-      this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
     }
 }

Frontend/src/app/components/organisms/bottom-nav/bottom-nav.component.ts

@@ -18,7 +18,6 @@ export class BottomNavComponent {
   selectedIndex:string = 'home';
   constructor(private router: Router,public moodService: MoodService) {
     this.moodComponentClasses = this.moodService.getComponentMoodClasses();
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
     this.moodClassesDark = this.moodService.getComponentMoodClassesDark();
   }
   selectedIndexChanged(index: string){

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

@@ -53,8 +53,7 @@ export class BottomPlayerComponent implements AfterViewInit, OnDestroy
   )
   {
     this.moodComponentClasses = this.moodService.getComponentMoodClasses();
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
-    this.moodClassesDark = this.moodService.getComponentMoodClassesDark();
+    this.moodClassesDark = this.moodService.getComponentMoodClassesHover();
   }
 
   async ngOnInit()

Frontend/src/app/components/organisms/mood-drop-down/mood-drop-down.component.ts

@@ -18,34 +18,7 @@ export class MoodDropDownComponent {
   }
   dropdownOpen = false;
   moods: string[] = [
-    'Neutral',
-    'Admiration',
-    'Amusement',
-    'Anger',
-    'Annoyance',
-    'Approval',
-    'Caring',
-    'Confusion',
-    'Curiosity',
-    'Desire',
-    'Disappointment',
-    'Disapproval',
-    'Disgust',
-    'Embarrassment',
-    'Excitement',
-    'Fear',
-    'Gratitude',
-    'Grief',
-    'Joy',
-    'Love',
-    'Nervousness',
-    'Optimism',
-    'Pride',
-    'Realisation',
-    'Relief',
-    'Remorse',
-    'Sadness',
-    'Surprise',
+    "Neutral","Joy", "Surprise", "Sadness", "Anger", "Disgust", "Contempt", "Shame", "Fear", "Guilt", "Excitement", "Love"
   ];
   toggleDropdown() {
     this.dropdownOpen = !this.dropdownOpen;

Frontend/src/app/components/organisms/moods/moods.component.ts

@@ -39,7 +39,6 @@ export class MoodsComponent implements OnDestroy {
     ) {
         this.allMoods = this.moodService.getAllMoods();
         this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
-        this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
     }
     async ngOnInit() {
         this.screenSizeSubscription = this.screenSizeService.screenSize$.subscribe(screenSize => {

Frontend/src/app/components/organisms/navbar/navbar.component.ts

@@ -41,7 +41,6 @@ export class NavbarComponent implements OnInit {
         this.selectedSvg = this.homeSvg; 
         this.currentMood = this.moodService.getCurrentMood(); 
         this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
-        this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
     }
 
     ngOnInit() {

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

@@ -2,8 +2,8 @@
   <app-expandable-icon class="focus:outline-none max-w-[.5vw]" (click)="toggleSideBar()"></app-expandable-icon>
 </div>
 <div class="z-10"  style="left: 1vw; top: 10.2vh;">
-  <div [ngClass]="{'w-[5.vh] h-[2vw]': isSideBarHidden, 'w-[37.5vh] h-[75vh]': !isSideBarHidden}"  class="container  pl-5 rounded-md max-h-screen " >
-    <div *ngIf="!isSideBarHidden"  [ngClass]="moodComponentClasses[moodService.getCurrentMood()]" class="rounded-lg overflow-auto h-full flex flex-col justify-between scrollbar-hidden">
+  <div [ngClass]="{'w-[2.5vw] h-[2vw]': isSideBarHidden, 'w-[20vw] h-[75vh]': !isSideBarHidden}"  class="container  pl-5 rounded-md max-h-screen " >
+    <div class="bg-black opacity-70 rounded-lg overflow-auto h-full flex flex-col justify-between scrollbar-hidden">
       <!-- SVG button always visible -->
       <div  class="flex justify-between items-center mb-2 mt-3">
 

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

@@ -47,7 +47,6 @@ export class SideBarComponent implements OnInit
   )
   {
     this.moodComponentClasses = this.moodService.getComponentMoodClasses();
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
     this.underline = this.moodService.getUnerlineMoodClasses();
   }
 

Frontend/src/app/components/templates/desktop/search/search.component.ts

@@ -46,7 +46,6 @@ export class SearchComponent implements OnInit
   {
     this.currentMood = this.moodService.getCurrentMood();
     this.moodComponentClasses = this.moodService.getComponentMoodClasses();
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
     this.songs$ = this.searchService.getSearch();
     this.albums$ = this.searchService.getAlbumSearch();
     this.topResult$ = this.searchService.getTopResult();

Frontend/src/app/components/templates/desktop/settings/account/account.component.ts

@@ -19,6 +19,5 @@ export class AccountComponent {
   ) {
     this.currentMood = this.moodService.getCurrentMood(); 
     this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
   }
 }

Frontend/src/app/components/templates/desktop/settings/audio/audio.component.ts

@@ -19,6 +19,5 @@ export class AudioComponent {
   ) {
     this.currentMood = this.moodService.getCurrentMood(); 
     this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
   }
 }

Frontend/src/app/components/templates/desktop/settings/display/display.component.ts

@@ -20,6 +20,5 @@ export class DisplayComponent {
   ) {
     this.currentMood = this.moodService.getCurrentMood(); 
     this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
   }
 }

Frontend/src/app/components/templates/desktop/settings/language/language.component.ts

@@ -19,6 +19,5 @@ export class LanguageComponent {
   ) {
     this.currentMood = this.moodService.getCurrentMood(); 
     this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
   }
 }

Frontend/src/app/components/templates/desktop/settings/privacy/privacy.component.ts

@@ -19,6 +19,5 @@ export class PrivacyComponent {
   ) {
     this.currentMood = this.moodService.getCurrentMood(); 
     this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
   }
 }

Frontend/src/app/pages/artist-profile/artist-profile.component.ts

@@ -68,7 +68,6 @@ export class ArtistProfileComponent implements AfterViewInit {
     ) {
       this.currentMood = this.moodService.getCurrentMood(); 
       this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
-      this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
     }
 
     ngAfterViewInit(): void {

Frontend/src/app/pages/help-menu/help-menu.component.ts

@@ -20,13 +20,11 @@ export class HelpMenuComponent {
     ) {
       this.currentMood = this.moodService.getCurrentMood();
       this.moodComponentClasses = this.moodService.getComponentMoodClasses();
-      this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
     }
 
     ngOnInit(): void {
       this.currentMood = this.moodService.getCurrentMood();
       this.moodComponentClasses = this.moodService.getComponentMoodClasses();
-      this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
     }
 
   toggleAccordion(section: string) {

Frontend/src/app/pages/mood/mood.component.ts

@@ -50,7 +50,6 @@ export class MoodComponent implements OnInit {
       private router: Router,
     ){
         this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
-        this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
     }
 
     ngOnInit() {

Frontend/src/app/pages/profile/profile.component.ts

@@ -63,7 +63,6 @@ export class ProfileComponent implements AfterViewInit
   {
     this.currentMood = this.moodService.getCurrentMood();
     this.moodComponentClasses = this.moodService.getComponentMoodClasses();
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
   }
 
   ngAfterViewInit(): void

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

@@ -1,23 +1,23 @@
-<div [ngClass]="backgroundMoodClasses[this.moodService.getCurrentMood()]" class="flex flex-col h-dvh" style="overflow: hidden;">
+<div [ngClass]="moodComponentClasses[this.moodService.getCurrentMood()]" class="rounded-xl flex flex-col h-dvh opacity-70" style="overflow: hidden;">
     <!-- Main container -->
-     <div [ngClass]="backgroundMoodClasses[this.moodService.getCurrentMood()]" class="h-full flex bg-gray-component rounded-xl gap-x-20 p-20">
+     <div class="h-full flex opacity-99 bg-black rounded-xl gap-x-20 p-20">
         <!-- Left Nav -->
-        <app-back-button [buttonClasses]="backgroundMoodClasses[this.moodService.getCurrentMood()]"></app-back-button>
+        <app-back-button [buttonClasses]="moodComponentClasses[this.moodService.getCurrentMood()]"></app-back-button>
         <div class="w-1/4 grid grid-cols-1 grid-rows-7 px-4 position: fixed;">
-            <h2 class="text-white mb-4 text-2xl font-bold">Settings</h2>
-            <button class="bg-gray-light hover:bg-pink text-white font-bold py-2 px-4 rounded-full  h-10 min-w-32" [ngClass]="{'bg-pink': activeSetting === 'Account'}" (click)="showSettings('Account')">
+              <h2 class="text-white mb-4 text-2xl font-bold">Settings</h2>
+            <button class="text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="getButtonClass('Account') ? this.moodComponentClasses[this.moodService.getCurrentMood()]: 'bg-gray-light'" (click)="showSettings('Account')">
                 Account
             </button>
-            <button class="bg-gray-light hover:bg-pink text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="{'bg-pink': activeSetting === 'Privacy'}" (click)="showSettings('Privacy')">
+            <button class="text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="getButtonClass('Privacy') ? this.moodComponentClasses[this.moodService.getCurrentMood()]: 'bg-gray-light'"  (click)="showSettings('Privacy')">
                 Privacy
             </button>
-            <button class="bg-gray-light hover:bg-pink text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="{'bg-pink': activeSetting === 'Display'}" (click)="showSettings('Display')">
+            <button class="text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="getButtonClass('Display') ? this.moodComponentClasses[this.moodService.getCurrentMood()]: 'bg-gray-light'"  (click)="showSettings('Display')">
                 Display
             </button>
-            <button class="bg-gray-light hover:bg-pink text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="{'bg-pink': activeSetting === 'Audio'}" (click)="showSettings('Audio')">
+            <button class="text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="getButtonClass('Audio') ? this.moodComponentClasses[this.moodService.getCurrentMood()]: 'bg-gray-light'"  (click)="showSettings('Audio')">
                 Audio
             </button>
-            <button class="bg-gray-light hover:bg-pink text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="{'bg-pink': activeSetting === 'Language'}" (click)="showSettings('Language')">
+            <button class="text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="getButtonClass('Language') ? this.moodComponentClasses[this.moodService.getCurrentMood()]: 'bg-gray-light'"  (click)="showSettings('Language')">
                 Language
             </button>
         </div>

Frontend/src/app/pages/settings/settings.component.ts

@@ -42,15 +42,16 @@ export class SettingsComponent {
   ) {
     this.currentMood = this.moodService.getCurrentMood(); 
     this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
-    this.backgroundMoodClasses = this.moodService.getBackgroundMoodClasses();
   }
 
 
   showSettings(buttonLabel: string)
   {
     this.activeSetting = buttonLabel;
   }
-
+  getButtonClass(setting: string): boolean {
+    return this.activeSetting === setting ? true : false;
+  }
   async ngOnInit() {
     this.screenSizeService.screenSize$.subscribe(screenSize => {
       this.screenSize = screenSize;