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) { if (!hasHydrated || !game) {
return ( 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="grid gap-6 lg:grid-cols-[2fr_1fr]">
<div className="aspect-video rounded-2xl bg-surface0/60 animate-pulse" /> <div className="aspect-video rounded-2xl bg-surface0/60 animate-pulse" />
<div className="space-y-4"> <div className="space-y-4">
@@ -55,7 +55,7 @@ export default function GamePageContent({
</div> </div>
</div> </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="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-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" /> <div className="mt-2 h-4 w-2/3 rounded bg-surface0/60 animate-pulse" />
@@ -72,9 +72,9 @@ export default function GamePageContent({
: null; : null;
return ( 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="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 <LazyLoadedImage
imgId={`GameThumbnail_${game.rootPlaceId}`} imgId={`GameThumbnail_${game.rootPlaceId}`}
alt={game.name} alt={game.name}
@@ -129,25 +129,25 @@ export default function GamePageContent({
</div> </div>
<div className="grid grid-cols-2 gap-3 text-sm"> <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-subtext1">Playing now</p>
<p className="text-lg font-semibold text-text"> <p className="text-lg font-semibold text-text">
{game.playing.toLocaleString()} {game.playing.toLocaleString()}
</p> </p>
</div> </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-subtext1">Total visits</p>
<p className="text-lg font-semibold text-text"> <p className="text-lg font-semibold text-text">
{game.visits.toLocaleString()} {game.visits.toLocaleString()}
</p> </p>
</div> </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-subtext1">Favorites</p>
<p className="text-lg font-semibold text-text"> <p className="text-lg font-semibold text-text">
{game.favoritedCount.toLocaleString()} {game.favoritedCount.toLocaleString()}
</p> </p>
</div> </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-subtext1">Max players</p>
<p className="text-lg font-semibold text-text"> <p className="text-lg font-semibold text-text">
{game.maxPlayers} {game.maxPlayers}
@@ -173,7 +173,7 @@ export default function GamePageContent({
</div> </div>
</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> <h2 className="text-lg font-semibold text-text">About</h2>
<p className="mt-2 text-sm text-subtext1 whitespace-pre-line"> <p className="mt-2 text-sm text-subtext1 whitespace-pre-line">
{game.description || "No description provided yet."} {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 }; params: { id: string };
}) { }) {
return ( 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} /> <GamePageContentF placeId={(await params).id} />
</Suspense> </Suspense>
); );

50
app/globals.css
View File

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

13
app/layout.tsx
View File

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

6
app/page.tsx
View File

@@ -48,7 +48,7 @@ export default function Home() {
<> <>
<HomeLoggedInHeader /> <HomeLoggedInHeader />
<div className="h-4" /> <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" /> <BestFriendsHomeSect className="pt-2" />
<FriendsHomeSect className="pt-2" /> <FriendsHomeSect className="pt-2" />
</div> </div>
@@ -63,7 +63,7 @@ export default function Home() {
</Alert> </Alert>
</div> */} </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 ? ( {isLoading ? (
<div className="space-y-6"> <div className="space-y-6">
<div className="h-6 w-56 bg-surface0/60 rounded-lg animate-pulse" /> <div className="h-6 w-56 bg-surface0/60 rounded-lg animate-pulse" />
@@ -92,7 +92,7 @@ export default function Home() {
.map((sort, idx) => ( .map((sort, idx) => (
<section key={idx} className="space-y-4"> <section key={idx} className="space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-xl sm:text-2xl font-semibold text-text"> <h2 className="section-title">
{sort.topic} {sort.topic}
</h2> </h2>
</div> </div>

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

@@ -26,8 +26,8 @@ function ProfileMoreDetails({ profile }: { profile: UserProfileDetails }) {
{/* {/*
//@ts-expect-error */} //@ts-expect-error */}
<FriendCarousel <FriendCarousel
title={<span className="pl-4">Friends</span>} title="Friends"
className="overflow-visible -ml-4" className="overflow-visible"
friends={theirFriends || []} friends={theirFriends || []}
/> />
</> </>
@@ -50,15 +50,25 @@ export default function UserProfileContent({
} }
}, [profile]); }, [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(); if (!profile) notFound();
return ( return (
<div className="p-4 space-y-6"> <div className="page-container py-6 space-y-6">
<UserProfileHeader user={profile} /> <UserProfileHeader user={profile} />
<Separator /> <Separator className="bg-surface0/60" />
<div className="break-all pl-4 whitespace-pre-line"> <div className="panel-soft p-6">
{profile.description} <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> </div>
{profile.isBanned && ( {profile.isBanned && (
<> <>

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

@@ -8,7 +8,13 @@ export default async function UserProfilePage({
params: { id: string }; params: { id: string };
}) { }) {
return ( 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} /> <UserProfileContent userId={(await params).id} />
</Suspense> </Suspense>
); );

2
components/providers/DownloadDialog.tsx
View File

@@ -29,7 +29,7 @@ export function DownloadDialog() {
onClick={closeDownloadDialog} onClick={closeDownloadDialog}
> >
<div <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()} onClick={(event) => event.stopPropagation()}
> >
<Button <Button

8
components/providers/GameLaunchDialog.tsx
View File

@@ -65,11 +65,11 @@ export function GameLaunchDialog() {
return ( return (
<div <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} onClick={closeGameLaunch}
> >
<div <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()} onClick={(event) => event.stopPropagation()}
> >
<Button <Button
@@ -82,7 +82,7 @@ export function GameLaunchDialog() {
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</Button> </Button>
<div className="flex flex-col items-center gap-4 px-6 py-8 text-center"> <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" /> <RobloxLogoIcon className="h-10 w-10 text-blue" />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
@@ -104,7 +104,7 @@ export function GameLaunchDialog() {
{launchTimeouted ? ( {launchTimeouted ? (
<Button <Button
onClick={handleDownloadClick} onClick={handleDownloadClick}
className="w-full rounded-full z-50 pointer-events-auto" className="w-full rounded-full z-50"
> >
Download Roblox Download Roblox
</Button> </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> <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="rounded-xl flex flex-col gap-2 px-4 no-scrollbar">
<div <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={{ style={{
scrollSnapType: "x mandatory", scrollSnapType: "x mandatory",
WebkitOverflowScrolling: "touch", WebkitOverflowScrolling: "touch",
@@ -73,32 +73,32 @@ export function FriendCarousel({
userPresence === 1 userPresence === 1
? "border-blue/25 bg-blue/25" ? "border-blue/25 bg-blue/25"
: userPresence === 2 : userPresence === 2
? "border-green/25 bg-green/25" ? "border-green/25 bg-green/25"
: userPresence === 3 : userPresence === 3
? "border-yellow/25 bg-yellow/25" ? "border-yellow/25 bg-yellow/25"
: userPresence === 0 : userPresence === 0
? "border-surface2/25 bg-surface2/25" ? "border-surface2/25 bg-surface2/25"
: "border-red/25 bg-red/25"; : "border-red/25 bg-red/25";
const textColor = const textColor =
userPresence === 1 userPresence === 1
? "text-blue" ? "text-blue"
: userPresence === 2 : userPresence === 2
? "text-green" ? "text-green"
: userPresence === 3 : userPresence === 3
? "text-yellow" ? "text-yellow"
: userPresence === 0 : userPresence === 0
? "text-surface2" ? "text-surface2"
: "text-red"; : "text-red";
const fillColor = const fillColor =
userPresence === 1 userPresence === 1
? "fill-blue" ? "fill-blue"
: userPresence === 2 : userPresence === 2
? "fill-green" ? "fill-green"
: userPresence === 3 : userPresence === 3
? "fill-yellow" ? "fill-yellow"
: userPresence === 0 : userPresence === 0
? "fill-surface2" ? "fill-surface2"
: "fill-red"; : "fill-red";
return ( return (
<StupidHoverThing <StupidHoverThing
@@ -108,7 +108,7 @@ export function FriendCarousel({
<div className="text-center items-center justify-center content-center"> <div className="text-center items-center justify-center content-center">
<span className="space-x-1 flex items-center"> <span className="space-x-1 flex items-center">
<p>{a.displayName || a.name}</p> <p>{a.displayName || a.name}</p>
{a.hasVerifiedBadge ? ( {!a.hasVerifiedBadge ? (
<VerifiedIcon <VerifiedIcon
useDefault useDefault
className={`w-4 h-4 shrink-0`} className={`w-4 h-4 shrink-0`}
@@ -125,24 +125,24 @@ export function FriendCarousel({
> >
<Link href={`/users/${a.id}`}> <Link href={`/users/${a.id}`}>
<div className="flex flex-col min-w-[6.5rem]"> <div className="flex flex-col min-w-[6.5rem]">
<LazyLoadedImage <LazyLoadedImage
imgId={`AvatarHeadShot_${a.id}`} imgId={`AvatarHeadShot_${a.id}`}
alt={a.name} alt={a.name}
className={`w-24 h-24 rounded-full border-2 ${borderColor} object-cover shadow-xl`} className={`w-24 h-24 rounded-full border-2 ${borderColor} object-cover shadow-xl`}
/> />
<span <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`} 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"> <span className="line-clamp-1 overflow-hidden text-ellipsis">
{a.displayName || a.name} {a.displayName || a.name}
</span>
{a.hasVerifiedBadge ? (
<VerifiedIcon
className={`text-base ${fillColor} w-3 h-3 shrink-0`}
/>
) : null}
</span> </span>
</div> {!a.hasVerifiedBadge ? (
<VerifiedIcon
className={`text-base ${fillColor} w-3 h-3 shrink-0`}
/>
) : null}
</span>
</div>
</Link> </Link>
</StupidHoverThing> </StupidHoverThing>
); );

4
components/roblox/GameCard.tsx
View File

@@ -59,7 +59,7 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
onClick={() => setIsOpen(true)} onClick={() => setIsOpen(true)}
> >
<div className="space-y-2"> <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"> <div className="overflow-hidden">
{game.primaryMediaAsset ? ( {game.primaryMediaAsset ? (
<LazyLoadedImage <LazyLoadedImage
@@ -80,7 +80,7 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
</div> </div>
)} )}
</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>
<div> <div>
<p className="text-sm font-semibold text-text line-clamp-1"> <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"; import { UserProfileDetails } from "@/lib/profile";
export function UserProfileHeader({ user }: { user: UserProfileDetails }) { export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
if (!user) { if (!user) {
return ( return (
<div className="justify-center w-screen px-8 py-6"> <div className="justify-center w-screen px-8 py-6">
@@ -41,12 +42,12 @@ export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
userPresence === 1 userPresence === 1
? "border-blue/25 bg-blue/25" ? "border-blue/25 bg-blue/25"
: userPresence === 2 : userPresence === 2
? "border-green/25 bg-green/25" ? "border-green/25 bg-green/25"
: userPresence === 3 : userPresence === 3
? "border-yellow/25 bg-yellow/25" ? "border-yellow/25 bg-yellow/25"
: userPresence === 0 : userPresence === 0
? "border-surface2/25 bg-surface2/25" ? "border-surface2/25 bg-surface2/25"
: "border-red/25 bg-red/25"; : "border-red/25 bg-red/25";
const isLoaded = !!user; const isLoaded = !!user;
@@ -97,7 +98,7 @@ export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
<RobloxBannedSmall className="w-6 h-6 text-blue" /> <RobloxBannedSmall className="w-6 h-6 text-blue" />
)} )}
</span> </span>
<span className="font-super-mono text-subtext0 mt-1"> <span className="text-base font-super-mono text-subtext0 mt-1">
{isLoaded ? ( {isLoaded ? (
<> <>
@{user.name} @{user.name}

4
components/site/HomeUserHeader.tsx
View File

@@ -70,9 +70,9 @@ export function HomeLoggedInHeader() {
return ( return (
<> <>
{/* <button onClick={()=>console.log(userPresence)}>debug this</button> */} {/* <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 <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) => { onContextMenu={(e) => {
if (e.button === 2) { if (e.button === 2) {
toast("[debug] reloading user pfp"); toast("[debug] reloading user pfp");

2
components/site/OutfitQuickChooser.tsx
View File

@@ -64,7 +64,7 @@ export function OutfitSelector({
onClick={() => setVisible(false)} onClick={() => setVisible(false)}
> >
<div <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()} 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"> <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"> <div className="z-1000 fixed top-4 right-4 flex gap-2 items-center text-text">
<StupidHoverThing text="Change Outfit"> <StupidHoverThing text="Change Outfit">
<button <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={() => { onClick={() => {
setIsOutfitSelectorVisible((a) => !a); setIsOutfitSelectorVisible((a) => !a);
}} }}
@@ -140,7 +140,7 @@ export const QuickTopUI = React.memo(function () {
: `You have ${robux.toLocaleString()} Robux` : `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" />{" "} <RobuxIcon className="w-5 h-5 text-text" />{" "}
{/* keep it text-text */} {/* keep it text-text */}
<p className="text-sm font-super-mono tabular-nums"> <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 <div
ref={ref} ref={ref}
className={cn( className={cn(
"rounded-xl border bg-card text-card-foreground shadow", "panel-soft text-card-foreground shadow-sm",
className className
)} )}
{...props} {...props}