Add upload icon, fix cancel button, refresh styles

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

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>

src/components/structures/UploadBar.tsx

@@ -91,8 +91,8 @@ export default class UploadBar extends React.Component<IProps, IState> {
         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>
         );