Activity log chips styling and group move renderer updates

Author: devkiran

apps/web/ui/activity-logs/activity-entry-chips.tsx

@@ -3,7 +3,7 @@ import { getResourceColorData, RAINBOW_CONIC_GRADIENT } from "@/ui/colors";
 import { Bolt } from "@dub/ui";
 import { cn, OG_AVATAR_URL } from "@dub/utils";
 import { ReactNode } from "react";
-import { ActorType, getActorType } from "./activity-log-registry";
+import { getActorType } from "./activity-log-registry";
 
 interface GroupPillProps extends Pick<GroupProps, "name" | "color"> {}
 
@@ -16,13 +16,17 @@ interface UserChipProps {
   user: NonNullable<ActivityLog["user"]>;
 }
 
+interface ActorChipProps {
+  log: ActivityLog;
+}
+
 export function GroupPill({ name, color }: GroupPillProps) {
   const colorClassName = color
     ? getResourceColorData(color)?.groupVariants
     : undefined;
 
   return (
-    <span className="inline-flex items-center gap-1.5 rounded-md bg-neutral-100 px-2 py-0.5 text-sm font-medium text-neutral-700">
+    <span className="inline-flex items-center gap-1 rounded-lg bg-neutral-100 px-2 py-0.5 text-sm font-medium text-neutral-700">
       <span
         className={cn("size-2.5 shrink-0 rounded-full", colorClassName)}
         {...(!colorClassName && {
@@ -38,20 +42,16 @@ export function GroupPill({ name, color }: GroupPillProps) {
 
 export function SourcePill({ icon, label }: SourcePillProps) {
   return (
-    <span className="inline-flex items-center gap-1.5 rounded-md bg-neutral-100 px-2 py-0.5 text-sm font-medium text-neutral-700">
-      {icon && (
-        <span className="flex size-3.5 items-center justify-center text-neutral-500">
-          {icon}
-        </span>
-      )}
+    <span className="inline-flex items-center gap-1 rounded-lg bg-neutral-100 px-2 py-0.5 text-sm font-medium text-neutral-700">
+      {icon && <span className="size-2.5 shrink-0 rounded-full">{icon}</span>}
       {label}
     </span>
   );
 }
 
 export function UserChip({ user }: UserChipProps) {
   return (
-    <span className="inline-flex items-center gap-1.5 rounded-md bg-neutral-100 px-2 py-0.5 text-sm font-medium text-neutral-700">
+    <span className="inline-flex items-center gap-1 rounded-lg bg-neutral-100 px-2 py-0.5 text-sm font-medium text-neutral-700">
       <img
         src={user.image || `${OG_AVATAR_URL}${user.id}`}
         alt={`${user.name || user.email || "User"}`}
@@ -64,17 +64,13 @@ export function UserChip({ user }: UserChipProps) {
 
 export function SystemChip() {
   return (
-    <span className="inline-flex items-center gap-1.5 rounded-md bg-neutral-100 px-2 py-0.5 text-sm font-medium text-neutral-700">
+    <span className="inline-flex items-center gap-1 rounded-lg bg-neutral-100 px-2 py-0.5 text-sm font-medium text-neutral-700">
       <Bolt className="size-3 text-neutral-500" />
       System
     </span>
   );
 }
 
-interface ActorChipProps {
-  log: ActivityLog;
-}
-
 export function ActorChip({ log }: ActorChipProps) {
   const actorType = getActorType(log);
 
@@ -84,7 +80,3 @@ export function ActorChip({ log }: ActorChipProps) {
 
   return <SystemChip />;
 }
-
-export function getActorPreposition(actorType: ActorType): string {
-  return "by";
-}

apps/web/ui/activity-logs/activity-item.tsx

@@ -37,7 +37,7 @@ export function ActivityItem({ log, isLast = false }: ActivityItemProps) {
       </div>
 
       <div className="flex min-w-0 flex-1 flex-col gap-1 pb-6">
-        <div className="flex flex-wrap items-center gap-1 text-sm text-neutral-700">
+        <div className="flex flex-wrap items-center gap-1.5 text-sm text-neutral-700">
           <Renderer log={log} />
         </div>
 

apps/web/ui/activity-logs/renderers/partner-group-changed-renderer.tsx

@@ -1,13 +1,20 @@
 import useGroups from "@/lib/swr/use-groups";
 import { ActivityLog, GroupProps } from "@/lib/types";
 import { Bolt } from "@dub/ui";
+import { ReactNode } from "react";
 import { GroupPill, SourcePill, UserChip } from "../activity-entry-chips";
 
 interface GroupChangeSet {
   old: Pick<GroupProps, "id" | "name">;
   new: Pick<GroupProps, "id" | "name">;
 }
 
+function Label({ children }: { children: ReactNode }) {
+  return (
+    <span className="text-sm font-medium text-neutral-800">{children}</span>
+  );
+}
+
 export function PartnerGroupChangedRenderer({ log }: { log: ActivityLog }) {
   const { groups } = useGroups();
 
@@ -21,23 +28,21 @@ export function PartnerGroupChangedRenderer({ log }: { log: ActivityLog }) {
   const newGroupColor =
     groups?.find((g) => g.id === newGroup.id)?.color ?? null;
 
-  if (log.user) {
-    return (
-      <>
-        <span>Moved to</span>
-        <GroupPill name={newGroup.name} color={newGroupColor} />
-        <span>by</span>
-        <UserChip user={log.user} />
-      </>
-    );
-  }
-
   return (
     <>
-      <span>Moved to</span>
+      <Label>Moved to</Label>
       <GroupPill name={newGroup.name} color={newGroupColor} />
-      <span>automatically by</span>
-      <SourcePill icon={<Bolt className="size-3" />} label="Group move" />
+      {log.user ? (
+        <>
+          <Label>by</Label>
+          <UserChip user={log.user} />
+        </>
+      ) : (
+        <>
+          <Label>automatically by</Label>
+          <SourcePill icon={<Bolt className="size-3" />} label="Group move" />
+        </>
+      )}
     </>
   );
 }