From 296a82c89bd108539d357bceaa19010c1afd44ae Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Wed, 25 Jun 2025 23:47:19 -0700 Subject: [PATCH 01/14] initial wave of style updates for payment notification item --- .../PaymentNotifications.styles.ts | 48 ++- .../PaymentNotifications.tsx | 279 +++++++++++++----- 2 files changed, 244 insertions(+), 83 deletions(-) diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts index d56e8ddc..c41ac374 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts @@ -3,6 +3,8 @@ import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography'; import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput'; import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; +import { Card } from 'antd'; +import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; export const FiltersWrapper = styled.div` margin-bottom: 1.5rem; @@ -18,22 +20,31 @@ export const SplitDivider = styled.div` width: 100%; `; -export const NotificationItem = styled.div<{ $isRead: boolean; $isNew?: boolean }>` +export const NotificationItem = styled(Card)<{ $isRead: boolean; $isNew?: boolean }>` position: relative; transition: all 0.3s ease; - + background-color: var(--additional-background-color); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); + border: none; + .ant-space { + background-color: transparent; + } + .anticon-info-circle { + color: var(--text-light-color); + width: 2.4rem; + padding: 0 0.2rem; + } ${(props) => !props.$isRead && ` - background-color: var(--background-color); border-radius: ${BORDER_RADIUS}; position: relative; &::before { content: ''; position: absolute; - left: -0.5rem; - top: 50%; + left: 1rem; + top: 2.2rem; transform: translateY(-50%); width: 0.5rem; height: 0.5rem; @@ -45,10 +56,12 @@ export const NotificationItem = styled.div<{ $isRead: boolean; $isNew?: boolean ${(props) => props.$isNew && ` - border-left: 3px solid var(--success-color); + border-left: 3px solid var(--success-color) !important; `} `; - +export const NotificationHeader = styled(BaseRow)` + color: var(--text-main-color); +`; export const NotificationContent = styled.div` padding-top: 0.5rem; `; @@ -87,7 +100,7 @@ export const CopyButton = styled(BaseButton)` height: 20px; border-radius: ${BORDER_RADIUS}; background-color: var(--background-color); - + &:hover { background-color: var(--secondary-background-color); } @@ -122,13 +135,15 @@ export const TierTag = styled.span<{ $tier: string }>` `; export const NewSubscriberBadge = styled.span` - display: inline-block; - padding: 0.25rem 0.5rem; + display: flex; + align-items: center; + padding: 0.5rem; border-radius: ${BORDER_RADIUS}; font-size: ${FONT_SIZE.xs}; font-weight: ${FONT_WEIGHT.semibold}; margin-left: 0.5rem; background-color: var(--success-color); + height: 1.5rem; color: var(--text-secondary-color); `; @@ -150,12 +165,17 @@ export const ExpirationInfo = styled.div` margin-top: 0.5rem; font-size: ${FONT_SIZE.xs}; color: var(--text-light-color); - - ${(props) => props.color === 'warning' && ` + font-weight: ${FONT_WEIGHT.regular}; + + ${(props) => + props.color === 'warning' && + ` color: var(--warning-color); `} - - ${(props) => props.color === 'error' && ` + + ${(props) => + props.color === 'error' && + ` color: var(--error-color); `} `; diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.tsx b/src/components/payment/PaymentNotifications/PaymentNotifications.tsx index efe08320..eb8c11be 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.tsx +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.tsx @@ -8,7 +8,6 @@ import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; import { BasePagination } from '@app/components/common/BasePagination/BasePagination'; import { BaseNotification } from '@app/components/common/BaseNotification/BaseNotification'; -import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput'; import { usePaymentNotifications } from '@app/hooks/usePaymentNotifications'; import { PaymentNotification, PaymentNotificationParams } from '@app/api/paymentNotifications.api'; import { notificationController } from '@app/controllers/notificationController'; @@ -23,35 +22,164 @@ export const PaymentNotifications: React.FC = ({ clas const [filter, setFilter] = useState<'all' | 'unread' | 'user'>('unread'); const [userPubkey, setUserPubkey] = useState(''); - const { - notifications, - pagination, - isLoading, - fetchNotifications, - markAsRead, - markAllAsRead - } = usePaymentNotifications(); - + const { notifications, pagination, isLoading, fetchNotifications, markAsRead, markAllAsRead } = + usePaymentNotifications(); + + const testNotifications: PaymentNotification[] = [ + { + id: 1231203013202, + pubkey: 'npub1examplepubkey1234567890', + tx_id: 'tx1234567890abcdef', + amount: 1000, // in satoshis + subscription_tier: '5GB', + is_new_subscriber: true, + expiration_date: '2024-12-31T23:59:59Z', + created_at: '2024-01-01T12:00:00Z', + is_read: false, + }, + { + id: 1231203013203, + pubkey: 'npub1anotheruser0987654321', + tx_id: 'txabcdef1234567890', + amount: 5000, + subscription_tier: '10GB', + is_new_subscriber: false, + expiration_date: '2024-11-30T23:59:59Z', + created_at: '2024-02-10T09:30:00Z', + is_read: true, + }, + { + id: 1231203013204, + pubkey: 'npub1thirduser1122334455', + tx_id: 'txfedcba0987654321', + amount: 2500, + subscription_tier: '5GB', + is_new_subscriber: true, + expiration_date: '2024-10-15T23:59:59Z', + created_at: '2024-03-05T15:45:00Z', + is_read: false, + }, + { + id: 1231203013205, + pubkey: 'npub1fourthuser5566778899', + tx_id: 'tx1122334455667788', + amount: 10000, + subscription_tier: '20GB', + is_new_subscriber: false, + expiration_date: '2024-09-01T23:59:59Z', + created_at: '2024-04-12T18:20:00Z', + is_read: true, + }, + { + id: 1231203013206, + pubkey: 'npub1fifthuser9988776655', + tx_id: 'tx9988776655443322', + amount: 750, + subscription_tier: '2GB', + is_new_subscriber: true, + expiration_date: '2024-08-20T23:59:59Z', + created_at: '2024-05-01T08:10:00Z', + is_read: false, + }, + { + id: 1231203013207, + pubkey: 'npub1sixthuser2233445566', + tx_id: 'tx2233445566778899', + amount: 3000, + subscription_tier: '10GB', + is_new_subscriber: false, + expiration_date: '2024-07-15T23:59:59Z', + created_at: '2024-06-18T13:55:00Z', + is_read: true, + }, + { + id: 1231203013208, + pubkey: 'npub1seventhuser3344556677', + tx_id: 'tx3344556677889900', + amount: 1200, + subscription_tier: '5GB', + is_new_subscriber: true, + expiration_date: '2024-06-10T23:59:59Z', + created_at: '2024-07-02T11:25:00Z', + is_read: false, + }, + { + id: 1231203013209, + pubkey: 'npub1eighthuser4455667788', + tx_id: 'tx4455667788990011', + amount: 8000, + subscription_tier: '20GB', + is_new_subscriber: false, + expiration_date: '2024-05-05T23:59:59Z', + created_at: '2024-08-14T16:40:00Z', + is_read: true, + }, + { + id: 1231203013210, + pubkey: 'npub1ninthuser5566778899', + tx_id: 'tx5566778899001122', + amount: 2000, + subscription_tier: '5GB', + is_new_subscriber: true, + expiration_date: '2024-04-25T23:59:59Z', + created_at: '2024-09-09T10:05:00Z', + is_read: false, + }, + { + id: 1231203013211, + pubkey: 'npub1tenthuser6677889900', + tx_id: 'tx6677889900112233', + amount: 15000, + subscription_tier: '50GB', + is_new_subscriber: false, + expiration_date: '2024-03-15T23:59:59Z', + created_at: '2024-10-21T19:15:00Z', + is_read: true, + }, + { + id: 1231203013212, + pubkey: 'npub1eleventhuser7788990011', + tx_id: 'tx7788990011223344', + amount: 600, + subscription_tier: '2GB', + is_new_subscriber: true, + expiration_date: '2024-02-28T23:59:59Z', + created_at: '2024-11-30T07:50:00Z', + is_read: false, + }, + { + id: 123120301321222, + pubkey: 'npub1eleventhuser7788990011', + tx_id: 'tx7788990011223344', + amount: 600, + subscription_tier: '2GB', + is_new_subscriber: true, + expiration_date: '2024-02-28T23:59:59Z', + created_at: '2024-11-30T07:50:00Z', + is_read: true, + }, + ]; + // Fetch unread notifications on component mount useEffect(() => { fetchNotifications({ page: 1, limit: pagination?.pageSize || 10, - filter: 'unread' + filter: 'unread', }); }, [fetchNotifications, pagination?.pageSize]); const handleFilterChange = (value: unknown) => { const filterValue = value as 'all' | 'unread' | 'user'; setFilter(filterValue); - + // Only fetch immediately for "all" and "unread" filters // For "user" filter, wait for the user to click the Filter button if (filterValue !== 'user') { fetchNotifications({ page: 1, limit: pagination?.pageSize || 10, - filter: filterValue + filter: filterValue, }); } }; @@ -60,13 +188,13 @@ export const PaymentNotifications: React.FC = ({ clas const params: PaymentNotificationParams = { page, limit: pagination?.pageSize || 10, - filter + filter, }; - + if (filter === 'user' && userPubkey) { params.pubkey = userPubkey; } - + fetchNotifications(params); }; @@ -80,7 +208,7 @@ export const PaymentNotifications: React.FC = ({ clas page: 1, limit: pagination?.pageSize || 10, filter: 'user', - pubkey: userPubkey + pubkey: userPubkey, }); } }; @@ -104,44 +232,49 @@ export const PaymentNotifications: React.FC = ({ clas const expiration = new Date(dateString); const now = new Date(); const daysUntilExpiration = Math.floor((expiration.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)); - + let color: 'default' | 'warning' | 'error' = 'default'; if (daysUntilExpiration <= 3) { color = 'error'; } else if (daysUntilExpiration <= 7) { color = 'warning'; } - + return ( - {daysUntilExpiration <= 0 + {daysUntilExpiration <= 0 ? t('payment.notifications.expired', 'Expired') : t('payment.notifications.expiresInDays', 'Expires in {{days}} days', { days: daysUntilExpiration })} - {' - '}{formatDate(dateString)} + {' - '} + {formatDate(dateString)} ); }; return ( - + - - + {filter === 'user' && ( <> - = ({ clas {isLoading ? (
⏳
- - {t('common.loading', 'Loading...')} - + {t('common.loading', 'Loading...')}
- ) : notifications.length > 0 ? ( + ) : testNotifications.length > 0 ? ( <> - }> - {notifications.map((notification) => ( - }> + {testNotifications.map((notification) => ( + - - {notification.subscription_tier} - + + {notification.subscription_tier} {t( - notification.is_new_subscriber - ? 'payment.notifications.newSubscription' - : 'payment.notifications.renewalSubscription', - notification.is_new_subscriber - ? 'New Subscription' - : 'Subscription Renewal' + notification.is_new_subscriber + ? 'payment.notifications.newSubscription' + : 'payment.notifications.renewalSubscription', + notification.is_new_subscriber ? 'New Subscription' : 'Subscription Renewal', )} {notification.is_new_subscriber && ( - - {t('payment.notifications.new', 'NEW')} - + {t('payment.notifications.new', 'NEW')} )} - + } description={ - Date: {formatDate(notification.created_at)} - + User: - {notification.pubkey.substring(0, 10)}... - { navigator.clipboard.writeText(notification.pubkey); notificationController.success({ - message: 'User pubkey copied to clipboard' + message: 'User pubkey copied to clipboard', }); }} > @@ -219,16 +343,16 @@ export const PaymentNotifications: React.FC = ({ clas - + TX ID: - {notification.tx_id.substring(0, 10)}... - { navigator.clipboard.writeText(notification.tx_id); notificationController.success({ - message: 'Transaction ID copied to clipboard' + message: 'Transaction ID copied to clipboard', }); }} > @@ -237,20 +361,16 @@ export const PaymentNotifications: React.FC = ({ clas - +
{t('payment.notifications.amount', 'Amount')}: {formatAmount(notification.amount)}
- + {formatExpirationDate(notification.expiration_date)} - + {!notification.is_read && ( - markAsRead(notification.id)} - size="small" - type="link" - > + markAsRead(notification.id)} size="small" type="link"> {t('payment.notifications.markAsRead', 'Mark as read')} )} @@ -264,7 +384,7 @@ export const PaymentNotifications: React.FC = ({ clas - {notifications.some(n => !n.is_read) && ( + {notifications.some((n) => !n.is_read) && ( markAllAsRead()}> {t('payment.notifications.readAll', 'Mark all as read')} @@ -285,13 +405,34 @@ export const PaymentNotifications: React.FC = ({ clas ) : ( -
+
💰
{t('payment.notifications.noNotifications', 'No payment notifications')} - - {t('payment.notifications.emptyDescription', 'Payment notifications will appear here when users subscribe to your services')} + + {t( + 'payment.notifications.emptyDescription', + 'Payment notifications will appear here when users subscribe to your services', + )}
)} From 0580f6628125562b0256a5886f1fa469ae43e008 Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Thu, 26 Jun 2025 09:28:28 -0700 Subject: [PATCH 02/14] add input bg color --- .../payment/PaymentNotifications/PaymentNotifications.styles.ts | 2 ++ src/styles/themes/dark/darkTheme.ts | 1 + src/styles/themes/light/lightTheme.ts | 1 + src/styles/themes/themeVariables.ts | 1 + src/styles/themes/types.ts | 1 + 5 files changed, 6 insertions(+) diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts index c41ac374..034a21b4 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts @@ -110,10 +110,12 @@ export const MarkReadButton = styled(BaseButton)` margin-top: 0.75rem; padding: 0; height: auto; + font-size: ${FONT_SIZE.xs}; `; export const UserInput = styled(BaseInput)` width: 100%; + background-color: var(--input-bg-color); `; export const Text = styled(BaseTypography.Text)` diff --git a/src/styles/themes/dark/darkTheme.ts b/src/styles/themes/dark/darkTheme.ts index d7d7dde8..4de96e85 100644 --- a/src/styles/themes/dark/darkTheme.ts +++ b/src/styles/themes/dark/darkTheme.ts @@ -98,6 +98,7 @@ export const darkColorsTheme: ITheme = { layoutHeaderBg: '#1e2142', layoutSiderBg: '#121430', inputPlaceholder: 'rgba(255, 255, 255, 0.5)', + inputBg: `rgba(0, 0, 0, 0.2)`, itemHoverBg: '#1c2137', backgroundColorBase: '#1c2137', avatarBg: '#1c2137', diff --git a/src/styles/themes/light/lightTheme.ts b/src/styles/themes/light/lightTheme.ts index 43490c9a..36dc30ba 100644 --- a/src/styles/themes/light/lightTheme.ts +++ b/src/styles/themes/light/lightTheme.ts @@ -98,6 +98,7 @@ export const lightColorsTheme: ITheme = { layoutHeaderBg: 'transparent', layoutSiderBg: 'linear-gradient(261.31deg, #006ccf -29.57%, #00509a 121.11%)', inputPlaceholder: '#404040', + inputBg: 'rgba(215, 215, 215, 0.9)', itemHoverBg: '#f5f5f5', backgroundColorBase: '#F5F5F5', avatarBg: '#ccc', diff --git a/src/styles/themes/themeVariables.ts b/src/styles/themes/themeVariables.ts index 1c38f371..ee009e36 100644 --- a/src/styles/themes/themeVariables.ts +++ b/src/styles/themes/themeVariables.ts @@ -97,6 +97,7 @@ const getThemeVariables = (theme: ThemeType) => css` --layout-header-bg-color: ${themeObject[theme].layoutHeaderBg}; --layout-sider-bg-color: ${themeObject[theme].layoutSiderBg}; --input-placeholder-color: ${themeObject[theme].inputPlaceholder}; + --input-bg-color: ${themeObject[theme].inputBg}; --avatar-bg: ${themeObject[theme].avatarBg}; --alert-text-color: ${themeObject[theme].alertTextColor}; --breadcrumb-color: ${themeObject[theme].breadcrumb}; diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts index 70e68ade..61166300 100644 --- a/src/styles/themes/types.ts +++ b/src/styles/themes/types.ts @@ -64,6 +64,7 @@ export interface ITheme { layoutHeaderBg: string; layoutSiderBg: string; inputPlaceholder: string; + inputBg: string; itemHoverBg: string; backgroundColorBase: string; avatarBg: string; From 1fbc234a191c3b11ea970e5ef4d4a7e1605099b2 Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Thu, 26 Jun 2025 09:28:59 -0700 Subject: [PATCH 03/14] reverted length of npub slice --- .../payment/PaymentNotifications/PaymentNotifications.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.tsx b/src/components/payment/PaymentNotifications/PaymentNotifications.tsx index eb8c11be..6efce0cd 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.tsx +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.tsx @@ -330,7 +330,7 @@ export const PaymentNotifications: React.FC = ({ clas User: - {notification.pubkey.substring(0, 15)}... + {notification.pubkey.substring(0, 10)}... { navigator.clipboard.writeText(notification.pubkey); @@ -347,7 +347,7 @@ export const PaymentNotifications: React.FC = ({ clas TX ID: - {notification.tx_id.substring(0, 15)}... + {notification.tx_id.substring(0, 10)}... { navigator.clipboard.writeText(notification.tx_id); From 69fd32a6d7fa1ca5165bf0f65c0a6ca03e7fd957 Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Thu, 26 Jun 2025 09:30:03 -0700 Subject: [PATCH 04/14] removed 'amount' text. removed unused import --- .../payment/PaymentNotifications/PaymentNotifications.tsx | 1 - src/components/settings/SettingsPage.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.tsx b/src/components/payment/PaymentNotifications/PaymentNotifications.tsx index 6efce0cd..8542aa7e 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.tsx +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.tsx @@ -363,7 +363,6 @@ export const PaymentNotifications: React.FC = ({ clas
- {t('payment.notifications.amount', 'Amount')}: {formatAmount(notification.amount)}
diff --git a/src/components/settings/SettingsPage.tsx b/src/components/settings/SettingsPage.tsx index 3e21e3c1..d8eccc82 100644 --- a/src/components/settings/SettingsPage.tsx +++ b/src/components/settings/SettingsPage.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components'; import { FilterOutlined, PictureOutlined, - ApiOutlined, RobotOutlined, InfoCircleOutlined, WalletOutlined, From 055f4fc42f7aa87e3311129a808d2f75b6bb384e Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Thu, 26 Jun 2025 12:29:48 -0700 Subject: [PATCH 05/14] update design for notication card --- .../PaymentNotifications.styles.ts | 57 +++++++++++++-- .../PaymentNotifications.tsx | 72 +++++++++---------- 2 files changed, 87 insertions(+), 42 deletions(-) diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts index 034a21b4..6b4632d6 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts @@ -1,8 +1,9 @@ import styled from 'styled-components'; +import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography'; import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput'; -import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; +import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants'; import { Card } from 'antd'; import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; @@ -23,6 +24,7 @@ export const SplitDivider = styled.div` export const NotificationItem = styled(Card)<{ $isRead: boolean; $isNew?: boolean }>` position: relative; transition: all 0.3s ease; + width: 100%; background-color: var(--additional-background-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); border: none; @@ -31,7 +33,7 @@ export const NotificationItem = styled(Card)<{ $isRead: boolean; $isNew?: boolea } .anticon-info-circle { color: var(--text-light-color); - width: 2.4rem; + width: 2.4rem; padding: 0 0.2rem; } ${(props) => @@ -43,13 +45,17 @@ export const NotificationItem = styled(Card)<{ $isRead: boolean; $isNew?: boolea &::before { content: ''; position: absolute; - left: 1rem; - top: 2.2rem; + left: -1.1rem; + top: 2.4rem; transform: translateY(-50%); width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--primary-color); + + @media only screen and ${media.lg} { + left: -2rem; + } } `} @@ -61,6 +67,7 @@ export const NotificationItem = styled(Card)<{ $isRead: boolean; $isNew?: boolea `; export const NotificationHeader = styled(BaseRow)` color: var(--text-main-color); + font-size: ${FONT_SIZE.md}; `; export const NotificationContent = styled.div` padding-top: 0.5rem; @@ -68,6 +75,7 @@ export const NotificationContent = styled.div` export const NotificationMeta = styled.div` display: flex; + flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.5rem; @@ -83,10 +91,13 @@ export const MetaItem = styled.div` export const MetaLabel = styled.span` font-weight: ${FONT_WEIGHT.semibold}; margin-right: 0.5rem; + font-size: ${FONT_SIZE.md}; `; export const MetaValue = styled.span` display: inline-flex; + font-size: ${FONT_SIZE.md}; + color: var(--text-main-color); align-items: center; `; @@ -97,7 +108,7 @@ export const CopyButton = styled(BaseButton)` justify-content: center; font-size: ${FONT_SIZE.xs}; padding: 2px 6px; - height: 20px; + height: 24px; border-radius: ${BORDER_RADIUS}; background-color: var(--background-color); @@ -107,7 +118,6 @@ export const CopyButton = styled(BaseButton)` `; export const MarkReadButton = styled(BaseButton)` - margin-top: 0.75rem; padding: 0; height: auto; font-size: ${FONT_SIZE.xs}; @@ -151,7 +161,9 @@ export const NewSubscriberBadge = styled.span` export const AmountDisplay = styled.div` display: flex; + font-size: ${FONT_SIZE.lg}; flex-direction: column; + align-items: flex-end; `; export const SatAmount = styled.span` @@ -181,3 +193,36 @@ export const ExpirationInfo = styled.div` color: var(--error-color); `} `; +export const Root = styled(BaseCard)` + padding: 0; + padding-top: 1.25rem; + + .ant-space.ant-space-horizontal { + width: 100%; + } + @media only screen and ${media.lg} { + padding-left: 3rem; + } +`; +export const TransactionWrapper = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; + margin-top: 1.5rem; + min-width: 30rem; + @media only screen and ${media.lg} { + min-width: 40vw; +`; +export const LeftSideTX = styled.div` + display: flex; + flex-direction: column; + gap: 0.25rem; + ; +`; + +export const CardFooter = styled.div` + display: flex; + justify-content: space-between; + align-items: center; +`; diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.tsx b/src/components/payment/PaymentNotifications/PaymentNotifications.tsx index 8542aa7e..940fffd4 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.tsx +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.tsx @@ -153,7 +153,7 @@ export const PaymentNotifications: React.FC = ({ clas tx_id: 'tx7788990011223344', amount: 600, subscription_tier: '2GB', - is_new_subscriber: true, + is_new_subscriber: false, expiration_date: '2024-02-28T23:59:59Z', created_at: '2024-11-30T07:50:00Z', is_read: true, @@ -252,10 +252,10 @@ export const PaymentNotifications: React.FC = ({ clas }; return ( - @@ -323,10 +323,6 @@ export const PaymentNotifications: React.FC = ({ clas description={ - - {formatDate(notification.created_at)} - - User: @@ -343,36 +339,40 @@ export const PaymentNotifications: React.FC = ({ clas - - - TX ID: - - {notification.tx_id.substring(0, 10)}... - { - navigator.clipboard.writeText(notification.tx_id); - notificationController.success({ - message: 'Transaction ID copied to clipboard', - }); - }} - > - Copy TX ID - - - + + + + {formatDate(notification.created_at)} + + + TX ID: + + {notification.tx_id.substring(0, 10)}... + { + navigator.clipboard.writeText(notification.tx_id); + notificationController.success({ + message: 'Transaction ID copied to clipboard', + }); + }} + > + Copy TX ID + + + + +
{formatAmount(notification.amount)}
+ + + {formatExpirationDate(notification.expiration_date)} -
- {formatAmount(notification.amount)} -
- - {formatExpirationDate(notification.expiration_date)} - - {!notification.is_read && ( - markAsRead(notification.id)} size="small" type="link"> - {t('payment.notifications.markAsRead', 'Mark as read')} - - )} + {!notification.is_read && ( + markAsRead(notification.id)} size="small" type="link"> + {t('payment.notifications.markAsRead', 'Mark as read')} + + )} + } /> @@ -435,6 +435,6 @@ export const PaymentNotifications: React.FC = ({ clas
)} - + ); }; From f91a1cdd8982447afc001d6db433485c82dd7d9b Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Thu, 26 Jun 2025 12:34:18 -0700 Subject: [PATCH 06/14] add white space for larger screens --- .../PaymentNotifications/PaymentNotifications.styles.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts index 6b4632d6..3163468c 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts @@ -201,7 +201,8 @@ export const Root = styled(BaseCard)` width: 100%; } @media only screen and ${media.lg} { - padding-left: 3rem; + padding-left: 20%; + padding-right: 20%; } `; export const TransactionWrapper = styled.div` @@ -210,9 +211,9 @@ export const TransactionWrapper = styled.div` align-items: center; margin-bottom: 1.5rem; margin-top: 1.5rem; - min-width: 30rem; + min-width: 65vw; @media only screen and ${media.lg} { - min-width: 40vw; + min-width: 42vw; `; export const LeftSideTX = styled.div` display: flex; From d9ac6164685d88e211298919a11b0135d6c3c8cd Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Thu, 26 Jun 2025 13:09:51 -0700 Subject: [PATCH 07/14] make toolbar responsive --- .../PaymentNotifications/PaymentNotifications.styles.ts | 1 + .../payment/PaymentNotifications/PaymentNotifications.tsx | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts index 3163468c..6ba7e0eb 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts @@ -196,6 +196,7 @@ export const ExpirationInfo = styled.div` export const Root = styled(BaseCard)` padding: 0; padding-top: 1.25rem; + width: fit-content; .ant-space.ant-space-horizontal { width: 100%; diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.tsx b/src/components/payment/PaymentNotifications/PaymentNotifications.tsx index 940fffd4..b4dbbcc6 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.tsx +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.tsx @@ -259,7 +259,7 @@ export const PaymentNotifications: React.FC = ({ clas > - + = ({ clas {filter === 'user' && ( <> - + - + {t('payment.notifications.filter', 'Filter')} From 3eaf20d1d4550f3b0f0fcb43c6c7fd6065a9d3e5 Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Thu, 26 Jun 2025 13:14:46 -0700 Subject: [PATCH 08/14] fix padding issue --- .../PaymentNotifications/PaymentNotifications.styles.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts index 6ba7e0eb..855b4cca 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts @@ -196,14 +196,16 @@ export const ExpirationInfo = styled.div` export const Root = styled(BaseCard)` padding: 0; padding-top: 1.25rem; - width: fit-content; + min-width: fit-content; .ant-space.ant-space-horizontal { width: 100%; } + @media only screen and ${media.lg} { + padding-left: 30%; + } @media only screen and ${media.lg} { padding-left: 20%; - padding-right: 20%; } `; export const TransactionWrapper = styled.div` @@ -220,7 +222,6 @@ export const LeftSideTX = styled.div` display: flex; flex-direction: column; gap: 0.25rem; - ; `; export const CardFooter = styled.div` From bfc75af256e6b76c67017a9ff2544fcb5a316d8d Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Thu, 26 Jun 2025 13:43:04 -0700 Subject: [PATCH 09/14] use margin on inner card components instead --- .../PaymentNotifications.styles.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts index 855b4cca..fce60193 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts @@ -201,11 +201,14 @@ export const Root = styled(BaseCard)` .ant-space.ant-space-horizontal { width: 100%; } + margin-left: 5%; + margin-right: 5%; @media only screen and ${media.lg} { - padding-left: 30%; - } - @media only screen and ${media.lg} { - padding-left: 20%; + > .ant-card-head, + > .ant-card-body { + margin-left: 15%; + margin-right: 15%; + } } `; export const TransactionWrapper = styled.div` From 63fc7c687b676ac6efc989a064bf5aa30a5b241a Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Thu, 26 Jun 2025 13:45:32 -0700 Subject: [PATCH 10/14] remove test notifications --- .../PaymentNotifications.tsx | 142 +----------------- 1 file changed, 3 insertions(+), 139 deletions(-) diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.tsx b/src/components/payment/PaymentNotifications/PaymentNotifications.tsx index b4dbbcc6..d3b73195 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.tsx +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; import { BaseSelect } from '@app/components/common/selects/BaseSelect/BaseSelect'; import { BaseSpace } from '@app/components/common/BaseSpace/BaseSpace'; @@ -9,7 +8,7 @@ import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; import { BasePagination } from '@app/components/common/BasePagination/BasePagination'; import { BaseNotification } from '@app/components/common/BaseNotification/BaseNotification'; import { usePaymentNotifications } from '@app/hooks/usePaymentNotifications'; -import { PaymentNotification, PaymentNotificationParams } from '@app/api/paymentNotifications.api'; +import { PaymentNotificationParams } from '@app/api/paymentNotifications.api'; import { notificationController } from '@app/controllers/notificationController'; import * as S from './PaymentNotifications.styles'; @@ -25,141 +24,6 @@ export const PaymentNotifications: React.FC = ({ clas const { notifications, pagination, isLoading, fetchNotifications, markAsRead, markAllAsRead } = usePaymentNotifications(); - const testNotifications: PaymentNotification[] = [ - { - id: 1231203013202, - pubkey: 'npub1examplepubkey1234567890', - tx_id: 'tx1234567890abcdef', - amount: 1000, // in satoshis - subscription_tier: '5GB', - is_new_subscriber: true, - expiration_date: '2024-12-31T23:59:59Z', - created_at: '2024-01-01T12:00:00Z', - is_read: false, - }, - { - id: 1231203013203, - pubkey: 'npub1anotheruser0987654321', - tx_id: 'txabcdef1234567890', - amount: 5000, - subscription_tier: '10GB', - is_new_subscriber: false, - expiration_date: '2024-11-30T23:59:59Z', - created_at: '2024-02-10T09:30:00Z', - is_read: true, - }, - { - id: 1231203013204, - pubkey: 'npub1thirduser1122334455', - tx_id: 'txfedcba0987654321', - amount: 2500, - subscription_tier: '5GB', - is_new_subscriber: true, - expiration_date: '2024-10-15T23:59:59Z', - created_at: '2024-03-05T15:45:00Z', - is_read: false, - }, - { - id: 1231203013205, - pubkey: 'npub1fourthuser5566778899', - tx_id: 'tx1122334455667788', - amount: 10000, - subscription_tier: '20GB', - is_new_subscriber: false, - expiration_date: '2024-09-01T23:59:59Z', - created_at: '2024-04-12T18:20:00Z', - is_read: true, - }, - { - id: 1231203013206, - pubkey: 'npub1fifthuser9988776655', - tx_id: 'tx9988776655443322', - amount: 750, - subscription_tier: '2GB', - is_new_subscriber: true, - expiration_date: '2024-08-20T23:59:59Z', - created_at: '2024-05-01T08:10:00Z', - is_read: false, - }, - { - id: 1231203013207, - pubkey: 'npub1sixthuser2233445566', - tx_id: 'tx2233445566778899', - amount: 3000, - subscription_tier: '10GB', - is_new_subscriber: false, - expiration_date: '2024-07-15T23:59:59Z', - created_at: '2024-06-18T13:55:00Z', - is_read: true, - }, - { - id: 1231203013208, - pubkey: 'npub1seventhuser3344556677', - tx_id: 'tx3344556677889900', - amount: 1200, - subscription_tier: '5GB', - is_new_subscriber: true, - expiration_date: '2024-06-10T23:59:59Z', - created_at: '2024-07-02T11:25:00Z', - is_read: false, - }, - { - id: 1231203013209, - pubkey: 'npub1eighthuser4455667788', - tx_id: 'tx4455667788990011', - amount: 8000, - subscription_tier: '20GB', - is_new_subscriber: false, - expiration_date: '2024-05-05T23:59:59Z', - created_at: '2024-08-14T16:40:00Z', - is_read: true, - }, - { - id: 1231203013210, - pubkey: 'npub1ninthuser5566778899', - tx_id: 'tx5566778899001122', - amount: 2000, - subscription_tier: '5GB', - is_new_subscriber: true, - expiration_date: '2024-04-25T23:59:59Z', - created_at: '2024-09-09T10:05:00Z', - is_read: false, - }, - { - id: 1231203013211, - pubkey: 'npub1tenthuser6677889900', - tx_id: 'tx6677889900112233', - amount: 15000, - subscription_tier: '50GB', - is_new_subscriber: false, - expiration_date: '2024-03-15T23:59:59Z', - created_at: '2024-10-21T19:15:00Z', - is_read: true, - }, - { - id: 1231203013212, - pubkey: 'npub1eleventhuser7788990011', - tx_id: 'tx7788990011223344', - amount: 600, - subscription_tier: '2GB', - is_new_subscriber: true, - expiration_date: '2024-02-28T23:59:59Z', - created_at: '2024-11-30T07:50:00Z', - is_read: false, - }, - { - id: 123120301321222, - pubkey: 'npub1eleventhuser7788990011', - tx_id: 'tx7788990011223344', - amount: 600, - subscription_tier: '2GB', - is_new_subscriber: false, - expiration_date: '2024-02-28T23:59:59Z', - created_at: '2024-11-30T07:50:00Z', - is_read: true, - }, - ]; - // Fetch unread notifications on component mount useEffect(() => { fetchNotifications({ @@ -295,10 +159,10 @@ export const PaymentNotifications: React.FC = ({ clas
⏳
{t('common.loading', 'Loading...')} - ) : testNotifications.length > 0 ? ( + ) : notifications.length > 0 ? ( <> }> - {testNotifications.map((notification) => ( + {notifications.map((notification) => ( Date: Thu, 26 Jun 2025 14:09:33 -0700 Subject: [PATCH 11/14] improved color separation --- .../PaymentNotifications.styles.ts | 11 +++--- .../PaymentNotifications.tsx | 34 +++++++++---------- 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts index fce60193..f3febf04 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts @@ -97,8 +97,11 @@ export const MetaLabel = styled.span` export const MetaValue = styled.span` display: inline-flex; font-size: ${FONT_SIZE.md}; - color: var(--text-main-color); align-items: center; + &:not(.date){ + color: var(--text-main-color); + } + `; export const CopyButton = styled(BaseButton)` @@ -206,8 +209,8 @@ export const Root = styled(BaseCard)` @media only screen and ${media.lg} { > .ant-card-head, > .ant-card-body { - margin-left: 15%; - margin-right: 15%; + margin-left: 18%; + margin-right: 18%; } } `; @@ -219,7 +222,7 @@ export const TransactionWrapper = styled.div` margin-top: 1.5rem; min-width: 65vw; @media only screen and ${media.lg} { - min-width: 42vw; + min-width: 40vw; `; export const LeftSideTX = styled.div` display: flex; diff --git a/src/components/payment/PaymentNotifications/PaymentNotifications.tsx b/src/components/payment/PaymentNotifications/PaymentNotifications.tsx index d3b73195..b9d1a60c 100644 --- a/src/components/payment/PaymentNotifications/PaymentNotifications.tsx +++ b/src/components/payment/PaymentNotifications/PaymentNotifications.tsx @@ -203,27 +203,27 @@ export const PaymentNotifications: React.FC = ({ clas + + TX ID: + + {notification.tx_id.substring(0, 10)}... + { + navigator.clipboard.writeText(notification.tx_id); + notificationController.success({ + message: 'Transaction ID copied to clipboard', + }); + }} + > + Copy TX ID + + + - {formatDate(notification.created_at)} - - - TX ID: - - {notification.tx_id.substring(0, 10)}... - { - navigator.clipboard.writeText(notification.tx_id); - notificationController.success({ - message: 'Transaction ID copied to clipboard', - }); - }} - > - Copy TX ID - - + {formatDate(notification.created_at)}
{formatAmount(notification.amount)}
From 054edbf125891c5a59c3247a83dabad1f50bef08 Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Thu, 26 Jun 2025 16:23:01 -0700 Subject: [PATCH 12/14] fix visual issues with notifications dropdown --- .../NotificationsDropdown.tsx | 2 +- .../NotificationsOverlay.styles.ts | 25 +++++++++++++++ .../PaymentNotificationsOverlay.tsx | 31 ++++++++++--------- 3 files changed, 42 insertions(+), 16 deletions(-) diff --git a/src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx b/src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx index 2b38fbe3..0c768b70 100644 --- a/src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx +++ b/src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx @@ -135,7 +135,7 @@ export const NotificationsDropdown: React.FC = () => { +
{ const btc = satoshis / 100000000; return ( -
-
{satoshis.toLocaleString()} sats
+
+
{satoshis.toLocaleString()} sats
({btc.toFixed(8)} BTC)
@@ -48,7 +48,7 @@ export const PaymentNotificationsOverlay: React.FC ( - +
{formatDate(notification.created_at)}
- {t('payment.notifications.amount', 'Amount')}: {formatAmount(notification.amount)}
+ -
+ {/*
{t('payment.notifications.expiration', 'Expires')}: {formatDate(notification.expiration_date)} -
- +
*/} + + + {t('payment.notifications.viewDetails', 'View details')} + {!notification.is_read && ( markAsRead(notification.id)} - style={{ padding: '4px 0', height: 'auto', marginTop: '4px' }} + style={{ padding: '4px 0', height: 'auto', marginTop: '4px', fontSize: '0.85rem' }} > {t('payment.notifications.markAsRead', 'Mark as read')} )} -
- - {t('payment.notifications.viewDetails', 'View details')} - -
+ +
} /> @@ -129,9 +130,9 @@ export const PaymentNotificationsOverlay: React.FC {notifications.length > 0 ? ( - }> + } style={{ width: '95%' }}> {noticesList} - + ) : (
From afaa1bcfc6886c2af1f1dcc6741c7698d1463c58 Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Thu, 26 Jun 2025 16:23:29 -0700 Subject: [PATCH 13/14] remove unused imports --- .../PaymentNotificationsOverlay.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/header/components/notificationsDropdown/PaymentNotificationsOverlay/PaymentNotificationsOverlay.tsx b/src/components/header/components/notificationsDropdown/PaymentNotificationsOverlay/PaymentNotificationsOverlay.tsx index 967b929c..232f3c2e 100644 --- a/src/components/header/components/notificationsDropdown/PaymentNotificationsOverlay/PaymentNotificationsOverlay.tsx +++ b/src/components/header/components/notificationsDropdown/PaymentNotificationsOverlay/PaymentNotificationsOverlay.tsx @@ -1,10 +1,7 @@ import React, { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; -import { BaseNotification } from '@app/components/common/BaseNotification/BaseNotification'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; -import { capitalize } from '@app/utils/utils'; -import { BaseSpace } from '@app/components/common/BaseSpace/BaseSpace'; import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; import { PaymentNotification } from '@app/api/paymentNotifications.api'; From d53b322eb32778adc4a9587e2efebdc576697d83 Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Thu, 26 Jun 2025 16:28:41 -0700 Subject: [PATCH 14/14] fix width issue on smaller screens --- .../NotificationsOverlay/NotificationsOverlay.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts index a806dd34..ed612300 100644 --- a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts +++ b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts @@ -7,7 +7,7 @@ import { BaseNotification } from '@app/components/common/BaseNotification/BaseNo import { BaseSpace } from '@app/components/common/BaseSpace/BaseSpace'; export const NoticesOverlayMenu = styled.div` - max-width: 15rem; + max-width: 100%; @media only screen and ${media.md} { max-width: 25rem;