kris/roblox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chatgpt codex: told to improve ux/ui consistently, 5 times

Browse Source
This commit is contained in:
Kris
2025-12-28 01:00:04 +02:00
parent d12cf3b649
commit cc7b93c658
16 changed files with 128 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/games/[id]/content.tsx
View File

@@ -35,7 +35,7 @@ export default function GamePageContent({
if (!hasHydrated || !game) {
return (
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 py-6 space-y-6">
<div className="page-container py-6 space-y-6">
<div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
<div className="aspect-video rounded-2xl bg-surface0/60 animate-pulse" />
<div className="space-y-4">
@@ -55,7 +55,7 @@ export default function GamePageContent({
</div>
</div>
</div>
<div className="rounded-2xl border border-surface0/60 bg-base/40 p-6">
<div className="panel-soft p-6">
<div className="h-5 w-24 rounded bg-surface0/60 animate-pulse" />
<div className="mt-3 h-4 w-full rounded bg-surface0/60 animate-pulse" />
<div className="mt-2 h-4 w-2/3 rounded bg-surface0/60 animate-pulse" />
@@ -72,9 +72,9 @@ export default function GamePageContent({
: null;
return (
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 py-6 space-y-6">
<div className="page-container py-6 space-y-6">
<div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
<div className="rounded-2xl overflow-hidden bg-surface0/40 ring-1 ring-surface1/60 aspect-video">
<div className="panel overflow-hidden aspect-video">
<LazyLoadedImage
imgId={`GameThumbnail_${game.rootPlaceId}`}
alt={game.name}
@@ -129,25 +129,25 @@ export default function GamePageContent({
</div>
<div className="grid grid-cols-2 gap-3 text-sm">
<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
<div className="stat-card">
<p className="text-subtext1">Playing now</p>
<p className="text-lg font-semibold text-text">
{game.playing.toLocaleString()}
</p>
</div>
<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
<div className="stat-card">
<p className="text-subtext1">Total visits</p>
<p className="text-lg font-semibold text-text">
{game.visits.toLocaleString()}
</p>
</div>
<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
<div className="stat-card">
<p className="text-subtext1">Favorites</p>
<p className="text-lg font-semibold text-text">
{game.favoritedCount.toLocaleString()}
</p>
</div>
<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
<div className="stat-card">
<p className="text-subtext1">Max players</p>
<p className="text-lg font-semibold text-text">
{game.maxPlayers}
@@ -173,7 +173,7 @@ export default function GamePageContent({
</div>
</div>
<div className="rounded-2xl border border-surface0/60 bg-base/40 p-6">
<div className="panel-soft p-6">
<h2 className="text-lg font-semibold text-text">About</h2>
<p className="mt-2 text-sm text-subtext1 whitespace-pre-line">
{game.description || "No description provided yet."}

8
app/games/[id]/page.tsx
View File

@@ -9,7 +9,13 @@ export default async function GamePageContent({
params: { id: string };
}) {
return (
<Suspense fallback={<div className="p-4">Loading profile…</div>}>
<Suspense
fallback={
<div className="page-container py-6 text-sm text-subtext1">
Loading game…
</div>
}
>
<GamePageContentF placeId={(await params).id} />
</Suspense>
);

50
app/globals.css
View File

@@ -134,8 +134,7 @@ body {
h1,
h2,
h3 {
font-family: var(--font-space-grotesk), var(--font-geist-sans), sans-serif;
letter-spacing: -0.02em;
@apply tracking-tight;
}
a {
text-decoration: underline;
@@ -165,33 +164,26 @@ body {
-ms-overflow-style: none;
scrollbar-width: 0;
}
.ambient-backdrop {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(
1200px 700px at 10% -10%,
hsl(var(--glow-2) / 0.2),
transparent 55%
),
radial-gradient(
900px 600px at 95% 0%,
hsl(var(--glow-1) / 0.22),
transparent 60%
),
radial-gradient(
800px 500px at 50% 100%,
hsl(var(--glow-3) / 0.18),
transparent 55%
),
linear-gradient(
180deg,
hsl(var(--background)) 0%,
hsl(var(--background)) 45%,
hsl(var(--muted)) 100%
);
.page-container {
@apply mx-auto w-full max-w-6xl px-4 sm:px-8;
}
.section-title {
@apply text-xl sm:text-2xl font-semibold text-text;
}
.panel {
@apply rounded-3xl bg-base/50 ring-1 ring-surface1/60 shadow-lg;
}
.panel-blur {
@apply rounded-3xl bg-base/50 ring-1 ring-surface1/60 shadow-lg backdrop-blur-lg;
}
.panel-soft {
@apply rounded-3xl border border-surface1/60 bg-base/40;
}
.glass-soft {
@apply rounded-3xl bg-base/35 ring-1 ring-surface0/60 shadow-lg backdrop-blur-md;
}
.stat-card {
@apply rounded-2xl border border-surface1/60 bg-base/40 p-3 shadow-md;
}
}
@utility border-border {

13
app/layout.tsx
View File

@@ -1,5 +1,5 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono, Space_Grotesk } from "next/font/google";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { TooltipProvider } from "@/components/ui/tooltip";
import { Toaster } from "@/components/ui/toaster";
@@ -20,10 +20,6 @@ const geistMono = Geist_Mono({
subsets: ["latin"]
});
const spaceGrotesk = Space_Grotesk({
variable: "--font-space-grotesk",
subsets: ["latin"]
});
export const metadata: Metadata = {
title: "Home | Roblox",
@@ -49,13 +45,16 @@ export default function RootLayout({
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} ${spaceGrotesk.variable} antialiased overflow-x-hidden mocha`}
className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-x-hidden mocha`}
>
<ReactQueryProvider>
<TooltipProvider>
<GameLaunchProvider>
<main className="relative min-h-screen z-10">
<div className="ambient-backdrop" aria-hidden="true" />
<div
className="fixed inset-0 z-0 pointer-events-none bg-background"
aria-hidden="true"
/>
{/* <Image
src={"/bg.png"}
width={1920}

6
app/page.tsx
View File

@@ -48,7 +48,7 @@ export default function Home() {
<>
<HomeLoggedInHeader />
<div className="h-4" />
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
<div className="page-container">
<BestFriendsHomeSect className="pt-2" />
<FriendsHomeSect className="pt-2" />
</div>
@@ -63,7 +63,7 @@ export default function Home() {
</Alert>
</div> */}
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 pb-16 space-y-10 no-scrollbar">
<div className="page-container pb-16 space-y-10 no-scrollbar">
{isLoading ? (
<div className="space-y-6">
<div className="h-6 w-56 bg-surface0/60 rounded-lg animate-pulse" />
@@ -92,7 +92,7 @@ export default function Home() {
.map((sort, idx) => (
<section key={idx} className="space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-xl sm:text-2xl font-semibold text-text">
<h2 className="section-title">
{sort.topic}
</h2>
</div>

24
app/users/[id]/content.tsx
View File

@@ -26,8 +26,8 @@ function ProfileMoreDetails({ profile }: { profile: UserProfileDetails }) {
{/*
//@ts-expect-error */}
<FriendCarousel
title={<span className="pl-4">Friends</span>}
className="overflow-visible -ml-4"
title="Friends"
className="overflow-visible"
friends={theirFriends || []}
/>
</>
@@ -50,15 +50,25 @@ export default function UserProfileContent({
}
}, [profile]);
if (isLoading) return <div className="p-4">Loading user profile...</div>;
if (isLoading)
return (
<div className="page-container py-6 space-y-6">
<div className="h-10 w-64 rounded-lg bg-surface0/60 animate-pulse" />
<div className="panel-soft h-32 animate-pulse" />
<div className="panel-soft h-64 animate-pulse" />
</div>
);
if (!profile) notFound();
return (
<div className="p-4 space-y-6">
<div className="page-container py-6 space-y-6">
<UserProfileHeader user={profile} />
<Separator />
<div className="break-all pl-4 whitespace-pre-line">
{profile.description}
<Separator className="bg-surface0/60" />
<div className="panel-soft p-6">
<h2 className="text-lg font-semibold text-text">About</h2>
<p className="mt-2 text-sm text-subtext1 break-all whitespace-pre-line">
{profile.description || "No description provided yet."}
</p>
</div>
{profile.isBanned && (
<>

8
app/users/[id]/page.tsx
View File

@@ -8,7 +8,13 @@ export default async function UserProfilePage({
params: { id: string };
}) {
return (
<Suspense fallback={<div className="p-4">Loading profile…</div>}>
<Suspense
fallback={
<div className="page-container py-6 text-sm text-subtext1">
Loading profile…
</div>
}
>
<UserProfileContent userId={(await params).id} />
</Suspense>
);

2
components/providers/DownloadDialog.tsx
View File

@@ -29,7 +29,7 @@ export function DownloadDialog() {
onClick={closeDownloadDialog}
>
<div
className="relative w-[94vw] max-w-4xl rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
className="panel-blur relative w-[94vw] max-w-4xl"
onClick={(event) => event.stopPropagation()}
>
<Button

8
components/providers/GameLaunchDialog.tsx
View File

@@ -65,11 +65,11 @@ export function GameLaunchDialog() {
return (
<div
className="fixed inset-0 z-200 flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
className="fixed inset-0 z-200 flex items-center justify-center bg-mantle/70 backdrop-blur-sm pointer-events-auto"
onClick={closeGameLaunch}
>
<div
className="relative w-[92vw] max-w-sm rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
className="panel-blur relative w-[92vw] max-w-sm"
onClick={(event) => event.stopPropagation()}
>
<Button
@@ -82,7 +82,7 @@ export function GameLaunchDialog() {
<X className="h-4 w-4" />
</Button>
<div className="flex flex-col items-center gap-4 px-6 py-8 text-center">
<div className="h-20 w-20 flex items-center justify-center rounded-2xl bg-blue/20">
<div className="h-20 w-20 flex items-center justify-center rounded-2xl bg-blue/20 ring-1 ring-blue/30">
<RobloxLogoIcon className="h-10 w-10 text-blue" />
</div>
<div className="space-y-1">
@@ -104,7 +104,7 @@ export function GameLaunchDialog() {
{launchTimeouted ? (
<Button
onClick={handleDownloadClick}
className="w-full rounded-full z-50 pointer-events-auto"
className="w-full rounded-full z-50"
>
Download Roblox
</Button>

74
components/roblox/FriendCarousel.tsx
View File

@@ -57,7 +57,7 @@ export function FriendCarousel({
<h1 className="text-2xl pt-4 pl-4 -mb-4">{title}</h1>
<div className="rounded-xl flex flex-col gap-2 px-4 no-scrollbar">
<div
className="flex items-center gap-4 overflow-x-auto overflow-y-visible no-scrollbar py-6 scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0"
className="flex p-8 items-center gap-4 overflow-x-auto overflow-y-visible no-scrollbar pb-2 -mx-4 w-screen scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0"
style={{
scrollSnapType: "x mandatory",
WebkitOverflowScrolling: "touch",
@@ -73,32 +73,32 @@ export function FriendCarousel({
userPresence === 1
? "border-blue/25 bg-blue/25"
: userPresence === 2
? "border-green/25 bg-green/25"
: userPresence === 3
? "border-yellow/25 bg-yellow/25"
: userPresence === 0
? "border-surface2/25 bg-surface2/25"
: "border-red/25 bg-red/25";
? "border-green/25 bg-green/25"
: userPresence === 3
? "border-yellow/25 bg-yellow/25"
: userPresence === 0
? "border-surface2/25 bg-surface2/25"
: "border-red/25 bg-red/25";
const textColor =
userPresence === 1
? "text-blue"
: userPresence === 2
? "text-green"
: userPresence === 3
? "text-yellow"
: userPresence === 0
? "text-surface2"
: "text-red";
? "text-green"
: userPresence === 3
? "text-yellow"
: userPresence === 0
? "text-surface2"
: "text-red";
const fillColor =
userPresence === 1
? "fill-blue"
: userPresence === 2
? "fill-green"
: userPresence === 3
? "fill-yellow"
: userPresence === 0
? "fill-surface2"
: "fill-red";
? "fill-green"
: userPresence === 3
? "fill-yellow"
: userPresence === 0
? "fill-surface2"
: "fill-red";
return (
<StupidHoverThing
@@ -108,7 +108,7 @@ export function FriendCarousel({
<div className="text-center items-center justify-center content-center">
<span className="space-x-1 flex items-center">
<p>{a.displayName || a.name}</p>
{a.hasVerifiedBadge ? (
{!a.hasVerifiedBadge ? (
<VerifiedIcon
useDefault
className={`w-4 h-4 shrink-0`}
@@ -125,24 +125,24 @@ export function FriendCarousel({
>
<Link href={`/users/${a.id}`}>
<div className="flex flex-col min-w-[6.5rem]">
<LazyLoadedImage
imgId={`AvatarHeadShot_${a.id}`}
alt={a.name}
className={`w-24 h-24 rounded-full border-2 ${borderColor} object-cover shadow-xl`}
/>
<span
className={`text-xs ${textColor} mt-1 text-center flex items-center justify-center gap-1 max-w-[6.5rem] overflow-hidden line-clamp-2`}
>
<span className="line-clamp-1 overflow-hidden text-ellipsis">
{a.displayName || a.name}
</span>
{a.hasVerifiedBadge ? (
<VerifiedIcon
className={`text-base ${fillColor} w-3 h-3 shrink-0`}
/>
) : null}
<LazyLoadedImage
imgId={`AvatarHeadShot_${a.id}`}
alt={a.name}
className={`w-24 h-24 rounded-full border-2 ${borderColor} object-cover shadow-xl`}
/>
<span
className={`text-xs ${textColor} mt-1 text-center flex items-center justify-center gap-1 max-w-[6.5rem] overflow-hidden line-clamp-2`}
>
<span className="line-clamp-1 overflow-hidden text-ellipsis">
{a.displayName || a.name}
</span>
</div>
{!a.hasVerifiedBadge ? (
<VerifiedIcon
className={`text-base ${fillColor} w-3 h-3 shrink-0`}
/>
) : null}
</span>
</div>
</Link>
</StupidHoverThing>
);

4
components/roblox/GameCard.tsx
View File

@@ -59,7 +59,7 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
onClick={() => setIsOpen(true)}
>
<div className="space-y-2">
<div className="group overflow-hidden aspect-video relative bg-muted rounded-2xl ring-1 ring-surface0/60 shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg">
<div className="panel group overflow-hidden aspect-video relative transition hover:-translate-y-0.5 hover:shadow-2xl">
<div className="overflow-hidden">
{game.primaryMediaAsset ? (
<LazyLoadedImage
@@ -80,7 +80,7 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
</div>
)}
</div>
<div className="pointer-events-none absolute inset-0 bg-linear-to-t from-crust/50 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
<div className="pointer-events-none absolute inset-0 bg-crust/40 opacity-0 transition-opacity group-hover:opacity-100" />
</div>
<div>
<p className="text-sm font-semibold text-text line-clamp-1">

15
components/roblox/UserProfileHeader.tsx
View File

@@ -19,6 +19,7 @@ import Link from "next/link";
import { UserProfileDetails } from "@/lib/profile";
export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
if (!user) {
return (
<div className="justify-center w-screen px-8 py-6">
@@ -41,12 +42,12 @@ export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
userPresence === 1
? "border-blue/25 bg-blue/25"
: userPresence === 2
? "border-green/25 bg-green/25"
: userPresence === 3
? "border-yellow/25 bg-yellow/25"
: userPresence === 0
? "border-surface2/25 bg-surface2/25"
: "border-red/25 bg-red/25";
? "border-green/25 bg-green/25"
: userPresence === 3
? "border-yellow/25 bg-yellow/25"
: userPresence === 0
? "border-surface2/25 bg-surface2/25"
: "border-red/25 bg-red/25";
const isLoaded = !!user;
@@ -97,7 +98,7 @@ export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
<RobloxBannedSmall className="w-6 h-6 text-blue" />
)}
</span>
<span className="font-super-mono text-subtext0 mt-1">
<span className="text-base font-super-mono text-subtext0 mt-1">
{isLoaded ? (
<>
@{user.name}

4
components/site/HomeUserHeader.tsx
View File

@@ -70,9 +70,9 @@ export function HomeLoggedInHeader() {
return (
<>
{/* <button onClick={()=>console.log(userPresence)}>debug this</button> */}
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
<div className="page-container">
<div
className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6 rounded-2xl bg-base/40 ring-1 ring-surface0/60 px-4 sm:px-6 py-4 sm:py-6 mt-6"
className="glass-soft flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6 px-4 sm:px-6 py-4 sm:py-6 mt-6"
onContextMenu={(e) => {
if (e.button === 2) {
toast("[debug] reloading user pfp");

2
components/site/OutfitQuickChooser.tsx
View File

@@ -64,7 +64,7 @@ export function OutfitSelector({
onClick={() => setVisible(false)}
>
<div
className="relative w-full max-w-3xl sm:max-w-4xl mx-4 rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
className="panel-blur relative w-full max-w-3xl sm:max-w-4xl mx-4"
onClick={(event) => event.stopPropagation()}
>
<div className="flex flex-col gap-3 border-b border-surface0/60 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">

4
components/site/QuickTopUI.tsx
View File

@@ -124,7 +124,7 @@ export const QuickTopUI = React.memo(function () {
<div className="z-1000 fixed top-4 right-4 flex gap-2 items-center text-text">
<StupidHoverThing text="Change Outfit">
<button
className="rounded-full bg-surface0/70 ring-1 ring-surface1/60 flex items-center justify-center h-10 w-10 text-text shadow-sm transition hover:bg-surface1/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue/60"
className="rounded-full bg-base/40 ring-1 ring-surface1/60 backdrop-blur-lg flex items-center justify-center h-10 w-10 text-text shadow-lg transition hover:bg-base/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue/60"
onClick={() => {
setIsOutfitSelectorVisible((a) => !a);
}}
@@ -140,7 +140,7 @@ export const QuickTopUI = React.memo(function () {
: `You have ${robux.toLocaleString()} Robux`
}
>
<div className="rounded-full bg-surface0/70 ring-1 ring-surface1/60 flex items-center h-10 px-3 gap-2 text-text shadow-sm">
<div className="rounded-full bg-base/40 ring-1 ring-surface1/60 backdrop-blur-lg flex items-center h-10 px-3 gap-2 text-text shadow-lg">
<RobuxIcon className="w-5 h-5 text-text" />{" "}
{/* keep it text-text */}
<p className="text-sm font-super-mono tabular-nums">

2
components/ui/card.tsx
View File

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
<div
ref={ref}
className={cn(
"rounded-xl border bg-card text-card-foreground shadow",
"panel-soft text-card-foreground shadow-sm",
className
)}
{...props}