Increase avatars in WP table

app/assets/stylesheets/content/_user.lsg

@@ -11,6 +11,9 @@ Standard Mini:<br />
 Default:<br />
 <div class="avatar avatar-default">OA</div>
 <br /><br />
+Default Medium:<br />
+<div class="avatar-medium avatar-default">OA</div>
+<br /><br />
 Default Mini:<br />
 <div class="avatar-mini avatar-default">OA</div>
 <br /><br />

app/assets/stylesheets/content/_user.sass

@@ -32,14 +32,23 @@
   height: $user-avatar-height
 
 .avatar-mini
-  border-radius: $user-avatar-mini-border-radius
+  border-radius: $user-avatar-medium-border-radius
   width: $user-avatar-mini-width
   height: $user-avatar-mini-height
-  margin-right: 10px
-  vertical-align: -5px
+  vertical-align:
+  margin-right: 10px -5px
+
+  &.avatar-default
+    line-height: $user-avatar-mini-height
+    font-size: 13px
+
+.avatar-medium
+  border-radius: $user-avatar-mini-border-radius
+  width: $user-avatar-medium-width
+  height: $user-avatar-medium-height
 
   &.avatar-default
-    line-height: 20px
+    line-height: $user-avatar-medium-height
     font-size: 10px
 
 .avatar-default
@@ -54,7 +63,7 @@
   user-select: none
 
 h1, h2, h3, h4, tr
-  .avatar, .avatar-mini
+  .avatar, .avatar-mini, .avatar-medium
     vertical-align: middle
     margin-right: 7px
 

frontend/src/app/modules/fields/display/display-portal/display-user-field-portal/user-field-portal.component.html

@@ -1,7 +1,7 @@
 <span [ngClass]="{'-multi-line': multiLines}"
       *ngFor="let user of users; let last = last">
     <user-avatar [attr.data-user]="user.href"
-                 data-class-list="avatar-mini">
+                 data-class-list="avatar-medium">
     </user-avatar>
     <span [textContent]="user.name"></span>
     <span *ngIf="!multiLines && !last">, </span>

lib/open_project/design.rb

@@ -147,6 +147,9 @@ module OpenProject
       'user-avatar-border-radius'                            => "50%",
       'user-avatar-width'                                    => "36px",
       'user-avatar-height'                                   => "36px",
+      'user-avatar-medium-border-radius'                     => "50%",
+      'user-avatar-medium-width'                             => "28px",
+      'user-avatar-medium-height'                            => "28px",
       'user-avatar-mini-border-radius'                       => "50%",
       'user-avatar-mini-width'                               => "20px",
       'user-avatar-mini-height'                              => "20px",