uploading redesign

julienw · Oct 27, 2020 · 8c9910f · 8c9910f
1 parent 4937d22
commit 8c9910f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/src/components/app/MenuButtons/Publish.css b/src/components/app/MenuButtons/Publish.css
@@ -2,14 +2,38 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-.menuButtonsAbortUploadButton {
-  background-color: var(--green-70);
-  color: #fff;
+.menuButtonsShareButtonButton::before {
+  /* The icon size and width and height are defined as 1em so that it's adjusted automatically
+   * with the font-size. Then it has 4px padding on the right side (because it's
+   * at the left of the content), and the image is at the left of this space.
+   * So here is the layout for this element:
+   * <-left padding-> <-ICON (1em)-> <-4px-> CONTENT
+   */
+  width: 1em;
+  height: 1em;
+  padding-right: 4px;
+  background: url(firefox-profiler-res/img/svg/share.svg) no-repeat left/1em;
+  content: '';
+}
+
+@keyframes uploadingAnimation {
+  from {
+    filter: contrast(100%);
+  }
+
+  25% {
+    filter: contrast(20%);
+    transform: scale(0.75);
+  }
+
+  50% {
+    filter: contrast(100%);
+    transform: scale(1);
+  }
 }
 
-.menuButtonsShareButton {
-  background-color: var(--green-70);
-  color: white;
+.menuButtonsShareButtonButton__uploading::before {
+  animation: 1s infinite uploadingAnimation;
 }
 
 .menuButtonsShareButtonError {

diff --git a/src/components/app/MenuButtons/index.js b/src/components/app/MenuButtons/index.js
@@ -202,7 +202,7 @@ class MenuButtonsImpl extends React.PureComponent<Props, State> {
       return (
         <button
           type="button"
-          className="menuButtonsButton menuButtonsAbortUploadButton"
+          className="menuButtonsButton menuButtonsShareButtonButton menuButtonsShareButtonButton__uploading"
           onClick={abortFunction}
         >
           Cancel Upload
@@ -217,9 +217,9 @@ class MenuButtonsImpl extends React.PureComponent<Props, State> {
 
     const isError = uploadPhase === 'error';
 
-    let label = 'Upload…';
+    let label = 'Upload';
     if (isError) {
-      label = 'Error uploading…';
+      label = 'Error uploading';
     }
 
     return (
@@ -228,7 +228,7 @@ class MenuButtonsImpl extends React.PureComponent<Props, State> {
           menuButtonsShareButton: true,
           menuButtonsShareButtonError: isError,
         })}
-        buttonClassName="menuButtonsButton"
+        buttonClassName="menuButtonsButton menuButtonsShareButtonButton"
         panelClassName="menuButtonsPublishPanel"
         label={label}
         panelContent={<MenuButtonsPublish />}