diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 23a57f5..57edbc2 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -13,13 +13,6 @@ async function handleLogout() {
router.push('/login')
}
-const stampLabel = computed(() => {
- if (!authStore.isAuthenticated) return 'offline'
- if (listsStore.isSyncing) return 'syncing'
- if (listsStore.pendingCount > 0) return `${listsStore.pendingCount} pending`
- return 'synced'
-})
-
const stampClass = computed(() => {
if (!authStore.isAuthenticated) return ''
if (listsStore.pendingCount > 0 || listsStore.isSyncing) return 'stamp-pending'
@@ -46,15 +39,17 @@ const stampTitle = computed(() => {
v-if="listsStore.error"
class="stamp stamp-danger"
:title="listsStore.error"
- >sync error
+ :aria-label="listsStore.error"
+ role="img"
+ >
{{ stampLabel }}
+ :aria-label="stampTitle"
+ role="img"
+ >
@@ -83,9 +78,10 @@ const stampTitle = computed(() => {
}
.brand-name {
- font-family: var(--font-stamp);
- font-size: 0.95rem;
- letter-spacing: 0.04em;
+ font-family: var(--font-display);
+ font-weight: 600;
+ font-size: 1rem;
+ letter-spacing: 0.02em;
}
.brand-seal {
@@ -121,6 +117,14 @@ const stampTitle = computed(() => {
flex-shrink: 0;
}
+.stamp-pending {
+ color: var(--c-warning);
+}
+
+.stamp-synced {
+ color: var(--c-success);
+}
+
.stamp-danger {
color: var(--c-danger);
cursor: help;
diff --git a/src/components/InvitesPanel.vue b/src/components/InvitesPanel.vue
index ecbb030..5c9d42c 100644
--- a/src/components/InvitesPanel.vue
+++ b/src/components/InvitesPanel.vue
@@ -376,8 +376,9 @@ function inviteDetail(invite: Invite): string {
font-size: 0.95rem;
letter-spacing: 0.06em;
color: var(--c-heading);
- min-width: 0;
flex: 1 1 auto;
+ min-width: 0;
+ max-width: 24ch;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;