fix(ME): improve appearance and fonctionality of logout/profile butto…

…ns in sidebar

apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.html

@@ -16,31 +16,24 @@
     <ng-container *ngIf="platformService.getMe() | async as user">
       <div
         *ngIf="user && user.name"
-        class="basis-1/12 mb-2 flex flex-col justify-center items-center"
+        class="basis-1/12 mb-3 gap-2 flex flex-col justify-center items-center"
+        [style.--gn-ui-button-height]="'40px'"
+        [style.--gn-ui-button-width]="'40px'"
+        [style.--gn-ui-button-rounded]="'40px'"
       >
+        <a [href]="settingsUrl" target="_blank" class="gn-ui-btn-black">
+          <gn-ui-user-preview
+            [user]="user"
+            [avatarPlaceholder]="placeholder$ | async"
+          ></gn-ui-user-preview>
+        </a>
         <gn-ui-button
-          type="default"
-          class="w-10 h-10 flex justify-center items-center hover:cursor-pointer mb-1"
+          type="black"
+          class="flex justify-center items-center"
+          (buttonClick)="logOut()"
+          [title]="'editor.sidebar.logout' | translate"
         >
-          <a [href]="settingsUrl" target="_blank">
-            <gn-ui-user-preview
-              [user]="user"
-              [avatarPlaceholder]="placeholder$ | async"
-              extraClass="w-10 h-10"
-            ></gn-ui-user-preview>
-          </a>
-        </gn-ui-button>
-        <gn-ui-button
-          type="default"
-          class="w-10 h-10 flex justify-center items-center hover:cursor-pointer"
-          (click)="logOut()"
-        >
-          <img
-            src="assets/system-shut.svg"
-            [alt]="'editor.sidebar.logout' | translate"
-            [title]="'editor.sidebar.logout' | translate"
-            class="w-4 h-4 hover:invert-[.5]"
-          />
+          <ng-icon name="iconoirSystemShut" size="16px" />
         </gn-ui-button>
       </div>
     </ng-container>
@@ -52,7 +45,7 @@
         <gn-ui-button
           *ngIf="organisations[0].logoUrl?.href"
           type="default"
-          class="flex flex-col gap-3 items-center gap-2"
+          class="flex flex-col items-center gap-2"
           [routerLink]="['/organizations', organisations[0].id]"
         >
           <img

apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.ts

@@ -7,11 +7,15 @@ import {
   AuthService,
   AvatarServiceInterface,
 } from '@geonetwork-ui/api/repository'
-import { LetDirective } from '@ngrx/component'
 import { UiElementsModule } from '@geonetwork-ui/ui/elements'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
-import { Observable, combineLatest } from 'rxjs'
+import { combineLatest, Observable } from 'rxjs'
 import { Organization } from '@geonetwork-ui/common/domain/model/record'
+import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { RouterLink } from '@angular/router'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { iconoirSystemShut } from '@ng-icons/iconoir'
+import { FeatureSearchModule } from '@geonetwork-ui/feature/search'
 
 @Component({
   selector: 'md-editor-sidebar',
@@ -23,8 +27,16 @@ import { Organization } from '@geonetwork-ui/common/domain/model/record'
     DashboardMenuComponent,
     CommonModule,
     TranslateModule,
-    LetDirective,
     UiElementsModule,
+    ButtonComponent,
+    RouterLink,
+    NgIcon,
+    FeatureSearchModule,
+  ],
+  providers: [
+    provideIcons({
+      iconoirSystemShut,
+    }),
   ],
 })
 export class SidebarComponent implements OnInit {