V1.2

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();
-	}
 }