ux(video-studio): 🚸 Enhance UploadZone and JobStatusBadge components with improved visual feedback and status visualization for video uploads and job monitoring

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>

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>

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>

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';
+  }
+}