Feat/add tooltip

Frontend/src/app/app.component.html

@@ -11,7 +11,9 @@
       <app-navbar class="col-start-1 col-span-1 row-start-1 row-span-3"></app-navbar>
       <app-other-nav class="col-start-5 col-span-1 row-start-1 row-span-1 justify-self-end"></app-other-nav>
       <div class="col-start-1 col-span-1 row-start-2 row-span-1">
+        <app-tool-tip [tooltipText]="expandableTooltipInfo" position="right">
         <app-expandable-icon (click)="toggleSideBar()"></app-expandable-icon>
+        </app-tool-tip>
       </div>
       <app-side-bar *ngIf="!isSideBarHidden" (sidebarToggled)="layout($event)" class="col-start-1 col-span-1 row-start-3 row-span-3 pr-2"></app-side-bar>
       <!-- Placeholder div -->

Frontend/src/app/app.component.ts

@@ -12,6 +12,8 @@ import { MoodService } from "./services/mood-service.service";
 import {
   BackgroundAnimationComponent
 } from "./components/organisms/background-animation/background-animation.component";
+import { ToolTipComponent } from "./components/atoms/tool-tip/tool-tip.component";
+
 import { ExpandableIconComponent } from './components/organisms/expandable-icon/expandable-icon.component';
 import { NavbarComponent } from "./components/organisms/navbar/navbar.component";
 import { SideBarComponent } from './components/organisms/side-bar/side-bar.component';
@@ -36,13 +38,15 @@ import { Observable } from "rxjs";
     BackgroundAnimationComponent,
     NavbarComponent,
     SideBarComponent,
-    ExpandableIconComponent
+    ExpandableIconComponent,
+    ToolTipComponent
   ],
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
 })
 export class AppComponent implements OnInit, OnDestroy
 {
+  expandableTooltipInfo: string = 'close';
   update: boolean = false;
   screenSize!: string;
   displayPageName: boolean = false;
@@ -151,6 +155,7 @@ export class AppComponent implements OnInit, OnDestroy
 
 
   toggleSideBar() {
+    this.expandableTooltipInfo= this.isSideBarHidden ? 'close' : 'open';
     this.isSideBarHidden = !this.isSideBarHidden;
     this.layout(this.isSideBarHidden);
   }

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

@@ -1,7 +1,9 @@
-<svg [ngClass]="moodComponentClasses" class="echo-button hover:cursor-pointer group" (click)="onButtonClick($event)" [attr.width]="width" [attr.height]="height" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<app-tool-tip tooltipText="Echo.." position="bottom">
+    <svg [ngClass]="moodComponentClasses" class="echo-button hover:cursor-pointer group" (click)="onButtonClick($event)" [attr.width]="width" [attr.height]="height" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect class="rect-1 transition-colors duration-mood ease-in-out" x="0" width="4.14286" height="20%" rx="2.07143" [attr.fill]="this.moodComponentClasses[this.moodService.getCurrentMood()]" style="transform: translateY(37.5%);"/>
     <rect class="rect-2 transition-colors duration-mood ease-in-out" x="5" width="4.14286" height="60%" rx="2.07143" [attr.fill]="this.moodComponentClasses[this.moodService.getCurrentMood()]" style="transform: translateY(20%);"/>
     <rect class="rect-3 transition-colors duration-mood ease-in-out" x="10" width="4.14286" height="85%" rx="2.07143" [attr.fill]="this.moodComponentClasses[this.moodService.getCurrentMood()]" style="transform: translateY(9.5%);"/>
     <rect class="rect-4 transition-colors duration-mood ease-in-out" x="15" width="4.14286" height="60%" rx="2.07143" [attr.fill]="this.moodComponentClasses[this.moodService.getCurrentMood()]" style="transform: translateY(20%);"/>
     <rect class="rect-5 transition-colors duration-mood ease-in-out" x="20" width="4.14286" height="20%" rx="2.07143" [attr.fill]="this.moodComponentClasses[this.moodService.getCurrentMood()]" style="transform: translateY(37.5%);"/>
-</svg>
+</svg>
+</app-tool-tip>

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

@@ -1,10 +1,11 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { MoodService } from '../../../services/mood-service.service';
 import { NgClass } from '@angular/common';
+import { ToolTipComponent } from '../tool-tip/tool-tip.component';
 @Component({
   selector: 'app-echo-button',
   standalone: true,
-  imports: [NgClass],
+  imports: [NgClass,ToolTipComponent],
   templateUrl: './echo-button.component.html',
   styleUrls: ['./echo-button.component.css']
 })

Frontend/src/app/components/atoms/echo-log/echo-log.component.html

@@ -0,0 +1,42 @@
+
+<svg width="285" height="285" viewBox="0 0 285 285" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_1055_86)">
+    <mask id="mask0_1055_86" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="191" y="117" width="94" height="60">
+    <path d="M191.214 117.969H285V176.178H191.214V117.969Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask0_1055_86)">
+    <mask id="mask1_1055_86" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="191" y="117" width="94" height="60">
+    <path d="M238.221 117.969C212.384 117.969 191.44 130.999 191.44 147.072C191.44 163.148 212.384 176.178 238.221 176.178C264.055 176.178 285 163.148 285 147.072C285 130.999 264.055 117.969 238.221 117.969Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask1_1055_86)">
+    <path d="M191.44 117.969H284.89V176.178H191.44V117.969Z"  [attr.fill]="getFillColor()"/>
+    </g>
+    </g>
+    <mask id="mask2_1055_86" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="218" y="123" width="41" height="48">
+    <path d="M218.12 123.88H258.4V170.24H218.12V123.88Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask2_1055_86)">
+    <mask id="mask3_1055_86" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="210" y="117" width="56" height="61">
+    <path d="M244.061 117.174L265.914 159.855L232.4 177.015L210.547 134.336L244.061 117.174Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask3_1055_86)">
+    <mask id="mask4_1055_86" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="218" y="124" width="41" height="47">
+    <path d="M254.977 138.492C248.948 126.718 236.559 121.015 227.303 125.756C218.049 130.494 215.434 143.88 221.46 155.655C227.49 167.429 239.881 173.132 249.135 168.39C258.391 163.652 261.007 150.266 254.977 138.492Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask4_1055_86)">
+    <path d="M244.061 117.174L265.914 159.855L232.4 177.015L210.547 134.336L244.061 117.174Z" fill="#191716"/>
+    </g>
+    </g>
+    </g>
+    <path d="M195.608 147.072L280.829 146.84"  [attr.stroke]="getFillColor()" stroke-width="6.91458"/>
+    <path d="M58.2943 166.837C54.714 169.743 51.0417 171.869 47.2743 173.214C43.504 174.549 39.3092 175.22 34.6868 175.22C30.2842 175.22 26.1606 174.437 22.3131 172.869C18.4715 171.302 15.1554 169.176 12.3618 166.492C9.56528 163.809 7.36544 160.623 5.75935 156.933C4.15919 153.237 3.3606 149.262 3.3606 145.01C3.3606 140.839 4.12356 136.909 5.65247 133.219C7.17841 129.522 9.28622 126.313 11.97 123.588C14.6537 120.866 17.8392 118.719 21.5293 117.152C25.2254 115.584 29.165 114.8 33.345 114.8C37.4448 114.8 41.2656 115.605 44.8043 117.211C48.349 118.811 51.4098 120.993 53.9837 123.754C56.5547 126.518 58.5704 129.819 60.0281 133.658C61.4828 137.499 62.2131 141.659 62.2131 146.139V150.164H18.7981C19.8431 153.816 21.8559 156.761 24.8425 158.999C27.8261 161.241 31.3292 162.36 35.3518 162.36C37.8931 162.36 40.28 161.95 42.5125 161.125C44.7509 160.302 46.6568 159.148 48.2243 157.657L58.2943 166.837ZM33.0006 127.447C29.5004 127.447 26.4812 128.513 23.94 130.642C21.4047 132.764 19.6531 135.614 18.6793 139.192H47.215C46.2472 135.766 44.4748 132.951 41.895 130.749C39.3211 128.549 36.3553 127.447 33.0006 127.447Z"  [attr.fill]="getFillColor()"/>
+    <path d="M100.13 161.802C102.742 161.802 105.183 161.279 107.457 160.234C109.737 159.189 111.922 157.547 114.012 155.306L123.179 164.818C120.193 168.104 116.612 170.66 112.432 172.489C108.258 174.309 103.936 175.22 99.4649 175.22C95.2136 175.22 91.2028 174.437 87.4355 172.869C83.6652 171.302 80.4203 169.176 77.698 166.492C74.9727 163.808 72.8292 160.623 71.2617 156.933C69.7002 153.237 68.9224 149.262 68.9224 145.01C68.9224 140.759 69.7002 136.79 71.2617 133.1C72.8292 129.404 74.9727 126.197 77.698 123.481C80.4203 120.759 83.6652 118.612 87.4355 117.045C91.2028 115.477 95.2136 114.693 99.4649 114.693C104.087 114.693 108.525 115.608 112.777 117.437C117.028 119.265 120.644 121.818 123.63 125.096L114.237 135.059C112.147 132.749 109.906 130.995 107.516 129.798C105.132 128.605 102.558 128.005 99.7974 128.005C95.3947 128.005 91.6808 129.65 88.6586 132.933C85.6424 136.211 84.1342 140.237 84.1342 145.01C84.1342 149.784 85.681 153.78 88.7774 156.992C91.8708 160.198 95.656 161.802 100.13 161.802Z"  [attr.fill]="getFillColor()"/>
+    <path d="M131.126 174.104V95.7885L146.457 92.4279V120.393C148.689 118.535 151.165 117.122 153.891 116.154C156.613 115.18 159.579 114.693 162.785 114.693C169.497 114.693 175.016 116.861 179.339 121.189C183.667 125.512 185.834 131.066 185.834 137.85V174.104H170.504V140.094C170.504 136.437 169.402 133.492 167.202 131.259C165 129.021 162.075 127.898 158.427 127.898C155.886 127.898 153.588 128.403 151.539 129.407C149.488 130.413 147.793 131.85 146.457 133.717V174.104H131.126Z"  [attr.fill]="getFillColor()"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_1055_86">
+    <rect width="285" height="285" fill="white"/>
+    </clipPath>
+    </defs>
+    </svg>
+

Frontend/src/app/components/atoms/echo-log/echo-log.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EchoLogComponent } from './echo-log.component';
+
+describe('EchoLogComponent', () => {
+  let component: EchoLogComponent;
+  let fixture: ComponentFixture<EchoLogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EchoLogComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EchoLogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/components/atoms/echo-log/echo-log.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { MoodService } from '../../../services/mood-service.service';
+@Component({
+  selector: 'app-echo-logo',
+  standalone: true,
+  imports: [],
+  templateUrl: './echo-log.component.html',
+  styleUrl: './echo-log.component.css'
+})
+export class EchoLogComponent {
+constructor(public moodService: MoodService) { }
+getFillColor(): string {
+  return this.moodService.getRBGAColor(this.moodService.getCurrentMood());
+}
+}

Frontend/src/app/components/atoms/tool-tip/tool-tip.component.html

@@ -0,0 +1,14 @@
+<div class="relative inline-block">
+    <!-- Content of the element (like text, image, etc.) -->
+    <ng-content></ng-content>
+
+    <!-- Tooltip container -->
+    <div
+      *ngIf="isVisible"
+        class="absolute z-10 p-2 text-sm font-medium text-white rounded-lg shadow-lg transition-opacity duration-300 dark:bg-gray-700"
+       [ngClass]="[getPositionClasses(), moodComponentClasses[this.moodService.getCurrentMood()]]"
+    >
+      {{ tooltipText }}
+    </div>
+  </div>
+

Frontend/src/app/components/atoms/tool-tip/tool-tip.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToolTipComponent } from './tool-tip.component';
+
+describe('ToolTipComponent', () => {
+  let component: ToolTipComponent;
+  let fixture: ComponentFixture<ToolTipComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ToolTipComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ToolTipComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/components/atoms/tool-tip/tool-tip.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, HostListener } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MoodService } from '../../../services/mood-service.service';
+@Component({
+  selector: 'app-tool-tip',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './tool-tip.component.html',
+  styleUrl: './tool-tip.component.css'
+})
+export class ToolTipComponent {
+  @Input() tooltipText: string = 'Default Tooltip';  // Tooltip text
+  @Input() position: string = 'top';                 // Tooltip position (top, right, bottom, left)
+  moodComponentClasses!: { [key: string]: string };
+
+  isVisible: boolean = false;  // Tooltip visibility state
+  constructor(public moodService: MoodService) {
+    this.moodComponentClasses = this.moodService.getComponentMoodClasses();
+  }
+
+  // Show tooltip on mouse enter
+  @HostListener('mouseenter') onMouseEnter() {
+    this.isVisible = true;
+  }
+
+  // Hide tooltip on mouse leave
+  @HostListener('mouseleave') onMouseLeave() {
+    this.isVisible = false;
+  }
+
+  // Get Tailwind CSS classes for positioning the tooltip
+  getPositionClasses(): string {
+    switch (this.position) {
+      case 'top':
+        return 'bottom-full left-1/2 transform -translate-x-1/2 mb-2';
+      case 'right':
+        return 'left-full top-1/2 transform -translate-y-1/2 ml-2';
+      case 'bottom':
+        return 'top-full left-1/2 transform -translate-x-1/2 mt-2';
+      case 'left':
+        return 'right-full top-1/2 transform -translate-y-1/2 mr-2';
+      default:
+        return 'bottom-full left-1/2 transform -translate-x-1/2 mb-2';
+    }
+  }
+}

Frontend/src/app/components/organisms/info-icon/info-icon.component.html

@@ -1 +1,3 @@
-<app-icon [svgString]="svgString" [route]="route" ></app-icon>
+<app-tool-tip tooltipText="Help" position="bottom">
+    <app-icon [svgString]="svgString" [route]="route" ></app-icon>
+</app-tool-tip>

Frontend/src/app/components/organisms/info-icon/info-icon.component.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import {IconComponent} from './../../molecules/icon/icon.component';
+import { ToolTipComponent } from '../../atoms/tool-tip/tool-tip.component';
+
 const SVG_PATHS = {
   INFO: "M25,2C12.297,2,2,12.297,2,25s10.297,23,23,23s23-10.297,23-23S37.703,2,25,2z M25,11c1.657,0,3,1.343,3,3s-1.343,3-3,3 s-3-1.343-3-3S23.343,11,25,11z M29,38h-2h-4h-2v-2h2V23h-2v-2h2h4v2v13h2V38z"
 };
 @Component({
   selector: 'app-info-icon',
   standalone: true,
-  imports: [IconComponent],
+  imports: [IconComponent,ToolTipComponent],
   templateUrl: './info-icon.component.html',
   styleUrl: './info-icon.component.css'
 })

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

@@ -12,8 +12,14 @@
 
   <div *ngIf="screenSize === 'desktop'" class="desktop-layout">
     <div class="flex justify-center space-x-12 mt-5 pl-7">
+      <app-tool-tip tooltipText="Home" position="bottom">
         <app-svg-icon class="icon" [selected]="selectedSvg === homeSvg" (svgClick)="select(homeSvg)" [svgPath]="homeSvg" [fillColor]="getFillColor(homeSvg)" [middleColor]="getMiddleColor(homeSvg)" [width]="'8vh'"></app-svg-icon>  
+      </app-tool-tip>
+      <app-tool-tip tooltipText="Insights" position="bottom">
         <app-svg-icon class="icon" [selected]="selectedSvg === insightSvg" (svgClick)="select(insightSvg)" [svgPath]="insightSvg" [fillColor]="getFillColor(insightSvg)" [middleColor]="getMiddleColor(homeSvg)" [width]="'8vh'"></app-svg-icon>
+      </app-tool-tip>
+      <app-tool-tip tooltipText="Library" position="bottom">
         <app-svg-icon class="icon" [selected]="selectedSvg === otherSvg2" (svgClick)="select(otherSvg2)" [svgPath]="otherSvg2" [fillColor]="getFillColor(otherSvg2)" [middleColor]="getMiddleColor(homeSvg)" [width]="'8vh'"></app-svg-icon>
-    </div>
+      </app-tool-tip>
+      </div>
   </div>

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

@@ -5,6 +5,7 @@ import { Router, NavigationEnd } from '@angular/router';
 import { ScreenSizeService } from '../../../services/screen-size-service.service';
 import { MoodService } from '../../../services/mood-service.service';
 import { filter } from 'rxjs/operators';
+import { ToolTipComponent } from '../../atoms/tool-tip/tool-tip.component';
 
 const SVG_PATHS = {
     HOME: 'M48.62,19.21l-23-18c-0.37-0.28-0.87-0.28-1.24,0l-23,18c-0.43,0.34-0.51,0.97-0.17,1.41c0.34,0.43,0.97,0.51,1.41,0.17 L4,19.71V46c0,0.55,0.45,1,1,1h23V31h10v16h7c0.55,0,1-0.45,1-1V19.71l1.38,1.08C47.57,20.93,47.78,21,48,21 c0.3,0,0.59-0.13,0.79-0.38C49.13,20.18,49.05,19.55,48.62,19.21z M22,30h-8v-8h8V30z',
@@ -15,7 +16,7 @@ const SVG_PATHS = {
 @Component({
     selector: 'app-navbar',
     standalone: true,
-    imports: [CommonModule, SvgIconComponent],
+    imports: [CommonModule, SvgIconComponent,ToolTipComponent],
     templateUrl: './navbar.component.html',
     styleUrl: './navbar.component.css',
 })

Frontend/src/app/components/organisms/play-icon/play-icon.component.html

@@ -1,4 +1,4 @@
-<app-svg-icon 
+  <app-svg-icon 
   [circleAnimation]="true" 
   (svgClick)="switchmood($event)" 
   [mood]="mood" 
@@ -8,4 +8,4 @@
   [pathHeight]="'1'" 
   [selected]="true" 
   [svgPath]="playSvg">
-</app-svg-icon>
+</app-svg-icon>

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

@@ -4,12 +4,16 @@
       <!-- SVG button always visible -->
       <div class="flex justify-between items-center mb-2 mt-3">
         <!-- Only show these buttons when the sidebar is expanded -->
+        <app-tool-tip tooltipText="AI Suggestions" position="bottom">
         <div class="button-container w-full bg-opacity-0" [ngClass]="getButtonClasses('suggestions')">
           <button class="w-full px-10 font-bold text-white focus:outline-none truncate flex-1" (click)="selectOption('suggestions')">Suggestions</button>
         </div>
+        </app-tool-tip>
+        <app-tool-tip tooltipText="Your Recent listened" position="bottom">
         <div  class="button-container w-full bg-opacity-0" [ngClass]="getButtonClasses('recentListening')">
           <button class="w-full px-10 text-sm text-white focus:outline-none truncate flex-1" (click)="selectOption('recentListening')">Recent listening</button>
         </div>
+        </app-tool-tip>
       </div>
 
       <!-- Content of the sidebar -->

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

@@ -13,13 +13,14 @@ import { SearchService } from "../../../services/search.service";
 import { SkeletonSongCardComponent } from "../../atoms/skeleton-song-card/skeleton-song-card.component";
 import { ToastComponent } from "../../../components/organisms/toast/toast.component";
 import { YouTubeService } from "../../../services/youtube.service";
+import { ToolTipComponent } from "../../atoms/tool-tip/tool-tip.component";
 
 type SelectedOption = "suggestions" | "recentListening";
 
 @Component({
   selector: "app-side-bar",
   standalone: true,
-  imports: [MatCard, MatCardContent, NgForOf, NgIf, NgClass, EchoButtonComponent, SongCardsComponent, SkeletonSongCardComponent, ToastComponent],
+  imports: [MatCard, MatCardContent, NgForOf, NgIf, NgClass, EchoButtonComponent, SongCardsComponent, SkeletonSongCardComponent, ToastComponent,ToolTipComponent],
   templateUrl: "./side-bar.component.html",
   styleUrls: ["./side-bar.component.css"],
 })

Frontend/src/app/components/templates/desktop/deskLogin/desk-login.component.html

@@ -1,14 +1,16 @@
 <div class="h-screen flex flex-col">
   <div class="flex flex-1 flex-row">
-    <div class="flex flex-1 items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
-      <div class="bg-gray-component px-32 py-56 rounded-full text-center" style="box-shadow: 0 0 40px 10px rgba(238, 2, 88, 0.5);">
-        <div class="text-gray-verylight font-semibold shadow-lg text-2xl pb-2">
-          Your mood. Your music.
-        </div>
-        <img src="./assets/icons/ECH (500 x 200 px).png" alt="logo" class="h-32">
+         <div class="flex flex-1 items-center justify-center rounded-xl" style="background-color: rgba(0, 0, 0, 0.3);">
+        <app-tool-tip tooltipText="Click to change the Mood.." position="top">
+          <!-- add default color rgb here -->
+          <div [ngStyle]="{'box-shadow': '0 0 40px 10px ' + getFillColor(), 'width': '30vw', 'height': '30vw'}" (click)="changeMood()" class="bg-gray-component rounded-full text-center flex flex-col items-center justify-center">
+            <div class="text-gray-verylight font-semibold text-2xl pb-1">
+              Your mood. Your music.
+            </div>
+            <app-echo-logo></app-echo-logo>
+          </div>
+        </app-tool-tip>
       </div>
-    </div>
-
     <div class="flex flex-1 items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
       <div class="w-full max-w-sm  p-6 rounded-lg">
         <form class="space-y-6" action="#" method="POST">