feat: enhance user input and rules panel components

- Updated dark-light mode button styles for improved responsiveness.
- Enhanced rules panel with additional buttons for moving rules up and down, and updated styles for better layout.
- Added active rule count display in the rules panel header.
- Improved user input component layout with section headings and updated button styles.
- Refactored day input component to use grid layout for better alignment and responsiveness.
- Added new translations for user input and rules panel features.
- Implemented tests for new functionality in rules panel and day input components.
- Added application routes test to ensure correct routing configuration.

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

@@ -1,5 +1,9 @@
 <div class="user-input">
-	<p>{{ tr().app.description }}</p>
+	<header class="section-heading">
+		<h2 id="leave-settings-title">{{ tr().userInput.title }}</h2>
+		<p>{{ tr().userInput.description }}</p>
+	</header>
+
 	<div class="listOfDays">
 		@for (day of daysOff; track day.id) {
 			<div class="day-input-wrapper" animate.enter="day-enter" animate.leave="day-leave">
@@ -10,25 +14,27 @@
 				></app-day-input>
 			</div>
 		}
-		<mat-card class="add-day-card mat-elevation-z2" (click)="addDay()">
-			<button matFab [aria-label]="tr().userInput.addVacationDay">
-				<mat-icon>add</mat-icon>
-			</button>
-			<h3>{{ tr().userInput.addVacationDay }}</h3>
-		</mat-card>
-	</div>
-	<div class="action-buttons">
-		<button matFab extended (click)="triggerComputation()">
-			<mat-icon>calculate</mat-icon>
-			{{ tr().userInput.calculate }}
+		<button mat-stroked-button class="add-day-button" type="button" (click)="addDay()">
+			<mat-icon aria-hidden="true">add</mat-icon>
+			{{ tr().userInput.addVacationDay }}
 		</button>
-		<app-calendar-settings></app-calendar-settings>
 	</div>
-	<app-rules-panel></app-rules-panel>
+
+	<button
+		mat-flat-button
+		class="calculate-button"
+		color="primary"
+		type="button"
+		(click)="triggerComputation()"
+	>
+		<mat-icon aria-hidden="true">calculate</mat-icon>
+		{{ tr().userInput.calculate }}
+	</button>
+
 	@if (hasRemainingDays()) {
-		<mat-card class="mat-elevation-z2 warning-card">
+		<mat-card class="warning-card">
 			<mat-card-content class="warning-content">
-				<mat-icon color="warn">warning</mat-icon>
+				<mat-icon color="warn" aria-hidden="true">warning</mat-icon>
 				<div class="warning">
 					<span>
 						{{
@@ -49,4 +55,6 @@
 			</mat-card-content>
 		</mat-card>
 	}
+
+	<app-rules-panel></app-rules-panel>
 </div>