Merge pull request #760 from transloadit/fix/statusbar-spacing

statusbar: add some spacing between text elements.

CHANGELOG.md

@@ -115,6 +115,7 @@ What we need to do to release Uppy 1.0
 - [ ] providers: select files only after “select” is pressed, don’t add them right away when they are checked (keep a list of fileIds in state?); better UI + solves issue with autoProceed uploading in background, which is weird; re-read https://github.com/transloadit/uppy/pull/419#issuecomment-345210519 (@arturi, @goto-bus-stop)
 - [ ] tus: add `filename` and `filetype`, so that tus servers knows what headers to set  https://github.com/tus/tus-js-client/commit/ebc5189eac35956c9f975ead26de90c896dbe360
 - [ ] core: look into utilizing https://github.com/que-etc/resize-observer-polyfill for responsive components. See also https://github.com/transloadit/uppy/issues/750
+- [x] statusbar: add some spacing between text elements (#760 / @goto-bus-stop)
 - [ ] docs: improve on React docs https://uppy.io/docs/react/, add small example for each component maybe? Dashboard, DragDrop, ProgressBar? No need to make separate pages for all of them, just headings on the same page. Right now docs are confusing, because they focus on DashboardModal. Also problems with syntax highlight on https://uppy.io/docs/react/dashboard-modal/.
 - [ ] docs: add note in docs or solve the .run() issue, see #756
 - [ ] core: add `uppy.getFiles()` method (@goto-bus-stop / #770)

src/plugins/StatusBar/StatusBar.js

@@ -218,8 +218,8 @@ const ProgressBarComplete = ({ totalProgress, i18n }) => {
 const ProgressBarError = ({ error, retryAll, i18n }) => {
   return (
     <div class="uppy-StatusBar-content" role="alert">
-      <strong>{i18n('uploadFailed')}.</strong>
-      <span>{i18n('pleasePressRetry')}</span>
+      <strong class="uppy-StatusBar-contentPadding">{i18n('uploadFailed')}.</strong>
+      <span class="uppy-StatusBar-contentPadding">{i18n('pleasePressRetry')}</span>
       <span class="uppy-StatusBar-details"
         aria-label={error}
         data-microtip-position="top"

src/scss/_statusbar.scss

@@ -81,6 +81,10 @@
   height: 100%;
 }
 
+.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.35;
   font-weight: normal;