Fix avatar focus highlight

stylesheets/components/Avatar.scss

@@ -2,39 +2,46 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .module-Avatar {
-  align-items: center;
-  border-radius: 100%;
   display: inline-flex;
-  justify-content: center;
   line-height: 0;
-  overflow: hidden;
   position: relative;
   user-select: none;
   vertical-align: middle;
 
-  &__button {
-    @include button-reset;
-
-    align-items: center;
-    display: flex;
-    height: 100%;
-    justify-content: center;
+  &__contents {
+    @include avatar-colors;
+    position: relative;
+    overflow: hidden;
+    border-radius: 100%;
     width: 100%;
+    height: 100%;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    outline: none;
 
-    @include keyboard-mode {
-      &:focus {
-        box-shadow: 0px 0px 0px 2px $color-ultramarine;
+    @at-root button#{&} {
+      @include keyboard-mode {
+        &:focus {
+          box-shadow: 0 0 0 3px $color-ultramarine;
+        }
       }
     }
   }
 
+  &__image,
+  &__label,
+  &__icon,
+  &__spinner-container,
+  &__click-to-view {
+    width: 100%;
+    height: 100%;
+  }
+
   &__image {
     background-position: center center;
     background-size: cover;
-    display: flex;
-    height: 100%;
     transition: filter 100ms ease-out;
-    width: 100%;
   }
 
   &__click-to-view {
@@ -44,12 +51,10 @@
     color: $color-white;
     display: flex;
     flex-direction: column;
-    height: 100%;
     justify-content: center;
     left: 0;
     position: absolute;
     top: 0;
-    width: 100%;
 
     &::before {
       @include color-svg(
@@ -78,27 +83,22 @@
   }
 
   &__icon {
-    @mixin avatar-icon($icon) {
-      -webkit-mask: url($icon) no-repeat center;
-      -webkit-mask-size: 100%;
-    }
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: 62%;
+    background-color: var(--fg);
 
     &--direct {
-      @include avatar-icon('../images/icons/v2/profile-outline-20.svg');
-      height: 60%;
-      width: 60%;
+      -webkit-mask-image: url('../images/icons/v2/profile-outline-20.svg');
+      -webkit-mask-size: 60%;
     }
 
     &--group {
-      @include avatar-icon('../images/icons/v2/group-outline-24.svg');
-      height: 62%;
-      width: 62%;
+      -webkit-mask-image: url('../images/icons/v2/group-outline-24.svg');
     }
 
     &--note-to-self {
-      @include avatar-icon('../images/icons/v2/note-24.svg');
-      height: 62%;
-      width: 62%;
+      -webkit-mask-image: url('../images/icons/v2/note-24.svg');
     }
   }
 
@@ -106,8 +106,6 @@
     padding: 4px;
   }
 
-  @include avatar-colors();
-
   &--undefined {
     background-color: $color-gray-15;
     color: $color-gray-75;

stylesheets/components/ContactModal.scss

@@ -6,6 +6,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  margin-top: 4px;
 
   &__name {
     @include font-title-2;