From 08072aca9aa35f0bcef03bcd4913299d9860157b Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Fri, 5 Mar 2021 14:42:15 -0700
Subject: [PATCH] Add upload icon, fix cancel button, refresh styles

---
 res/css/structures/_UploadBar.scss      | 50 ++++++++++++++++---------
 res/img/element-icons/upload.svg        |  4 ++
 src/components/structures/UploadBar.tsx |  4 +-
 3 files changed, 38 insertions(+), 20 deletions(-)
 create mode 100644 res/img/element-icons/upload.svg

diff --git a/res/css/structures/_UploadBar.scss b/res/css/structures/_UploadBar.scss
index ce884e27a9..7c62516b47 100644
--- a/res/css/structures/_UploadBar.scss
+++ b/res/css/structures/_UploadBar.scss
@@ -16,30 +16,44 @@ limitations under the License.
 
 .mx_UploadBar {
     padding-left: 65px; // line up with the shield area in the composer
+    position: relative;
 
     .mx_ProgressBar {
         width: calc(100% - 40px); // cheating at a right margin
     }
 }
 
-.mx_UploadBar_uploadFilename {
+.mx_UploadBar_filename {
     margin-top: 5px;
-    opacity: 0.5;
-    color: $primary-fg-color;
-}
-
-.mx_UploadBar_uploadIcon {
-    float: left;
-    margin-top: 5px;
-    margin-left: 14px;
-}
-
-.mx_UploadBar_uploadCancel {
-    float: right;
-    margin-top: 5px;
-    margin-right: 10px;
+    color: $muted-fg-color;
     position: relative;
-    opacity: 0.6;
-    cursor: pointer;
-    z-index: 1;
+    padding-left: 22px; // 18px for icon, 4px for padding
+    font-size: $font-15px;
+    vertical-align: middle;
+
+    &::before {
+        content: "";
+        height: 18px;
+        width: 18px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        background-color: $muted-fg-color;
+        mask-image: url('$(res)/img/element-icons/upload.svg');
+    }
+}
+
+.mx_UploadBar_cancel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 16px;
+    width: 16px;
+    margin-right: 16px; // align over rightmost button in composer
+    mask-repeat: no-repeat;
+    mask-position: center;
+    background-color: $muted-fg-color;
+    mask-image: url('$(res)/img/icons-close.svg');
 }
diff --git a/res/img/element-icons/upload.svg b/res/img/element-icons/upload.svg
new file mode 100644
index 0000000000..71ad7ba1cf
--- /dev/null
+++ b/res/img/element-icons/upload.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.99902 14L8.99902 4" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M12.5352 7.52441L8.99944 4.00012L5.46373 7.52441" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx
index 509b8c8363..44780c566f 100644
--- a/src/components/structures/UploadBar.tsx
+++ b/src/components/structures/UploadBar.tsx
@@ -87,12 +87,12 @@ export default class UploadBar extends React.Component<IProps, IState> {
                 count: this.state.uploadsHere.length - 1,
             },
         );
-        
+
         const uploadSize = filesize(this.state.currentUpload.total);
         return (
             <div className="mx_UploadBar">
+                <div className="mx_UploadBar_filename">{uploadText} ({uploadSize})</div>
                 <AccessibleButton onClick={this.onCancelClick} className='mx_UploadBar_cancel' />
-                <div className="mx_UploadBar_uploadFilename">{uploadText} ({uploadSize})</div>
                 <ProgressBar value={this.state.currentUpload.loaded} max={this.state.currentUpload.total} />
             </div>
         );