From 2cf1a0e79b54393f73d09af7d11558c3c4db43cb Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Sat, 19 Sep 2026 13:41:43 -0700
Subject: [PATCH] improvement(ui): reuse the shared branding upload drop zone

---
 .../components/whitelabeling-settings.tsx     | 37 +------------------
 1 file changed, 1 insertion(+), 36 deletions(-)

diff --git a/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx b/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
index 128fc5aafbe..163375d336a 100644
--- a/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
+++ b/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
@@ -11,6 +11,7 @@ import { isEnterprise } from '@/lib/billing/plan-helpers'
 import { HEX_COLOR_REGEX } from '@/lib/branding'
 import type { OrganizationWhitelabelSettings } from '@/lib/branding/types'
 import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
+import { DropZone } from '@/app/workspace/[workspaceId]/components/drop-zone'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
@@ -27,42 +28,6 @@ import { useWorkspacesQuery } from '@/hooks/queries/workspace'
 
 const logger = createLogger('WhitelabelingSettings')
 
-interface DropZoneProps {
-  onDrop: (e: React.DragEvent) => void
-  children: React.ReactNode
-  className?: string
-}
-
-function DropZone({ onDrop, children, className }: DropZoneProps) {
-  const [isDragging, setIsDragging] = useState(false)
-
-  return (
-    <div
-      className={cn('relative', className)}
-      onDragOver={(e) => {
-        if (e.dataTransfer.types.includes('Files')) {
-          e.preventDefault()
-          setIsDragging(true)
-        }
-      }}
-      onDragLeave={(e) => {
-        if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-          setIsDragging(false)
-        }
-      }}
-      onDrop={(e) => {
-        setIsDragging(false)
-        onDrop(e)
-      }}
-    >
-      {children}
-      {isDragging && (
-        <div className='pointer-events-none absolute inset-0 z-10 rounded-lg border-[1.5px] border-[var(--brand-accent)] border-dashed bg-[color-mix(in_srgb,var(--brand-accent)_8%,transparent)]' />
-      )}
-    </div>
-  )
-}
-
 interface ColorInputProps {
   label: string
   value: string