fix delete dialog for copilot keys

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/copilot/copilot.tsx

@@ -1,14 +1,15 @@
 import { useState } from 'react'
 import { Check, Copy, Plus } from 'lucide-react'
 import {
+  Button,
   Modal,
   ModalContent,
   ModalDescription,
   ModalFooter,
   ModalHeader,
   ModalTitle,
 } from '@/components/emcn'
-import { Button, Input, Label } from '@/components/ui'
+import { Label } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
 import {
   type CopilotKey,
@@ -268,21 +269,6 @@ export function Copilot() {
             </ModalDescription>
           </ModalHeader>
 
-          {deleteKey && (
-            <div className='py-2'>
-              <p className='mb-2 font-[360] text-sm'>
-                Enter <span className='font-semibold'>{deleteKey.displayKey}</span> to confirm.
-              </p>
-              <Input
-                value={deleteConfirmationKey}
-                onChange={(e) => setDeleteConfirmationKey(e.target.value)}
-                placeholder='Type key to confirm'
-                className='h-9 rounded-[8px]'
-                autoFocus
-              />
-            </div>
-          )}
-
           <ModalFooter className='flex'>
             <Button
               className='h-9 w-full rounded-[8px] bg-background text-foreground hover:bg-muted dark:bg-background dark:text-foreground dark:hover:bg-muted/80'
@@ -297,7 +283,6 @@ export function Copilot() {
             <Button
               onClick={handleDeleteKey}
               className='h-9 w-full rounded-[8px] bg-red-500 text-white transition-all duration-200 hover:bg-red-600 dark:bg-red-500 dark:hover:bg-red-600'
-              disabled={!deleteKey || deleteConfirmationKey !== deleteKey.displayKey}
             >
               Delete
             </Button>

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-members/team-members.tsx

@@ -1,7 +1,5 @@
 import { useState } from 'react'
-import { UserX, X } from 'lucide-react'
-import { Button, Tooltip } from '@/components/emcn'
-import { Button as UIButton } from '@/components/ui/button'
+import { Button } from '@/components/emcn'
 import { UserAvatar } from '@/components/user-avatar/user-avatar'
 import { createLogger } from '@/lib/logs/console/logger'
 import type { Invitation, Member, Organization } from '@/lib/organization'
@@ -214,45 +212,25 @@ export function TeamMembers({
                 item.type === 'member' &&
                 item.role !== 'owner' &&
                 item.email !== currentUserEmail && (
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <UIButton
-                        variant='outline'
-                        size='sm'
-                        onClick={() => onRemoveMember(item.member)}
-                        className='h-8 w-8 rounded-[8px] p-0'
-                      >
-                        <UserX className='h-4 w-4' />
-                      </UIButton>
-                    </Tooltip.Trigger>
-                    <Tooltip.Content side='left'>Remove Member</Tooltip.Content>
-                  </Tooltip.Root>
+                  <Button
+                    variant='ghost'
+                    onClick={() => onRemoveMember(item.member)}
+                    className='h-8 text-muted-foreground hover:text-foreground'
+                  >
+                    Remove
+                  </Button>
                 )}
 
               {/* Admin can cancel invitations */}
               {isAdminOrOwner && item.type === 'invitation' && (
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <UIButton
-                      variant='outline'
-                      size='sm'
-                      onClick={() => handleCancelInvitation(item.invitation.id)}
-                      disabled={cancellingInvitations.has(item.invitation.id)}
-                      className='h-8 w-8 rounded-[8px] p-0'
-                    >
-                      {cancellingInvitations.has(item.invitation.id) ? (
-                        <span className='h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent' />
-                      ) : (
-                        <X className='h-4 w-4' />
-                      )}
-                    </UIButton>
-                  </Tooltip.Trigger>
-                  <Tooltip.Content side='left'>
-                    {cancellingInvitations.has(item.invitation.id)
-                      ? 'Cancelling...'
-                      : 'Cancel Invitation'}
-                  </Tooltip.Content>
-                </Tooltip.Root>
+                <Button
+                  variant='ghost'
+                  onClick={() => handleCancelInvitation(item.invitation.id)}
+                  disabled={cancellingInvitations.has(item.invitation.id)}
+                  className='h-8 text-muted-foreground hover:text-foreground'
+                >
+                  {cancellingInvitations.has(item.invitation.id) ? 'Cancelling...' : 'Cancel'}
+                </Button>
               )}
             </div>
           </div>

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats/team-seats.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Tooltip } from '@/components/emcn'
-import { Button } from '@/components/ui/button'
+import { Button, Combobox, type ComboboxOption, Tooltip } from '@/components/emcn'
 import {
   Dialog,
   DialogContent,
@@ -10,13 +9,6 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { Label } from '@/components/ui/label'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
 import { DEFAULT_TEAM_TIER_COST_LIMIT } from '@/lib/billing/constants'
 import { env } from '@/lib/env'
 
@@ -63,6 +55,11 @@ export function TeamSeats({
     await onConfirm(selectedSeats)
   }
 
+  const seatOptions: ComboboxOption[] = [1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50].map((num) => ({
+    value: num.toString(),
+    label: `${num} ${num === 1 ? 'seat' : 'seats'} ($${num * costPerSeat}/month)`,
+  }))
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
@@ -73,21 +70,12 @@ export function TeamSeats({
 
         <div className='py-4'>
           <Label htmlFor='seats'>Number of seats</Label>
-          <Select
+          <Combobox
+            options={seatOptions}
             value={selectedSeats.toString()}
-            onValueChange={(value) => setSelectedSeats(Number.parseInt(value))}
-          >
-            <SelectTrigger id='seats' className='rounded-[8px]'>
-              <SelectValue placeholder='Select number of seats' />
-            </SelectTrigger>
-            <SelectContent>
-              {[1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50].map((num) => (
-                <SelectItem key={num} value={num.toString()}>
-                  {num} {num === 1 ? 'seat' : 'seats'} (${num * costPerSeat}/month)
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+            onChange={(value) => setSelectedSeats(Number.parseInt(value))}
+            placeholder='Select number of seats'
+          />
 
           <p className='mt-2 text-muted-foreground text-sm'>
             Your team will have {selectedSeats} {selectedSeats === 1 ? 'seat' : 'seats'} with a
@@ -123,6 +111,7 @@ export function TeamSeats({
             <Tooltip.Trigger asChild>
               <span>
                 <Button
+                  variant='primary'
                   onClick={handleConfirm}
                   disabled={
                     isLoading ||