table hover improvements

Author: samejr

apps/webapp/app/components/GitMetadata.tsx

@@ -25,9 +25,10 @@ export function GitMetadataBranch({
         <LinkButton
           variant="minimal/small"
           LeadingIcon={<GitBranchIcon className="size-4" />}
+          leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
           to={git.branchUrl}
-          className="pl-1"
+          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
         >
           {git.branchName}
         </LinkButton>
@@ -49,8 +50,9 @@ export function GitMetadataCommit({
           variant="minimal/small"
           to={git.commitUrl}
           LeadingIcon={<GitCommitIcon className="size-4" />}
+          leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
-          className="pl-1"
+          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
         >
           {`${git.shortSha} / ${git.commitMessage}`}
         </LinkButton>
@@ -74,8 +76,9 @@ export function GitMetadataPullRequest({
           variant="minimal/small"
           to={git.pullRequestUrl}
           LeadingIcon={<GitPullRequestIcon className="size-4" />}
+          leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
-          className="pl-1"
+          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
         >
           #{git.pullRequestNumber} {git.pullRequestTitle}
         </LinkButton>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx

@@ -257,7 +257,7 @@ export default function Page() {
                           <TableRow key={deployment.id} className="group" isSelected={isSelected}>
                             <TableCell to={path} isTabbableCell isSelected={isSelected}>
                               <div className="flex items-center gap-2">
-                                <Paragraph variant="extra-small">{deployment.shortCode}</Paragraph>
+                                <Paragraph variant="extra-small" className="group-hover/table-row:text-text-bright">{deployment.shortCode}</Paragraph>
                                 {deployment.label && (
                                   <Badge variant="extra-small">{titleCase(deployment.label)}</Badge>
                                 )}
@@ -419,8 +419,8 @@ export default function Page() {
 export function UserTag({ name, avatarUrl }: { name: string; avatarUrl?: string }) {
   return (
     <div className="flex items-center gap-1">
-      <UserAvatar avatarUrl={avatarUrl} name={name} className="h-4 w-4" />
-      <Paragraph variant="extra-small">{name}</Paragraph>
+      <UserAvatar avatarUrl={avatarUrl} name={name} className="h-4 w-4 group-hover/table-row:text-text-bright" />
+      <Paragraph variant="extra-small" className="group-hover/table-row:text-text-bright">{name}</Paragraph>
     </div>
   );
 }