chatgpt codex + cascade: update

components/roblox/FriendCarousel.tsx

@@ -1,6 +1,6 @@
 import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
 import { useFriendsPresence } from "@/hooks/roblox/usePresence";
-import React, { ReactNode, useMemo } from "react";
+import React, { useMemo } from "react";
 import LazyLoadedImage from "../util/LazyLoadedImage";
 import { StupidHoverThing } from "../util/MiscStuff";
 import { VerifiedIcon } from "./RobloxIcons";
@@ -53,11 +53,11 @@ export function FriendCarousel({
 	}
 
 	return (
-		<div {...props}>
-			<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="relative" {...props}>
+			<h1 className="text-2xl pt-4 pl-4 -mb-4 pb-6">{title}</h1>
+			<div className="rounded-xl flex flex-col px-4 py-2 overflow-x-hidden no-scrollbar panel-soft">
 				<div
-					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"
+					className="flex p-8 items-center gap-4 overflow-x-auto overflow-y-visible no-scrollbar pb-4 -mx-4 w-screen scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0"
 					style={{
 						scrollSnapType: "x mandatory",
 						WebkitOverflowScrolling: "touch",
@@ -69,6 +69,7 @@ export function FriendCarousel({
 							(b) => b.userId === a.id
 						);
 						const userPresence = userStatus?.userPresenceType || 0;
+						/* dont touch these color thingys */
 						const borderColor =
 							userPresence === 1
 								? "border-blue/25 bg-blue/25"
@@ -107,15 +108,17 @@ export function FriendCarousel({
 								text={
 									<div className="text-center items-center justify-center content-center">
 										<span className="space-x-1 flex items-center">
-											<p>{a.displayName || a.name}</p>
+											<p className={textColor}>
+												{a.displayName || a.name}
+											</p>
 											{!a.hasVerifiedBadge ? (
 												<VerifiedIcon
 													useDefault
-													className={`w-4 h-4 shrink-0`}
+													className={`w-4 h-4 shrink-0 ${textColor}`}
 												/>
 											) : null}
 											{userPresence >= 2 ? (
-												<p>
+												<p className={textColor}>
 													{userStatus?.lastLocation}
 												</p>
 											) : null}
@@ -123,8 +126,10 @@ export function FriendCarousel({
 									</div>
 								}
 							>
-								<Link href={`/users/${a.id}`}>
-									<div className="flex flex-col min-w-[6.5rem]">
+								<Link
+									href={`/users/${a.id}`}
+									className="flex flex-col min-w-[6.5rem] relative"
+								>
 									<LazyLoadedImage
 										imgId={`AvatarHeadShot_${a.id}`}
 										alt={a.name}
@@ -142,7 +147,6 @@ export function FriendCarousel({
 											/>
 										) : null}
 									</span>
-								</div>
 								</Link>
 							</StupidHoverThing>
 						);

components/roblox/GameCard.tsx

@@ -59,7 +59,7 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
 				onClick={() => setIsOpen(true)}
 			>
 				<div className="space-y-2">
-					<div className="panel group overflow-hidden aspect-video relative transition hover:-translate-y-0.5 hover:shadow-2xl">
+					<div className="panel group overflow-hidden aspect-video relative transition hover:-translate-y-0.5 hover:shadow-2xl bg-black!">
 						<div className="overflow-hidden">
 							{game.primaryMediaAsset ? (
 								<LazyLoadedImage
@@ -73,14 +73,14 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
 									size="384x216" // match game thumbnail size
 								/>
 							) : (
-								<div className="w-full h-full flex items-center justify-center bg-muted">
+								<div className="w-full h-full flex items-center justify-center bg-transparent">
 									<span className="text-muted-foreground">
 										{":("}
 									</span>
 								</div>
 							)}
 						</div>
-					<div className="pointer-events-none absolute inset-0 bg-crust/40 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">

components/roblox/UserProfileHeader.tsx

@@ -19,7 +19,6 @@ 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">
@@ -42,12 +41,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;
 

components/ui/card.tsx

@@ -8,10 +8,7 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<div
 		ref={ref}
-		className={cn(
-			"panel-soft text-card-foreground shadow-sm",
-			className
-		)}
+		className={cn("panel-soft text-card-foreground shadow-sm", className)}
 		{...props}
 	/>
 ));