Improve StatusBar icons & typography

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

@@ -173,7 +173,7 @@ const CancelBtn = (props) => {
     onclick={props.cancelAll}>
     <svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
       <g fill="none" fill-rule="evenodd">
-        <circle fill="#949494" cx="8" cy="8" r="8" />
+        <circle fill="#888" cx="8" cy="8" r="8" />
         <path fill="#FFF" d="M9.283 8l2.567 2.567-1.283 1.283L8 9.283 5.433 11.85 4.15 10.567 6.717 8 4.15 5.433 5.433 4.15 8 6.717l2.567-2.567 1.283 1.283z" />
       </g>
     </svg>
@@ -193,13 +193,13 @@ const PauseResumeButton = (props) => {
     {isAllPaused
       ? <svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
         <g fill="none" fill-rule="evenodd">
-          <circle fill="#949494" cx="8" cy="8" r="8" />
-          <path fill="#FFF" d="M6 4.5L11.5 8 6 11.5z" />
+          <circle fill="#888" cx="8" cy="8" r="8" />
+          <path fill="#FFF" d="M6 4.25L11.5 8 6 11.75z" />
         </g>
       </svg>
       : <svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
         <g fill="none" fill-rule="evenodd">
-          <circle fill="#949494" cx="8" cy="8" r="8" />
+          <circle fill="#888" cx="8" cy="8" r="8" />
           <path d="M5 4.5h2v7H5v-7zm4 0h2v7H9v-7z" fill="#FFF" />
         </g>
       </svg>

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

@@ -114,7 +114,6 @@
   overflow-x: hidden;
 
   .uppy-size--md & {
-    line-height: 1.5;
     max-width: 400px;
   }
 }
@@ -125,7 +124,7 @@
 
 .uppy-StatusBar-statusSecondary {
   font-size: 11px;
-  // line-height: 1;
+  line-height: 1.2;
   display: inline-block;
   color: rgba($color-asphalt-gray, 0.8);
   text-overflow: ellipsis;
@@ -187,7 +186,8 @@
 .uppy-StatusBar-actionCircleBtn {
   line-height: 1;
   cursor: pointer;
-  padding: 4px;
+  padding: 3px;
+  opacity: 0.9;
   // display: flex;
   // align-items: center;
   // justify-content: center;
@@ -197,6 +197,10 @@
   // color: rgba($color-black, 0.6);
   // background-color: rgba($color-gray, 0.3);
   // text-align: center;
+
+  &:hover {
+    opacity: 1;
+  }
 }
 
   .uppy-StatusBar-actionCircleBtn:focus {