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