Bugfix/improve alignment of menu item icons (#2566)

* Improve alignment

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed an issue in the biometric authentication
+- Fixed the alignment of the icons in various menus
 
 ## 2.16.0 - 2023-10-29
 

apps/client/src/app/components/accounts-table/accounts-table.component.html

@@ -254,16 +254,20 @@
       </button>
       <mat-menu #accountMenu="matMenu" xPosition="before">
         <button mat-menu-item (click)="onUpdateAccount(element)">
-          <ion-icon class="mr-2" name="create-outline"></ion-icon>
-          <span i18n>Edit</span>
+          <span class="align-items-center d-flex">
+            <ion-icon class="mr-2" name="create-outline"></ion-icon>
+            <span i18n>Edit</span>
+          </span>
         </button>
         <button
           mat-menu-item
           [disabled]="element.isDefault || element.transactionCount > 0"
           (click)="onDeleteAccount(element.id)"
         >
-          <ion-icon class="mr-2" name="trash-outline"></ion-icon>
-          <span i18n>Delete</span>
+          <span class="align-items-center d-flex">
+            <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+            <span i18n>Delete</span>
+          </span>
         </button>
       </mat-menu>
     </td>

apps/client/src/app/components/admin-market-data/admin-market-data.html

@@ -143,12 +143,24 @@
               <ion-icon name="ellipsis-horizontal"></ion-icon>
             </button>
             <mat-menu #assetProfileActionsMenu="matMenu" xPosition="before">
+              <button
+                mat-menu-item
+                (click)="onOpenAssetProfileDialog({ dataSource: element.dataSource, symbol: element.symbol })"
+              >
+                <span class="align-items-center d-flex">
+                  <ion-icon class="mr-2" name="create-outline"></ion-icon>
+                  <span i18n>Edit</span>
+                </span>
+              </button>
               <button
                 mat-menu-item
                 [disabled]="element.activitiesCount !== 0"
                 (click)="onDeleteProfileData({dataSource: element.dataSource, symbol: element.symbol})"
               >
-                <ng-container i18n>Delete</ng-container>
+                <span class="align-items-center d-flex">
+                  <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+                  <span i18n>Delete</span>
+                </span>
               </button>
             </mat-menu>
           </td>

apps/client/src/app/components/admin-platform/admin-platform.component.html

@@ -86,12 +86,16 @@
             </button>
             <mat-menu #platformMenu="matMenu" xPosition="before">
               <button mat-menu-item (click)="onUpdatePlatform(element)">
-                <ion-icon class="mr-2" name="create-outline"></ion-icon>
-                <span i18n>Edit</span>
+                <span class="align-items-center d-flex">
+                  <ion-icon class="mr-2" name="create-outline"></ion-icon>
+                  <span i18n>Edit</span>
+                </span>
               </button>
               <button mat-menu-item (click)="onDeletePlatform(element.id)">
-                <ion-icon class="mr-2" name="trash-outline"></ion-icon>
-                <span i18n>Delete</span>
+                <span class="align-items-center d-flex">
+                  <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+                  <span i18n>Delete</span>
+                </span>
               </button>
             </mat-menu>
           </td>

apps/client/src/app/components/admin-tag/admin-tag.component.html

@@ -66,12 +66,16 @@
             </button>
             <mat-menu #tagMenu="matMenu" xPosition="before">
               <button mat-menu-item (click)="onUpdateTag(element)">
-                <ion-icon class="mr-2" name="create-outline"></ion-icon>
-                <span i18n>Edit</span>
+                <span class="align-items-center d-flex">
+                  <ion-icon class="mr-2" name="create-outline"></ion-icon>
+                  <span i18n>Edit</span>
+                </span>
               </button>
               <button mat-menu-item (click)="onDeleteTag(element.id)">
-                <ion-icon class="mr-2" name="trash-outline"></ion-icon>
-                <span i18n>Delete</span>
+                <span class="align-items-center d-flex">
+                  <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+                  <span i18n>Delete</span>
+                </span>
               </button>
             </mat-menu>
           </td>

apps/client/src/app/components/admin-users/admin-users.html

@@ -203,16 +203,20 @@
                   mat-menu-item
                   (click)="onImpersonateUser(element.id)"
                 >
-                  <ion-icon class="mr-2" name="contract-outline"></ion-icon>
-                  <span i18n>Impersonate User</span>
+                  <span class="align-items-center d-flex">
+                    <ion-icon class="mr-2" name="contract-outline"></ion-icon>
+                    <span i18n>Impersonate User</span>
+                  </span>
                 </button>
                 <button
                   mat-menu-item
                   [disabled]="element.id === user?.id"
                   (click)="onDeleteUser(element.id)"
                 >
-                  <ion-icon class="mr-2" name="trash-outline"></ion-icon>
-                  <span i18n>Delete User</span>
+                  <span class="align-items-center d-flex">
+                    <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+                    <span i18n>Delete User</span>
+                  </span>
                 </button>
               </mat-menu>
             </td>

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -30,8 +30,10 @@
       [disabled]="dataSource.data.length === 0"
       (click)="onImportDividends()"
     >
-      <ion-icon class="mr-2" name="color-wand-outline"></ion-icon>
-      <ng-container i18n>Import Dividends</ng-container>...
+      <span class="align-items-center d-flex">
+        <ion-icon class="mr-2" name="color-wand-outline"></ion-icon>
+        <ng-container i18n>Import Dividends</ng-container>...
+      </span>
     </button>
     <button
       *ngIf="hasPermissionToExportActivities"
@@ -40,8 +42,10 @@
       [disabled]="dataSource.data.length === 0"
       (click)="onExport()"
     >
-      <ion-icon class="mr-2" name="cloud-download-outline"></ion-icon>
-      <span i18n>Export Activities</span>
+      <span class="align-items-center d-flex">
+        <ion-icon class="mr-2" name="cloud-download-outline"></ion-icon>
+        <span i18n>Export Activities</span>
+      </span>
     </button>
     <button
       *ngIf="hasPermissionToExportActivities"
@@ -50,16 +54,20 @@
       [disabled]="!hasDrafts"
       (click)="onExportDrafts()"
     >
-      <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
-      <span i18n>Export Drafts as ICS</span>
+      <span class="align-items-center d-flex">
+        <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
+        <span i18n>Export Drafts as ICS</span>
+      </span>
     </button>
     <button
       class="align-items-center d-flex"
       mat-menu-item
       (click)="onDeleteAllActivities()"
     >
-      <ion-icon class="mr-2" name="trash-outline"></ion-icon>
-      <span i18n>Delete all Activities</span>
+      <span class="align-items-center d-flex">
+        <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+        <span i18n>Delete all Activities</span>
+      </span>
     </button>
   </mat-menu>
 </div>
@@ -440,8 +448,10 @@
             mat-menu-item
             (click)="onImport()"
           >
-            <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
-            <ng-container i18n>Import Activities</ng-container>...
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
+              <ng-container i18n>Import Activities</ng-container>...
+            </span>
           </button>
           <button
             *ngIf="hasPermissionToCreateActivity"
@@ -449,8 +459,10 @@
             [disabled]="dataSource.data.length === 0"
             (click)="onImportDividends()"
           >
-            <ion-icon class="mr-2" name="color-wand-outline"></ion-icon>
-            <ng-container i18n>Import Dividends</ng-container>...
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="color-wand-outline"></ion-icon>
+              <ng-container i18n>Import Dividends</ng-container>...
+            </span>
           </button>
           <button
             *ngIf="hasPermissionToExportActivities"
@@ -459,8 +471,10 @@
             [disabled]="dataSource.data.length === 0"
             (click)="onExport()"
           >
-            <ion-icon class="mr-2" name="cloud-download-outline"></ion-icon>
-            <span i18n>Export Activities</span>
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="cloud-download-outline"></ion-icon>
+              <span i18n>Export Activities</span>
+            </span>
           </button>
           <button
             *ngIf="hasPermissionToExportActivities"
@@ -469,8 +483,10 @@
             [disabled]="!hasDrafts"
             (click)="onExportDrafts()"
           >
-            <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
-            <span i18n>Export Drafts as ICS</span>
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
+              <span i18n>Export Drafts as ICS</span>
+            </span>
           </button>
         </mat-menu>
       </th>
@@ -486,24 +502,32 @@
         </button>
         <mat-menu #activityMenu="matMenu" xPosition="before">
           <button mat-menu-item (click)="onUpdateActivity(element)">
-            <ion-icon class="mr-2" name="create-outline"></ion-icon>
-            <span i18n>Edit</span>
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="create-outline"></ion-icon>
+              <span i18n>Edit</span>
+            </span>
           </button>
           <button mat-menu-item (click)="onCloneActivity(element)">
-            <ion-icon class="mr-2" name="copy-outline"></ion-icon>
-            <span i18n>Clone</span>
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="copy-outline"></ion-icon>
+              <span i18n>Clone</span>
+            </span>
           </button>
           <button
             mat-menu-item
             [disabled]="!element.isDraft"
             (click)="onExportDraft(element.id)"
           >
-            <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
-            <span i18n>Export Draft as ICS</span>
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
+              <span i18n>Export Draft as ICS</span>
+            </span>
           </button>
           <button mat-menu-item (click)="onDeleteActivity(element.id)">
-            <ion-icon class="mr-2" name="trash-outline"></ion-icon>
-            <span i18n>Delete</span>
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+              <span i18n>Delete</span>
+            </span>
           </button>
         </mat-menu>
       </td>