bring back icons, add cancel as icon too

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

@@ -50,8 +50,7 @@ function togglePauseResume (props) {
 module.exports = (props) => {
   props = props || {}
 
-  const { resumableUploads,
-    newFiles,
+  const { newFiles,
     error,
     hideUploadButton,
     hideRetryButton,
@@ -106,14 +105,6 @@ module.exports = (props) => {
       {progressBarContent}
       <div class="uppy-StatusBar-actions">
         { newFiles && !hideUploadButton ? <UploadBtn {...props} uploadState={uploadState} /> : null }
-        { !hidePauseResumeCancelButtons &&
-          resumableUploads &&
-          uploadState !== statusBarStates.STATE_WAITING &&
-          uploadState !== statusBarStates.STATE_COMPLETE &&
-          uploadState !== statusBarStates.STATE_POSTPROCESSING
-          ? <PauseResumeButtons {...props} />
-          : null
-        }
         { error && !hideRetryButton ? <RetryBtn {...props} /> : null }
         { !hidePauseResumeCancelButtons && uploadState !== statusBarStates.STATE_WAITING && uploadState !== statusBarStates.STATE_COMPLETE
           ? <CancelBtn {...props} />
@@ -154,8 +145,13 @@ const RetryBtn = (props) => {
 const CancelBtn = (props) => {
   return <button type="button"
     class="uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--cancel"
+    title={props.i18n('cancel')}
     aria-label={props.i18n('cancel')}
-    onclick={props.cancelAll}>{props.i18n('cancel')}</button>
+    onclick={props.cancelAll}>
+    <svg aria-hidden="true" class="UppyIcon" width="13px" height="13px" viewBox="0 0 13 13">
+      <polygon points="5.05555556 6.5 9.07164532e-16 1.44444444 1.44444444 0 6.5 5.05555556 11.5555556 2.7214936e-15 13 1.44444444 7.94444444 6.5 13 11.5555556 11.5555556 13 6.5 7.94444444 1.44444444 13 0 11.5555556" />
+    </svg>
+  </button>
 }
 
 const PauseResumeButtons = (props) => {
@@ -166,26 +162,26 @@ const PauseResumeButtons = (props) => {
                   : i18n('pause')
                 : i18n('cancel')
 
-  return <button class="uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--pauseResume"
-    type="button"
-    onclick={() => togglePauseResume(props)}>
-    {title}
-  </button>
-
-  // return <button title={title} class="uppy-u-reset uppy-StatusBar-statusIndicator" type="button" onclick={() => togglePauseResume(props)}>
-  //   {resumableUploads
-  //     ? isAllPaused
-  //       ? <svg aria-hidden="true" class="UppyIcon" width="15" height="17" viewBox="0 0 11 13">
-  //         <path d="M1.26 12.534a.67.67 0 0 1-.674.012.67.67 0 0 1-.336-.583v-11C.25.724.38.5.586.382a.658.658 0 0 1 .673.012l9.165 5.5a.66.66 0 0 1 .325.57.66.66 0 0 1-.325.573l-9.166 5.5z" />
-  //       </svg>
-  //       : <svg aria-hidden="true" class="UppyIcon" width="16" height="17" viewBox="0 0 12 13">
-  //         <path d="M4.888.81v11.38c0 .446-.324.81-.722.81H2.722C2.324 13 2 12.636 2 12.19V.81c0-.446.324-.81.722-.81h1.444c.398 0 .722.364.722.81zM9.888.81v11.38c0 .446-.324.81-.722.81H7.722C7.324 13 7 12.636 7 12.19V.81c0-.446.324-.81.722-.81h1.444c.398 0 .722.364.722.81z" />
-  //       </svg>
-  //     : <svg aria-hidden="true" class="UppyIcon" width="16px" height="16px" viewBox="0 0 19 19">
-  //       <path d="M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z" />
-  //     </svg>
-  //   }
+  // return <button class="uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--pauseResume"
+  //   type="button"
+  //   onclick={() => togglePauseResume(props)}>
+  //   {title}
   // </button>
+
+  return <button title={title} class="uppy-u-reset uppy-StatusBar-statusIndicator" type="button" onclick={() => togglePauseResume(props)}>
+    {resumableUploads
+      ? isAllPaused
+        ? <svg aria-hidden="true" class="UppyIcon" width="15" height="17" viewBox="0 0 11 13">
+          <path d="M1.26 12.534a.67.67 0 0 1-.674.012.67.67 0 0 1-.336-.583v-11C.25.724.38.5.586.382a.658.658 0 0 1 .673.012l9.165 5.5a.66.66 0 0 1 .325.57.66.66 0 0 1-.325.573l-9.166 5.5z" />
+        </svg>
+        : <svg aria-hidden="true" class="UppyIcon" width="16" height="17" viewBox="0 0 12 13">
+          <path d="M4.888.81v11.38c0 .446-.324.81-.722.81H2.722C2.324 13 2 12.636 2 12.19V.81c0-.446.324-.81.722-.81h1.444c.398 0 .722.364.722.81zM9.888.81v11.38c0 .446-.324.81-.722.81H7.722C7.324 13 7 12.636 7 12.19V.81c0-.446.324-.81.722-.81h1.444c.398 0 .722.364.722.81z" />
+        </svg>
+      : <svg aria-hidden="true" class="UppyIcon" width="16px" height="16px" viewBox="0 0 19 19">
+        <path d="M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z" />
+      </svg>
+    }
+  </button>
 }
 
 const LoadingSpinner = (props) => {
@@ -223,7 +219,11 @@ const ProgressBarUploading = (props) => {
 
   return (
     <div class="uppy-StatusBar-content" aria-label={title} title={title}>
-      { !props.isAllPaused
+      { !props.hidePauseResumeCancelButtons && props.resumableUploads
+        ? <PauseResumeButtons {...props} />
+        : null
+      }
+      { !props.resumableUploads
         ? <LoadingSpinner {...props} />
         : null
       }

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

@@ -44,13 +44,6 @@
   background-color: $color-red;
 }
 
-.uppy-StatusBar.is-complete .uppy-StatusBar-content {
-  // width: 100%;
-  // text-align: center;
-  // padding-left: 0;
-  // justify-content: center;
-}
-
 .uppy-StatusBar.is-complete .uppy-StatusBar-statusIndicator {
   cursor: default;
   color: $color-green;
@@ -92,12 +85,15 @@
   align-items: center;
   position: relative;
   z-index: $zIndex-3;
-  padding-left: 15px;
+  padding-left: 10px;
   white-space: nowrap;
   text-overflow: ellipsis;
-  // color: $color-white;
   color: $color-black;
   height: 100%;
+
+  .uppy-size--md & {
+    padding-left: 15px;
+  }
 }
 
 .uppy-StatusBar-contentPadding {
@@ -110,15 +106,25 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  max-width: 250px;
+  overflow: hidden;
+
+  .uppy-size--md & {
+    max-width: 400px;
+  }
 }
 
 .uppy-StatusBar-statusPrimary {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 400;
+
+  .uppy-size--md & {
+    font-size: 13px;
+  }
 }
 
 .uppy-StatusBar-statusSecondary {
-  font-size: 11px;
+  font-size: 10px;
   display: none;
   color: rgba($color-asphalt-gray, 0.8);
   max-width: 170px;
@@ -127,6 +133,7 @@
   overflow: hidden;
 
   .uppy-size--md & {
+    font-size: 11px;
     max-width: 500px;
   }
 }
@@ -137,8 +144,12 @@
 
 .uppy-StatusBar-statusIndicator {
   color: $color-asphalt-gray;
-  margin-right: 15px;
+  margin-right: 10px;
   cursor: pointer;
+
+  .uppy-size--md & {
+    margin-right: 12px;
+  }
 }
 
   .uppy-StatusBar-statusIndicator svg {
@@ -205,6 +216,15 @@
     color: $color-cornflower-blue;
   }
 
+  .uppy-StatusBar-actionBtn--cancel {
+    color: $color-asphalt-gray;
+  }
+
+  .uppy-StatusBar-actionBtn--cancel svg {
+    width: 100%;
+    height: 100%;
+  }
+
   // .uppy-StatusBar-actionBtn--retry {
   //   background-color: $color-white;
   //   color: $color-red;