Add styles for newsletter date and segments

[MAILPOET-2791]

assets/css/src/components-plugin/_stats.scss

@@ -1,3 +1,31 @@
+.mailpoet-stats-page {
+  color: $color-tertiary;
+  font-family: $font-family;
+  font-size: $font-size-small;
+  line-height: 1.71;
+}
+
+.mailpoet-stats-info {
+  background-color: $color-white;
+  box-shadow: 0 1px 0 0 $color-tertiary-light;
+  margin: 0;
+  padding-bottom: $grid-gap;
+  padding-left: $grid-gap;
+  width: 100%;
+}
+
+.mailpoet-stats-segments {
+  font-weight: 500;
+
+  .mailpoet-stats-segments-segment {
+    background-color: $color-tertiary-light;
+    border-radius: 2px;
+    font-weight: normal;
+    margin-right: $grid-gap;
+    padding: 4px $grid-gap-half;
+  }
+}
+
 .mailpoet_stat_triple-spaced {
   margin-bottom: 3rem;
 }
@@ -7,12 +35,8 @@
   margin: 70px auto;
 }
 
-@include breakpoint-max-width(520px) {
-  .mailpoet_stat_info {
-    display: none;
-  }
-
-  .mailpoet_stat_general {
-    width: 100%;
-  }
+.wrap .mailpoet-top-bar,
+.wrap .mailpoet-stats-info {
+  margin-left: -20px;
+  margin-right: -20px;
 }

assets/js/src/newsletters/campaign_stats/newsletter_stats_info.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
-import { NewsletterType } from './newsletter_type';
 import Heading from 'common/typography/heading/heading';
 import Grid from 'common/grid';
+import { NewsletterType } from './newsletter_type';
 
 type Props = {
   newsletter: NewsletterType
@@ -21,26 +21,33 @@ export const NewsletterStatsInfo = ({
   const time = timeFormat.format(new Date(newsletterDate));
 
   return (
-    <Grid.ThreeColumns>
+    <Grid.ThreeColumns className="mailpoet-stats-info">
       <div>
         <Heading level={1}>{newsletter.subject}</Heading>
-        <p>
-          {date}
-          {' • '}
-          {time}
-        </p>
+        <div>
+          <b>
+            {date}
+            {' • '}
+            {time}
+          </b>
+        </div>
         {Array.isArray(newsletter.segments) && newsletter.segments.length && (
-          <p>
+          <div className="mailpoet-stats-segments">
             {MailPoet.I18n.t('statsToSegments')}
             {': '}
             {newsletter.segments.map((segment) => (
-              <span>{segment.name}</span>
+              <span
+                className="mailpoet-stats-segments-segment"
+                key={segment.name}
+              >
+                {segment.name}
+              </span>
             ))}
-          </p>
+          </div>
         )}
       </div>
       <div />
-      <Grid.TwoColumns>
+      <div className="mailpoet-stats-info-sender-preview">
         <div>
           {newsletter.sender_address && (
             <p>
@@ -73,7 +80,7 @@ export const NewsletterStatsInfo = ({
             {MailPoet.I18n.t('statsPreviewNewsletter')}
           </a>
         </div>
-      </Grid.TwoColumns>
+      </div>
     </Grid.ThreeColumns>
   );
 };

assets/js/src/newsletters/campaign_stats/page.tsx

@@ -109,7 +109,7 @@ const CampaignStatsPage = ({ match, history, location }: Props) => {
       <TopBarWithBeamer
         onLogoClick={() => history.push('/')}
       />
-      <div>
+      <div className="mailpoet-stats-page">
         <InvalidMssKeyNotice
           mssKeyInvalid={(window as any).mailpoet_mss_key_invalid}
           subscribersCount={(window as any).mailpoet_subscribers_count}