sfeir-open-source · MarineGiroux · Sep 29, 2025
diff --git a/front/src/app/core/home-page/is-login-home-page/is-login-home-page.component.html b/front/src/app/core/home-page/is-login-home-page/is-login-home-page.component.html
@@ -6,23 +6,26 @@ <h1 class="text-gray-900 text-2xl md:ml-10 text-primaryColor font-medium md:pt-0
 
     <nav class="flex gap-1 rounded-md bg-action px-1 py-1 md:static absolute top-0 left-1/2 transform -translate-x-1/2 md:ml-auto md:-mr-25"
          aria-label="Event filters">
-      <button
-        class="flex items-center rounded-md py-0.5 px-12 text-sm cursor-pointer transition-all"
-        [ngClass]="activeTab() === 'currents' ? 'bg-white text-primaryColor shadow-sm' : 'text-secondary'"
-        (click)="setActiveTab('currents')"
-        [attr.aria-selected]="activeTab() === 'currents'"
-        [disabled]="isLoading()">
+
+      <app-button
+        type="button"
+        [customClass]="getCurrentsTabClasses()"
+        [buttonHandler]="getCurrentsTabHandler()"
+        [disabled]="isLoading()"
+        [ariaLabel]="'Show current events'"
+        [attr.aria-selected]="activeTab() === 'currents'">
         Currents
-      </button>
+      </app-button>
 
-      <button
-        class="flex items-center rounded-md py-0.5 px-12 text-sm cursor-pointer transition-all"
-        [ngClass]="activeTab() === 'passed' ? 'bg-white text-primaryColor shadow-sm' : 'text-secondary'"
-        (click)="setActiveTab('passed')"
-        [attr.aria-selected]="activeTab() === 'passed'"
-        [disabled]="isLoading()">
+      <app-button
+        type="button"
+        [customClass]="getPassedTabClasses()"
+        [buttonHandler]="getPassedTabHandler()"
+        [disabled]="isLoading()"
+        [ariaLabel]="'Show past events'"
+        [attr.aria-selected]="activeTab() === 'passed'">
         Passed
-      </button>
+      </app-button>
     </nav>
   </header>
 </section>

diff --git a/front/src/app/core/home-page/is-login-home-page/is-login-home-page.component.ts b/front/src/app/core/home-page/is-login-home-page/is-login-home-page.component.ts
@@ -11,24 +11,25 @@ import {
   EventTeamField
 } from '../../../feature/admin-management/components/event/event-team-card/interface/event-team-field';
 import { Event } from '../../../feature/admin-management/type/event/event';
+import { ButtonComponent } from '../../../shared/button/button.component';
 
 @Component({
   selector: 'app-is-login-home-page',
   standalone: true,
-  imports: [CommonModule, EventTeamCardComponent],
+  imports: [CommonModule, EventTeamCardComponent, ButtonComponent],
   templateUrl: './is-login-home-page.component.html',
   styleUrl: './is-login-home-page.component.scss'
 })
 export class IsLoginHomePageComponent {
-  activeTab = signal<'currents' | 'passed'>('currents');
-  userEvents = signal<Event[]>([]);
-  isLoading = signal<boolean>(true);
-  error = signal<string | null>(null);
+  readonly activeTab = signal<'currents' | 'passed'>('currents');
+  readonly userEvents = signal<Event[]>([]);
+  readonly isLoading = signal<boolean>(true);
+  readonly error = signal<string | null>(null);
 
-  private eventService = inject(EventService);
-  private eventStatusService = inject(EventStatusService);
+  private readonly eventService = inject(EventService);
+  private readonly eventStatusService = inject(EventStatusService);
 
-  eventCounts = computed(() => {
+  readonly eventCounts = computed(() => {
     let currentCount = 0;
     let passedCount = 0;
 
@@ -44,7 +45,7 @@ export class IsLoginHomePageComponent {
     return { current: currentCount, passed: passedCount };
   });
 
-  private filteredAndSortedEvents = computed(() => {
+  private readonly filteredAndSortedEvents = computed(() => {
     const filteredEvents = this.eventStatusService.filterEventsByStatus(
       this.userEvents(),
       this.activeTab() === 'passed'
@@ -53,12 +54,13 @@ export class IsLoginHomePageComponent {
     return this.sortEventsByDate(filteredEvents);
   });
 
-  displayedEvents = computed(() =>
+  readonly displayedEvents = computed(() =>
     this.transformEventsToFields(this.filteredAndSortedEvents())
   );
-  hasEvents = computed(() => this.displayedEvents().length > 0);
 
-  emptyStateMessage = computed(() => {
+  readonly hasEvents = computed(() => this.displayedEvents().length > 0);
+
+  readonly emptyStateMessage = computed(() => {
     const counts = this.eventCounts();
     if (this.activeTab() === 'currents') {
       return counts.current === 0
@@ -71,6 +73,14 @@ export class IsLoginHomePageComponent {
     }
   });
 
+  readonly currentsTabClasses = computed(() =>
+    this.getTabClasses('currents')
+  );
+
+  readonly passedTabClasses = computed(() =>
+    this.getTabClasses('passed')
+  );
+
   constructor() {
     effect(() => {
       if (this.userEvents().length === 0 && !this.isLoading()) {
@@ -80,6 +90,31 @@ export class IsLoginHomePageComponent {
     this.loadUserEvents();
   }
 
+  private getTabClasses(tab: 'currents' | 'passed'): string {
+    const baseClasses = 'flex items-center rounded-md py-0.5 px-12 text-sm cursor-pointer transition-all';
+    const activeClasses = this.activeTab() === tab
+      ? 'bg-white text-primaryColor shadow-sm'
+      : 'text-secondary hover:text-white';
+
+    return `${baseClasses} ${activeClasses}`.trim();
+  }
+
+  getCurrentsTabClasses(): string {
+    return this.currentsTabClasses();
+  }
+
+  getPassedTabClasses(): string {
+    return this.passedTabClasses();
+  }
+
+  getCurrentsTabHandler(): () => void {
+    return () => this.setActiveTab('currents');
+  }
+
+  getPassedTabHandler(): () => void {
+    return () => this.setActiveTab('passed');
+  }
+
   private loadUserEvents(): void {
     this.isLoading.set(true);
     this.error.set(null);

diff --git a/front/src/app/core/sidebar/sidebar.component.html b/front/src/app/core/sidebar/sidebar.component.html
@@ -15,47 +15,58 @@
     <article class="flex items-center gap-3">
       <img [src]="userDataService.userPhotoURL() || 'assets/img/profil-picture.svg'"
            alt="profile"
-           class="w-12 h-12 rounded-full border-none" referrerpolicy="no-referrer" >
+           class="w-12 h-12 rounded-full border-none" referrerpolicy="no-referrer">
       <section>
         <p class="text-sm font-medium">{{ userDataService.displayName() }}</p>
         <p class="text-xs text-gray-500">{{ userDataService.userName() ? userDataService.userEmail() : '' }}</p>
       </section>
     </article>
-    <button (click)="closeSidebar()" class="text-gray-500 hover:text-gray-800" aria-label="Close sidebar">
+
+    <app-button
+      type="button"
+      [customClass]="'text-gray-500 hover:text-gray-800 p-1'"
+      [buttonHandler]="getCloseSidebarHandler()"
+      [ariaLabel]="'Close sidebar'">
       ✖
-    </button>
+    </app-button>
   </header>
 
   <nav>
     <article class="p-4">
-      <app-button-with-icon
+      <app-button
         materialIcon="notifications"
         route="/notifications"
+        [customClass]="getSidebarButtonClasses()"
         [hasNotification]="hasUnreadNotifications()"
         [notificationCount]="notificationCount()"
+        [ariaLabel]="'View notifications'"
         (itemClick)="navigateTo($event)">
         Notifications
-      </app-button-with-icon>
+      </app-button>
     </article>
 
     <hr class="my-2 rounded-lg w-[80%] mx-auto border-secondary px-4">
 
     <article class="p-4">
       <p class="font-medium text-lg mb-2">Speaker</p>
 
-      <app-button-with-icon
+      <app-button
         materialIcon="book_2"
         route="/"
+        [customClass]="getSidebarButtonClasses()"
+        [ariaLabel]="'View my talks'"
         (itemClick)="navigateTo($event)">
         My Talks
-      </app-button-with-icon>
+      </app-button>
 
-      <app-button-with-icon
+      <app-button
         materialIcon="luggage"
         route="/travel"
+        [customClass]="getSidebarButtonClasses()"
+        [ariaLabel]="'View travel information'"
         (itemClick)="navigateTo($event)">
         Travel Information
-      </app-button-with-icon>
+      </app-button>
     </article>
 
     <hr class="my-2 rounded-lg w-[80%] mx-auto border-secondary px-4">
@@ -71,36 +82,40 @@
         @if(hasTeams()) {
           <div class="space-y-1">
             @for(team of teams(); track team.id ?? $index) {
-              <app-button-with-icon
+              <app-button
                 materialIcon="group"
                 [route]="'/team/' + (team.id)"
+                [customClass]="getSidebarButtonClasses()"
+                [ariaLabel]="'View team ' + team.name"
                 (itemClick)="navigateToTeam(team.id)">
                 {{ team.name }}
-              </app-button-with-icon>
+              </app-button>
             }
           </div>
         } @else {
           <p class="text-sm text-gray-500 italic mb-2">No teams yet</p>
         }
       }
 
-      <app-button-with-icon
-        class="font-medium"
+      <app-button
         materialIcon="add_box"
-        [buttonHandler]="createNewTeam.bind(this)">
+        [customClass]="getSidebarButtonClasses('font-medium')"
+        [buttonHandler]="createNewTeam.bind(this)"
+        [ariaLabel]="'Create new team'">
         New team
-      </app-button-with-icon>
+      </app-button>
     </article>
 
     <hr class="my-2 rounded-lg w-[80%] mx-auto border-secondary px-4">
 
     <article class="p-4">
-      <app-button-with-icon
-        class="font-medium"
+      <app-button
         materialIcon="logout"
-        [buttonHandler]="logout.bind(this)">
+        [customClass]="getSidebarButtonClasses('font-medium')"
+        [buttonHandler]="logout.bind(this)"
+        [ariaLabel]="'Logout'">
         Log out
-      </app-button-with-icon>
+      </app-button>
     </article>
   </nav>
 </main>
diff --git a/front/src/app/core/sidebar/sidebar.component.ts b/front/src/app/core/sidebar/sidebar.component.ts
@@ -3,15 +3,15 @@ import { NavigationEnd, Router } from '@angular/router';
 import { filter, map } from 'rxjs';
 import { UserDataService } from '../services/user-services/user-data.service';
 import { AuthService } from '../login/services/auth.service';
-import {ButtonWithIconComponent} from '../../shared/button-with-icon/button-with-icon.component';
-import {CommonModule} from '@angular/common';
-import {TeamService} from '../../feature/admin-management/services/team/team.service';
-import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';
+import { ButtonComponent } from '../../shared/button/button.component';
+import { CommonModule } from '@angular/common';
+import { TeamService } from '../../feature/admin-management/services/team/team.service';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-sidebar',
   standalone: true,
-  imports: [ButtonWithIconComponent, CommonModule],
+  imports: [ButtonComponent, CommonModule],
   templateUrl: './sidebar.component.html',
   styleUrl: './sidebar.component.scss'
 })
@@ -65,13 +65,25 @@ export class SidebarComponent implements OnInit {
     this.teamService.loadUserTeams();
   }
 
+  getSidebarButtonClasses(additionalClasses: string = ''): string {
+    const baseClasses = 'group flex items-center gap-x-3 w-full text-left p-2 leading-6 transition-colors hover:bg-gray-100 rounded-md text-left hover:text-gray-900';
+
+    return additionalClasses
+      ? `${baseClasses} ${additionalClasses}`.trim()
+      : baseClasses;
+  }
+
+  getCloseSidebarHandler(): () => void {
+    return () => this.closeSidebar();
+  }
+
   closeSidebar(): void {
     this.userDataService.toggleSidebar(false);
   }
 
   logout(): void {
     this.authService.logout();
-    this.closeSidebar();
+    this.getCloseSidebarHandler();
   }
 
   navigateTo(path: string): void {

diff --git a/front/src/app/feature/admin-management/components/danger-zone/danger-zone.component.html b/front/src/app/feature/admin-management/components/danger-zone/danger-zone.component.html
@@ -15,11 +15,11 @@ <h2 class="text-lg font-medium">{{ action.title }}</h2>
             [innerHTML]="action.description"
             [id]="action.id + '-description'">
           </p>
-          <button
+          <app-button
             type="button"
             [disabled]="isDeleting()"
             (click)="action.action()"
-            [ngClass]="getButtonClass()"
+            [customClass]="getButtonClass()"
             [attr.aria-label]="action.buttonText + ' for ' + config().entityName"
             [attr.aria-describedby]="action.id + '-description'">
 
@@ -28,12 +28,12 @@ <h2 class="text-lg font-medium">{{ action.title }}</h2>
               [ngClass]="getIconColor()">
               {{ action.buttonIcon }}
             </span>
-            <span>{{ action.buttonText }}</span>
+            <span class="text-base">{{ action.buttonText }}</span>
 
             @if (isDeleting()) {
               <div class="ml-2 animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-current"></div>
             }
-          </button>
+          </app-button>
         </div>
       </section>
 

diff --git a/front/src/app/feature/admin-management/components/danger-zone/danger-zone.component.ts b/front/src/app/feature/admin-management/components/danger-zone/danger-zone.component.ts
@@ -1,11 +1,13 @@
 import { Component, input, output, computed } from '@angular/core';
 import { DangerZoneAction, DangerZoneConfig } from '../../type/components/danger-zone';
 import { NgClass } from '@angular/common';
+import {ButtonComponent} from '../../../../shared/button/button.component';
 
 @Component({
   selector: 'app-danger-zone',
   imports: [
-    NgClass
+    NgClass,
+    ButtonComponent
   ],
   templateUrl: './danger-zone.component.html',
   styleUrl: './danger-zone.component.scss'
@@ -66,7 +68,7 @@ export class DangerZoneComponent {
   }
 
   getButtonClass(): string {
-    const baseClasses = 'px-4 py-1 rounded-md font-medium flex-shrink-0 border cursor-pointer flex items-center transition-colors duration-200';
+    const baseClasses = 'px-6 py-2 rounded-md font-medium flex-shrink-0 border cursor-pointer flex items-center transition-colors duration-200';
     return `${baseClasses} bg-white hover:bg-red-50 text-red-600 border-red-300 hover:border-red-400`;
   }