refractor: accounting module (#300)

* Refractor components.
* Add resolvers.
* Add relative router links.
* Replace mat-icons by font-awesome icons.
* Add comments.

Fixes: #298

src/app/self-service/users/view-user/view-user.component.html

@@ -1,5 +1,13 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <!-- TODO: Update to show only Activate/Inactivate button at a time according to status of user. -->
+  <button mat-raised-button color="primary" [routerLink]="['edit']">
+    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    Edit
+  </button>
+  <button mat-raised-button color="primary" (click)="openDialog()">
+    <fa-icon icon="cog"></fa-icon>&nbsp;&nbsp;
+    Change Password
+  </button>
   <button mat-raised-button color="accent">
     <fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;
     Activate
@@ -8,14 +16,6 @@
     <fa-icon icon="lock"></fa-icon>&nbsp;&nbsp;
     Deactivate
   </button>
-  <button mat-raised-button color="primary" (click)="openDialog()">
-    <fa-icon icon="cog"></fa-icon>&nbsp;&nbsp;
-    Change Password
-  </button>
-  <button mat-raised-button color="primary" [routerLink]="['edit']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
-    Edit
-  </button>
 </div>
 
 <div class="container">

src/app/self-service/users/view-user/view-user.component.scss

@@ -5,10 +5,10 @@
     div {
       margin: 1rem 0;
       word-wrap: break-word;
-    }
 
-    .header {
-      font-weight: 500;
+      &.header {
+        font-weight: 500;
+      }
     }
   }
 }