Skip to content

Commit a7c5125

Browse files
whosthatguywhosthatguy
committed
Update Payment Notifications to match liquid blue/cyan theme from Paid Subscribers - Apply glass morphism effects and cyan color scheme to BaseNotification icons and notification items
1 parent 183365e commit a7c5125

2 files changed

Lines changed: 195 additions & 28 deletions

File tree

‎src/components/common/BaseNotification/BaseNotification.styles.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@ export const SpaceWrapper = styled(BaseSpace)<SpacewWrapperProps>`
3636
color: var(--${props.type}-color);
3737
`;
3838
case 'info':
39+
return css`
40+
/* Liquid cyan theme colors to match Paid Subscribers */
41+
color: rgba(45, 212, 191, 0.95);
42+
filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.3));
43+
`;
3944
case 'mention':
4045
return css`
4146
color: var(--primary-color);
@@ -48,5 +53,22 @@ export const SpaceWrapper = styled(BaseSpace)<SpacewWrapperProps>`
4853
4954
& span[role='img'] {
5055
font-size: 2rem;
56+
57+
/* Add glow effect for info icons */
58+
${(props) => props.type === 'info' && css`
59+
animation: pulseGlow 2s ease-in-out infinite;
60+
61+
@keyframes pulseGlow {
62+
0% {
63+
filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.3));
64+
}
65+
50% {
66+
filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.5));
67+
}
68+
100% {
69+
filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.3));
70+
}
71+
}
72+
`}
5173
}
5274
`;

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

Lines changed: 173 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -56,26 +56,63 @@ export const SplitDivider = styled(Divider)`
5656
export const NotificationItem = styled.div<{ $isRead: boolean }>`
5757
padding: 0.75rem;
5858
border-radius: ${BORDER_RADIUS};
59-
transition: all 0.3s ease;
59+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
6060
margin-bottom: 1rem;
61-
background: rgba(0, 255, 255, 0.03);
61+
62+
/* Glass morphism background matching Paid Subscribers */
63+
background: linear-gradient(to bottom right,
64+
rgba(20, 184, 166, 0.08), /* from-teal-500/8 */
65+
rgba(6, 182, 212, 0.06), /* via-cyan-500/6 */
66+
rgba(34, 197, 94, 0.08) /* to-green-500/8 */
67+
);
68+
6269
backdrop-filter: blur(10px);
6370
-webkit-backdrop-filter: blur(10px);
64-
border: 1px solid rgba(0, 255, 255, 0.1);
71+
border: 1px solid rgba(45, 212, 191, 0.2);
72+
position: relative;
73+
overflow: hidden;
74+
75+
/* Glass overlay effect */
76+
&::before {
77+
content: '';
78+
position: absolute;
79+
top: 0;
80+
left: 0;
81+
right: 0;
82+
height: 50%;
83+
background: linear-gradient(
84+
180deg,
85+
rgba(255, 255, 255, 0.05) 0%,
86+
transparent 100%
87+
);
88+
pointer-events: none;
89+
}
6590
6691
${({ $isRead }) =>
6792
!$isRead &&
6893
css`
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);
94+
background: linear-gradient(to bottom right,
95+
rgba(20, 184, 166, 0.12),
96+
rgba(6, 182, 212, 0.10),
97+
rgba(34, 197, 94, 0.12)
98+
);
99+
border-left: 3px solid rgba(45, 212, 191, 0.6);
100+
box-shadow:
101+
inset 0 2px 8px rgba(45, 212, 191, 0.15),
102+
0 0 20px rgba(6, 182, 212, 0.15);
72103
`}
73104
74105
&:hover {
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);
106+
background: linear-gradient(to bottom right,
107+
rgba(20, 184, 166, 0.15),
108+
rgba(6, 182, 212, 0.12),
109+
rgba(34, 197, 94, 0.15)
110+
);
111+
border-color: rgba(45, 212, 191, 0.35);
112+
transform: translateY(-2px);
113+
box-shadow:
114+
inset 0 3px 12px rgba(45, 212, 191, 0.2),
115+
0 0 30px rgba(6, 182, 212, 0.2);
79116
}
80117
`;
81118

@@ -124,14 +161,28 @@ export const CopyButton = styled(Button)`
124161
padding: 2px 6px;
125162
height: 20px;
126163
border-radius: ${BORDER_RADIUS};
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);
164+
165+
/* Liquid glass effect matching theme */
166+
background: linear-gradient(to bottom right,
167+
rgba(20, 184, 166, 0.15),
168+
rgba(6, 182, 212, 0.12),
169+
rgba(34, 197, 94, 0.15)
170+
);
171+
color: rgba(45, 212, 191, 0.9);
172+
border: 1px solid rgba(45, 212, 191, 0.25);
173+
backdrop-filter: blur(5px);
174+
transition: all 0.3s ease;
130175
131176
&:hover {
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);
177+
background: linear-gradient(to bottom right,
178+
rgba(20, 184, 166, 0.20),
179+
rgba(6, 182, 212, 0.18),
180+
rgba(34, 197, 94, 0.20)
181+
);
182+
color: rgba(45, 212, 191, 1);
183+
border-color: rgba(45, 212, 191, 0.4);
184+
box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
185+
transform: scale(1.05);
135186
}
136187
`;
137188

@@ -147,26 +198,58 @@ export const ContentContainer = styled.div`
147198

148199
export const PaymentBanner = styled.div<{ $paymentType: string }>`
149200
padding: 6px 12px;
150-
background: rgba(255, 255, 255, 0.08);
151-
color: rgba(255, 255, 255, 0.85);
152201
font-size: ${FONT_SIZE.xs};
153202
font-weight: ${FONT_WEIGHT.medium};
154203
border-radius: 6px;
155204
margin-bottom: 0.5rem;
156205
display: flex;
157206
align-items: center;
158207
gap: 6px;
159-
border: 1px solid rgba(255, 255, 255, 0.1);
208+
backdrop-filter: blur(5px);
209+
-webkit-backdrop-filter: blur(5px);
210+
position: relative;
211+
overflow: hidden;
212+
transition: all 0.3s ease;
160213
161214
${({ $paymentType }) => {
162215
if ($paymentType === 'new') {
163216
return css`
164-
background: rgba(6, 182, 212, 0.12);
165-
color: rgba(6, 182, 212, 0.9);
166-
border-color: rgba(6, 182, 212, 0.2);
217+
background: linear-gradient(to bottom right,
218+
rgba(20, 184, 166, 0.20),
219+
rgba(6, 182, 212, 0.18),
220+
rgba(34, 197, 94, 0.20)
221+
);
222+
color: rgba(45, 212, 191, 1);
223+
border: 1px solid rgba(45, 212, 191, 0.3);
224+
box-shadow:
225+
inset 0 2px 6px rgba(45, 212, 191, 0.2),
226+
0 0 12px rgba(6, 182, 212, 0.15);
227+
228+
&::before {
229+
content: '';
230+
position: absolute;
231+
top: 0;
232+
left: 0;
233+
right: 0;
234+
height: 50%;
235+
background: linear-gradient(
236+
180deg,
237+
rgba(255, 255, 255, 0.08) 0%,
238+
transparent 100%
239+
);
240+
pointer-events: none;
241+
}
167242
`;
168243
}
169-
return '';
244+
return css`
245+
background: linear-gradient(to bottom right,
246+
rgba(20, 184, 166, 0.12),
247+
rgba(6, 182, 212, 0.10),
248+
rgba(34, 197, 94, 0.12)
249+
);
250+
color: rgba(255, 255, 255, 0.85);
251+
border: 1px solid rgba(45, 212, 191, 0.2);
252+
`;
170253
}}
171254
`;
172255

@@ -182,6 +265,43 @@ export const ExpirationInfo = styled.div`
182265
export const MarkReadButton = styled(Button)`
183266
align-self: flex-start;
184267
margin-top: 0.5rem;
268+
269+
/* Liquid glass button styling */
270+
background: linear-gradient(to bottom right,
271+
rgba(20, 184, 166, 0.20),
272+
rgba(6, 182, 212, 0.15),
273+
rgba(34, 197, 94, 0.20)
274+
) !important;
275+
276+
backdrop-filter: blur(8px);
277+
-webkit-backdrop-filter: blur(8px);
278+
border: 1px solid rgba(45, 212, 191, 0.25) !important;
279+
color: rgba(45, 212, 191, 0.95) !important;
280+
281+
box-shadow:
282+
inset 0 2px 8px rgba(45, 212, 191, 0.25),
283+
0 0 12px rgba(6, 182, 212, 0.15);
284+
285+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
286+
287+
&:hover {
288+
background: linear-gradient(to bottom right,
289+
rgba(20, 184, 166, 0.25),
290+
rgba(6, 182, 212, 0.20),
291+
rgba(34, 197, 94, 0.25)
292+
) !important;
293+
294+
border-color: rgba(45, 212, 191, 0.35) !important;
295+
transform: translateY(-1px);
296+
297+
box-shadow:
298+
inset 0 3px 10px rgba(45, 212, 191, 0.30),
299+
0 0 20px rgba(6, 182, 212, 0.20);
300+
}
301+
302+
&:active {
303+
transform: translateY(0);
304+
}
185305
`;
186306

187307
export const UserInput = styled(Input)`
@@ -229,19 +349,44 @@ export const PaymentTypeTag = styled(Tag)<{ $type: string }>`
229349
font-weight: ${FONT_WEIGHT.semibold};
230350
text-transform: uppercase;
231351
margin-right: 8px;
352+
backdrop-filter: blur(5px);
353+
transition: all 0.3s ease;
232354
233355
${({ $type }) => {
234356
if ($type === 'new') {
235357
return css`
236-
color: rgba(6, 182, 212, 0.9);
237-
background: rgba(6, 182, 212, 0.12);
238-
border-color: rgba(6, 182, 212, 0.3);
358+
color: rgba(45, 212, 191, 1);
359+
background: linear-gradient(135deg,
360+
rgba(20, 184, 166, 0.18),
361+
rgba(6, 182, 212, 0.15)
362+
);
363+
border: 1px solid rgba(45, 212, 191, 0.35);
364+
box-shadow: 0 0 8px rgba(6, 182, 212, 0.2);
365+
366+
&:hover {
367+
background: linear-gradient(135deg,
368+
rgba(20, 184, 166, 0.25),
369+
rgba(6, 182, 212, 0.20)
370+
);
371+
box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
372+
}
239373
`;
240374
}
241375
return css`
242376
color: rgba(255, 255, 255, 0.85);
243-
background: rgba(255, 255, 255, 0.08);
244-
border-color: rgba(255, 255, 255, 0.2);
377+
background: linear-gradient(135deg,
378+
rgba(45, 212, 191, 0.08),
379+
rgba(6, 182, 212, 0.06)
380+
);
381+
border: 1px solid rgba(45, 212, 191, 0.2);
382+
383+
&:hover {
384+
background: linear-gradient(135deg,
385+
rgba(45, 212, 191, 0.12),
386+
rgba(6, 182, 212, 0.10)
387+
);
388+
border-color: rgba(45, 212, 191, 0.3);
389+
}
245390
`;
246391
}}
247392
`;

0 commit comments

Comments
 (0)