diff --git a/css/components.css b/css/components.css index fa55358..5210829 100644 --- a/css/components.css +++ b/css/components.css @@ -265,6 +265,26 @@ app-header .btn-profile { border-radius: var(--radius-md); } +app-header .btn-profile-avatar { + padding: 0; + width: 36px; + height: 36px; + border-radius: var(--radius-full); + overflow: hidden; + border: 2px solid var(--color-border); + transition: border-color var(--transition-fast); +} + +app-header .btn-profile-avatar:hover { + border-color: var(--color-accent); +} + +app-header .btn-profile-avatar svg { + width: 32px; + height: 32px; + display: block; +} + app-header .btn-login-text, app-header .btn-profile-text { display: inline; diff --git a/js/components/app-header.js b/js/components/app-header.js index e02d215..429e0ef 100644 --- a/js/components/app-header.js +++ b/js/components/app-header.js @@ -2,6 +2,7 @@ import { i18n, t } from '../i18n.js' import { router } from '../router.js' import { auth } from '../services/auth.js' import { notificationsService } from '../services/notifications.js' +import { generateAvatar } from '../services/identity.js' class AppHeader extends HTMLElement { constructor() { @@ -188,17 +189,18 @@ class AppHeader extends HTMLElement {