improvement(ui): use a chip for PII configuration

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx

@@ -4,11 +4,11 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   Button,
   Checkbox,
+  Chip,
   ChipModal,
   ChipModalBody,
   ChipModalField,
   ChipModalHeader,
-  cn,
 } from '@sim/emcn'
 import { ManageWorkspace } from '@sim/emcn/icons'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
@@ -27,9 +27,9 @@ function SelectedCountDisplay({ noneSelected, allSelected, count }: SelectedCoun
     return <span className='truncate text-[var(--text-muted)] text-sm'>None selected</span>
   }
   if (allSelected) {
-    return <span className='truncate text-[var(--text-primary)] text-sm'>All selected</span>
+    return <span className='truncate text-[var(--text-body)] text-sm'>All selected</span>
   }
-  return <span className='truncate text-[var(--text-primary)] text-sm'>{count} selected</span>
+  return <span className='truncate text-[var(--text-body)] text-sm'>{count} selected</span>
 }
 
 interface GroupedCheckboxListProps {
@@ -113,25 +113,22 @@ export function GroupedCheckboxList({
 
   return (
     <>
-      <Button
-        variant='ghost'
+      <Chip
+        variant='border-shadow'
+        fullWidth
+        leftIcon={ManageWorkspace}
         disabled={disabled}
         onClick={() => setOpen(true)}
-        className={cn(
-          'flex w-full cursor-pointer justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] font-sans text-[var(--text-primary)] text-sm focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
-          'hover-hover:bg-[var(--surface-active)]'
-        )}
+        rightAdornment={
+          <SelectedCountDisplay
+            noneSelected={noneSelected}
+            allSelected={allSelected}
+            count={selectedValues.length}
+          />
+        }
       >
-        <span className='flex flex-1 items-center gap-2 truncate text-[var(--text-muted)]'>
-          <ManageWorkspace className='size-4 shrink-0 opacity-50' />
-          <span className='truncate'>Configure PII Types</span>
-        </span>
-        <SelectedCountDisplay
-          noneSelected={noneSelected}
-          allSelected={allSelected}
-          count={selectedValues.length}
-        />
-      </Button>
+        Configure PII Types
+      </Chip>
       <ChipModal open={open} onOpenChange={setOpen} srTitle='Select PII Types to Detect' size='lg'>
         <ChipModalHeader onClose={() => setOpen(false)}>Select PII Types to Detect</ChipModalHeader>
         <ChipModalBody onWheel={(e) => e.stopPropagation()}>