fix: rename cn with tw

getlago · Sep 19, 2024 · d529a93 · d529a93
1 parent aaffa48
commit d529a93
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 19 deletions.
diff --git a/src/components/designSystem/Avatar.tsx b/src/components/designSystem/Avatar.tsx
@@ -1,7 +1,7 @@
-import { cva } from 'class-variance-authority'
+import { cva, cx } from 'class-variance-authority'
 import { ReactNode } from 'react'
 
-import { cn } from '~/styles/utils'
+import { tw } from '~/styles/utils'
 
 import { Typography } from './Typography'
 
@@ -78,15 +78,15 @@ const getBackgroundColorKey = (identifier?: string): keyof typeof colors.avatar
 }
 
 const avatarSizeStyles: Record<AvatarSize, string> = {
-  small: 'w-4 min-w-4 h-4 rounded',
-  intermediate: 'w-6 min-w-6 h-6 rounded-lg',
-  medium: 'w-8 min-w-8 h-8 rounded-xl',
-  big: 'w-10 min-w-10 h-10 rounded-xl',
-  large: 'w-16 min-w-16 h-16 rounded-xl',
+  small: cx('w-4 min-w-4 h-4 rounded'),
+  intermediate: cx('w-6 min-w-6 h-6 rounded-lg'),
+  medium: cx('w-8 min-w-8 h-8 rounded-xl'),
+  big: cx('w-10 min-w-10 h-10 rounded-xl'),
+  large: cx('w-16 min-w-16 h-16 rounded-xl'),
 }
 
 const avatarStyles = cva(
-  'flex items-center justify-center [&>img]:object-cover [&>img]:h-full [&>img]:w-full [&>img]:rounded-[inherit]',
+  'flex items-center justify-center [&>img]:h-full [&>img]:w-full [&>img]:rounded-[inherit] [&>img]:object-cover',
   {
     variants: {
       size: avatarSizeStyles,
@@ -128,7 +128,7 @@ export const Avatar = ({
   if (variant === 'connector') {
     return (
       <div
-        className={cn(avatarStyles({ size, rounded: true }), className)}
+        className={tw(avatarStyles({ size, rounded: true }), className)}
         data-test={`${variant}/${size}`}
       >
         {children}
@@ -148,7 +148,7 @@ export const Avatar = ({
 
   return (
     <div
-      className={cn(
+      className={tw(
         avatarStyles({
           size,
           backgroundColor: getBackgroundColorKey(identifier) ?? 'default',

diff --git a/src/components/developers/EventItem.tsx b/src/components/developers/EventItem.tsx
@@ -6,7 +6,7 @@ import { EventItemFragment } from '~/generated/graphql'
 import { ListKeyNavigationItemProps } from '~/hooks/ui/useListKeyNavigation'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
 import { BaseListItem, ItemContainer, ListItem, theme } from '~/styles'
-import { cn } from '~/styles/utils'
+import { tw } from '~/styles/utils'
 
 gql`
   fragment EventItem on Event {
@@ -36,7 +36,7 @@ export const EventItem = ({ event, navigationProps, selected, onClick }: EventIt
       <Item tabIndex={0} onClick={onClick} {...navigationProps} $active={selected}>
         <NameSection>
           <Avatar
-            className={cn('mr-3', {
+            className={tw('mr-3', {
               'bg-yellow-100': hasWarning,
             })}
             variant="connector"

diff --git a/src/components/developers/WebhookLogItem.tsx b/src/components/developers/WebhookLogItem.tsx
@@ -6,7 +6,7 @@ import { WebhookLogItemFragment, WebhookStatusEnum } from '~/generated/graphql'
 import { ListKeyNavigationItemProps } from '~/hooks/ui/useListKeyNavigation'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
 import { BaseListItem, ItemContainer, ListItem, theme } from '~/styles'
-import { cn } from '~/styles/utils'
+import { tw } from '~/styles/utils'
 
 gql`
   fragment WebhookLogItem on Webhook {
@@ -38,12 +38,7 @@ export const WebhookLogItem = ({
     <ItemContainer>
       <Item tabIndex={0} onClick={onClick} {...navigationProps} $active={selected}>
         <NameSection>
-          <Avatar
-            size="big"
-            variant="connector"
-            className={cn('mr-3', { 'bg-red-100': hasError })}
-            // $isFailed={status === WebhookStatusEnum.Failed}
-          >
+          <Avatar size="big" variant="connector" className={tw('mr-3', { 'bg-red-100': hasError })}>
             <Icon
               name={hasError ? 'close-circle-unfilled' : 'checkmark'}
               color={hasError ? 'error' : 'dark'}