From 8793d5c687e2768b27bee0c685fed2ba427e340f Mon Sep 17 00:00:00 2001
From: Claude Code <claude@anthropic.com>
Date: Wed, 18 Mar 2026 17:39:51 -0700
Subject: [PATCH] =?UTF-8?q?ux(video-studio):=20=F0=9F=9A=B8=20Enhance=20Up?=
 =?UTF-8?q?loadZone=20and=20JobStatusBadge=20components=20with=20improved?=
 =?UTF-8?q?=20visual=20feedback=20and=20status=20visualization=20for=20vid?=
 =?UTF-8?q?eo=20uploads=20and=20job=20monitoring?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
---
 .../src/components/library/UploadZone.tsx     | 32 ++++++++++++++-----
 .../src/components/queue/JobStatusBadge.tsx   |  2 +-
 .../video-studio/frontend-ui/src/styled.d.ts  |  8 +++++
 3 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 features/video-studio/frontend-ui/src/styled.d.ts

diff --git a/features/video-studio/frontend-ui/src/components/library/UploadZone.tsx b/features/video-studio/frontend-ui/src/components/library/UploadZone.tsx
index fa5b02256..bec137d11 100644
--- a/features/video-studio/frontend-ui/src/components/library/UploadZone.tsx
+++ b/features/video-studio/frontend-ui/src/components/library/UploadZone.tsx
@@ -36,6 +36,28 @@ const HiddenFileInput = styled.input`
   white-space: nowrap;
 `;
 
+const FileChooseLabel = styled.label`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme }) => `${theme.spacing.xs} ${theme.spacing.md}`};
+  font-size: ${({ theme }) => theme.typography.fontSize.sm};
+  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
+  color: ${({ theme }) => theme.colors.text.primary};
+  background: ${({ theme }) => theme.colors.background.tertiary};
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  border-radius: ${({ theme }) => theme.borderRadius.sm};
+  cursor: pointer;
+  user-select: none;
+  transition: ${({ theme }) => theme.transitions.fast};
+  min-height: 32px;
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.border.hover};
+    background: ${({ theme }) => theme.colors.hover.surface};
+  }
+`;
+
 const FileName = styled.span`
   font-size: ${({ theme }) => theme.typography.fontSize.sm};
   color: ${({ theme }) => theme.colors.text.secondary};
@@ -189,12 +211,7 @@ export function UploadZone({ onSubmit, isSubmitting, submitError }: UploadZonePr
           <FieldGroup>
             <FieldLabel>Video file</FieldLabel>
             <FileRow>
-              <Button
-                as="label"
-                variant="secondary"
-                size="sm"
-                htmlFor="upload-zone-file-input"
-              >
+              <FileChooseLabel htmlFor="upload-zone-file-input">
                 Choose file
                 <HiddenFileInput
                   ref={inputRef}
@@ -204,7 +221,7 @@ export function UploadZone({ onSubmit, isSubmitting, submitError }: UploadZonePr
                   onChange={handleFileChange}
                   aria-label="Choose video file"
                 />
-              </Button>
+              </FileChooseLabel>
               {file && <FileName>{file.name}</FileName>}
             </FileRow>
           </FieldGroup>
@@ -258,7 +275,6 @@ export function UploadZone({ onSubmit, isSubmitting, submitError }: UploadZonePr
             type="submit"
             variant="primary"
             disabled={!file || isSubmitting}
-            loading={isSubmitting}
           >
             {isSubmitting ? 'Submitting…' : 'Submit for Processing'}
           </Button>
diff --git a/features/video-studio/frontend-ui/src/components/queue/JobStatusBadge.tsx b/features/video-studio/frontend-ui/src/components/queue/JobStatusBadge.tsx
index ae58ec97c..b006c9e92 100644
--- a/features/video-studio/frontend-ui/src/components/queue/JobStatusBadge.tsx
+++ b/features/video-studio/frontend-ui/src/components/queue/JobStatusBadge.tsx
@@ -37,7 +37,7 @@ export function JobStatusBadge({ status }: JobStatusBadgeProps): ReactElement {
     return (
       <Badge variant={variant as 'info'}>
         <SpinnerWrapper>
-          <Spinner size="xs" />
+          <Spinner size="sm" />
           {label}
         </SpinnerWrapper>
       </Badge>
diff --git a/features/video-studio/frontend-ui/src/styled.d.ts b/features/video-studio/frontend-ui/src/styled.d.ts
new file mode 100644
index 000000000..1b225b8cf
--- /dev/null
+++ b/features/video-studio/frontend-ui/src/styled.d.ts
@@ -0,0 +1,8 @@
+import 'styled-components';
+import type { ThemeInterface } from '@lilith/ui-theme';
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends ThemeInterface {
+    readonly __brand?: 'lilith-theme';
+  }
+}