Skip to content

Commit c818935

Browse files
whosthatguywhosthatguy
committed
Update Nostr Statistics page with 3D liquid blue/cyan theme - enhanced glass morphism and depth effects
1 parent 3c9791d commit c818935

4 files changed

Lines changed: 313 additions & 51 deletions

File tree

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

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,42 @@ import { FONT_SIZE } from '@app/styles/themes/constants';
44

55
export const Table = styled(AntdTable)`
66
& thead .ant-table-cell {
7-
color: var(--primary-color);
7+
color: rgba(0, 255, 255, 1);
88
font-size: ${FONT_SIZE.xs};
99
line-height: 1.25rem;
10+
font-weight: 600;
11+
background: linear-gradient(135deg,
12+
rgba(0, 191, 255, 0.12) 0%,
13+
rgba(0, 255, 255, 0.08) 100%);
14+
text-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
15+
border-bottom: 2px solid rgba(0, 255, 255, 0.3);
16+
position: relative;
17+
18+
&::before {
19+
content: '';
20+
position: absolute;
21+
bottom: 0;
22+
left: 0;
23+
right: 0;
24+
height: 2px;
25+
background: linear-gradient(90deg,
26+
transparent 0%,
27+
rgba(0, 255, 255, 0.6) 50%,
28+
transparent 100%);
29+
}
1030
1131
& .anticon {
12-
color: var(--primary-color);
32+
color: rgba(0, 255, 255, 1);
33+
filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.8));
1334
}
1435
}
36+
1537
1638
& tbody .ant-table-cell {
17-
color: var(--text-main-color);
39+
color: rgba(255, 255, 255, 0.9);
1840
font-size: ${FONT_SIZE.xs};
1941
line-height: 1.25rem;
42+
border-bottom: 1px solid rgba(0, 191, 255, 0.15);
2043
}
2144
2245
/* Ensure expanded rows have transparent background */

‎src/components/tables/Tables/Tables.styles.ts‎

Lines changed: 175 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,88 @@
11
import styled from 'styled-components';
22
import { BaseCard as CommonCard } from '@app/components/common/BaseCard/BaseCard';
3-
const borderRad = '.5rem';
3+
const borderRad = '12px';
44
export const TablesWrapper = styled.div`
55
margin-top: 1.875rem;
66
7+
/* Main table styling with glass morphism and 3D effects */
8+
.ant-table-wrapper {
9+
background: linear-gradient(135deg,
10+
rgba(0, 191, 255, 0.08) 0%,
11+
rgba(0, 255, 255, 0.04) 100%);
12+
backdrop-filter: blur(20px);
13+
-webkit-backdrop-filter: blur(20px);
14+
border-radius: 16px;
15+
padding: 2px;
16+
box-shadow:
17+
0 20px 40px rgba(0, 191, 255, 0.15),
18+
0 10px 20px rgba(0, 255, 255, 0.1),
19+
inset 0 2px 4px rgba(0, 255, 255, 0.2),
20+
inset 0 -2px 4px rgba(0, 191, 255, 0.1);
21+
transform: translateZ(0);
22+
transform-style: preserve-3d;
23+
}
24+
25+
/* Table header with 3D effect */
26+
.ant-table-thead > tr > th {
27+
background: linear-gradient(135deg,
28+
rgba(0, 191, 255, 0.15) 0%,
29+
rgba(0, 255, 255, 0.1) 100%);
30+
border-bottom: 2px solid rgba(0, 255, 255, 0.3);
31+
color: rgba(0, 255, 255, 1);
32+
font-weight: 600;
33+
text-shadow:
34+
0 0 20px rgba(0, 255, 255, 0.5),
35+
0 2px 4px rgba(0, 0, 0, 0.3);
36+
position: relative;
37+
38+
&::after {
39+
content: '';
40+
position: absolute;
41+
bottom: -2px;
42+
left: 0;
43+
right: 0;
44+
height: 1px;
45+
background: linear-gradient(90deg,
46+
transparent 0%,
47+
rgba(0, 255, 255, 0.8) 50%,
48+
transparent 100%);
49+
}
50+
}
51+
52+
/* Table row hover effect - highlight only */
753
.ant-table-row {
8-
transition: all 0.3s ease;
54+
transition: background 0.3s ease;
955
1056
&:hover {
11-
background: rgba(0, 191, 255, 0.05) !important;
57+
background: linear-gradient(135deg,
58+
rgba(0, 191, 255, 0.12) 0%,
59+
rgba(0, 255, 255, 0.08) 100%) !important;
1260
}
1361
1462
&.expanded-row {
15-
background: rgba(0, 191, 255, 0.08) !important;
63+
background: linear-gradient(135deg,
64+
rgba(0, 191, 255, 0.15) 0%,
65+
rgba(0, 255, 255, 0.1) 100%) !important;
1666
1767
td {
18-
border-bottom: 1px solid rgba(0, 191, 255, 0.2) !important;
68+
border-bottom: 2px solid rgba(0, 255, 255, 0.3) !important;
1969
}
2070
}
2171
}
2272
73+
/* Table cells with depth */
74+
.ant-table-tbody > tr > td {
75+
border-bottom: 1px solid rgba(0, 191, 255, 0.1);
76+
transition: all 0.3s ease;
77+
position: relative;
78+
79+
&:first-child {
80+
font-weight: 500;
81+
color: rgba(0, 255, 255, 0.95);
82+
}
83+
}
84+
85+
/* Expanded row container with glass effect */
2386
.ant-table-expanded-row {
2487
background: transparent !important;
2588
@@ -31,27 +94,50 @@ export const TablesWrapper = styled.div`
3194
padding: 0 !important;
3295
background: transparent !important;
3396
background-color: transparent !important;
34-
border-bottom: 1px solid rgba(0, 191, 255, 0.2) !important;
97+
border-bottom: 2px solid rgba(0, 255, 255, 0.2) !important;
98+
box-shadow: 0 4px 8px rgba(0, 191, 255, 0.1);
3599
}
36100
37101
.ant-table-expanded-row-fixed {
38102
background: transparent !important;
39103
}
40104
}
41105
106+
/* Cursor and interaction */
42107
.ant-table-tbody > tr {
43108
cursor: pointer;
44109
}
45110
111+
/* Expand icons with glow effect */
46112
.anticon-caret-down,
47113
.anticon-caret-right {
48-
color: rgba(0, 191, 255, 1);
114+
color: rgba(0, 255, 255, 1);
49115
font-size: 14px;
50-
transition: transform 0.3s ease;
116+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
117+
filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.8));
51118
}
52119
53120
.anticon-caret-down {
54-
filter: drop-shadow(0 0 4px rgba(0, 191, 255, 0.8));
121+
transform: rotateX(0deg);
122+
filter: drop-shadow(0 0 8px rgba(0, 255, 255, 1));
123+
}
124+
125+
.anticon-caret-right:hover {
126+
transform: scale(1.2);
127+
filter: drop-shadow(0 0 12px rgba(0, 255, 255, 1));
128+
}
129+
130+
/* Sorting arrows with 3D effect */
131+
.ant-table-column-sorters {
132+
.anticon {
133+
color: rgba(0, 255, 255, 0.6);
134+
transition: all 0.3s ease;
135+
136+
&.active {
137+
color: rgba(0, 255, 255, 1);
138+
filter: drop-shadow(0 0 8px rgba(0, 255, 255, 1));
139+
}
140+
}
55141
}
56142
57143
/* Ensure chart backgrounds are transparent */
@@ -79,36 +165,103 @@ export const TablesWrapper = styled.div`
79165

80166
export const Card = styled(CommonCard)`
81167
margin-bottom: 2rem;
168+
background: linear-gradient(135deg,
169+
rgba(0, 10, 20, 0.95) 0%,
170+
rgba(0, 20, 40, 0.9) 100%);
171+
backdrop-filter: blur(30px);
172+
-webkit-backdrop-filter: blur(30px);
173+
border: 1px solid rgba(0, 255, 255, 0.2);
174+
border-radius: 16px;
175+
box-shadow:
176+
0 24px 48px rgba(0, 191, 255, 0.2),
177+
0 12px 24px rgba(0, 255, 255, 0.15),
178+
inset 0 2px 4px rgba(0, 255, 255, 0.3),
179+
inset 0 -2px 4px rgba(0, 191, 255, 0.2);
180+
transform: translateZ(0);
181+
transform-style: preserve-3d;
182+
position: relative;
183+
overflow: visible;
184+
185+
&::before {
186+
content: '';
187+
position: absolute;
188+
top: -1px;
189+
left: -1px;
190+
right: -1px;
191+
bottom: -1px;
192+
background: linear-gradient(135deg,
193+
rgba(0, 255, 255, 0.4) 0%,
194+
transparent 30%,
195+
transparent 70%,
196+
rgba(0, 191, 255, 0.4) 100%);
197+
border-radius: 16px;
198+
opacity: 0.6;
199+
z-index: -1;
200+
}
201+
202+
.ant-card-head {
203+
border-bottom: 2px solid rgba(0, 255, 255, 0.2);
204+
background: linear-gradient(135deg,
205+
rgba(0, 191, 255, 0.08) 0%,
206+
rgba(0, 255, 255, 0.04) 100%);
207+
208+
.ant-card-head-title {
209+
color: rgba(0, 255, 255, 1);
210+
text-shadow:
211+
0 0 20px rgba(0, 255, 255, 0.6),
212+
0 2px 4px rgba(0, 0, 0, 0.4);
213+
font-weight: 600;
214+
font-size: 1.2rem;
215+
}
216+
}
217+
82218
.table-mobile > div.ant-card-head-title {
83219
padding-bottom: 0.3rem !important;
84220
}
221+
85222
.ant-card-body {
86-
padding: 0 .8rem 0.8rem 0.8rem;
223+
padding: 1.2rem;
87224
width: 100%;
225+
background: transparent;
88226
}
227+
89228
.ant-card-head-title {
90229
padding: 0;
91230
margin: 1rem 0rem 1rem 0rem;
92231
}
232+
93233
.ant-table-tbody > tr > td {
94-
padding: 0.8rem;
234+
padding: 1rem;
235+
transition: all 0.3s ease;
95236
}
96237
97238
div.ant-table.ant-table-bordered,
98239
div.ant-table-container,
99240
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table {
100241
border-radius: ${borderRad};
242+
border: 1px solid rgba(0, 255, 255, 0.15);
243+
overflow: hidden;
101244
}
102-
.ant-table-container table > thead > tr:first-child th:first-child {
103-
border-top-left-radius: ${borderRad};
104-
}
105-
.ant-table-container table > thead > tr:first-child th:last-child {
106-
border-top-right-radius: ${borderRad};
107-
}
108-
.ant-table-container table > tbody > tr:last-child td:last-child {
109-
border-bottom-right-radius: ${borderRad};
110-
}
111-
.ant-table-container table > tbody > tr:last-child td:first-child {
112-
border-bottom-left-radius: ${borderRad};
245+
246+
.ant-table-container {
247+
box-shadow:
248+
inset 0 2px 4px rgba(0, 255, 255, 0.1),
249+
inset 0 -2px 4px rgba(0, 191, 255, 0.05);
250+
251+
table > thead > tr:first-child th:first-child {
252+
border-top-left-radius: ${borderRad};
253+
}
254+
255+
table > thead > tr:first-child th:last-child {
256+
border-top-right-radius: ${borderRad};
257+
}
258+
259+
table > tbody > tr:last-child td:last-child {
260+
border-bottom-right-radius: ${borderRad};
261+
}
262+
263+
table > tbody > tr:last-child td:first-child {
264+
border-bottom-left-radius: ${borderRad};
265+
}
113266
}
114267
`;

‎src/components/tables/Tables/Tables.tsx‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,24 +30,42 @@ export const Tables: React.FC = () => {
3030
icon={allExpanded ? <ShrinkOutlined /> : <ExpandOutlined />}
3131
onClick={toggleAllExpanded}
3232
style={{
33-
background: 'rgba(0, 255, 255, 0.1)',
34-
border: '1px solid rgba(0, 255, 255, 0.3)',
35-
color: 'rgba(0, 255, 255, 0.9)',
36-
padding: '4px 12px',
37-
borderRadius: '6px',
38-
fontSize: '13px',
39-
fontWeight: 500,
40-
transition: 'all 0.3s ease',
33+
background: 'linear-gradient(135deg, rgba(0, 255, 255, 0.15) 0%, rgba(0, 191, 255, 0.1) 100%)',
34+
border: '2px solid rgba(0, 255, 255, 0.3)',
35+
color: 'rgba(0, 255, 255, 1)',
36+
padding: '8px 16px',
37+
borderRadius: '12px',
38+
fontSize: '14px',
39+
fontWeight: 600,
40+
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
41+
boxShadow: `
42+
0 4px 12px rgba(0, 255, 255, 0.2),
43+
inset 0 1px 2px rgba(0, 255, 255, 0.3),
44+
inset 0 -1px 2px rgba(0, 191, 255, 0.2)`,
45+
textShadow: '0 0 8px rgba(0, 255, 255, 0.6)',
46+
transform: 'translateZ(0) perspective(1000px)',
47+
transformStyle: 'preserve-3d',
4148
}}
4249
onMouseEnter={(e) => {
43-
e.currentTarget.style.background = 'rgba(0, 255, 255, 0.2)';
50+
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(0, 255, 255, 0.25) 0%, rgba(0, 191, 255, 0.2) 100%)';
4451
e.currentTarget.style.borderColor = 'rgba(0, 255, 255, 0.5)';
45-
e.currentTarget.style.boxShadow = '0 0 10px rgba(0, 255, 255, 0.3)';
52+
e.currentTarget.style.boxShadow = `
53+
0 8px 24px rgba(0, 255, 255, 0.35),
54+
inset 0 2px 4px rgba(0, 255, 255, 0.4),
55+
inset 0 -2px 4px rgba(0, 191, 255, 0.3),
56+
0 0 40px rgba(0, 255, 255, 0.2)`;
57+
e.currentTarget.style.transform = 'translateZ(0) perspective(1000px) translateY(-2px) scale(1.05)';
58+
e.currentTarget.style.textShadow = '0 0 12px rgba(0, 255, 255, 0.8)';
4659
}}
4760
onMouseLeave={(e) => {
48-
e.currentTarget.style.background = 'rgba(0, 255, 255, 0.1)';
61+
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(0, 255, 255, 0.15) 0%, rgba(0, 191, 255, 0.1) 100%)';
4962
e.currentTarget.style.borderColor = 'rgba(0, 255, 255, 0.3)';
50-
e.currentTarget.style.boxShadow = 'none';
63+
e.currentTarget.style.boxShadow = `
64+
0 4px 12px rgba(0, 255, 255, 0.2),
65+
inset 0 1px 2px rgba(0, 255, 255, 0.3),
66+
inset 0 -1px 2px rgba(0, 191, 255, 0.2)`;
67+
e.currentTarget.style.transform = 'translateZ(0) perspective(1000px)';
68+
e.currentTarget.style.textShadow = '0 0 8px rgba(0, 255, 255, 0.6)';
5169
}}
5270
>
5371
{allExpanded ? 'Collapse All' : 'Expand All'}

0 commit comments

Comments
 (0)