Skip to content

Commit f6f4ba0

Browse files
whosthatguywhosthatguy
committed
Apply 3D liquid blue/cyan theme to Nostr Statistics page - subtle colors, no animations, clean table layout
1 parent c818935 commit f6f4ba0

4 files changed

Lines changed: 120 additions & 92 deletions

File tree

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

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

55
export const Table = styled(AntdTable)`
66
& thead .ant-table-cell {
7-
color: rgba(0, 255, 255, 1);
7+
color: rgba(0, 178, 178, 0.9);
88
font-size: ${FONT_SIZE.xs};
99
line-height: 1.25rem;
1010
font-weight: 600;
1111
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);
12+
rgba(0, 139, 178, 0.08) 0%,
13+
rgba(0, 178, 178, 0.05) 100%);
14+
text-shadow: 0 0 8px rgba(0, 178, 178, 0.3);
15+
border-bottom: 2px solid rgba(0, 178, 178, 0.25);
1616
position: relative;
1717
1818
&::before {
@@ -24,22 +24,22 @@ export const Table = styled(AntdTable)`
2424
height: 2px;
2525
background: linear-gradient(90deg,
2626
transparent 0%,
27-
rgba(0, 255, 255, 0.6) 50%,
27+
rgba(0, 178, 178, 0.4) 50%,
2828
transparent 100%);
2929
}
3030
3131
& .anticon {
32-
color: rgba(0, 255, 255, 1);
33-
filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.8));
32+
color: rgba(0, 178, 178, 0.8);
33+
filter: drop-shadow(0 0 3px rgba(0, 178, 178, 0.5));
3434
}
3535
}
3636
3737
3838
& tbody .ant-table-cell {
39-
color: rgba(255, 255, 255, 0.9);
39+
color: rgba(255, 255, 255, 0.85);
4040
font-size: ${FONT_SIZE.xs};
4141
line-height: 1.25rem;
42-
border-bottom: 1px solid rgba(0, 191, 255, 0.15);
42+
border-bottom: 1px solid rgba(0, 139, 178, 0.12);
4343
}
4444
4545
/* Ensure expanded rows have transparent background */
@@ -66,12 +66,28 @@ export const Table = styled(AntdTable)`
6666
margin-top: 0;
6767
}
6868
69-
// Override default antd selector
69+
// Override default antd selector - remove vertical lines
7070
&
7171
.ant-table-thead
7272
> tr
7373
> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
74-
background-color: var(--primary-color);
74+
display: none;
75+
}
76+
77+
/* Remove all vertical borders from Ant table cells */
78+
& .ant-table-cell {
79+
border-right: none !important;
80+
border-left: none !important;
81+
}
82+
83+
& .ant-table-thead > tr > th {
84+
border-right: none !important;
85+
border-left: none !important;
86+
}
87+
88+
& .ant-table-tbody > tr > td {
89+
border-right: none !important;
90+
border-left: none !important;
7591
}
7692
7793
& .ant-pagination-prev,

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

Lines changed: 57 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,31 @@ export const TablesWrapper = styled.div`
77
/* Main table styling with glass morphism and 3D effects */
88
.ant-table-wrapper {
99
background: linear-gradient(135deg,
10-
rgba(0, 191, 255, 0.08) 0%,
11-
rgba(0, 255, 255, 0.04) 100%);
10+
rgba(0, 139, 178, 0.06) 0%,
11+
rgba(0, 178, 178, 0.03) 100%);
1212
backdrop-filter: blur(20px);
1313
-webkit-backdrop-filter: blur(20px);
1414
border-radius: 16px;
1515
padding: 2px;
1616
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);
17+
0 20px 40px rgba(0, 139, 178, 0.12),
18+
0 10px 20px rgba(0, 178, 178, 0.08),
19+
inset 0 2px 4px rgba(0, 178, 178, 0.15),
20+
inset 0 -2px 4px rgba(0, 139, 178, 0.08);
2121
transform: translateZ(0);
2222
transform-style: preserve-3d;
2323
}
2424
2525
/* Table header with 3D effect */
2626
.ant-table-thead > tr > th {
2727
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);
28+
rgba(0, 139, 178, 0.10) 0%,
29+
rgba(0, 178, 178, 0.06) 100%);
30+
border-bottom: 2px solid rgba(0, 178, 178, 0.25);
31+
color: rgba(0, 178, 178, 0.9);
3232
font-weight: 600;
3333
text-shadow:
34-
0 0 20px rgba(0, 255, 255, 0.5),
34+
0 0 12px rgba(0, 178, 178, 0.3),
3535
0 2px 4px rgba(0, 0, 0, 0.3);
3636
position: relative;
3737
@@ -44,7 +44,7 @@ export const TablesWrapper = styled.div`
4444
height: 1px;
4545
background: linear-gradient(90deg,
4646
transparent 0%,
47-
rgba(0, 255, 255, 0.8) 50%,
47+
rgba(0, 178, 178, 0.5) 50%,
4848
transparent 100%);
4949
}
5050
}
@@ -55,30 +55,30 @@ export const TablesWrapper = styled.div`
5555
5656
&:hover {
5757
background: linear-gradient(135deg,
58-
rgba(0, 191, 255, 0.12) 0%,
59-
rgba(0, 255, 255, 0.08) 100%) !important;
58+
rgba(0, 139, 178, 0.08) 0%,
59+
rgba(0, 178, 178, 0.05) 100%) !important;
6060
}
6161
6262
&.expanded-row {
6363
background: linear-gradient(135deg,
64-
rgba(0, 191, 255, 0.15) 0%,
65-
rgba(0, 255, 255, 0.1) 100%) !important;
64+
rgba(0, 139, 178, 0.10) 0%,
65+
rgba(0, 178, 178, 0.06) 100%) !important;
6666
6767
td {
68-
border-bottom: 2px solid rgba(0, 255, 255, 0.3) !important;
68+
border-bottom: 2px solid rgba(0, 178, 178, 0.25) !important;
6969
}
7070
}
7171
}
7272
7373
/* Table cells with depth */
7474
.ant-table-tbody > tr > td {
75-
border-bottom: 1px solid rgba(0, 191, 255, 0.1);
75+
border-bottom: 1px solid rgba(0, 139, 178, 0.08);
7676
transition: all 0.3s ease;
7777
position: relative;
7878
7979
&:first-child {
8080
font-weight: 500;
81-
color: rgba(0, 255, 255, 0.95);
81+
color: rgba(0, 178, 178, 0.85);
8282
}
8383
}
8484
@@ -94,8 +94,8 @@ export const TablesWrapper = styled.div`
9494
padding: 0 !important;
9595
background: transparent !important;
9696
background-color: transparent !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);
97+
border-bottom: 2px solid rgba(0, 178, 178, 0.15) !important;
98+
box-shadow: 0 4px 8px rgba(0, 139, 178, 0.08);
9999
}
100100
101101
.ant-table-expanded-row-fixed {
@@ -108,34 +108,46 @@ export const TablesWrapper = styled.div`
108108
cursor: pointer;
109109
}
110110
111-
/* Expand icons with glow effect */
111+
/* Remove any vertical borders from table cells */
112+
.ant-table-cell {
113+
border-right: none !important;
114+
border-left: none !important;
115+
}
116+
117+
.ant-table-thead > tr > th,
118+
.ant-table-tbody > tr > td {
119+
border-right: none !important;
120+
border-left: none !important;
121+
}
122+
123+
/* Expand icons with subtle glow effect */
112124
.anticon-caret-down,
113125
.anticon-caret-right {
114-
color: rgba(0, 255, 255, 1);
126+
color: rgba(0, 178, 178, 0.8);
115127
font-size: 14px;
116128
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));
129+
filter: drop-shadow(0 0 3px rgba(0, 178, 178, 0.4));
118130
}
119131
120132
.anticon-caret-down {
121133
transform: rotateX(0deg);
122-
filter: drop-shadow(0 0 8px rgba(0, 255, 255, 1));
134+
filter: drop-shadow(0 0 4px rgba(0, 178, 178, 0.5));
123135
}
124136
125137
.anticon-caret-right:hover {
126-
transform: scale(1.2);
127-
filter: drop-shadow(0 0 12px rgba(0, 255, 255, 1));
138+
transform: scale(1.1);
139+
filter: drop-shadow(0 0 6px rgba(0, 178, 178, 0.6));
128140
}
129141
130142
/* Sorting arrows with 3D effect */
131143
.ant-table-column-sorters {
132144
.anticon {
133-
color: rgba(0, 255, 255, 0.6);
145+
color: rgba(0, 178, 178, 0.5);
134146
transition: all 0.3s ease;
135147
136148
&.active {
137-
color: rgba(0, 255, 255, 1);
138-
filter: drop-shadow(0 0 8px rgba(0, 255, 255, 1));
149+
color: rgba(0, 178, 178, 0.8);
150+
filter: drop-shadow(0 0 4px rgba(0, 178, 178, 0.6));
139151
}
140152
}
141153
}
@@ -170,13 +182,13 @@ export const Card = styled(CommonCard)`
170182
rgba(0, 20, 40, 0.9) 100%);
171183
backdrop-filter: blur(30px);
172184
-webkit-backdrop-filter: blur(30px);
173-
border: 1px solid rgba(0, 255, 255, 0.2);
185+
border: 1px solid rgba(0, 178, 178, 0.15);
174186
border-radius: 16px;
175187
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);
188+
0 24px 48px rgba(0, 139, 178, 0.15),
189+
0 12px 24px rgba(0, 178, 178, 0.12),
190+
inset 0 2px 4px rgba(0, 178, 178, 0.2),
191+
inset 0 -2px 4px rgba(0, 139, 178, 0.15);
180192
transform: translateZ(0);
181193
transform-style: preserve-3d;
182194
position: relative;
@@ -190,25 +202,25 @@ export const Card = styled(CommonCard)`
190202
right: -1px;
191203
bottom: -1px;
192204
background: linear-gradient(135deg,
193-
rgba(0, 255, 255, 0.4) 0%,
205+
rgba(0, 178, 178, 0.25) 0%,
194206
transparent 30%,
195207
transparent 70%,
196-
rgba(0, 191, 255, 0.4) 100%);
208+
rgba(0, 139, 178, 0.25) 100%);
197209
border-radius: 16px;
198210
opacity: 0.6;
199211
z-index: -1;
200212
}
201213
202214
.ant-card-head {
203-
border-bottom: 2px solid rgba(0, 255, 255, 0.2);
215+
border-bottom: 2px solid rgba(0, 178, 178, 0.15);
204216
background: linear-gradient(135deg,
205-
rgba(0, 191, 255, 0.08) 0%,
206-
rgba(0, 255, 255, 0.04) 100%);
217+
rgba(0, 139, 178, 0.06) 0%,
218+
rgba(0, 178, 178, 0.03) 100%);
207219
208220
.ant-card-head-title {
209-
color: rgba(0, 255, 255, 1);
221+
color: rgba(0, 178, 178, 0.9);
210222
text-shadow:
211-
0 0 20px rgba(0, 255, 255, 0.6),
223+
0 0 12px rgba(0, 178, 178, 0.4),
212224
0 2px 4px rgba(0, 0, 0, 0.4);
213225
font-weight: 600;
214226
font-size: 1.2rem;
@@ -239,14 +251,14 @@ export const Card = styled(CommonCard)`
239251
div.ant-table-container,
240252
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table {
241253
border-radius: ${borderRad};
242-
border: 1px solid rgba(0, 255, 255, 0.15);
254+
border: 1px solid rgba(0, 178, 178, 0.12);
243255
overflow: hidden;
244256
}
245257
246258
.ant-table-container {
247259
box-shadow:
248-
inset 0 2px 4px rgba(0, 255, 255, 0.1),
249-
inset 0 -2px 4px rgba(0, 191, 255, 0.05);
260+
inset 0 2px 4px rgba(0, 178, 178, 0.08),
261+
inset 0 -2px 4px rgba(0, 139, 178, 0.04);
250262
251263
table > thead > tr:first-child th:first-child {
252264
border-top-left-radius: ${borderRad};

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -30,42 +30,42 @@ export const Tables: React.FC = () => {
3030
icon={allExpanded ? <ShrinkOutlined /> : <ExpandOutlined />}
3131
onClick={toggleAllExpanded}
3232
style={{
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)',
33+
background: 'linear-gradient(135deg, rgba(0, 178, 178, 0.12) 0%, rgba(0, 139, 178, 0.08) 100%)',
34+
border: '2px solid rgba(0, 178, 178, 0.25)',
35+
color: 'rgba(0, 178, 178, 0.9)',
3636
padding: '8px 16px',
3737
borderRadius: '12px',
3838
fontSize: '14px',
3939
fontWeight: 600,
4040
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
4141
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)',
42+
0 4px 12px rgba(0, 178, 178, 0.15),
43+
inset 0 1px 2px rgba(0, 178, 178, 0.2),
44+
inset 0 -1px 2px rgba(0, 139, 178, 0.15)`,
45+
textShadow: '0 0 6px rgba(0, 178, 178, 0.4)',
4646
transform: 'translateZ(0) perspective(1000px)',
4747
transformStyle: 'preserve-3d',
4848
}}
4949
onMouseEnter={(e) => {
50-
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(0, 255, 255, 0.25) 0%, rgba(0, 191, 255, 0.2) 100%)';
51-
e.currentTarget.style.borderColor = 'rgba(0, 255, 255, 0.5)';
50+
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(0, 178, 178, 0.18) 0%, rgba(0, 139, 178, 0.14) 100%)';
51+
e.currentTarget.style.borderColor = 'rgba(0, 178, 178, 0.4)';
5252
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)`;
53+
0 8px 24px rgba(0, 178, 178, 0.25),
54+
inset 0 2px 4px rgba(0, 178, 178, 0.3),
55+
inset 0 -2px 4px rgba(0, 139, 178, 0.2),
56+
0 0 30px rgba(0, 178, 178, 0.15)`;
5757
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)';
58+
e.currentTarget.style.textShadow = '0 0 8px rgba(0, 178, 178, 0.6)';
5959
}}
6060
onMouseLeave={(e) => {
61-
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(0, 255, 255, 0.15) 0%, rgba(0, 191, 255, 0.1) 100%)';
62-
e.currentTarget.style.borderColor = 'rgba(0, 255, 255, 0.3)';
61+
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(0, 178, 178, 0.12) 0%, rgba(0, 139, 178, 0.08) 100%)';
62+
e.currentTarget.style.borderColor = 'rgba(0, 178, 178, 0.25)';
6363
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)`;
64+
0 4px 12px rgba(0, 178, 178, 0.15),
65+
inset 0 1px 2px rgba(0, 178, 178, 0.2),
66+
inset 0 -1px 2px rgba(0, 139, 178, 0.15)`;
6767
e.currentTarget.style.transform = 'translateZ(0) perspective(1000px)';
68-
e.currentTarget.style.textShadow = '0 0 8px rgba(0, 255, 255, 0.6)';
68+
e.currentTarget.style.textShadow = '0 0 6px rgba(0, 178, 178, 0.4)';
6969
}}
7070
>
7171
{allExpanded ? 'Collapse All' : 'Expand All'}

0 commit comments

Comments
 (0)