From 23f7be9b541b216d4765fcc555577d31acc49289 Mon Sep 17 00:00:00 2001
From: "@wwwjim" <send@jimmy.email>
Date: Wed, 9 Sep 2020 01:41:25 -0700
Subject: [PATCH] copy: fixes awkward copy on file uploads

---
 components/core/DataMeter.js                  | 14 ++++----
 .../SlateMediaObjectSidebarDataManager.js     |  2 +-
 components/sidebars/SidebarAddFileToBucket.js | 32 ++++++++++++++-----
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/components/core/DataMeter.js b/components/core/DataMeter.js
index 1a05f4dc..f47dc93f 100644
--- a/components/core/DataMeter.js
+++ b/components/core/DataMeter.js
@@ -36,7 +36,7 @@ const STYLES_ROW = css`
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
-  font-family: ${Constants.font.text};
+  font-family: ${Constants.font.code};
   color: ${Constants.system.darkGray};
   font-size: 10px;
   margin-top: 2px;
@@ -75,11 +75,6 @@ export const DataMeterBar = (props) => {
 
   return (
     <React.Fragment>
-      <div css={STYLES_TITLE}>
-        {Strings.bytesToSize(props.bytes)} of available{" "}
-        {Strings.bytesToSize(props.maximumBytes)} Used
-      </div>
-
       <div css={STYLES_ROW}>
         <div
           css={STYLES_LEFT}
@@ -93,7 +88,7 @@ export const DataMeterBar = (props) => {
       <div
         css={STYLES_DATA}
         style={{
-          marginTop: 16,
+          marginTop: 8,
           backgroundColor: props.failed ? Constants.system.red : null,
         }}
       >
@@ -109,6 +104,11 @@ export const DataMeterBar = (props) => {
 export const DataMeter = (props) => {
   return (
     <div css={STYLES_CONTAINER} style={props.style}>
+      <div css={STYLES_TITLE}>
+        {Strings.bytesToSize(props.stats.bytes)} of{" "}
+        {Strings.bytesToSize(props.stats.maximumBytes)} used
+      </div>
+
       <DataMeterBar
         bytes={props.stats.bytes}
         maximumBytes={props.stats.maximumBytes}
diff --git a/components/core/SlateMediaObjectSidebarDataManager.js b/components/core/SlateMediaObjectSidebarDataManager.js
index 8ae5d5bc..113aacb6 100644
--- a/components/core/SlateMediaObjectSidebarDataManager.js
+++ b/components/core/SlateMediaObjectSidebarDataManager.js
@@ -115,7 +115,7 @@ const SlateItem = (props) => {
         </div>
 
         <div css={STYLES_DESCRIPTION}>
-          {props.slate.data.objects.length}{" "}
+          {Strings.zeroPad(props.slate.data.objects.length, 4)}{" "}
           {Strings.pluralize("object", props.slate.data.objects.length)}{" "}
           {!props.member ? (
             <span
diff --git a/components/sidebars/SidebarAddFileToBucket.js b/components/sidebars/SidebarAddFileToBucket.js
index 813f26d4..616b7b52 100644
--- a/components/sidebars/SidebarAddFileToBucket.js
+++ b/components/sidebars/SidebarAddFileToBucket.js
@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
+import * as Strings from "~/common/strings";
 import * as System from "~/components/system";
 import * as Validations from "~/common/validations";
 
@@ -50,6 +51,14 @@ const STYLES_STRONG = css`
   font-weight: 400;
   font-family: ${Constants.font.medium};
   font-size: 0.8rem;
+  oveflow-wrap: break-word;
+`;
+
+const STYLES_PERFORMANCE = css`
+  font-family: ${Constants.font.code};
+  font-size: 12px;
+  display: block;
+  margin: 0 0 8px 0;
 `;
 
 export default class SidebarAddFileToBucket extends React.Component {
@@ -144,14 +153,16 @@ export default class SidebarAddFileToBucket extends React.Component {
           </System.P>
         ) : null}
 
-        <System.ButtonPrimary
-          full
-          type="label"
-          htmlFor="file"
-          style={{ marginTop: 24 }}
-          loading={!!this.props.fileLoading}>
-          Add file
-        </System.ButtonPrimary>
+        {!this.props.fileLoading ? (
+          <System.ButtonPrimary
+            full
+            type="label"
+            htmlFor="file"
+            style={{ marginTop: 24 }}
+          >
+            Add file
+          </System.ButtonPrimary>
+        ) : null}
 
         <br />
 
@@ -161,6 +172,11 @@ export default class SidebarAddFileToBucket extends React.Component {
               return (
                 <React.Fragment key={timestamp}>
                   <strong css={STYLES_STRONG}>{p.name}</strong>
+
+                  <strong css={STYLES_PERFORMANCE}>
+                    {Strings.bytesToSize(p.loaded)} /{" "}
+                    {Strings.bytesToSize(p.total)}
+                  </strong>
                   <DataMeterBar
                     failed={p.failed}
                     leftLabel={p.failed ? "failed" : "uploaded"}