quick fixes - add utility classes and remove commentsd

Author: laurenpudz

client/src/components/ui/GameArtCarousel.tsx

@@ -7,8 +7,6 @@ import { useEffect, useRef, useState } from "react";
 
 import type { UiArtwork } from "@/hooks/useGames";
 
-// import { UiEvent as EventType } from "@/hooks/useEvents";
-
 type GameArtCarouselProps = {
   items: UiArtwork[];
 };

client/src/components/ui/ImageCard.tsx

@@ -14,7 +14,7 @@ interface ImageCardProps {
 
 const ImageCard = ({
   imageSrc,
-  imageAlt = "Image",
+  imageAlt = "Game Artwork",
   children,
   backContent,
   href,
@@ -49,7 +49,7 @@ const ImageCard = ({
   return (
     <div className="p-4" style={{ perspective: "1200px" }}>
       <div
-        className={`relative h-[30rem] w-full max-w-[20rem] select-none rounded-[10px] shadow-[12px_17px_51px_rgba(0,0,0,0.22)] transition-transform duration-500 ${
+        className={`relative h-[30rem] w-full max-w-2xl select-none rounded-xl shadow-[12px_17px_51px_rgba(0,0,0,0.22)] transition-transform duration-500 ${
           (isMobile && href) || (backContent && !disableFlip && !hasImageError)
             ? "cursor-pointer"
             : "cursor-default"
@@ -61,7 +61,7 @@ const ImageCard = ({
         onClick={handleClick}
       >
         <div
-          className="absolute inset-0 overflow-hidden rounded-[10px] border border-white bg-dark_alt backdrop-blur-md"
+          className="absolute inset-0 overflow-hidden rounded-xl border border-white bg-dark_alt backdrop-blur-md"
           style={{ backfaceVisibility: "hidden" }}
         >
           {imageSrc && !hasImageError ? (
@@ -94,7 +94,7 @@ const ImageCard = ({
 
         {backContent && (
           <div
-            className="absolute inset-0 flex flex-col overflow-y-auto rounded-[10px] border border-white bg-dark_3 p-6 text-light_1"
+            className="absolute inset-0 flex flex-col overflow-y-auto rounded-xl border border-white bg-dark_3 p-6 text-light_1"
             style={{
               backfaceVisibility: "hidden",
               transform: "rotateY(180deg)",

client/src/components/ui/MemberProjectSection.tsx

@@ -18,7 +18,7 @@ export default function MemberProjectSection(props: {
       </h2>
       <div className="mb-12">
         {!games || games.length === 0 ? (
-          <p className="my-10 text-center font-firaCode text-lg text-[--light-3]">
+          <p className="my-10 text-center font-firaCode text-lg text-light_3">
             No games available.
           </p>
         ) : (
@@ -45,7 +45,7 @@ export default function MemberProjectSection(props: {
                   <p className="max-w-96 font-firaCode text-xl font-semibold">
                     {game.game_data.name}
                   </p>
-                  <p className="line-clamp-1 max-w-96 font-firaCode text-[--light-3]">
+                  <p className="line-clamp-1 max-w-96 font-firaCode text-light_3">
                     {game.game_data.description}
                   </p>
                 </div>
@@ -60,7 +60,7 @@ export default function MemberProjectSection(props: {
       </h2>
       <div className="mb-12">
         {!art || art.length === 0 ? (
-          <p className="my-10 text-center font-firaCode text-lg text-[--light-3]">
+          <p className="my-10 text-center font-firaCode text-lg text-light_3">
             No games available.
           </p>
         ) : (
@@ -89,7 +89,7 @@ export default function MemberProjectSection(props: {
                   <p className="max-w-96 font-firaCode text-xl font-semibold">
                     {artwork.artwork_data.name}
                   </p>
-                  <p className="line-clamp-1 max-w-96 font-firaCode text-[--light-3]">
+                  <p className="text-light_3] line-clamp-1 max-w-96 font-firaCode">
                     {artwork.artwork_data.description}
                   </p>
                 </div>

client/tailwind.config.ts

@@ -70,6 +70,7 @@ const config = {
         neutral_4: "var(--neutral-4)",
         light_1: "var(--light-1)",
         light_2: "var(--light-2)",
+        light_3: "var(--light-3)",
       },
       borderRadius: {
         lg: "var(--radius)",