review feedback

NangoHQ · Feb 27, 2025 · 90a7328 · 90a7328
1 parent 78b01a6
commit 90a7328
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 26 deletions.
diff --git a/packages/webapp/src/components/ui/label/Tag.tsx b/packages/webapp/src/components/ui/label/Tag.tsx
@@ -14,13 +14,13 @@ const variantStyles = cva('', {
             neutral: 'bg-grayscale-900 border-grayscale-700 text-grayscale-100'
         },
         size: {
-            default: 'px-2 pt-[1px]',
-            small: 'px-1 pt-[1px]'
+            md: 'px-2 pt-[1px] leading-[17px]',
+            sm: 'px-1 pt-[1px] leading-[13px]'
         }
     },
     defaultVariants: {
         variant: 'neutral',
-        size: 'default'
+        size: 'md'
     }
 });
 
@@ -38,28 +38,16 @@ const textCaseStyles = cva('', {
     }
 });
 
-const sizeTextStyles = cva('text-[11px]', {
-    variants: {
-        size: {
-            default: 'leading-[17px]',
-            small: 'leading-[14px]'
-        }
-    },
-    defaultVariants: {
-        size: 'default'
-    }
-});
-
 export const Tag: React.FC<
     {
         children: React.ReactNode;
         textCase?: 'uppercase' | 'lowercase' | 'capitalize' | 'normal';
-        size?: 'default' | 'small';
+        size?: 'md' | 'sm';
     } & VariantProps<typeof variantStyles>
 > = ({ children, variant, textCase, size }) => {
     return (
         <div className={cn('inline-flex border-[0.5px] bg-opacity-30 rounded', variantStyles({ variant, size }))}>
-            <div className={cn(sizeTextStyles({ size }), textCaseStyles({ textCase }))}>{children}</div>
+            <div className={cn(textCaseStyles({ textCase }))}>{children}</div>
         </div>
     );
 };
diff --git a/packages/webapp/src/pages/Connection/components/SyncRow.tsx b/packages/webapp/src/pages/Connection/components/SyncRow.tsx
@@ -128,15 +128,16 @@ export const SyncRow: React.FC<{ sync: SyncResponse; connection: ApiConnectionFu
         <Table.Row className="text-white">
             <Table.Cell bordered>
                 <div className="w-36 max-w-3xl truncate">
-                    {sync.name}
-                    {showSyncVariant && ' '}
-                    {showSyncVariant && (
-                        <SimpleTooltip tooltipContent={sync.variant}>
-                            <Tag variant="gray1" textCase="lowercase" size="small">
-                                {truncateMiddle(sync.variant)}
-                            </Tag>
-                        </SimpleTooltip>
-                    )}
+                    <div className="flex gap-2">
+                        {sync.name}
+                        {showSyncVariant && (
+                            <SimpleTooltip tooltipContent={sync.variant}>
+                                <Tag variant="gray1" textCase="lowercase" size="sm">
+                                    {truncateMiddle(sync.variant)}
+                                </Tag>
+                            </SimpleTooltip>
+                        )}
+                    </div>
                 </div>
             </Table.Cell>
             <Table.Cell bordered>