Merge branch 'max_dev' of Software_Engineering_I/greenvironment-frontend into master

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

@@ -34,9 +34,12 @@ $mat-card-header-size: 40px !default
     margin-left: auto
 
   ::ng-deep img
-    width: 100%
-    height: auto
+    max-width: 100%
+    max-height: 60vh
     border-radius: 4px
+    display: block
+    margin-left: auto
+    margin-right: auto
   ::ng-deep video
     width: 100%
     max-height: 40vh

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

@@ -83,7 +83,7 @@
         <span class="mat-button" *ngIf="!loggedIn" fxShow="true" fxHide.lt-md="true" routerLink="/login"><span>Hello, Sign in</span></span>
         <button mat-icon-button [matMenuTriggerFor]="requestMenu" [disabled]="!loggedIn" id="menu-button">
           <mat-icon [matBadge]="user.receivedRequests.length" [matBadgeHidden]="!(user.receivedRequests.length > 0)"
-                    matBadgeColor="accent">notifications
+                    matBadgeColor="warn">notifications
           </mat-icon>
         </button>
 
@@ -93,7 +93,7 @@
       </div>
 
       <mat-menu #requestMenu="matMenu">
-        <span mat-menu-item disableRipple="true" disabled="true">friend requests:</span>
+        <span class="request-menu" mat-menu-item disableRipple="false" disabled="true">friend requests:</span>
         <button mat-menu-item *ngFor="let request of user.receivedRequests"
                 [class.selected]="request === selectedRequest" (click)="$event.stopPropagation();" disableRipple="true">
           <button mat-icon-button (click)=acceptRequest(request.senderUserID) (click)="$event.stopPropagation();">

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

@@ -66,3 +66,5 @@
   text-align: right
   width: 100%
 
+::ng-deep .mat-icon
+  margin: 0 !important

src/app/components/social/friends/friends.component.sass

@@ -10,6 +10,8 @@
   width: 100%
   margin-top: 0.5em
   cursor: pointer
+  outline: none
+  user-select: none
 
   ::ng-deep .mat-card-header-text
     margin: 0 24px

src/app/components/social/groups/groups.component.html

@@ -2,7 +2,7 @@
   <span>Groups</span>
   <div id="button-box">
     <button mat-icon-button (click)="openDialog()" matTooltip="create group" matTooltipPosition="left"
-            matTooltipShowDelay="500">
+      matTooltipShowDelay="500">
       <mat-icon>group_add</mat-icon>
     </button>
   </div>
@@ -10,7 +10,8 @@
 
 <div id="grouplist">
   <mat-card class="group-card" *ngFor="let group of user.groups"
-            [class.selected]="group === selectedGroup" (click)="showGroupProfile(group)">
+    matRipple
+    [class.selected]="group === selectedGroup" (click)="showGroupProfile(group)">
     <mat-card-header>
       <div mat-card-avatar>
         <img class="group-picture" [src]="group.picture"/>