Firehawk52-backup/hydra
28
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2026-01-15 16:33:02 -03:00
Code Issues Packages Projects Releases Wiki Activity

fix: update notification display logic and impove empty state styling

Browse Source
This commit is contained in:
Moyasee
2025-12-23 13:11:02 +02:00
parent 6cd65d6239
commit 246fc14b75
3 changed files with 36 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/src/pages/notifications/notification-item.tsx
View File

@@ -125,7 +125,7 @@ export function NotificationItem({
return {
title: t("friend_request_accepted_title"),
description: t("friend_request_accepted_description", {
displayName: notification.variables.senderDisplayName,
displayName: notification.variables.accepterDisplayName,
}),
showActions: false,
};

36
src/renderer/src/pages/notifications/notifications.scss
View File

@@ -23,33 +23,31 @@
&__empty {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
gap: globals.$spacing-unit;
}
&__icon-container {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
gap: calc(globals.$spacing-unit * 2);
padding: calc(globals.$spacing-unit * 6);
text-align: center;
color: globals.$body-color;
&-icon {
opacity: 0.4;
}
&-title {
font-size: 18px;
font-weight: 600;
color: globals.$muted-color;
}
&-description {
font-size: globals.$body-font-size;
}
margin-bottom: calc(globals.$spacing-unit * 2);
}
&__loading {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
padding: calc(globals.$spacing-unit * 4);
align-items: center;
}
&__load-more {

36
src/renderer/src/pages/notifications/notifications.tsx
View File

@@ -344,30 +344,30 @@ export default function Notifications() {
};
return (
<div className="notifications">
<div className="notifications__actions">
<Button theme="outline" onClick={handleMarkAllAsRead}>
{t("mark_all_as_read")}
</Button>
<Button theme="danger" onClick={handleClearAll}>
{t("clear_all")}
</Button>
</div>
<>
{isLoading && mergedNotifications.length === 0 ? (
<div className="notifications__loading">
<span>{t("loading")}</span>
</div>
) : mergedNotifications.length === 0 ? (
<div className="notifications__empty">
<BellIcon size={48} className="notifications__empty-icon" />
<span className="notifications__empty-title">{t("empty_title")}</span>
<span className="notifications__empty-description">
{t("empty_description")}
</span>
<div className="notifications__icon-container">
<BellIcon size={24} />
</div>
<h2>{t("empty_title")}</h2>
<p>{t("empty_description")}</p>
</div>
) : (
<>
<div className="notifications">
<div className="notifications__actions">
<Button theme="outline" onClick={handleMarkAllAsRead}>
{t("mark_all_as_read")}
</Button>
<Button theme="danger" onClick={handleClearAll}>
{t("clear_all")}
</Button>
</div>
<div className="notifications__list">
<AnimatePresence mode="popLayout">
{displayedNotifications.map(renderNotification)}
@@ -385,8 +385,8 @@ export default function Notifications() {
</Button>
</div>
)}
</>
</div>
)}
</div>
</>
);
}