diff --git a/apps/web/src/assets/i18n/en.json b/apps/web/src/assets/i18n/en.json index 5c0e1006b..e3514f0c1 100644 --- a/apps/web/src/assets/i18n/en.json +++ b/apps/web/src/assets/i18n/en.json @@ -377,6 +377,7 @@ "LOADING_MORE": "Loading more...", "NO_SEARCH_RESULTS": "No channels found", "NO_CHANNELS_FOUND": "No channels found", + "NO_GROUPS_FOUND": "No groups found", "TRY_DIFFERENT_SEARCH": "Try a different search term", "DETAILS_DIALOG": { "TITLE": "Channel details", diff --git a/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.scss b/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.scss index 2a57f575b..787f2f427 100644 --- a/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.scss +++ b/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.scss @@ -21,7 +21,7 @@ width: 72px; height: 72px; margin-bottom: 24px; - opacity: 0.2; + opacity: 0.35; animation: portal-empty-state-float 2.8s ease-in-out infinite; } @@ -30,7 +30,7 @@ font-weight: 520; letter-spacing: -0.01em; margin: 0; - opacity: 0.5; + opacity: 0.6; } @keyframes portal-empty-state-fade-in { diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html index f3a820742..ca3ceff9d 100644 --- a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html +++ b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html @@ -137,12 +137,26 @@ } } @else {
- {{ - (hasSearchQuery() - ? 'CHANNELS.NO_SEARCH_RESULTS' - : 'CHANNELS.NO_VISIBLE_GROUPS' - ) | translate - }} + + {{ + hasSearchQuery() ? 'search_off' : 'folder_off' + }} + +
+ {{ + (hasSearchQuery() + ? 'CHANNELS.NO_GROUPS_FOUND' + : 'CHANNELS.NO_VISIBLE_GROUPS' + ) | translate + }} +
+ @if (hasSearchQuery()) { +
+ {{ + 'CHANNELS.TRY_DIFFERENT_SEARCH' | translate + }} +
+ }
} diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss index 4c4623c15..0847d0673 100644 --- a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss +++ b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss @@ -183,10 +183,35 @@ } .groups-nav-empty { - padding: 16px 12px; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 24px 12px; color: var(--app-muted-color, var(--mat-sys-on-surface-variant)); - font-size: 0.82rem; - line-height: 1.4; + + &__icon { + width: 28px; + height: 28px; + font-size: 28px; + opacity: 0.5; + margin-bottom: 10px; + } + + &__title { + font-size: 0.85rem; + font-weight: 520; + letter-spacing: -0.01em; + margin-bottom: 4px; + text-wrap: balance; + } + + &__hint { + font-size: 0.78rem; + line-height: 1.4; + opacity: 0.65; + text-wrap: pretty; + } } .group-nav-item {