Upgraded dependencies and extended stopwatch

src/app/pages/algorithms/algorithms.component.html

@@ -5,8 +5,8 @@
   @for (category of categories; track category.id) {
     <mat-card class="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col cursor-pointer hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(0,0,0,0.12)]" [routerLink]="[category.routerLink]">
       <mat-card-content>
-        <div class="flex items-center text-[var(--mat-sys-primary)] mb-4">
-          <mat-icon class="!text-[26px] !w-[26px] !h-[26px]">{{ category.icon }}</mat-icon>
+        <div class="flex items-center text-(--mat-sys-primary) mb-4">
+          <mat-icon class="text-[26px]! w-[26px]! h-[26px]!">{{ category.icon }}</mat-icon>
         </div>
         <h3 class="text-[1.05rem] font-semibold mb-2 m-0">{{ category.title | translate }}</h3>
         <p class="m-0 opacity-75 text-sm leading-relaxed">{{ category.description | translate }}</p>

src/app/pages/algorithms/four-color/four-color.component.html

@@ -47,7 +47,7 @@
         <span><span class="legend-swatch bg-[#FFEB3B]"></span> {{ 'FOUR_COLOR.COLOR_4' | translate }}</span>
       </div>
 
-      <div class="mt-5 flex gap-2.5 py-2.5 px-4 rounded border-l-[5px] font-medium min-w-[300px] items-center"
+      <div class="mt-5 flex gap-2.5 py-2.5 px-4 rounded-sm border-l-[5px] font-medium min-w-[300px] items-center"
            [ngClass]="{
              'border-l-gray-500 bg-app-bg': solutionStatus === 'INCOMPLETE',
              'border-l-green-500 bg-green-50 text-green-800': solutionStatus === 'SOLVED',

src/app/pages/algorithms/four-color/four-color.component.ts

@@ -5,7 +5,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
-import {TranslateModule, TranslateService} from '@ngx-translate/core';
+import {TranslatePipe, TranslateService} from '@ngx-translate/core';
 import {MatSnackBar} from '@angular/material/snack-bar';
 
 import {DEFAULT_GRID_COLS, DEFAULT_GRID_ROWS, MAX_GRID_PX, MAX_GRID_SIZE, MIN_GRID_SIZE, FourColorNode, Region} from './four-color.models';
@@ -25,7 +25,7 @@ import {UrlConstants} from '../../../constants/UrlConstants';
     MatCardModule,
     MatFormFieldModule,
     MatInputModule,
-    TranslateModule,
+    TranslatePipe,
     Information
   ],
   templateUrl: './four-color.component.html',

src/app/pages/algorithms/pathfinding/pathfinding.component.html

@@ -18,7 +18,7 @@
         </div>
 
         <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
-          <mat-button-toggle-group class="rounded overflow-hidden" [(ngModel)]="selectedNodeType" aria-label="Node Type Selection">
+          <mat-button-toggle-group class="rounded-sm overflow-hidden" [(ngModel)]="selectedNodeType" aria-label="Node Type Selection">
             <mat-button-toggle [value]="NodeType.Start">{{ 'PATHFINDING.START_NODE' | translate }}</mat-button-toggle>
             <mat-button-toggle [value]="NodeType.End">{{ 'PATHFINDING.END_NODE' | translate }}</mat-button-toggle>
             <mat-button-toggle [value]="NodeType.Wall">{{ 'PATHFINDING.WALL' | translate }}</mat-button-toggle>

src/app/pages/algorithms/pathfinding/pathfinding.component.ts

@@ -8,7 +8,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
 import {MatSnackBar} from '@angular/material/snack-bar';
 
-import {TranslateModule, TranslateService} from '@ngx-translate/core';
+import {TranslatePipe, TranslateService} from '@ngx-translate/core';
 
 import {DEFAULT_GRID_COLS, DEFAULT_GRID_ROWS, MAX_GRID_PX, MAX_GRID_SIZE, MAX_RANDOM_WALLS_FACTORS, MIN_GRID_SIZE, Node} from './pathfinding.models';
 import {PathfindingService} from './service/pathfinding.service';
@@ -35,7 +35,7 @@ enum NodeType {
     MatButtonToggleModule,
     MatFormFieldModule,
     MatInputModule,
-    TranslateModule,
+    TranslatePipe,
     MatCard,
     MatCardHeader,
     MatCardTitle,

src/app/pages/algorithms/sorting/sorting.component.html

@@ -49,7 +49,7 @@
       <div class="flex items-end h-[clamp(200px,40vh,400px)] border-b border-app-fg mb-[clamp(10px,3vw,20px)] gap-px bg-card-bg">
         @for (item of sortArray; track $index) {
           <div
-            class="grow w-2.5 min-w-px transition-all duration-[50ms]"
+            class="grow w-2.5 min-w-px transition-all duration-50"
             [style.height.px]="item.value * 3"
             [ngClass]="{
               'bg-[#424242]': item.state === 'unsorted',

src/app/pages/algorithms/sorting/sorting.component.ts

@@ -5,7 +5,7 @@ import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatSelectModule} from "@angular/material/select";
 import {MatButtonModule} from "@angular/material/button";
 import {MatIconModule} from "@angular/material/icon";
-import {TranslateModule} from "@ngx-translate/core";
+import {TranslatePipe} from "@ngx-translate/core";
 import { SortingService } from './service/sorting.service';
 import { SortingAudioService } from './service/sorting-audio.service';
 import {SortData, SortSnapshot} from './sorting.models';
@@ -16,7 +16,7 @@ import {AlgorithmInformation} from '../information/information.models';
 import {Information} from '../information/information';
 @Component({
   selector: 'app-sorting',
-  imports: [CommonModule, MatCardModule, MatFormFieldModule, MatSelectModule, MatButtonModule, MatIconModule, TranslateModule, FormsModule, MatInput, Information],
+  imports: [CommonModule, MatCardModule, MatFormFieldModule, MatSelectModule, MatButtonModule, MatIconModule, TranslatePipe, FormsModule, MatInput, Information],
   templateUrl: './sorting.component.html',
   styleUrl: './sorting.component.scss'
 })