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

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}