V1.2

src/app/components/calendar-month/calendar-month.html

@@ -1,26 +1,28 @@
 <div class="calendar">
 	<h3>{{ getMonthName() }} {{ year }}</h3>
-	<div class="row header">
-		<p class="day">L</p>
-		<p class="day">M</p>
-		<p class="day">M</p>
-		<p class="day">J</p>
-		<p class="day">V</p>
-		<p class="day">S</p>
-		<p class="day">D</p>
-	</div>
-	<div class="cols">
-		@for (week of weeksInAMonth; track $index) {
-		<div class="row week">
-			@for (day of week; track $index) {
-			@if (day === null) {
-			<p class="day empty"></p>
-			} @else {
-			<p [class.past]="day < getNow()" [class.start]="selectedDates.isStart(day)" [class.end]="selectedDates.isEnd(day)" [class.selected]="selectedDates.isSelected(day)"
-				[class]="selectedDates.getClasses(day)" class="day number" [matTooltip]="selectedDates.getTooltip(day)" [matTooltipShowDelay]="500">{{ day.getDate() }}</p>
-			}
+	<div>
+		<div class="row header">
+			<p class="day">L</p>
+			<p class="day">M</p>
+			<p class="day">M</p>
+			<p class="day">J</p>
+			<p class="day">V</p>
+			<p class="day">S</p>
+			<p class="day">D</p>
+		</div>
+		<div class="cols">
+			@for (week of weeksInAMonth; track $index) {
+			<div class="row week">
+				@for (day of week; track $index) {
+				@if (day === null) {
+				<p class="day empty"></p>
+				} @else {
+				<p [class.past]="day < getNow()" [class.start]="selectedDates.isStart(day)" [class.end]="selectedDates.isEnd(day)" [class.selected]="selectedDates.isSelected(day)"
+					[class]="selectedDates.getClasses(day)" class="day number" [matTooltip]="selectedDates.getTooltip(day)" [matTooltipShowDelay]="500">{{ day.getDate() }}</p>
+				}
+				}
+			</div>
 			}
 		</div>
-		}
 	</div>
 </div>

src/app/components/calendar-month/calendar-month.scss

@@ -1,16 +1,11 @@
 .calendar {
 	display: flex;
 	flex-direction: column;
-	align-items: flex-start;
-	justify-content: flex-start;
-
-	mat-card {
-		width: 100%;
-		max-width: 400px;
-	}
+	align-items: center;
+	gap: 16px;
 
 	h3 {
-		margin: 0 0 8px 0;
+		margin: 0;
 		font-weight: normal;
 	}
 }
@@ -36,18 +31,22 @@
 		margin: 0;
 		margin-top: 2px;
 		margin-bottom: 2px;
-		border-radius: 40%;
+		border-radius: 30%;
+		color: var(--number-color);
 
 		&.empty {
 			visibility: hidden;
 		}
 
 		&.number:hover {
-			background-color: #e0e0e0;
-			color: black;
+			background-color: var(--number-bg-hover);
+			color: var(--number-color-hover);
 			cursor: default;
 		}
 
+		&.past {
+			color: var(--past-color);
+		}
 	}
 
 	.selected {
@@ -58,50 +57,49 @@
 		border-radius: 0;
 	}
 
-	>.start:not(.end) {
-		border-radius: 40% 0 0 40%;
+	> .start:not(.end) {
+		border-radius: 30% 0 0 30%;
 	}
 
-	>.end:not(.start) {
-		border-radius: 0 40% 40% 0;
+	> .end:not(.start) {
+		border-radius: 0 30% 30% 0;
 	}
 }
 
-
 .today {
-	border-color: #1976d2;
+	border-color: var(--today-border-color);
 	border-width: 2px;
 	width: 26px !important;
 	height: 22px !important;
 	border-style: dashed !important;
+
+	:has(.dark-mode) {
+		border-color: #0b385c;
+	}
 }
 
 .other-month {
-	color: #9e9e9e;
+	color: var(--other-month-color);
 }
 
 .weekend {
-	background-color: #ffca39;
+	background-color: var(--weekend-bg);
 }
 
 .closed-day {
-	border: 2px solid #0ee3ff;
+	border: 2px solid var(--closed-day-bg);
 	width: 26px !important;
 	height: 22px !important;
 }
 
 .rtt {
-	background-color: #99ff87;
+	background-color: var(--rtt-bg);
 }
 
 .cp {
-	background-color: #eca0ff;
+	background-color: var(--cp-bg);
 }
 
 .other {
-	background-color: #ff9b9b;
-}
-
-.past {
-	color: #b0b0b0;
+	background-color: var(--other-bg);
 }

src/app/components/calendar-year/calendar-year.html

@@ -2,13 +2,13 @@
 	@if (isLoading()) {
 	<div class="loading-overlay">
 		<div class="loading-spinner">
-			<div class="spinner"></div>
+			<mat-spinner></mat-spinner>
 			<p>Calcul en cours...</p>
 		</div>
 	</div>
 	}
 	@for (month of months; track $index) {
-	<mat-card>
+	<mat-card class="card">
 		<mat-card-content>
 			<app-calendar-month [monthIndex]="month" [year]="getYear(month)" [selectedDates]="selectedDates"></app-calendar-month>
 		</mat-card-content>

src/app/components/calendar-year/calendar-year.scss

@@ -1,13 +1,20 @@
+@use '@angular/material' as mat;
+
 .calendar-year {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	justify-content: center;
-	gap: 16px;
-	max-width: 60vw;
+	justify-content: space-evenly;
+	max-width: 65vw;
 	position: relative;
 }
 
+@media (max-width: 768px) {
+	.calendar-year {
+		max-width: 100vw;
+	}
+}
+
 .loading-overlay {
 	position: absolute;
 	top: 0;
@@ -20,6 +27,10 @@
 	align-items: center;
 	border-radius: 4px;
 	z-index: 1000;
+
+	@media (prefers-color-scheme: dark) {
+		background-color: rgba(0, 0, 0, 0.7);
+	}
 }
 
 .loading-spinner {
@@ -33,16 +44,15 @@
 		font-weight: 500;
 		color: #333;
 		margin: 0;
+
+		@media (prefers-color-scheme: dark) {
+			color: #ddd;
+		}
 	}
 }
 
-.spinner {
-	width: 40px;
-	height: 40px;
-	border: 4px solid #f3f3f3;
-	border-top: 4px solid #3498db;
-	border-radius: 50%;
-	animation: spin 1s linear infinite;
+.card {
+	margin: 16px;
 }
 
 @keyframes spin {
@@ -54,3 +64,7 @@
 		transform: rotate(360deg);
 	}
 }
+
+:root {
+	@include mat.progress-spinner-overrides((size: 0.5rem, active-indicator-width: 0.25rem));
+}

src/app/components/calendar-year/calendar-year.ts

@@ -1,17 +1,18 @@
-import { Component, OnInit, effect, signal } from '@angular/core';
+import { Component, effect, signal } from '@angular/core';
 import { UserInputService } from '../../services/user-input-service';
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { CalendarMonth } from "../calendar-month/calendar-month";
 import { CalendarService, SelectedDates } from '../../services/calendar-service';
 import { CommonModule } from '@angular/common';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
 
 @Component({
 	selector: 'app-calendar-year',
-	imports: [MatCard, CalendarMonth, MatCardContent, CommonModule],
+	imports: [MatCard, CalendarMonth, MatCardContent, CommonModule, MatProgressSpinner],
 	templateUrl: './calendar-year.html',
 	styleUrl: './calendar-year.scss',
 })
-export class CalendarYear implements OnInit {
+export class CalendarYear {
 	protected isLoading = signal(true);
 
 	constructor(private userInput: UserInputService, private calendarService: CalendarService) {
@@ -38,8 +39,4 @@ export class CalendarYear implements OnInit {
 
 	// months starting from actual date
 	protected months: number[] = Array.from({ length: 12 }, (_, i) => (new Date().getMonth() + i) % 12);
-
-	ngOnInit(): void {
-		this.selectedDates = this.calendarService.getSelectedDatesForYear();
-	}
 }

src/app/components/dark-light-mode-button/dark-light-mode-button.html

@@ -0,0 +1,21 @@
+@if (lightMode()) {
+	<button
+		animate.enter="enter-animation"
+		mat-fab
+		color="primary"
+		(click)="toggleTheme()"
+		aria-label="Toggle light mode"
+	>
+		<mat-icon aria-hidden="false" aria-label="Dark mode icon" fontIcon="dark_mode"></mat-icon>
+	</button>
+} @else {
+	<button
+		animate.enter="enter-animation"
+		mat-fab
+		color="accent"
+		(click)="toggleTheme()"
+		aria-label="Toggle dark mode"
+	>
+		<mat-icon aria-hidden="false" aria-label="Light mode icon" fontIcon="light_mode"></mat-icon>
+	</button>
+}

src/app/components/dark-light-mode-button/dark-light-mode-button.scss

@@ -0,0 +1,32 @@
+button {
+	margin: 0;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	border-radius: 50%;
+	width: 40px;
+	height: 40px;
+	transition: all 0.3s ease;
+
+	&:hover {
+		background-color: rgba(0, 0, 0, 0);
+		cursor: pointer;
+	}
+}
+
+.enter-animation {
+	animation: slide-fade 1s;
+}
+
+@keyframes slide-fade {
+	from {
+		opacity: 0;
+		transform: translateY(20px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

src/app/components/dark-light-mode-button/dark-light-mode-button.spec.ts

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

src/app/components/dark-light-mode-button/dark-light-mode-button.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { ThemeService } from '../../services/theme-service';
+import { MatIcon } from '@angular/material/icon';
+
+@Component({
+	selector: 'app-dark-light-mode-button',
+	imports: [MatIcon],
+	templateUrl: './dark-light-mode-button.html',
+	styleUrl: './dark-light-mode-button.scss',
+})
+export class DarkLightModeButton {
+	constructor(private themeService: ThemeService) {}
+
+	lightMode(): boolean {
+		return this.themeService.isLightMode();
+	}
+
+	toggleTheme(): void {
+		this.themeService.toggleTheme();
+	}
+}

src/app/components/user-input/user-input.ts

@@ -36,7 +36,7 @@ export class UserInput implements OnInit, OnDestroy {
 	ngOnInit() {
 		this.userInputForm.valueChanges
 			.pipe(
-				debounceTime(2500),
+				debounceTime(1500),
 				takeUntil(this.destroy$)
 			)
 			.subscribe(() => this.submitForm());