Fix styling problems

assets/js/src/newsletters/listings/mixins.jsx

@@ -131,12 +131,11 @@ const QueueMixin = {
     }
 
     let progressBarWidth = 0;
-
-    if (percentage) {
-      percentage = MailPoet.I18n.t('noSubscribers');
-    } else {
+    if (Number.isFinite(percentage)) {
       progressBarWidth = percentage;
       percentage += '%';
+    } else {
+      percentage = MailPoet.I18n.t('noSubscribers');
     }
 
     return (
@@ -238,7 +237,7 @@ const StatisticsMixin = {
           <div>
             <span>
               { percentageOpenedDisplay }
-%
+              %
               {' '}
             </span>
             <StatsBadge
@@ -250,7 +249,7 @@ const StatisticsMixin = {
           <div>
             <span>
               { percentageClickedDisplay }
-%
+              %
               {' '}
             </span>
             <StatsBadge
@@ -262,7 +261,7 @@ const StatisticsMixin = {
           <div>
             <span className="mailpoet_stat_hidden">
               { percentageUnsubscribedDisplay }
-%
+              %
             </span>
           </div>
         </div>
@@ -273,15 +272,15 @@ const StatisticsMixin = {
         <div>
           <span className="mailpoet_stats_text">
             { percentageOpenedDisplay }
-%,
+            %,
             { ' ' }
             { percentageClickedDisplay }
-%
+            %
             <span className="mailpoet_stat_hidden">
               ,
               {' '}
               { percentageUnsubscribedDisplay }
-%
+              %
             </span>
           </span>
           { tooEarlyForStats && (

assets/js/src/newsletters/send.jsx

@@ -425,7 +425,7 @@ const NewsletterSend = createReactClass({ // eslint-disable-line react/prefer-es
             />
              
             {MailPoet.I18n.t('orSimply')}
- 
+             
             <a
               href={
                 `?page=mailpoet-newsletter-editor&id=${this.props.match.params.id}`
@@ -434,7 +434,7 @@ const NewsletterSend = createReactClass({ // eslint-disable-line react/prefer-es
             >
               {MailPoet.I18n.t('goBackToDesign')}
             </a>
-.
+            .
           </p>
           { !isPaused && sendButtonOptions.disabled && sendButtonOptions.disabled === 'disabled' && (
             <HelpTooltip

assets/js/src/newsletters/send/congratulate/congratulate.jsx

@@ -121,7 +121,8 @@ class Congratulate extends React.Component {
   renderContent() {
     if (this.state.loading || !this.state.minimumLoadingTimePassed) {
       return renderLoading(!!this.state.newsletter);
-    } if (this.state.error) {
+    }
+    if (this.state.error) {
       return renderFail();
     }
     return renderSuccess(this.state.newsletter, this.state.testingPassed);

assets/js/src/newsletters/send/congratulate/success.jsx

@@ -5,11 +5,14 @@ import MailPoet from 'mailpoet';
 function renderHeader(newsletter) {
   if (newsletter.type === 'welcome') {
     return MailPoet.I18n.t('congratulationsWelcomeEmailSuccessHeader');
-  } if (newsletter.type === 'notification') {
+  }
+  if (newsletter.type === 'notification') {
     return MailPoet.I18n.t('congratulationsPostNotificationSuccessHeader');
-  } if (newsletter.type === 'automatic') {
+  }
+  if (newsletter.type === 'automatic') {
     return MailPoet.I18n.t('congratulationsWooSuccessHeader');
-  } if (newsletter.status === 'scheduled') {
+  }
+  if (newsletter.status === 'scheduled') {
     return MailPoet.I18n.t('congratulationsScheduleSuccessHeader');
   }
   return MailPoet.I18n.t('congratulationsSendSuccessHeader');