From 5cedd5a72096565269106ff3f85b44506fda0447 Mon Sep 17 00:00:00 2001
From: rem <remi.arnal@etu.uca.fr>
Date: Tue, 18 Jun 2024 06:02:01 +0200
Subject: [PATCH] ui for language change + translate

---
 src/app/app.component.css                                 | 6 +++++-
 src/app/app.component.html                                | 6 +++---
 src/app/components/recipe-form/recipe-form.component.html | 6 +++---
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 181b869..43449f8 100644
--- a/src/app/app.component.css
+++ b/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;
     }
   }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 67b7793..a1018f2 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/components/recipe-form/recipe-form.component.html b/src/app/components/recipe-form/recipe-form.component.html
index b51c9a3..9906ef3 100644
--- a/src/app/components/recipe-form/recipe-form.component.html
+++ b/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>