Improved header styée

src/app/app.component.css

@@ -0,0 +1,9 @@
+.button-container{
+    display: flex;
+    justify-content: space-between;
+}
+
+#logout{
+  justify-self: flex-end;
+  margin: 5px;
+}

src/app/app.component.html

@@ -1,4 +1,4 @@
-<button (click)="clearAllCookies()">Logout</button>
+<div class="button-container">
   <div class="dropdown dropdown-hover" id="translate">
     <label tabindex="0" class="btn m-1 bg-black border-neutral text-base-100"
            id="translateLabel">{{homeTranslations.translate}}</label>
@@ -9,4 +9,6 @@
       <li (click)="switchLanguage('EN')"><a>EN</a></li>
     </ul>
   </div>
+  <button (click)="clearAllCookies()" class="btn btn-active btn-ghost" id="logout">Logout</button>
+</div>
 <router-outlet></router-outlet>

src/app/component/login/login.component.html

@@ -33,8 +33,8 @@
 
 
       <a (click)="switch()">
-        <span *ngIf="login">Register</span>
+        <button class="btn-link" *ngIf="login">Register</button>
-        <span *ngIf="!login">Login</span>
+        <button  class="btn-link" *ngIf="!login">Login</button>
       </a>
 
     </div>