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
Video file
-
+
{file && {file.name}}
@@ -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'}
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 (
-
+
{label}
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';
+ }
+}