update styles and remove unnecessary stuff

2 files changed, 22 insertions, 57 deletions

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index 077d002d..fc5abf01 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -1,7 +1,7 @@
 <template>
-  <ul class="avatars" :class="{ 'transparent-avatar': slicedAvatars.length == 15 }">
-      <li class="avatars-item" v-for="(avatar, index) in slicedAvatars" :key="`avatar-${index}`">
-        <UserAvatar :src="avatar.profile_image_url" class="avatars-img" />
+  <ul class="avatars">
+      <li class="avatars-item" v-for="avatar in slicedAvatars">
+        <UserAvatar :src="avatar.profile_image_url" class="avatar-small" />
       </li>
   </ul>
 </template>
@@ -10,53 +10,28 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+
 .avatars {
-  display: inline-flex; /* Causes LI items to display in row. */
-  list-style-type: none;
+  display: flex;
   margin: 0;
   padding: 0;
 
+  // For hiding overflowing elements
+  flex-wrap: wrap;
+  height: 24px;
+
   li.avatars-item {
-    height: 24px;
-    width: 24px;
-    margin: 0 5px 0 0;
+    margin: 0 0 5px 5px;
 
     &:first-child {
-      padding-left: 12px;
+      padding-left: 10px;
     }
 
-    &:last-child {
-      margin-right: 0;
-    }
-
-    .avatars-img {
+    .avatar-small {
       border-radius: $fallback--avatarAltRadius;
       border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
       height: 24px;
       width: 24px;
-      background-color: $fallback--lightText;
-      background-color: var(--lightText, $fallback--lightText);
-    }
-  }
-}
-
-.transparent-avatar {
-  .avatars-item {
-    &:first-child {
-      position: relative;
-
-      .avatars-img {
-        &::after {
-          content: '';
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          background-color: $fallback--faint;
-          background-color: var(--faint, $fallback--faint);
-          left: 0;
-          top: 0;
-        }
-      }
     }
   }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index b0882964..d79bb2b9 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -135,19 +135,19 @@
 
           <transition name="fade">
             <div class="favs-repeated-users" v-if="combinedFavsAndRepeatsAvatars.length > 0 && isFocused">
-              <ul class="stats">
-                <li class="stat-count" v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0">
+              <div class="stats">
+                <div class="stat-count" v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0">
                   <a class="stat-title">{{ $t('settings.notification_visibility_repeats') }}</a>
                   <div class="stat-number">{{ statusFromGlobalRepository.rebloggedBy.length }}</div>
-                </li>
-                <li class="stat-count" v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0">
+                </div>
+                <div class="stat-count" v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0">
                   <a class="stat-title">{{ $t('user_card.favorites') }}</a>
                   <div class="stat-number">{{ statusFromGlobalRepository.favoritedBy.length }}</div>
-                </li>
-                <li class="avatar-row">
+                </div>
+                <div class="avatar-row">
                   <AvatarList :avatars='combinedFavsAndRepeatsAvatars'></AvatarList>
-                </li>
-              </ul>
+                </div>
+              </div>
             </div>
           </transition>
 
@@ -631,19 +631,15 @@ a.unmute {
 }
 
 .favs-repeated-users {
-  margin-top: 0.75em;
+  margin-top: $status-margin;
 
   .stats {
     width: 100%;
-    margin: 0;
-    list-style: none;
-    overflow: hidden;
-    padding: 0;
     display: flex;
     line-height: 1em;
 
     .stat-count {
-      margin-right: 10px;
+      margin-right: 0.8em;
 
       .stat-title {
         color: var(--faint, $fallback--faint);
@@ -651,13 +647,7 @@ a.unmute {
         text-transform: uppercase;
         position: relative;
         margin-bottom: 3px;
-        cursor: pointer;
         line-height: 1em;
-
-        &:hover,
-        &:focus {
-          text-decoration: underline;
-        }
       }
 
       .stat-number {