improvement(ui): share inline filter and pagination actions

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx

@@ -536,12 +536,10 @@ const Pagination = memo(function Pagination({
               <Button
                 key={page}
                 type='button'
-                variant='ghost'
+                variant={page === currentPage ? 'subtle' : 'ghost'}
+                size='inline'
+                aria-current={page === currentPage ? 'page' : undefined}
                 onClick={() => onPageChange(page)}
-                className={cn(
-                  'h-auto p-0 text-sm hover-hover:bg-transparent hover-hover:text-[var(--text-body)]',
-                  page === currentPage ? 'text-[var(--text-body)]' : ''
-                )}
               >
                 {page}
               </Button>

apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-filter-heading.tsx

@@ -13,11 +13,7 @@ export function KnowledgeFilterHeading({ title, active, onClear }: KnowledgeFilt
     <div className='flex h-5 items-center justify-between'>
       <span className={FILTER_SECTION_LABEL_CLASS}>{title}</span>
       {active && (
-        <Button
-          variant='ghost'
-          onClick={onClear}
-          className='-mr-1 h-auto px-1 py-0.5 text-[var(--text-muted)] text-xs hover-hover:text-[var(--text-secondary)]'
-        >
+        <Button variant='ghost-secondary' size='inline' onClick={onClear} className='-mr-1'>
           Clear
         </Button>
       )}