Feature/improve usability of create or edit transaction dialog (#661)

* Move the fee to the bottom

* Update changelog

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the usability of the form in the create or edit transaction dialog
 - Improved the consistent use of `symbol` in combination with `dataSource`
 - Removed the primary data source from the client
 

apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html

@@ -107,18 +107,6 @@
         <mat-datepicker #date disabled="false"></mat-datepicker>
       </mat-form-field>
     </div>
-    <div>
-      <mat-form-field appearance="outline" class="w-100">
-        <mat-label i18n>Fee</mat-label>
-        <input
-          matInput
-          name="fee"
-          required
-          type="number"
-          [(ngModel)]="data.transaction.fee"
-        />
-      </mat-form-field>
-    </div>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Quantity</mat-label>
@@ -141,6 +129,7 @@
           type="number"
           [(ngModel)]="data.transaction.unitPrice"
         />
+        <span class="ml-2" matSuffix>{{ data.transaction.currency }}</span>
         <button
           *ngIf="currentMarketPrice && (data.transaction.type === 'BUY' || data.transaction.type === 'SELL')"
           mat-icon-button
@@ -152,6 +141,19 @@
         </button>
       </mat-form-field>
     </div>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Fee</mat-label>
+        <input
+          matInput
+          name="fee"
+          required
+          type="number"
+          [(ngModel)]="data.transaction.fee"
+        />
+        <span class="ml-2" matSuffix>{{ data.transaction.currency }}</span>
+      </mat-form-field>
+    </div>
   </div>
   <div class="d-flex" mat-dialog-actions>
     <gf-value