ui for language change + translate

src/app/app.component.css

@@ -10,6 +10,8 @@ nav {
     padding: 0;
 
     li {
+      display: flex;
+      align-items: center;
       list-style: none;
 
       a {
@@ -21,7 +23,9 @@ nav {
     }
 
     select {
-      border: 2px solid black;
+      font-size: 2rem;
+      appearance: none;
+      border: none;
       background-color: white;
     }
   }

src/app/app.component.html

@@ -4,9 +4,9 @@
     <li><a routerLink="/recipe/add" routerLinkActive="active" ariaCurrentWhenActive="page">{{ 'recipe.add.link' |
         transloco }}</a></li>
     <select (change)="changeLanguage($event)">
-      <option value="en">🇬🇧 English</option>
-      <option value="fr">🇫🇷 Français</option>
-      <option value="ru">🇷🇺 Русский</option>
+      <option value="en">🇬🇧</option>
+      <option value="fr">🇫🇷</option>
+      <option value="ru">🇷🇺</option>
     </select>
   </ul>
 </nav>

src/app/components/recipe-form/recipe-form.component.html

@@ -17,15 +17,15 @@
       <mat-label>Image</mat-label>
       <input matInput type="text" placeholder="No file chosen" [value]="filename" readonly>
       <input type="file" formControlName="image" (change)="onFileChange($event)" hidden #fileInput>
-      <button mat-stroked-button type="button" (click)="fileInput.click()">Browse</button>
+      <button mat-stroked-button type="button" timeout (click)="fileInput.click()">Browse</button>
     </mat-form-field>
   </p>
 
   <div formArrayName="ingredients">
-    <h3>Ingredients</h3>
+    <h3>{{ 'recipe.ingredients' | transloco }}</h3>
     <div *ngFor="let ingredient of ingredients.controls; let i = index" [formGroupName]="i" class="form-row">
       <mat-form-field>
-        <mat-label>Ingredient</mat-label>
+        <mat-label>{{ 'recipe.ingredients' | transloco }}</mat-label>
         <mat-select formControlName="name">
           @for (ingredient of ingredientsOptions; track ingredient) {
           <mat-option [value]="ingredient">{{ ingredient }}</mat-option>