Design refresh of the top bar with the menubuttons (Merge PR #3029)

src/components/app/ListOfPublishedProfiles.js

@@ -226,7 +226,7 @@ export class ListOfPublishedProfiles extends PureComponent<Props, State> {
 
     if (!profileDataList.length) {
       return (
-        <p className="photon-body-30">No profile has been published yet!</p>
+        <p className="photon-body-30">No profile has been uploaded yet!</p>
       );
     }
 

src/components/app/MenuButtons/Permalink.css

@@ -2,6 +2,12 @@
  * 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/. */
 
+/* This background image builds on the generic styles defined in
+ * MenuButtons/index.css when using an icon. */
+.menuButtonsPermalinkButtonButton::before {
+  background-image: url(firefox-profiler-res/img/svg/link-dark-12.svg);
+}
+
 .menuButtonsPermalinkPanel .arrowPanelContent {
   /* Override the default padding for ArrowPanel */
   padding: 4px;

src/components/app/MenuButtons/Permalink.js

@@ -71,8 +71,7 @@ export class MenuButtonsPermalink extends React.PureComponent<Props, State> {
   render() {
     return (
       <ButtonWithPanel
-        className="menuButtonsPermalinkButton"
-        buttonClassName="menuButtonsButton"
+        buttonClassName="menuButtonsButton menuButtonsButton-hasIcon menuButtonsPermalinkButtonButton"
         ref={this._takePermalinkButtonRef}
         label="Permalink"
         initialOpen={this.props.isNewlyPublished}

src/components/app/MenuButtons/Publish.css

@@ -2,21 +2,34 @@
  * 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;
+/* These two background images build on the generic styles defined in
+ * MenuButtons/index.css when using an icon. */
+.menuButtonsShareButtonButton::before {
+  background-image: url(firefox-profiler-res/img/svg/share-dark-12.svg);
 }
 
-.menuButtonsShareButtonOriginal {
-  background-color: var(--green-70);
-  color: white;
+.menuButtonsShareButtonButton-uploading::before {
+  background-image: url(firefox-profiler-res/img/svg/sharing-animated-dark-12.svg);
 }
 
 .menuButtonsShareButtonError {
   background-color: var(--red-60);
   color: white;
 }
 
+.menuButtonsShareButtonError:hover {
+  background-color: var(--red-70);
+}
+
+.buttonWithPanel.open > .menuButtonsShareButtonError,
+.menuButtonsShareButtonError:hover:active {
+  background-color: var(--red-80);
+}
+
+.menuButtonsShareButtonError::before {
+  background-image: url(firefox-profiler-res/img/svg/error.svg);
+}
+
 .menuButtonsPublishPanel {
   --width: 510px;
 }

src/components/app/MenuButtons/Publish.js

@@ -121,7 +121,7 @@ class MenuButtonsPublishImpl extends React.PureComponent<PublishProps> {
           <div className="menuButtonsPublishIcon" />
           <h1 className="menuButtonsPublishTitle">
             {isRepublish
-              ? 'Re-publish Performance Profile'
+              ? 'Re-upload Performance Profile'
               : 'Share Performance Profile'}
           </h1>
           <p className="menuButtonsPublishInfoDescription">
@@ -167,7 +167,7 @@ class MenuButtonsPublishImpl extends React.PureComponent<PublishProps> {
               className="photon-button photon-button-primary menuButtonsPublishButton menuButtonsPublishButtonsUpload"
             >
               <span className="menuButtonsPublishButtonsSvg menuButtonsPublishButtonsSvgUpload" />
-              Publish
+              Upload
             </button>
           </div>
         </form>
@@ -207,7 +207,7 @@ class MenuButtonsPublishImpl extends React.PureComponent<PublishProps> {
       >
         <div className="menuButtonsPublishUploadTop">
           <div className="menuButtonsPublishUploadTitle">
-            Publishing profile…
+            Uploading profile…
           </div>
           <div className="menuButtonsPublishUploadPercentage">
             {uploadProgressString}
@@ -240,7 +240,7 @@ class MenuButtonsPublishImpl extends React.PureComponent<PublishProps> {
   _renderErrorPanel() {
     const { error, resetUploadState } = this.props;
     let message: string =
-      'There was an unknown error when trying to publish the profile.';
+      'There was an unknown error when trying to upload the profile.';
     if (
       error &&
       typeof error === 'object' &&
@@ -259,7 +259,7 @@ class MenuButtonsPublishImpl extends React.PureComponent<PublishProps> {
         data-testid="MenuButtonsPublish-container"
       >
         <div className="photon-message-bar photon-message-bar-error">
-          Uh oh, something went wrong when publishing the profile.
+          Uh oh, something went wrong when uploading the profile.
           <button
             className="photon-button photon-button-micro photon-message-bar-action-button"
             type="button"