skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 1

UI: use small neon-colored skater icon in Lab cross-link (1.3.9)

Browse source 
Replaced the large black-and-white photo panel with a compact,
app-styled skater icon (neon red #ff0040 + lime #ccff00) sitting in the
rounded icon tile used elsewhere in the app. Added a red drop-shadow
glow to match the brand aesthetic. Removed the unused photo asset.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-09-09 11:10:22 +07:00
parent 8145379190
commit acda8646fd
3 changed files with 19 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/just-a-skater-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/images/just-a-skater.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 53 KiB

43
src/pages/LabPage.tsx
View file

@ -1297,38 +1297,33 @@ export default function LabPage() {
{/* ── Skater directory cross-link ── */} {/* ── Skater directory cross-link ── */}
<Link <Link
to="/skaters" to="/skaters"
className="group relative flex items-stretch gap-0 rounded-2xl overflow-hidden border border-white/10 bg-gradient-to-r from-[#ff0040]/10 via-black to-[#ccff00]/5 mb-5 hover:border-[#ff0040]/50 transition-all duration-300 shadow-lg shadow-black/40 hover:shadow-[#ff0040]/10" className="group relative flex items-center gap-3 rounded-2xl border border-white/10 bg-gradient-to-r from-[#ff0040]/10 via-black to-[#ccff00]/5 p-4 mb-5 hover:border-[#ff0040]/50 transition-all duration-300 shadow-lg shadow-black/40 hover:shadow-[#ff0040]/10"
> >
{/* Featured photo — framed with a neon edge, consistent with the app's look */} {/* Neon skater icon — small, colored, matches the app's rounded-tile icon slots */}
<div className="relative flex-shrink-0 w-[104px] sm:w-[128px] overflow-hidden"> <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-[#ff0040]/15 flex items-center justify-center overflow-hidden group-hover:bg-[#ff0040]/25 transition-colors">
<img <img
src="/images/just-a-skater.png" src="/images/just-a-skater-icon.png"
alt="Skater" alt="Skater"
loading="lazy" loading="lazy"
className="absolute inset-0 h-full w-full object-cover object-center transition-transform duration-500 group-hover:scale-105" className="w-10 h-10 object-contain drop-shadow-[0_0_6px_rgba(255,0,64,0.5)] transition-transform duration-300 group-hover:scale-110"
/> />
{/* Fade the photo into the card body so it feels integrated, not pasted on */}
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-black" />
<div className="absolute inset-0 bg-gradient-to-t from-[#ff0040]/20 to-transparent mix-blend-screen" />
</div> </div>
{/* Copy */} {/* Copy */}
<div className="relative min-w-0 flex-1 flex items-center gap-3 py-4 pr-4 pl-4"> <div className="min-w-0 flex-1">
<div className="min-w-0 flex-1"> <p className="inline-flex items-center gap-1.5 text-[10px] font-black uppercase tracking-widest text-[#ccff00] mb-0.5">
<p className="inline-flex items-center gap-1.5 text-[10px] font-black uppercase tracking-widest text-[#ccff00] mb-1"> <PersonStanding className="h-3.5 w-3.5" />
<PersonStanding className="h-3.5 w-3.5" /> The Crew
The Crew </p>
</p> <p className="font-black uppercase text-sm leading-tight">
<p className="font-black uppercase text-base leading-tight"> Just a <span className="text-[#ff0040]" style={{ textShadow: '0 0 12px rgba(255,0,64,0.6)' }}>skater</span>?
Just a <span className="text-[#ff0040]" style={{ textShadow: '0 0 12px rgba(255,0,64,0.6)' }}>skater</span>? </p>
</p> <p className="text-xs text-gray-400 mt-0.5 leading-snug">
<p className="text-xs text-gray-400 mt-1 leading-snug"> The Lab's for services. Browse &amp; join the whole skater community
The Lab's for services. Browse &amp; join the whole skater community &rarr; </p>
</p> </div>
</div> <div className="flex-shrink-0 w-9 h-9 rounded-full bg-[#ff0040]/15 flex items-center justify-center group-hover:bg-[#ff0040]/30 transition-colors">
<div className="flex-shrink-0 w-9 h-9 rounded-full bg-[#ff0040]/15 flex items-center justify-center group-hover:bg-[#ff0040]/30 transition-colors"> <ArrowRight className="h-5 w-5 text-[#ff0040] group-hover:translate-x-0.5 transition-transform" />
<ArrowRight className="h-5 w-5 text-[#ff0040] group-hover:translate-x-0.5 transition-transform" />
</div>
</div> </div>
</Link> </Link>