🐛 Propagate missing className

Author: bal7hazar

packages/ui-next/src/components/modules/arcade/discovery-event/discovery-event.tsx

@@ -36,28 +36,47 @@ export const ArcadeDiscoveryEvent = ({
   Icon,
   achievement,
   variant,
+  className,
 }: ArcadeDiscoveryEventProps) => {
   return (
-    <div className={cn(arcadeDiscoveryEventVariants({ variant }))}>
+    <div className={cn(arcadeDiscoveryEventVariants({ variant }), className)}>
       <div className="flex items-center gap-x-1.5">
         {Icon ? Icon : <SpaceInvaderIcon size="sm" variant="solid" />}
         <CardTitle className="text-sm font-normal tracking-normal text-foreground-100">
           {name}
         </CardTitle>
         {achievement && (
-          <AchievementEvent title={achievement.title} icon={achievement.icon} />
+          <AchievementEvent
+            title={achievement.title}
+            icon={achievement.icon}
+            className={className}
+          />
         )}
       </div>
       <Timestamp timestamp={timestamp} />
     </div>
   );
 };
 
-const AchievementEvent = ({ title, icon }: { title: string; icon: string }) => {
+const AchievementEvent = ({
+  title,
+  icon,
+  className,
+}: {
+  title: string;
+  icon: string;
+  className?: string;
+}) => {
   return (
-    <div className="flex items-center gap-x-1.5">
+    <div
+      data-theme
+      className={cn(
+        "flex items-center gap-x-1.5 data-[theme=true]:text-primary",
+        className,
+      )}
+    >
       <p className="text-xs text-foreground-300">earned</p>
-      <div className="flex items-center gap-1 p-1 text-primary border-background-400 border rounded-sm">
+      <div className="flex items-center gap-1 p-1 border-background-400 border rounded-sm">
         <div className={cn(icon, "fa-solid w-3 h-3")} />
         <p className="text-xs">{title}</p>
       </div>

packages/ui-next/src/components/modules/arcade/discovery-group/discovery-group.stories.tsx

@@ -55,3 +55,24 @@ export default meta;
 type Story = StoryObj<typeof ArcadeDiscoveryGroup>;
 
 export const Default: Story = {};
+
+export const MultiColors: Story = {
+  render: (args) => {
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="rounded-lg overflow-hidden">
+          <ArcadeDiscoveryGroup
+            {...args}
+            className="data-[theme=true]:text-[#ff00ff]"
+          />
+        </div>
+        <div className="rounded-lg overflow-hidden">
+          <ArcadeDiscoveryGroup
+            {...args}
+            className="data-[theme=true]:text-[#00ff00]"
+          />
+        </div>
+      </div>
+    );
+  },
+};

packages/ui-next/src/components/modules/arcade/discovery-group/discovery-group.tsx

@@ -35,12 +35,18 @@ export const ArcadeDiscoveryGroup = ({
   game,
   events,
   variant,
+  className,
 }: ArcadeDiscoveryGroupProps) => {
   return (
-    <div className={cn(arcadeDiscoveryGroupVariants({ variant }))}>
+    <div className={cn(arcadeDiscoveryGroupVariants({ variant }), className)}>
       <ArcadeGameHeader variant={variant} {...game} />
       {events.map((event, index) => (
-        <ArcadeDiscoveryEvent key={index} variant={variant} {...event} />
+        <ArcadeDiscoveryEvent
+          key={index}
+          className={className}
+          variant={variant}
+          {...event}
+        />
       ))}
     </div>
   );