Add profile picture in sidenav, Make all profile pictures round

src/app/components/feed/postlist/postlist.component.sass

@@ -1,6 +1,7 @@
 @import '../../../../styles/mixins.sass'
 @import '../../../../styles/vars.sass'
 
+$mat-card-header-size: 40px !default
 .post
     box-sizing: border-box
     width: 100%
@@ -25,19 +26,13 @@
         padding: 0
         margin: 0
         margin-left: 8px
+    .profile-picture
+        border-radius: 50%
+        width: $mat-card-header-size
+        height: $mat-card-header-size
 
     .activity-info
         display: contents
         .span
             margin-left: 32px
 
-$mat-card-header-size: 100px !default
-.profile-picture
-    height: $mat-card-header-size
-    width: $mat-card-header-size
-    border-radius: 50%
-    flex-shrink: 0
-    background-size: cover
-    transition-duration: 0.5s
-    z-index: 10
-    object-fit: cover

src/app/components/main-navigation/main-navigation.component.html

@@ -8,8 +8,13 @@
       fixedInViewport="false"
       autoFocus="false">
     <mat-toolbar *ngIf="!loggedIn">Menu</mat-toolbar>
-    <mat-toolbar *ngIf="loggedIn">
+    <mat-toolbar *ngIf="loggedIn" id="name-bar">
-        <span>Hello, {{user.username}}</span>
+        <div mat-card-avatar>
+          <img class="profile-picture" [src]="user.profilePicture"/>  
+        </div>
+        <div class="hello-text-box">
+          <span class="hello-text">Hello, {{user.username}}</span>
+        </div>
     </mat-toolbar>
     <mat-nav-list>
       <a mat-list-item routerLink="" (click)="drawer.close()">Home</a>

src/app/components/main-navigation/main-navigation.component.sass

@@ -4,6 +4,21 @@
 .sidenav
   width: 200px
 
+#name-bar
+  padding: 0 4px
+.mat-card-avatar
+  display: contents
+.profile-picture
+  width: 52px
+  height: 52px
+  border-radius: 50%
+  flex-shrink: 0
+.hello-text-box
+  margin-left: 8px
+  .hello-text
+    white-space: normal
+    font-size: initial
+
 .link
   user-select: none
   cursor: pointer

src/app/services/login/login.service.ts

@@ -22,6 +22,7 @@ const graphqlQuery = `mutation($email: String!, $pwHash: String!) {
     handle,
     points,
     level,
+    profilePicture,
     receivedRequests{id, sender{name, handle, id}},
     sentRequests{receiver{id}},
     friends {

src/app/services/selfservice/self.service.ts

@@ -37,43 +37,11 @@ export class SelfService {
   }
 
   public updateUserInfo(response: any) {
-    const user: User = new User();
+    const user = new User();
-    let friendRequest: FriendRequest = new FriendRequest();
+    user.assignFromResponse(response.data.getSelf);
-    user.loggedIn = true;
-    user.userID = response.data.getSelf.id;
-    user.username = response.data.getSelf.name;
-    user.handle = response.data.getSelf.handle;
-    user.email = response.data.getSelf.email;
-    user.points = response.data.getSelf.points;
-    user.level = response.data.getSelf.level;
-    for (const friend of response.data.getSelf.friends) {
-      user.friends.push(new FriendInfo(
-        friend.id,
-        friend.name,
-        friend.level,
-        user.buildProfilePictureUrl(friend.profilePicture)
-      ));
-    }
-    for (const group of response.data.getSelf.groups) {
-      user.groups.push(new GroupInfo(group.id, group.name));
-    }
-    user.chatIDs = response.data.getSelf.chats;
-    for (const request of response.data.getSelf.sentRequests) {
-      user.sentRequestUserIDs.push(request.receiver.id);
-    }
-    for (const request of response.data.getSelf.receivedRequests) {
-      friendRequest = new FriendRequest();
-      friendRequest.id = request.id;
-      friendRequest.senderUserID = request.sender.id;
-      friendRequest.senderUsername = request.sender.name;
-      friendRequest.senderHandle = request.sender.handle;
-      user.receivedRequests.push(friendRequest);
-    }
-    if (JSON.parse(response.data.getSelf.settings).darkmode === 'true') {
-      user.darkmode = true;
-    }
     this.data.changeUserInfo(user);
   }
+
   public fakeLogin() {
     const user: User = new User();
     let friendRequest: FriendRequest = new FriendRequest();
@@ -105,6 +73,7 @@ export class SelfService {
         handle,
         points,
         level,
+        profilePicture,
         receivedRequests{id, sender{name, handle, id}},
         sentRequests{receiver{id}},
         friends {