StatusBar cross icon

packages/@uppy/status-bar/src/StatusBar.js

@@ -304,8 +304,15 @@ const ProgressBarComplete = ({ totalProgress, i18n }) => {
 
 const ProgressBarError = ({ error, retryAll, hideRetryButton, i18n }) => {
   return (
-    <div class="uppy-StatusBar-content" role="alert">
-      <span class="uppy-StatusBar-contentPadding">{i18n('uploadFailed')}.</span>
+    <div class="uppy-StatusBar-content" role="alert" title={i18n('uploadFailed')}>
+      <div class="uppy-StatusBar-status">
+        <div class="uppy-StatusBar-statusPrimary">
+          <svg aria-hidden="true" class="uppy-StatusBar-statusIndicator UppyIcon" width="11" height="11" viewBox="0 0 11 11">
+            <path d="M4.278 5.5L0 1.222 1.222 0 5.5 4.278 9.778 0 11 1.222 6.722 5.5 11 9.778 9.778 11 5.5 6.722 1.222 11 0 9.778z" />
+          </svg>
+          {i18n('uploadFailed')}
+        </div>
+      </div>
       {/* {!hideRetryButton &&
         <span class="uppy-StatusBar-contentPadding">{i18n('pleasePressRetry')}</span>
       } */}

packages/@uppy/status-bar/src/style.scss

@@ -45,10 +45,13 @@
 }
 
 .uppy-StatusBar.is-complete .uppy-StatusBar-statusIndicator {
-  cursor: default;
   color: $green;
 }
 
+.uppy-StatusBar.is-error .uppy-StatusBar-statusIndicator {
+  color: $red;
+}
+
 .uppy-StatusBar:not([aria-hidden=true]).is-waiting {
   background-color: $white;
   height: 65px;
@@ -100,10 +103,6 @@
   }
 }
 
-.uppy-StatusBar-contentPadding {
-  margin-right: 0.5ch; // ½ the size of a 0, roughly the size of a space usually
-}
-
 .uppy-StatusBar-status {
   line-height: 1.4;
   font-weight: normal;
@@ -112,6 +111,7 @@
   justify-content: center;
   max-width: 170px;
   overflow-x: hidden;
+  padding-right: 0.3em;
 
   .uppy-size--md & {
     max-width: 400px;
@@ -150,22 +150,15 @@
   // }
 
 .uppy-StatusBar-statusIndicator {
+  position: relative;
+  top: 1px;
   color: $gray-700;
-  margin-right: 10px;
-  cursor: pointer;
+  margin-right: 7px;
 
-  .uppy-size--md & {
-    margin-right: 12px;
-  }
-}
-
-  .uppy-StatusBar-statusIndicator svg {
+  svg {
     vertical-align: text-bottom;
   }
-
-  .uppy-StatusBar.is-complete .uppy-StatusBar-statusIndicator  {
-    margin-right: 6px;
-  }
+}
 
 .uppy-StatusBar-actions {
   display: flex;