Skip to content

Commit 751511d

Browse files
whosthatguywhosthatguy
committed
Update notification colors to liquid blue theme and restore smooth Bitcoin chart
1 parent ac125bb commit 751511d

7 files changed

Lines changed: 139 additions & 55 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const NotificationsList = styled.div`
3030
}
3131
3232
&::-webkit-scrollbar-thumb {
33-
background-color: var(--primary-color);
33+
background-color: rgba(6, 182, 212, 0.6);
3434
border-radius: 3px;
3535
}
3636
`;

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,10 @@ export const ReportNotificationsOverlay: React.FC<ReportNotificationsOverlayProp
5858
<span style={{
5959
fontSize: '0.7rem',
6060
padding: '2px 6px',
61-
background: 'rgba(245, 158, 11, 0.12)',
62-
color: 'rgba(245, 158, 11, 0.85)',
61+
background: notification.report_type === 'impersonation' ?
62+
'rgba(6, 182, 212, 0.12)' : 'rgba(245, 158, 11, 0.12)',
63+
color: notification.report_type === 'impersonation' ?
64+
'rgba(6, 182, 212, 0.9)' : 'rgba(245, 158, 11, 0.85)',
6365
borderRadius: '10px',
6466
textTransform: 'uppercase'
6567
}}>
@@ -71,8 +73,10 @@ export const ReportNotificationsOverlay: React.FC<ReportNotificationsOverlayProp
7173
<span style={{
7274
fontSize: '0.7rem',
7375
padding: '2px 6px',
74-
background: 'rgba(245, 158, 11, 0.12)',
75-
color: 'rgba(245, 158, 11, 0.85)',
76+
background: notification.report_type === 'impersonation' ?
77+
'rgba(6, 182, 212, 0.12)' : 'rgba(245, 158, 11, 0.12)',
78+
color: notification.report_type === 'impersonation' ?
79+
'rgba(6, 182, 212, 0.9)' : 'rgba(245, 158, 11, 0.85)',
7680
borderRadius: '10px'
7781
}}>
7882
{notification.report_count}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,29 @@ export const ScrollableWrapper = styled.div`
2222
-ms-overflow-style: none;
2323
`;
2424

25+
export const ScrollableContent = styled.div`
26+
height: calc(100vh - ${LAYOUT.desktop.headerHeight} - 8rem);
27+
overflow-y: auto;
28+
overflow-x: hidden;
29+
30+
/* Hide scrollbars completely while maintaining functionality */
31+
&::-webkit-scrollbar {
32+
width: 0;
33+
height: 0;
34+
display: none;
35+
}
36+
37+
/* Firefox */
38+
scrollbar-width: none;
39+
40+
/* IE/Edge */
41+
-ms-overflow-style: none;
42+
`;
43+
44+
export const ContentPadding = styled.div`
45+
padding: 1.25rem;
46+
`;
47+
2548
export const FiltersWrapper = styled.div`
2649
margin-bottom: 1.5rem;
2750
`;

‎src/components/payment/PaymentNotifications/PaymentNotifications.tsx‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ interface PaymentNotificationsProps {
1919

2020
export const PaymentNotifications: React.FC<PaymentNotificationsProps> = ({ className }) => {
2121
const { t } = useTranslation();
22-
const [filter, setFilter] = useState<'all' | 'unread'>('unread');
22+
const [filter, setFilter] = useState<'all' | 'unread'>('all');
2323

2424
const { notifications, pagination, isLoading, fetchNotifications, markAsRead, markAllAsRead } =
2525
usePaymentNotifications();
@@ -29,7 +29,7 @@ export const PaymentNotifications: React.FC<PaymentNotificationsProps> = ({ clas
2929
fetchNotifications({
3030
page: 1,
3131
limit: pagination?.pageSize || 10,
32-
filter: 'unread'
32+
filter: 'all'
3333
});
3434
}, [fetchNotifications, pagination?.pageSize]);
3535

@@ -60,24 +60,25 @@ export const PaymentNotifications: React.FC<PaymentNotificationsProps> = ({ clas
6060
};
6161

6262
return (
63-
<S.ScrollableWrapper>
64-
<BaseCard className={className} title={t('payment.notifications.title', 'Payment Notifications')} padding="1.25rem">
65-
<S.FiltersWrapper>
66-
<BaseRow gutter={[16, 16]} align="middle">
67-
<BaseCol xs={24} md={8}>
68-
<BaseSelect
69-
value={filter}
70-
onChange={handleFilterChange}
71-
options={[
72-
{ value: 'all', label: t('payment.notifications.filters.all', 'All Notifications') },
73-
{ value: 'unread', label: t('payment.notifications.filters.unread', 'Unread') }
74-
]}
75-
/>
76-
</BaseCol>
77-
</BaseRow>
78-
</S.FiltersWrapper>
79-
80-
{isLoading ? (
63+
<BaseCard className={className} title={t('payment.notifications.title', 'Payment Notifications')} padding="0">
64+
<S.ScrollableContent>
65+
<S.ContentPadding>
66+
<S.FiltersWrapper>
67+
<BaseRow gutter={[16, 16]} align="middle">
68+
<BaseCol xs={24} md={8}>
69+
<BaseSelect
70+
value={filter}
71+
onChange={handleFilterChange}
72+
options={[
73+
{ value: 'all', label: t('payment.notifications.filters.all', 'All Notifications') },
74+
{ value: 'unread', label: t('payment.notifications.filters.unread', 'Unread') }
75+
]}
76+
/>
77+
</BaseCol>
78+
</BaseRow>
79+
</S.FiltersWrapper>
80+
81+
{isLoading ? (
8182
<div style={{ textAlign: 'center', padding: '40px 0' }}>
8283
<div style={{ fontSize: '28px', marginBottom: '16px' }}>⏳</div>
8384
<S.Text style={{ fontSize: '16px' }}>
@@ -210,8 +211,9 @@ export const PaymentNotifications: React.FC<PaymentNotificationsProps> = ({ clas
210211
{t('payment.notifications.emptyDescription', 'Payment notifications will appear here when users subscribe to your services')}
211212
</S.Text>
212213
</div>
213-
)}
214-
</BaseCard>
215-
</S.ScrollableWrapper>
214+
)}
215+
</S.ContentPadding>
216+
</S.ScrollableContent>
217+
</BaseCard>
216218
);
217219
};

‎src/components/relay-dashboard/totalEarning/TotalEarningChart/TotalEarningChart.tsx‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,33 @@ export const TotalEarningChart: React.FC<TotalEarningChartProps> = ({ xAxisData,
4040
name: t('nft.earnings'),
4141
type: 'line',
4242
data: earningData.data.map((value, index) => [xAxisData[index], value]),
43-
showSymbol: true,
44-
symbolSize: 4,
45-
smooth: false,
43+
showSymbol: false,
44+
smooth: true,
4645
lineStyle: {
47-
width: 2,
46+
width: 3,
4847
color: themeObject[theme].chartColor3,
48+
shadowColor: 'rgba(0, 255, 255, 0.4)',
49+
shadowBlur: 10,
50+
shadowOffsetY: 3,
51+
},
52+
areaStyle: {
53+
color: {
54+
type: 'linear',
55+
x: 0,
56+
y: 0,
57+
x2: 0,
58+
y2: 1,
59+
colorStops: [
60+
{ offset: 0, color: 'rgba(0, 255, 255, 0.2)' },
61+
{ offset: 1, color: 'rgba(0, 255, 255, 0.02)' }
62+
],
63+
},
4964
},
5065
emphasis: {
5166
focus: 'series',
67+
lineStyle: {
68+
width: 4,
69+
},
5270
},
5371
encode: {
5472
x: 'date',

‎src/components/report/ReportNotifications/ReportNotifications.styles.ts‎

Lines changed: 52 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,29 @@ export const ScrollableWrapper = styled.div`
2222
-ms-overflow-style: none;
2323
`;
2424

25+
export const ScrollableContent = styled.div`
26+
height: calc(100vh - ${LAYOUT.desktop.headerHeight} - 8rem);
27+
overflow-y: auto;
28+
overflow-x: hidden;
29+
30+
/* Hide scrollbars completely while maintaining functionality */
31+
&::-webkit-scrollbar {
32+
width: 0;
33+
height: 0;
34+
display: none;
35+
}
36+
37+
/* Firefox */
38+
scrollbar-width: none;
39+
40+
/* IE/Edge */
41+
-ms-overflow-style: none;
42+
`;
43+
44+
export const ContentPadding = styled.div`
45+
padding: 1.25rem;
46+
`;
47+
2548
export const FiltersWrapper = styled.div`
2649
margin-bottom: 1.5rem;
2750
`;
@@ -33,18 +56,26 @@ export const SplitDivider = styled(Divider)`
3356
export const NotificationItem = styled.div<{ $isRead: boolean }>`
3457
padding: 0.75rem;
3558
border-radius: ${BORDER_RADIUS};
36-
transition: background-color 0.3s ease;
59+
transition: all 0.3s ease;
3760
margin-bottom: 1rem;
61+
background: rgba(0, 255, 255, 0.03);
62+
backdrop-filter: blur(10px);
63+
-webkit-backdrop-filter: blur(10px);
64+
border: 1px solid rgba(0, 255, 255, 0.1);
3865
3966
${({ $isRead }) =>
4067
!$isRead &&
4168
css`
42-
background-color: var(--background-color);
43-
border-left: 4px solid var(--warning-color);
69+
background: rgba(0, 255, 255, 0.05);
70+
border-left: 3px solid rgba(0, 255, 255, 0.4);
71+
box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
4472
`}
4573
4674
&:hover {
47-
background-color: var(--secondary-background-color);
75+
background: rgba(0, 255, 255, 0.06);
76+
border-color: rgba(0, 255, 255, 0.2);
77+
transform: translateY(-1px);
78+
box-shadow: 0 4px 20px rgba(0, 255, 255, 0.15);
4879
}
4980
`;
5081

@@ -93,10 +124,14 @@ export const CopyButton = styled(Button)`
93124
padding: 2px 6px;
94125
height: 20px;
95126
border-radius: ${BORDER_RADIUS};
96-
background-color: var(--background-color);
127+
background: rgba(255, 255, 255, 0.08);
128+
color: rgba(255, 255, 255, 0.7);
129+
border: 1px solid rgba(255, 255, 255, 0.1);
97130
98131
&:hover {
99-
background-color: var(--secondary-background-color);
132+
background: rgba(255, 255, 255, 0.12);
133+
color: rgba(255, 255, 255, 0.9);
134+
border-color: rgba(255, 255, 255, 0.2);
100135
}
101136
`;
102137

@@ -152,10 +187,10 @@ export const ReportBanner = styled.div<{ $reportType: string }>`
152187

153188
export const ContentPreviewContainer = styled.div`
154189
padding: 1rem;
155-
background-color: var(--background-color);
190+
background: rgba(0, 255, 255, 0.03);
156191
border-radius: ${BORDER_RADIUS};
157192
width: 100%;
158-
border: 1px solid var(--border-color);
193+
border: 1px solid rgba(0, 255, 255, 0.1);
159194
white-space: pre-wrap;
160195
word-break: break-word;
161196
font-size: ${FONT_SIZE.xs};
@@ -176,7 +211,7 @@ export const UserInput = styled(Input)`
176211
export const FooterWrapper = styled.div`
177212
margin-top: 1.5rem;
178213
padding-top: 1rem;
179-
border-top: 1px solid var(--border-color);
214+
border-top: 1px solid rgba(255, 255, 255, 0.08);
180215
`;
181216

182217
export const Text = styled.span`
@@ -237,9 +272,9 @@ export const ReportTypeTag = styled(Tag)<{ $type: string }>`
237272
`;
238273
case 'impersonation':
239274
return css`
240-
color: var(--primary-color);
241-
background: rgba(var(--primary-rgb-color), 0.1);
242-
border-color: var(--primary-color);
275+
color: rgba(6, 182, 212, 0.9);
276+
background: rgba(6, 182, 212, 0.12);
277+
border-color: rgba(6, 182, 212, 0.3);
243278
`;
244279
default:
245280
return css`
@@ -271,14 +306,14 @@ export const DeleteButton = styled(Button)`
271306
`;
272307

273308
export const ViewButton = styled(Button)`
274-
background-color: var(--primary-color);
275-
border-color: var(--primary-color);
309+
background-color: rgba(6, 182, 212, 0.9);
310+
border-color: rgba(6, 182, 212, 0.9);
276311
color: #fff;
277312
278313
&:hover, &:focus {
279-
background-color: var(--primary-color);
280-
border-color: var(--primary-color);
314+
background-color: rgba(6, 182, 212, 1);
315+
border-color: rgba(6, 182, 212, 1);
281316
color: #fff;
282-
opacity: 0.8;
317+
opacity: 0.9;
283318
}
284319
`;

‎src/components/report/ReportNotifications/ReportNotifications.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -143,9 +143,10 @@ export const ReportNotifications: React.FC<ReportNotificationsProps> = ({ classN
143143
};
144144

145145
return (
146-
<S.ScrollableWrapper>
147-
<BaseCard className={className} title={t('report.notifications.title', 'Report Notifications')} padding="1.25rem">
148-
<S.FiltersWrapper>
146+
<BaseCard className={className} title={t('report.notifications.title', 'Report Notifications')} padding="0">
147+
<S.ScrollableContent>
148+
<S.ContentPadding>
149+
<S.FiltersWrapper>
149150
<BaseRow gutter={[16, 16]} align="middle">
150151
<BaseCol xs={24} md={8}>
151152
<BaseSelect
@@ -365,8 +366,9 @@ export const ReportNotifications: React.FC<ReportNotificationsProps> = ({ classN
365366
<Paragraph>Loading content...</Paragraph>
366367
</div>
367368
)}
368-
</Modal>
369-
</BaseCard>
370-
</S.ScrollableWrapper>
369+
</Modal>
370+
</S.ContentPadding>
371+
</S.ScrollableContent>
372+
</BaseCard>
371373
);
372374
};

0 commit comments

Comments
 (0)