Update avatar border to be opaque for better stacking

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/32561

app/assets/stylesheets/framework/avatar.scss

@@ -60,7 +60,7 @@
   }
 
   &:not([href]):hover {
-    border-color: rgba($avatar-border, .2);
+    border-color: darken($avatar-border, 10%);
   }
 }
 
@@ -99,7 +99,7 @@
 .avatar-counter {
   background-color: $gray-darkest;
   color: $white-light;
-  border: 1px solid $border-color;
+  border: 1px solid $avatar-border;
   border-radius: 1em;
   font-family: $regular_font;
   font-size: 9px;

app/assets/stylesheets/framework/variables.scss

@@ -379,7 +379,7 @@ $issue-boards-card-shadow: rgba(186, 186, 186, 0.5);
 * Avatar
 */
 $avatar_radius: 50%;
-$avatar-border: rgba(0, 0, 0, .1);
+$avatar-border: $border-color;
 $gl-avatar-size: 40px;
 
 /*

app/assets/stylesheets/pages/issuable.scss

@@ -346,13 +346,9 @@
         display: none;
       }
 
-      .avatar:hover,
-      .avatar-counter:hover {
-        border-color: $issuable-sidebar-color;
-      }
-
       .avatar-counter:hover {
         color: $issuable-sidebar-color;
+        border-color: $issuable-sidebar-color;
       }
 
       .btn-clipboard {