Skip to content

Commit daa7ea5

Browse files
sugh01sugh01
authored
Merge pull request #978 from ensdomains/fix/profile-empty-banner
fix: profile empty banner + styling
2 parents 56d2132 + b99df57 commit daa7ea5

2 files changed

Lines changed: 192 additions & 21 deletions

File tree

‎src/assets/Stars.svg‎

Lines changed: 13 additions & 7 deletions
Loading

‎src/components/pages/profile/[name]/ProfileEmptyBanner.tsx‎

Lines changed: 179 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,166 @@ import { profileToProfileRecords } from './registration/steps/Profile/profileRec
1212

1313
const Container = styled.div(
1414
({ theme }) => css`
15+
--gradient-color-1: #6a07a0;
16+
--gradient-color-2: #100018;
17+
1518
margin-top: ${theme.space['4']};
1619
display: grid;
17-
grid-template-columns: 48px 1fr auto;
18-
align-items: center;
20+
grid-template-columns: 1fr;
21+
text-align: center;
1922
gap: ${theme.space['6']};
2023
padding: ${theme.space['6']};
2124
width: 100%;
2225
border: 4px solid ${theme.colors.background};
2326
border-radius: 16px;
24-
background: linear-gradient(${theme.colors.greenLight} 100%, ${theme.colors.greenSurface} 100%);
27+
background: linear-gradient(
28+
166deg,
29+
var(--gradient-color-1) 6.85%,
30+
var(--gradient-color-2) 70.01%
31+
);
32+
color: ${theme.colors.white};
33+
34+
@media (min-width: ${theme.breakpoints.sm}px) {
35+
background: linear-gradient(
36+
91deg,
37+
var(--gradient-color-1) 0.74%,
38+
var(--gradient-color-2) 75%
39+
);
40+
grid-template-columns: 48px 1fr auto;
41+
align-items: center;
42+
text-align: left;
43+
}
44+
`,
45+
)
46+
47+
const StarsContainer = styled.div(
48+
({ theme }) => css`
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
width: 100%;
53+
margin-bottom: -${theme.space['2']};
2554
26-
@media (max-width: ${theme.breakpoints.sm}px) {
27-
grid-template-columns: 1fr;
28-
text-align: center;
29-
gap: ${theme.space['4']};
30-
padding: ${theme.space['4']};
55+
@media (min-width: ${theme.breakpoints.sm}px) {
56+
margin-bottom: 0;
57+
}
58+
`,
59+
)
60+
61+
const GradientButton = styled(Button)(
62+
({ theme }) => css`
63+
@property --gradient-btn-opacity {
64+
syntax: '<number>';
65+
inherits: false;
66+
initial-value: 0.15;
67+
}
68+
69+
@property --gradient-hover-opacity {
70+
syntax: '<number>';
71+
inherits: false;
72+
initial-value: 0;
73+
}
74+
75+
@property --gradient-angle {
76+
syntax: '<angle>';
77+
inherits: false;
78+
initial-value: 0deg;
79+
}
80+
81+
@property --conic-gradient-opacity {
82+
syntax: '<number>';
83+
inherits: false;
84+
initial-value: 0.75;
85+
}
86+
87+
--background-hover-opacity: 0;
88+
--background-gradient: radial-gradient(
89+
150% 125% at var(--x) var(--y),
90+
rgba(255, 255, 255, 0) 0%,
91+
rgba(255, 255, 255, var(--gradient-hover-opacity)) 200%
92+
),
93+
linear-gradient(
94+
180deg,
95+
rgba(0, 0, 0, 0) 0%,
96+
rgba(255, 255, 255, var(--gradient-btn-opacity)) 160.42%
97+
),
98+
linear-gradient(
99+
95deg,
100+
rgba(0, 0, 0, 0) 0%,
101+
rgba(255, 255, 255, var(--gradient-btn-opacity)) 124.96%
102+
),
103+
rgba(0, 0, 0, 1);
104+
105+
border-radius: var(--border-radii-large, 8px);
106+
background: var(--background-gradient);
107+
width: 100%;
108+
border: none;
109+
transform-style: preserve-3d;
110+
transition:
111+
--gradient-btn-opacity 0.15s ease-in-out,
112+
transform 0.1s ease-in-out,
113+
--gradient-hover-opacity 0.15s ease-in-out;
114+
115+
@keyframes rotateGradient {
116+
0% {
117+
--gradient-angle: 0deg;
118+
}
119+
100% {
120+
--gradient-angle: 360deg;
121+
}
122+
}
123+
124+
&::before {
125+
content: '';
126+
position: absolute;
127+
top: -5px;
128+
left: -5px;
129+
width: calc(100% + 10px);
130+
height: calc(100% + 10px);
131+
background: conic-gradient(
132+
from var(--gradient-angle) at 50% 50%,
133+
var(--blue-bright, rgba(86, 154, 255, var(--conic-gradient-opacity))) 51.42deg,
134+
var(--purple-primary, rgba(163, 67, 211, var(--conic-gradient-opacity))) 102.84deg,
135+
var(--pink-primary, rgba(213, 46, 126, var(--conic-gradient-opacity))) 154.26deg,
136+
var(--red-primary, rgba(198, 48, 27, var(--conic-gradient-opacity))) 205.68deg,
137+
var(--orange-primary, rgba(243, 147, 11, var(--conic-gradient-opacity))) 257.1deg,
138+
var(--green-primary, rgba(25, 156, 117, var(--conic-gradient-opacity))) 308.52deg
139+
);
140+
filter: blur(12px);
141+
transform: translateZ(-2px);
142+
animation: rotateGradient 5s linear infinite;
143+
transition:
144+
--conic-gradient-opacity 0.15s ease-in-out,
145+
filter 0.15s ease-in-out;
146+
}
147+
148+
&::after {
149+
content: '';
150+
position: absolute;
151+
top: -1.5px;
152+
left: -1.5px;
153+
width: calc(100% + 3px);
154+
height: calc(100% + 3px);
155+
background: linear-gradient(163deg, #181818 -1.89%, #545454 52.55%, #2a2a2a 116.46%);
156+
border-radius: 10px;
157+
transform: translateZ(-1px);
158+
}
159+
160+
&:hover {
161+
&::before {
162+
filter: blur(14px);
163+
164+
--conic-gradient-opacity: 0.9;
165+
}
166+
167+
--gradient-btn-opacity: 0.2;
168+
--gradient-hover-opacity: 0.2;
169+
border: none;
170+
background: var(--background-gradient);
171+
}
172+
173+
@media (min-width: ${theme.breakpoints.sm}px) {
174+
width: ${theme.space['36']};
31175
}
32176
`,
33177
)
@@ -52,20 +196,41 @@ export function ProfileEmptyBanner({ name }: { name: string }) {
52196

53197
return (
54198
<Container data-testid="profile-empty-banner">
55-
<div>
199+
<StarsContainer>
56200
<StarsSVG />
57-
</div>
201+
</StarsContainer>
58202
<div>
59-
<Typography fontVariant="large" weight="bold" color="text">
203+
<Typography fontVariant="large" weight="bold" color="textAccent">
60204
{t('banner.empty.title')}
61205
</Typography>
62-
<Typography color="text" fontVariant="body">
206+
<Typography color="textAccent" fontVariant="body">
63207
{t('banner.empty.description')}
64208
</Typography>
65209
</div>
66-
<Button width="auto" colorStyle="orangePrimary" onClick={() => action?.onClick()}>
210+
<GradientButton
211+
width="auto"
212+
colorStyle="transparent"
213+
onClick={() => action?.onClick()}
214+
style={
215+
{
216+
// eslint-disable-next-line @typescript-eslint/naming-convention
217+
'--x': '0px',
218+
// eslint-disable-next-line @typescript-eslint/naming-convention
219+
'--y': '0px',
220+
} as React.CSSProperties
221+
}
222+
onMouseMove={(e) => {
223+
const box = e.currentTarget.getBoundingClientRect()
224+
if (!box) return
225+
const x = e.clientX - box.left
226+
const y = e.clientY - box.top
227+
228+
e.currentTarget.style.setProperty('--x', `${x}px`)
229+
e.currentTarget.style.setProperty('--y', `${y}px`)
230+
}}
231+
>
67232
{t('banner.empty.action')}
68-
</Button>
233+
</GradientButton>
69234
</Container>
70235
)
71236
}

0 commit comments

Comments
 (0)