Skip to content

Commit c5c7843

Browse files
MaphikzaMaphikza
authored
Merge pull request #52 from HORNET-Storage/ui/payment-notifications-improvements
UI: Payment notifications improvements
2 parents dec4e8e + d53b322 commit c5c7843

File tree

10 files changed

+227
-121
lines changed

10 files changed

+227
-121
lines changed

‎src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ export const NotificationsDropdown: React.FC = () => {
135135
<BasePopover
136136
trigger="click"
137137
content={
138-
<div style={{ maxWidth: '400px', minWidth: '320px', maxHeight: '450px' }}>
138+
<div style={{ maxWidth: '400px', minWidth: '320px' }}>
139139
<Tabs
140140
defaultActiveKey="1"
141141
items={tabItems}

‎src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
33
import { media } from '@app/styles/themes/constants';
44
import { BaseDivider } from '@app/components/common/BaseDivider/BaseDivider';
55
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
6+
import { BaseNotification } from '@app/components/common/BaseNotification/BaseNotification';
7+
import { BaseSpace } from '@app/components/common/BaseSpace/BaseSpace';
68

79
export const NoticesOverlayMenu = styled.div`
8-
max-width: 15rem;
10+
max-width: 100%;
911
1012
@media only screen and ${media.md} {
1113
max-width: 25rem;
@@ -54,3 +56,26 @@ export const Text = styled(BaseTypography.Text)`
5456
display: block;
5557
text-align: center;
5658
`;
59+
export const TransactionWrapper = styled.div`
60+
display: flex;
61+
justify-content: space-between;
62+
align-items: center;
63+
width: 100%;
64+
margin-top: .5rem;
65+
margin-bottom: .5rem;
66+
gap: 3rem;
67+
`;
68+
export const RootNotification = styled(BaseNotification)`
69+
width: 100%;
70+
71+
`;
72+
export const NotificationsWrapper = styled(BaseSpace)`
73+
.ant-space.ant-space-horizontal {
74+
width: 100%;
75+
}
76+
`;
77+
export const ActionRow = styled.div`
78+
display: flex;
79+
justify-content: space-between;
80+
align-items: center;
81+
`;

‎src/components/header/components/notificationsDropdown/PaymentNotificationsOverlay/PaymentNotificationsOverlay.tsx‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import React, { useCallback } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { Link } from 'react-router-dom';
4-
import { BaseNotification } from '@app/components/common/BaseNotification/BaseNotification';
54
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
6-
import { capitalize } from '@app/utils/utils';
7-
import { BaseSpace } from '@app/components/common/BaseSpace/BaseSpace';
85
import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
96
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
107
import { PaymentNotification } from '@app/api/paymentNotifications.api';
@@ -34,8 +31,8 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
3431
const formatAmount = (satoshis: number) => {
3532
const btc = satoshis / 100000000;
3633
return (
37-
<div>
38-
<div style={{ fontWeight: 'bold' }}>{satoshis.toLocaleString()} sats</div>
34+
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
35+
<div style={{ fontWeight: 'bold', fontSize: "1rem"}}>{satoshis.toLocaleString()} sats</div>
3936
<div style={{ fontSize: '0.85rem', color: 'var(--text-light-color)' }}>
4037
({btc.toFixed(8)} BTC)
4138
</div>
@@ -48,7 +45,7 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
4845
}, [markAllAsRead]);
4946

5047
const noticesList = notifications.map((notification) => (
51-
<BaseNotification
48+
<S.RootNotification
5249
key={notification.id}
5350
type="info"
5451
title={
@@ -89,35 +86,36 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
8986
}
9087
description={
9188
<div>
89+
<S.TransactionWrapper>
9290
<div style={{ fontSize: '0.85rem', color: 'var(--text-light-color)', marginBottom: '4px' }}>
9391
{formatDate(notification.created_at)}
9492
</div>
9593

9694
<div style={{ marginBottom: '8px' }}>
97-
<strong>{t('payment.notifications.amount', 'Amount')}: </strong>
9895
{formatAmount(notification.amount)}
9996
</div>
97+
</S.TransactionWrapper>
10098

101-
<div style={{ fontSize: '0.85rem', color: 'var(--text-light-color)', marginTop: '4px' }}>
99+
{/* <div style={{ fontSize: '0.85rem', color: 'var(--text-light-color)', marginTop: '4px' }}>
102100
{t('payment.notifications.expiration', 'Expires')}: {formatDate(notification.expiration_date)}
103-
</div>
104-
101+
</div> */}
102+
<S.ActionRow>
103+
<Link to="/payment-notifications" style={{ fontSize: '0.85rem' }}>
104+
{t('payment.notifications.viewDetails', 'View details')}
105+
</Link>
105106
{!notification.is_read && (
106107
<BaseButton
107108
type="link"
108109
size="small"
109110
onClick={() => markAsRead(notification.id)}
110-
style={{ padding: '4px 0', height: 'auto', marginTop: '4px' }}
111+
style={{ padding: '4px 0', height: 'auto', marginTop: '4px', fontSize: '0.85rem' }}
111112
>
112113
{t('payment.notifications.markAsRead', 'Mark as read')}
113114
</BaseButton>
114115
)}
115116

116-
<div style={{ marginTop: '4px' }}>
117-
<Link to="/payment-notifications" style={{ fontSize: '0.85rem' }}>
118-
{t('payment.notifications.viewDetails', 'View details')}
119-
</Link>
120-
</div>
117+
118+
</S.ActionRow>
121119
</div>
122120
}
123121
/>
@@ -129,9 +127,9 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
129127
<BaseCol span={24}>
130128
{notifications.length > 0 ? (
131129
<S.NotificationsList>
132-
<BaseSpace direction="vertical" size={10} split={<S.SplitDivider />}>
130+
<S.NotificationsWrapper direction="vertical" size={10} split={<S.SplitDivider />} style={{ width: '95%' }}>
133131
{noticesList}
134-
</BaseSpace>
132+
</S.NotificationsWrapper>
135133
</S.NotificationsList>
136134
) : (
137135
<div style={{ textAlign: 'center', padding: '20px 0' }}>

‎src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts‎

Lines changed: 93 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import styled from 'styled-components';
2+
import { BaseCard } from '@app/components/common/BaseCard/BaseCard';
23
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
34
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
45
import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput';
5-
import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
6+
import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
7+
import { Card } from 'antd';
8+
import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
69

710
export const FiltersWrapper = styled.div`
811
margin-bottom: 1.5rem;
@@ -18,43 +21,61 @@ export const SplitDivider = styled.div`
1821
width: 100%;
1922
`;
2023

21-
export const NotificationItem = styled.div<{ $isRead: boolean; $isNew?: boolean }>`
24+
export const NotificationItem = styled(Card)<{ $isRead: boolean; $isNew?: boolean }>`
2225
position: relative;
2326
transition: all 0.3s ease;
24-
27+
width: 100%;
28+
background-color: var(--additional-background-color);
29+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
30+
border: none;
31+
.ant-space {
32+
background-color: transparent;
33+
}
34+
.anticon-info-circle {
35+
color: var(--text-light-color);
36+
width: 2.4rem;
37+
padding: 0 0.2rem;
38+
}
2539
${(props) =>
2640
!props.$isRead &&
2741
`
28-
background-color: var(--background-color);
2942
border-radius: ${BORDER_RADIUS};
3043
position: relative;
3144
3245
&::before {
3346
content: '';
3447
position: absolute;
35-
left: -0.5rem;
36-
top: 50%;
48+
left: -1.1rem;
49+
top: 2.4rem;
3750
transform: translateY(-50%);
3851
width: 0.5rem;
3952
height: 0.5rem;
4053
border-radius: 50%;
4154
background-color: var(--primary-color);
55+
56+
@media only screen and ${media.lg} {
57+
left: -2rem;
58+
}
4259
}
4360
`}
4461
4562
${(props) =>
4663
props.$isNew &&
4764
`
48-
border-left: 3px solid var(--success-color);
65+
border-left: 3px solid var(--success-color) !important;
4966
`}
5067
`;
51-
68+
export const NotificationHeader = styled(BaseRow)`
69+
color: var(--text-main-color);
70+
font-size: ${FONT_SIZE.md};
71+
`;
5272
export const NotificationContent = styled.div`
5373
padding-top: 0.5rem;
5474
`;
5575

5676
export const NotificationMeta = styled.div`
5777
display: flex;
78+
5879
flex-wrap: wrap;
5980
gap: 0.75rem;
6081
margin-bottom: 0.5rem;
@@ -70,11 +91,17 @@ export const MetaItem = styled.div`
7091
export const MetaLabel = styled.span`
7192
font-weight: ${FONT_WEIGHT.semibold};
7293
margin-right: 0.5rem;
94+
font-size: ${FONT_SIZE.md};
7395
`;
7496

7597
export const MetaValue = styled.span`
7698
display: inline-flex;
99+
font-size: ${FONT_SIZE.md};
77100
align-items: center;
101+
&:not(.date){
102+
color: var(--text-main-color);
103+
}
104+
78105
`;
79106

80107
export const CopyButton = styled(BaseButton)`
@@ -84,23 +111,24 @@ export const CopyButton = styled(BaseButton)`
84111
justify-content: center;
85112
font-size: ${FONT_SIZE.xs};
86113
padding: 2px 6px;
87-
height: 20px;
114+
height: 24px;
88115
border-radius: ${BORDER_RADIUS};
89116
background-color: var(--background-color);
90-
117+
91118
&:hover {
92119
background-color: var(--secondary-background-color);
93120
}
94121
`;
95122

96123
export const MarkReadButton = styled(BaseButton)`
97-
margin-top: 0.75rem;
98124
padding: 0;
99125
height: auto;
126+
font-size: ${FONT_SIZE.xs};
100127
`;
101128

102129
export const UserInput = styled(BaseInput)`
103130
width: 100%;
131+
background-color: var(--input-bg-color);
104132
`;
105133

106134
export const Text = styled(BaseTypography.Text)`
@@ -122,19 +150,23 @@ export const TierTag = styled.span<{ $tier: string }>`
122150
`;
123151

124152
export const NewSubscriberBadge = styled.span`
125-
display: inline-block;
126-
padding: 0.25rem 0.5rem;
153+
display: flex;
154+
align-items: center;
155+
padding: 0.5rem;
127156
border-radius: ${BORDER_RADIUS};
128157
font-size: ${FONT_SIZE.xs};
129158
font-weight: ${FONT_WEIGHT.semibold};
130159
margin-left: 0.5rem;
131160
background-color: var(--success-color);
161+
height: 1.5rem;
132162
color: var(--text-secondary-color);
133163
`;
134164

135165
export const AmountDisplay = styled.div`
136166
display: flex;
167+
font-size: ${FONT_SIZE.lg};
137168
flex-direction: column;
169+
align-items: flex-end;
138170
`;
139171

140172
export const SatAmount = styled.span`
@@ -150,12 +182,56 @@ export const ExpirationInfo = styled.div`
150182
margin-top: 0.5rem;
151183
font-size: ${FONT_SIZE.xs};
152184
color: var(--text-light-color);
153-
154-
${(props) => props.color === 'warning' && `
185+
font-weight: ${FONT_WEIGHT.regular};
186+
187+
${(props) =>
188+
props.color === 'warning' &&
189+
`
155190
color: var(--warning-color);
156191
`}
157-
158-
${(props) => props.color === 'error' && `
192+
193+
${(props) =>
194+
props.color === 'error' &&
195+
`
159196
color: var(--error-color);
160197
`}
161198
`;
199+
export const Root = styled(BaseCard)`
200+
padding: 0;
201+
padding-top: 1.25rem;
202+
min-width: fit-content;
203+
204+
.ant-space.ant-space-horizontal {
205+
width: 100%;
206+
}
207+
margin-left: 5%;
208+
margin-right: 5%;
209+
@media only screen and ${media.lg} {
210+
> .ant-card-head,
211+
> .ant-card-body {
212+
margin-left: 18%;
213+
margin-right: 18%;
214+
}
215+
}
216+
`;
217+
export const TransactionWrapper = styled.div`
218+
display: flex;
219+
justify-content: space-between;
220+
align-items: center;
221+
margin-bottom: 1.5rem;
222+
margin-top: 1.5rem;
223+
min-width: 65vw;
224+
@media only screen and ${media.lg} {
225+
min-width: 40vw;
226+
`;
227+
export const LeftSideTX = styled.div`
228+
display: flex;
229+
flex-direction: column;
230+
gap: 0.25rem;
231+
`;
232+
233+
export const CardFooter = styled.div`
234+
display: flex;
235+
justify-content: space-between;
236+
align-items: center;
237+
`;

0 commit comments

Comments
 (0)