From 17a3ecbd44d9e57ce7730e2fa0f418e1aea5fd2b Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 8 Dec 2015 20:48:39 +0100
Subject: [PATCH] Add thin cross icon to FileDragAndDropError

---
 .../file_drag_and_drop_error_dialog.js            |  2 +-
 .../ascribe_upload_button/upload_button.js        |  2 +-
 sass/ascribe_uploader.scss                        | 15 +++++++++++----
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
index 8696cc7f..7f6d4460 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
@@ -57,7 +57,7 @@ let FileDragAndDropErrorDialog = React.createClass({
                     {this.getRetryButton('Retry')}
                 </div>
                 <span className={classNames('file-drag-and-drop-error-icon-container', { 'file-drag-and-drop-error-icon-container-multiple-files': multipleFiles })}>
-                    <span className='file-drag-and-drop-error-icon'></span>
+                    <span className='ascribe-icon icon-ascribe-thin-cross'></span>
                 </span>
                 <div className='file-drag-and-drop-error-file-names'>
                     <ul>
diff --git a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
index 94c85f4f..50bae1ef 100644
--- a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
+++ b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
@@ -61,7 +61,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
         },
 
         getUploadedFile() {
-            return this.props.filesToUpload.filter((file) => file.status === FileStatus.UPLOAD_SUCESSFUL)[0];
+            return this.props.filesToUpload.filter((file) => file.status === FileStatus.UPLOAD_SUCCESSFUL)[0];
         },
 
         clearSelection() {
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index ea02eb07..5ae4e1e1 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -170,6 +170,7 @@
 }
 
 .file-drag-and-drop-error {
+    color: #333333;
     margin-bottom: 25px;
     overflow: hidden;
     text-align: center;
@@ -270,20 +271,23 @@
 
 .file-drag-and-drop-error-icon-container {
     background-color: #eeeeee;
-    display: inline-block;
+    display: table;
     float: left;
     height: 104px;
     position: relative;
     width: 104px;
     vertical-align: top;
 
-    .file-drag-and-drop-error-icon {
-        position: absolute;
+    .icon-ascribe-thin-cross {
+        display: table-cell;
+        font-size: 5.5em;
+        vertical-align: middle;
     }
 
     &.file-drag-and-drop-error-icon-container-multiple-files {
         background-color: #d7d7d7;
         left: -15px;
+        margin-bottom: 24px;
         z-index: 1;
 
         &::before {
@@ -310,7 +314,10 @@
             z-index: 3;
         }
 
-        .file-drag-and-drop-error-icon {
+        .icon-ascribe-thin-cross {
+            left: 44px;
+            position: absolute;
+            top: 38px;
             z-index: 4;
         }
     }