diff --git a/packages/fakeyou.com/src/components/common/FileDetails/FileDetails.tsx b/packages/fakeyou.com/src/components/common/FileDetails/FileDetails.tsx index e809eaad34..104d7a6d2f 100644 --- a/packages/fakeyou.com/src/components/common/FileDetails/FileDetails.tsx +++ b/packages/fakeyou.com/src/components/common/FileDetails/FileDetails.tsx @@ -8,9 +8,16 @@ interface Props { file?: any; hideClearDetails?: boolean; icon?: any; + className?: string } -export default function FileDetails({ clear = () => {}, file, hideClearDetails, icon }: Props) { +export default function FileDetails({ + clear = () => {}, + file, + hideClearDetails, + icon, + className +}: Props) { const fileSize = file && file.size >= 1024 * 1024 ? (file.size / 1024 / 1024).toFixed(2) + " MB" @@ -18,7 +25,7 @@ export default function FileDetails({ clear = () => {}, file, hideClearDetails, ? `${Math.floor(file.size / 1024)} KB` : null; - return
+ return
{ icon && }
diff --git a/packages/fakeyou.com/src/components/common/FileLabel/FileLabel.tsx b/packages/fakeyou.com/src/components/common/FileLabel/FileLabel.tsx index 6f422e8746..1e4a66afc6 100644 --- a/packages/fakeyou.com/src/components/common/FileLabel/FileLabel.tsx +++ b/packages/fakeyou.com/src/components/common/FileLabel/FileLabel.tsx @@ -4,12 +4,13 @@ import { faFileArrowUp } from "@fortawesome/pro-solid-svg-icons"; import "./FileLabel.scss"; interface Props { - fileTypes?: string[]; + fileTypes?: string[], + className?: string } -export default function FileLabel({ fileTypes = [] }: Props) { - return
- +export default function FileLabel({ fileTypes = [], className }: Props) { + return
+
Upload a file or drop it here...

diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/UploadFieldVideo.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/UploadFieldVideo.tsx index c6f26c2b6c..31d1e2789c 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/UploadFieldVideo.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/uploadFieldVideo/UploadFieldVideo.tsx @@ -1,22 +1,22 @@ import React, { useState } from "react"; import { a, useSpring } from '@react-spring/web'; import { FileDetails, FileWrapper, FileLabel } from "components/common"; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faFileVideo, faVideo } from "@fortawesome/pro-solid-svg-icons"; import "./style.scss"; interface Props { - blob?: string; - clear?: (file?: any) => void; - file?: any; - hideActions?: boolean; - hideClearDetails?: boolean; - inputProps?: any; - onRest?: () => void; - success?: boolean; - submit?: () => void; - working?: boolean; - [x:string]: any; + blob?: string, + clear?: (file?: any) => void, + file?: any, + hideActions?: boolean, + hideClearDetails?: boolean, + inputProps?: any, + onRest?: () => void, + success?: boolean, + submit?: () => void, + working?: boolean, + [x:string]: any, } export default function UploadFieldVideo({ @@ -41,22 +41,30 @@ export default function UploadFieldVideo({ const fileTypes = ["MP4"]; - return -

+ return +
{ file ? <> +