fix(ui): improve destructive button contrast in dark mode

apps/docs/src/app/global.css

@@ -83,7 +83,7 @@
   --accent: hsl(0 0% 27.8431%);
   --accent-foreground: hsl(95.0847 71.0843% 67.451%);
   --destructive: hsl(0 86.5979% 61.9608%);
-  --destructive-foreground: hsl(0 87.6289% 19.0196%);
+  --destructive-foreground: hsl(0 0% 98.0392%);
   --border: hsl(0 0% 27.8431%);
   --input: hsl(0 0% 27.8431%);
   --ring: hsl(95.0847 71.0843% 67.451%);

apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx

@@ -240,9 +240,10 @@ export const DocumentSigningPageViewV2 = () => {
             {/* Horizontal envelope item selector */}
             {envelopeItems.length > 1 && (
               <div className="flex h-fit space-x-2 overflow-x-auto p-2 pt-4 sm:p-4">
-                {envelopeItems.map((doc) => (
+                {envelopeItems.map((doc, i) => (
                   <EnvelopeItemSelector
                     key={doc.id}
+                    number={i + 1}
                     primaryText={doc.title}
                     secondaryText={
                       <Plural

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx

@@ -21,6 +21,7 @@ import { getEnvelopeItemPermissions } from '@documenso/lib/utils/envelope';
 import { getOverlappingFieldPairs } from '@documenso/lib/utils/fields-overlap';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { cn } from '@documenso/ui/lib/utils';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
@@ -212,19 +213,26 @@ export const EnvelopeEditorFieldsPage = () => {
             editorConfig.envelopeItems.allowReplace &&
             envelopeItemPermissions.canFileBeChanged
               ? (item) => (
-                  <EnvelopeItemEditDialog
-                    envelopeItem={item}
-                    allowConfigureTitle={editorConfig.envelopeItems?.allowConfigureTitle ?? false}
-                    trigger={
-                      <button
-                        type="button"
-                        className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity duration-150 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100"
-                        data-testid={`envelope-item-edit-button-${item.id}`}
-                      >
-                        <PencilIcon className="h-3.5 w-3.5" />
-                      </button>
-                    }
-                  />
+                  <div className="relative flex h-5 w-5 flex-shrink-0 items-center justify-center">
+                    <div
+                      className={cn('h-2 w-2 rounded-full transition-opacity duration-150 group-hover:opacity-0', {
+                        'bg-green-500': currentEnvelopeItem?.id === item.id,
+                      })}
+                    />
+                    <EnvelopeItemEditDialog
+                      envelopeItem={item}
+                      allowConfigureTitle={editorConfig.envelopeItems?.allowConfigureTitle ?? false}
+                      trigger={
+                        <span
+                          className="absolute inset-0 flex cursor-pointer items-center justify-center opacity-0 transition-opacity duration-150 group-hover:opacity-100"
+                          onClick={(e) => e.stopPropagation()}
+                          data-testid={`envelope-item-edit-button-${item.id}`}
+                        >
+                          <PencilIcon className="h-3.5 w-3.5" />
+                        </span>
+                      }
+                    />
+                  </div>
                 )
               : undefined
           }

apps/remix/app/components/general/envelope-editor/envelope-file-selector.tsx

@@ -1,9 +1,9 @@
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { cn } from '@documenso/ui/lib/utils';
 import { Plural } from '@lingui/react/macro';
-import { FileTextIcon } from 'lucide-react';
 
 type EnvelopeItemSelectorProps = {
+  number: number;
   primaryText: React.ReactNode;
   secondaryText: React.ReactNode;
   isSelected: boolean;
@@ -12,6 +12,7 @@ type EnvelopeItemSelectorProps = {
 };
 
 export const EnvelopeItemSelector = ({
+  number,
   primaryText,
   secondaryText,
   isSelected,
@@ -19,42 +20,34 @@ export const EnvelopeItemSelector = ({
   actionSlot,
 }: EnvelopeItemSelectorProps) => {
   return (
-    <div
-      className={cn(
-        'group relative flex h-9 max-w-64 flex-shrink-0 items-center rounded-md border transition-colors',
+    <button
+      title={typeof primaryText === 'string' ? primaryText : undefined}
+      className={`group flex h-fit max-w-72 flex-shrink-0 cursor-pointer items-center space-x-3 rounded-lg border px-4 py-3 transition-colors ${
         isSelected
-          ? 'border-border bg-background text-foreground shadow-sm'
-          : 'border-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground',
-      )}
+          ? 'border-green-200 bg-green-50 text-green-900 dark:border-green-400/30 dark:bg-green-400/10 dark:text-green-400'
+          : 'border-border bg-muted/50 hover:bg-muted/70'
+      }`}
+      {...buttonProps}
     >
-      <button
-        type="button"
-        title={typeof primaryText === 'string' ? primaryText : undefined}
-        aria-pressed={isSelected}
-        className={cn(
-          'flex h-full min-w-0 cursor-pointer items-center gap-2 rounded-md pl-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-          actionSlot ? 'pr-1' : 'pr-3',
-        )}
-        {...buttonProps}
+      <div
+        className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full font-medium text-xs ${
+          isSelected ? 'bg-green-100 text-green-600' : 'bg-gray-200 text-gray-600'
+        }`}
       >
-        <FileTextIcon className="h-4 w-4 flex-shrink-0 opacity-60" />
-        <span className="truncate font-medium text-sm">{primaryText}</span>
-        {secondaryText ? (
-          <span
-            className={cn(
-              'flex-shrink-0 rounded-full px-1.5 py-px text-xs tabular-nums',
-              isSelected
-                ? 'bg-green-100 text-green-700 dark:bg-green-400/20 dark:text-green-400'
-                : 'bg-muted text-muted-foreground',
-            )}
-          >
-            {secondaryText}
-          </span>
-        ) : null}
-      </button>
-
-      {actionSlot && <div className="flex flex-shrink-0 items-center pr-2">{actionSlot}</div>}
-    </div>
+        {number}
+      </div>
+      <div className="min-w-0 text-left">
+        <div className="truncate font-medium text-sm">{primaryText}</div>
+        <div className="text-gray-500 text-xs">{secondaryText}</div>
+      </div>
+      {actionSlot ?? (
+        <div
+          className={cn('h-2 w-2 flex-shrink-0 rounded-full', {
+            'bg-green-500': isSelected,
+          })}
+        />
+      )}
+    </button>
   );
 };
 
@@ -74,10 +67,11 @@ export const EnvelopeRendererFileSelector = ({
   const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
 
   return (
-    <div className={cn('scrollbar-hidden flex h-fit flex-shrink-0 gap-1.5 overflow-x-auto py-3', className)}>
-      {envelopeItems.map((doc) => (
+    <div className={cn('scrollbar-hidden flex h-fit flex-shrink-0 space-x-2 overflow-x-auto p-4', className)}>
+      {envelopeItems.map((doc, i) => (
         <EnvelopeItemSelector
           key={doc.id}
+          number={i + 1}
           primaryText={doc.title}
           secondaryText={
             secondaryOverride ?? (

packages/ui/styles/theme.css

@@ -174,7 +174,7 @@
     --accent-foreground: 95.08 71.08% 67.45%;
 
     --destructive: 0 87% 62%;
-    --destructive-foreground: 0 87% 19%;
+    --destructive-foreground: 0 0% 98%;
 
     --ring: 95.08 71.08% 67.45%;