Files
ComfyUI_frontend/src/components/common/UserAvatar.vue
Christian Byrne bf24b6e729 [backport core/1.30]: UI color updates & tweaks (#6679)
## Summary
Backports PR #6381 (UI color updates & tweaks) to core/1.30 branch.

This includes:
- Text readability improvements
- Semantic color token consistency updates
- UI element styling refinements
- Component import path fixes (ComfyLogoTransparent → ComfyLogo)

## Merge Conflicts Resolved
- **ComfyMenuButton.vue**: Accepted cherry-picked version with import
changes
- **20 browser test snapshots**: Used backportee's copy as instructed

**Original commit**: fd236b3587

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6679-Backport-PR-6381-to-core-1-30-UI-color-updates-tweaks-2aa6d73d3650815689defd191e3dd86e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
2025-11-14 11:40:10 -07:00

28 lines
730 B
Vue

<template>
<Avatar
class="dark-theme:bg-[var(--interface-panel-selected-surface)] bg-gray-200"
:image="photoUrl ?? undefined"
:icon="hasAvatar ? undefined : 'icon-[lucide--user]'"
:pt:icon:class="{ 'size-4': !hasAvatar }"
shape="circle"
:aria-label="ariaLabel ?? $t('auth.login.userAvatar')"
@error="handleImageError"
/>
</template>
<script setup lang="ts">
import Avatar from 'primevue/avatar'
import { computed, ref } from 'vue'
const { photoUrl, ariaLabel } = defineProps<{
photoUrl?: string | null
ariaLabel?: string
}>()
const imageError = ref(false)
const handleImageError = () => {
imageError.value = true
}
const hasAvatar = computed(() => photoUrl && !imageError.value)
</script>