fix(front): consistent user avatars

front/src/components/common/ActorAvatar.vue

@@ -19,16 +19,18 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${actorColor.val
     v-if="actor.icon && actor.icon.urls.original"
     alt=""
     :src="actor.icon.urls.medium_square_crop"
-    class="ui avatar circular image"
+    class="ui tiny avatar circular image"
   >
-  <i
+  <span
     v-else
     :style="defaultAvatarStyle"
-    class="ui avatar circular label"
-  >{{ actor.preferred_username?.[0] || "" }}</i>
+    class="ui tiny avatar circular label"
+  >
+    {{ actor.preferred_username?.[0] || "" }}
+  </span>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ui.circular.avatar {
   float: left;
   text-align: center;
@@ -36,6 +38,8 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${actorColor.val
 
   &.label {
     align-content: center;
+    padding: 4px 8px;
+    margin-right: 8px;
   }
 
 }

front/src/components/common/ActorLink.vue

@@ -78,9 +78,5 @@ a.username {
     display: flex;
     align-items: center;
   }
-  i.label {
-    padding: 4px 8px;
-    margin-right: 8px;
-  }
 }
 </style>

front/src/components/common/UserLink.vue

@@ -6,16 +6,20 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
+import Link from '~/components/ui/Link.vue'
+
 interface Props {
   user: User
   avatar?: boolean
+  discrete?: boolean
 }
 
 const store = useStore()
 const { t } = useI18n()
 
 const props = withDefaults(defineProps<Props>(), {
-  avatar: true
+  avatar: true,
+  discrete: false
 })
 
 const userColor = computed(() => intToRGB(hashCode(props.user.username + props.user.id)))
@@ -23,21 +27,40 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${userColor.valu
 </script>
 
 <template>
-  <span class="component-user-link">
-    <template v-if="avatar">
-      <img
-        v-if="user.avatar && user.avatar.urls.medium_square_crop"
-        v-lazy="store.getters['instance/absoluteUrl'](user.avatar.urls.medium_square_crop)"
-        class="ui tiny circular avatar"
-        alt=""
-      >
-      <span
-        v-else
-        :style="defaultAvatarStyle"
-        class="ui circular label"
-      >{{ user.username[0] }}</span>
-      &nbsp;
-    </template>
-    {{ t('components.common.UserLink.link.username', {username: user.username}) }}
-  </span>
+  <Link
+    :to="user"
+    :title="user.full_username"
+    class="username"
+    :solid="!discrete"
+    :round="!discrete"
+  >
+    <span class="center">
+      <template v-if="avatar">
+        <img
+          v-if="user.avatar && user.avatar.urls.medium_square_crop"
+          v-lazy="store.getters['instance/absoluteUrl'](user.avatar.urls.medium_square_crop)"
+          class="ui avatar tiny circular image"
+          alt=""
+        >
+        <span
+          v-else
+          :style="defaultAvatarStyle"
+          class="ui tiny avatar circular label"
+        >
+          {{ user.username[0] }}
+        </span>
+        &nbsp;
+      </template>
+      {{ t('components.common.UserLink.link.username', {username: user.username}) }}
+    </span>
+  </Link>
 </template>
+
+<style lang="scss" scoped>
+a.username {
+  span.center {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

front/src/style/components/_avatar.scss

@@ -1,12 +1,15 @@
-
-.ui.tiny.avatar.image {
-  position: relative;
-  top: -0.5em;
-  width: 3em;
-}
-
 .ui.tiny.avatar {
   width: 28px;
   height: 28px;
+  display: block;
+  float: left;
+  text-align: center;
   font-size: 1em !important;
+  border-radius: 50%;
+
+  &.label {
+    align-content: center;
+    padding: 4px 8px;
+  }
+
 }

front/src/ui/components/UserMenu.vue

@@ -3,7 +3,6 @@ import { useI18n } from 'vue-i18n'
 import { computed, ref} from 'vue'
 import { useStore } from '~/store'
 import { useRoute } from 'vue-router'
-import { hashCode, intToRGB } from '~/utils/color'
 
 import useThemeList from '~/composables/useThemeList'
 import useTheme from '~/composables/useTheme'
@@ -24,9 +23,6 @@ const { theme } = useTheme()
 
 const isOpen = ref(false)
 
-const actorColor = computed(() => intToRGB(hashCode(store.state.auth.profile.full_username)))
-const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${actorColor.value}` }))
-
 const labels = computed(() => ({
   profile: t('components.common.UserMenu.link.profile'),
   settings: t('components.common.UserMenu.link.settings'),
@@ -53,6 +49,7 @@ const labels = computed(() => ({
       round
       square-small
       ghost
+      class="user-menu"
       :ariaPressed="isOpen ? true : undefined"
     >
       <img
@@ -63,8 +60,7 @@ const labels = computed(() => ({
       >
       <span
         v-else-if="store.state.auth.authenticated"
-        :style="defaultAvatarStyle"
-        class="ui avatar circular label"
+        class="ui tiny avatar circular label"
       >
         {{ store.state.auth.profile?.full_username?.[0] || "" }}
       </span>
@@ -163,25 +159,48 @@ const labels = computed(() => ({
   </Popover>
 </template>
 
-<style scoped lang="scss">
-header > nav button.button {
-  padding: 10px;
+<style lang="scss" scoped>
+  header > nav button.button {
+    padding: 10px;
+
+    &.user-menu {
+      padding: 0px !important;
+
+      .avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+
+        @include light-theme {
+          &.label {
+            background-color: var(--fw-gray-900);
+            color: var(--fw-beige-300);
+            &:hover {
+              color: var(--fw-color);
+              background-color: var(--hover-background-color);
+            }
+          }
+        }
+
+        @include dark-theme {
+          &.label {
+            background-color: var(--fw-beige-400);
+            color: var(--fw-gray-900);
+            &:hover {
+              color: var(--fw-color);
+              background-color: var(--hover-background-color);
+            }
+          }
+        }
+      }
+    }
 
-  &:has(img) {
-    padding: 4px;
-    height: 40px;
   }
-}
-nav.button-list {
-  width: 100%;
-  a:hover {
-    background-color: transparent;
-    border: none;
+  nav.button-list {
+    width: 100%;
+    a:hover {
+      background-color: transparent;
+      border: none;
+    }
   }
-}
-.avatar {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-}
 </style>

front/src/views/auth/ProfileBase.vue

@@ -216,6 +216,8 @@ const recentActivity = ref(0)
     font-size: 100px;
     font-style: normal;
     font-weight: 800;
+    text-align: center;
+    align-content: center;
     background-color: var(--fw-gray-500);
     border-radius: 50%;
     width: 176px;

front/src/views/content/remote/Card.vue

@@ -256,7 +256,6 @@ const isOpen = ref(false)
     <Spacer :size="8" />
     <div class="extra content">
       <actor-link
-        style="color: var(--link-color)"
         :actor="library.actor"
       />
     </div>