Skip to content

Commit 306f125

Browse files
TateBTateB
committed
fix: profile empty banner + styling
1 parent 7f83628 commit 306f125

2 files changed

Lines changed: 201 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: 188 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useEffect, useRef } from 'react'
12
import { useTranslation } from 'react-i18next'
23
import styled, { css } from 'styled-components'
34

@@ -12,22 +13,166 @@ import { profileToProfileRecords } from './registration/steps/Profile/profileRec
1213

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

196+
const btnRef = useRef<HTMLButtonElement>(null)
197+
198+
useEffect(() => {
199+
if (btnRef.current) {
200+
const btn = btnRef.current
201+
btn.style.setProperty('--x', '0px')
202+
btn.style.setProperty('--y', '0px')
203+
const handleMouseMove = (e: MouseEvent) => {
204+
const box = btn.getBoundingClientRect()
205+
if (!box) return
206+
const x = e.clientX - box.left
207+
const y = e.clientY - box.top
208+
209+
btn.style.setProperty('--x', `${x}px`)
210+
btn.style.setProperty('--y', `${y}px`)
211+
}
212+
btn.addEventListener('mousemove', handleMouseMove)
213+
214+
return () => {
215+
btn.removeEventListener('mousemove', handleMouseMove)
216+
}
217+
}
218+
}, [])
219+
51220
if (records.length || isProfileLoading || !action || !canEditRecords) return null
52221

53222
return (
54223
<Container data-testid="profile-empty-banner">
55-
<div>
224+
<StarsContainer>
56225
<StarsSVG />
57-
</div>
226+
</StarsContainer>
58227
<div>
59-
<Typography fontVariant="large" weight="bold" color="text">
228+
<Typography fontVariant="large" weight="bold" color="textAccent">
60229
{t('banner.empty.title')}
61230
</Typography>
62-
<Typography color="text" fontVariant="body">
231+
<Typography color="textAccent" fontVariant="body">
63232
{t('banner.empty.description')}
64233
</Typography>
65234
</div>
66-
<Button width="auto" colorStyle="orangePrimary" onClick={() => action?.onClick()}>
235+
<GradientButton
236+
width="auto"
237+
ref={btnRef}
238+
colorStyle="transparent"
239+
onClick={() => action?.onClick()}
240+
>
67241
{t('banner.empty.action')}
68-
</Button>
242+
</GradientButton>
69243
</Container>
70244
)
71245
}

0 commit comments

Comments
 (0)