diff --git a/src/app/actions/notificationActions.ts b/src/app/actions/notificationActions.ts index 2baf35d..17ed20d 100644 --- a/src/app/actions/notificationActions.ts +++ b/src/app/actions/notificationActions.ts @@ -8,7 +8,7 @@ export interface NotificationBody { id: number, message: string, status: string | null, - type: string | null + type: string } export async function fetchActiveNotifications() { diff --git a/src/app/styles/header.scss b/src/app/styles/header.scss index 2ba362e..c9f26da 100644 --- a/src/app/styles/header.scss +++ b/src/app/styles/header.scss @@ -51,7 +51,7 @@ height: 30px; } -/* &.active { + /* &.active { background: v.$color-warning; } */ } @@ -115,7 +115,7 @@ background: v.$white; border-radius: 12px; box-shadow: 10px 10px 20px 10px v.$shadow-1; - min-width: 320px; + min-width: 350px; opacity: 0; visibility: hidden; transform: translateY(-10px); @@ -148,14 +148,14 @@ } &-count { - font-size: 12px; - color: v.$p-color; + font-size: 10px; + background: v.$p-color; + padding: 5px; + color: v.$white; font-weight: 500; - cursor: pointer; - - &:hover { - color: v.$p-color-hover; - } + border-radius: 5px; + margin-left: 5px; + user-select: none; } &-list { @@ -166,9 +166,10 @@ &-item { display: flex; gap: 4px; - padding: 5px 10px 5px 10px; + padding: 10px 14px; border-bottom: 1px solid v.$b-color-1; transition: background-color 0.2s; + align-items: center; &.loading { opacity: 0.5; @@ -177,7 +178,7 @@ &-title { display: block; - font-size: 15px; + font-size: 13px; font-weight: 700; color: v.$text-p; margin-bottom: 6px; @@ -186,53 +187,65 @@ &-content { width: 100%; position: relative; - padding: 15px 5px; - /* display: flex; - align-items: center; */ + padding: 5px; + } + + &-item-header { + display: flex; + justify-content: space-between; } &-text { font-size: 13px; color: v.$text-s; - /* margin-bottom: 4px; */ font-weight: 500; } - &-data, - &-mark-as-read { + &-data { font-size: 10px; color: v.$text-m; - display: flex; - justify-content: end; - position: absolute; - top: 0px; - right: 0px; } - &-mark-as-read { + &-icon { font-size: 12px; - bottom: 0px; - top: auto; cursor: pointer; height: max-content; - color: v.$p-color; + svg { + fill: v.$p-color; + + &:hover { + fill: v.$p-color-hover; + } + } + + &:hover { + color: v.$p-color-hover; + } + } + + &-mark-all-as-read { + font-size: 10px; + color: v.$p-color; + text-align: end; + cursor: pointer; + &:hover { color: v.$p-color-hover; } } &-footer { - padding: 12px 20px; + padding: 8px 20px; border-top: 1px solid v.$b-color-1; text-align: center; position: relative; .notification-link { color: v.$p-color; - font-size: 14px; - font-weight: 500; + font-size: 16px; + font-weight: 600; text-decoration: none; cursor: pointer; diff --git a/src/app/ui/header/notificationsButton.tsx b/src/app/ui/header/notificationsButton.tsx index 43f1103..159c980 100644 --- a/src/app/ui/header/notificationsButton.tsx +++ b/src/app/ui/header/notificationsButton.tsx @@ -4,7 +4,7 @@ import { useState, useRef, useEffect } from 'react'; import { useClickOutside } from '@/app/hooks/useClickOutside'; import { useTranslations } from 'next-intl'; import Link from 'next/link'; -import { IconNotification } from '@/app/ui/icons/icons'; +import { IconInfoMessage, IconPolicy, IconFiles, IconAccountBalanceWallet, IconCheckbook, IconGavel } from '@/app/ui/icons/icons'; import { useActiveNotifications } from '@/app/hooks/react-query/useActiveNotificationsList'; import { NotificationBody, notificationsMarkAsRead } from '@/app/actions/notificationActions'; import { useQueryClient } from '@tanstack/react-query'; @@ -76,6 +76,51 @@ export default function NotificationsButton() { } } + const getNotificationIcon = (type: string) => { + switch (type) { + case 'SEARCH_RESULT': + case 'MONITORING_RESULT': + case 'SEARCH_OPERATION_FAILED': + return ; + + case 'FILE_MODERATION_EVENT': + case 'FILE_ADDED_TO_SYSTEM': + return ; + + case 'PAYOUT_RESULT': + case 'PAYMENT_RESULT': + case 'REFERRAL_DEPOSIT': + return ; + + case 'REFERRAL_REGISTERED': + case 'REFERRAL_ACTIVATED': + return ; + + case 'COMPLAINT_STATUS_CHANGED': + case 'CASE_STATUS_CHANGED': + return ; + + case 'OPERATION_IMPOSSIBLE': + case 'START_FAILED_NOW': + case 'START_FAILED_NEXT': + case 'TOKEN_NOT_FOUND': + case 'USER_NOT_VERIFIED': + return ; + + case 'USER_VERIFIED': + return ; + + case 'INCOMING_MESSAGE': + return ; + + case 'TARIFF_EXPIRING': + return ; + + default: + return ; + } + }; + return (
+ ) : null} + + + +
{notificationList?.notifications?.length !== 0 ? ( <> @@ -125,28 +189,33 @@ export default function NotificationsButton() { key={item.id} className={`notification-item ${loadingIds.has(item.id) ? 'loading' : ''}`} > -
-
- {item.createdAt ? formatDate(item.createdAt) : '#'} -
+ - {/*
- {t('tokens-added')} -
*/} +
+
+
+ {norificationTranslate.has(item.type) ? norificationTranslate(item.type) : item.type} +
+ +
+ {item.createdAt ? formatDate(item.createdAt) : '#'} +
+
- {norificationTranslate.has(item.message) ? norificationTranslate(item.message): item.message} + {norificationTranslate.has(item.message) ? norificationTranslate(item.message) : item.message}
- {loadingIds.has(item.id) && (
@@ -160,33 +229,41 @@ export default function NotificationsButton() {
- + {t('all-notifications')} +
) : ( -

- {t('no-new-notifications')} -

+
+

+ {t('no-new-notifications')} +

+ +
+ { + setIsOpen(false); + }} + > + {t('all-notifications')} + +
+
)} )}
-
+ ) } \ No newline at end of file diff --git a/src/app/ui/icons/icons.tsx b/src/app/ui/icons/icons.tsx index 733ef00..b196aaa 100644 --- a/src/app/ui/icons/icons.tsx +++ b/src/app/ui/icons/icons.tsx @@ -206,4 +206,40 @@ export function IconCheck() { return ( ) +} + +export function IconPolicy() { + return ( + + ) +} + +export function IconFiles() { + return ( + + ) +} + +export function IconAccountBalanceWallet() { + return ( + + ) +} + +export function IconCheckbook() { + return ( + + ) +} + +export function IconGavel() { + return ( + + ) +} + +export function IconInfoMessage() { + return ( + + ) } \ No newline at end of file