From 2149d9a8097668b7eb77876b4f4be12dcc4dd344 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Tue, 17 Aug 2021 22:27:34 -0400
Subject: [PATCH] visually improved w2l result download

---
 vocodes/src/icons/DownloadIcon.tsx                     | 9 +++++++++
 vocodes/src/v2/w2l/w2l_result_view/W2lResultViewFc.tsx | 7 ++++---
 2 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 vocodes/src/icons/DownloadIcon.tsx

diff --git a/vocodes/src/icons/DownloadIcon.tsx b/vocodes/src/icons/DownloadIcon.tsx
new file mode 100644
index 0000000000..970e057492
--- /dev/null
+++ b/vocodes/src/icons/DownloadIcon.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDownload } from '@fortawesome/free-solid-svg-icons'
+
+export function DownloadIcon() {
+  return (
+      <FontAwesomeIcon icon={faDownload} />
+  );
+}
diff --git a/vocodes/src/v2/w2l/w2l_result_view/W2lResultViewFc.tsx b/vocodes/src/v2/w2l/w2l_result_view/W2lResultViewFc.tsx
index a98cf50698..55e468d47c 100644
--- a/vocodes/src/v2/w2l/w2l_result_view/W2lResultViewFc.tsx
+++ b/vocodes/src/v2/w2l/w2l_result_view/W2lResultViewFc.tsx
@@ -8,6 +8,7 @@ import { BucketConfig } from '../../../common/BucketConfig';
 import { HiddenIconFc } from '../../../icons/HiddenIconFc';
 import { VisibleIconFc } from '../../../icons/VisibleIconFc';
 import { FrontendUrlConfig } from '../../../common/FrontendUrlConfig';
+import { DownloadIcon } from '../../../icons/DownloadIcon';
 
 interface W2lInferenceResultResponsePayload {
   success: boolean,
@@ -207,7 +208,7 @@ function W2lResultViewFc(props: Props) {
     <div>
       <h1 className="title is-1"> Lipsync Result </h1>
 
-      <video width="80%" height="auto" controls={true}>
+      <video width="100%" height="auto" controls={true}>
         <source src={videoLink} />
         Your device doesn't support video.
       </video> 
@@ -215,9 +216,9 @@ function W2lResultViewFc(props: Props) {
       <br />
       <br />
 
-      <a className="button is-medium is-primary" 
+      <a className="button is-large is-primary is-fullwidth" 
           href={videoLink}
-          download={videoDownloadFilename}>Download File</a>
+          download={videoDownloadFilename}> <DownloadIcon />&nbsp;Download File</a>
 
       <br />
       <br />