Slightly redesign Help pages

[MAILPOET-3073]

assets/css/src/generic/_typography.scss

@@ -1,4 +1,5 @@
 #wpbody {
+  color: $color-text;
   font-family: $font-family;
   font-size: $font-size;
   line-height: $line-height;
@@ -55,6 +56,7 @@ h5.mailpoet-h5 {
   list-style-type: disc;
 }
 
+.mailpoet-links a,
 .mailpoet-link {
   color: $color-secondary;
   text-decoration: underline;
@@ -66,6 +68,18 @@ h5.mailpoet-h5 {
   }
 }
 
+.mailpoet-text-links a,
+.mailpoet-text-link {
+  color: $color-text;
+  text-decoration: underline;
+
+  &:hover,
+  &:focus {
+    color: $color-text-hover;
+    text-decoration: none;
+  }
+}
+
 .mailpoet-font-small {
   font-size: $font-size-small;
 }

assets/js/src/help/knowledge_base.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
+import Button from 'common/button/button';
 
 function KnowledgeBase() {
   return (
     <>
       <p>{MailPoet.I18n.t('knowledgeBaseIntro')}</p>
-      <ul>
+      <ul className="mailpoet-text-links">
         <li><a target="_blank" rel="noreferrer noopener" href="https://kb.mailpoet.com/category/116-common-problems">Common Problems</a></li>
         <li><a target="_blank" rel="noreferrer noopener" href="https://kb.mailpoet.com/category/165-newsletters">Newsletters</a></li>
         <li><a target="_blank" rel="noreferrer noopener" href="https://kb.mailpoet.com/category/156-migration-questions">Migration Questions</a></li>
@@ -15,7 +16,7 @@ function KnowledgeBase() {
         <li><a target="_blank" rel="noreferrer noopener" href="https://kb.mailpoet.com/category/123-newsletter-designer">Newsletter Designer</a></li>
         <li><a target="_blank" rel="noreferrer noopener" href="https://kb.mailpoet.com/category/121-subscribers-and-lists">Subscribers and Lists</a></li>
       </ul>
-      <a target="_blank" rel="noreferrer noopener" href="https://kb.mailpoet.com/" className="button button-primary">{MailPoet.I18n.t('knowledgeBaseButton')}</a>
+      <Button dimension="small" target="_blank" rel="noreferrer noopener" href="https://kb.mailpoet.com/">{MailPoet.I18n.t('knowledgeBaseButton')}</Button>
     </>
   );
 }

assets/js/src/help/system_status.jsx

@@ -15,13 +15,13 @@ function renderStatusMessage(status, error, link, linkBeacon, additionalInfo) {
       noticeMessage,
       /\[link\](.*?)\[\/link\]/g,
       (match) => (
-        <a href={link} data-beacon-article={linkBeacon} key="kb-link">{match}</a>
+        <a className="mailpoet-text-link" href={link} data-beacon-article={linkBeacon} key="kb-link">{match}</a>
       )
     );
   }
 
   return (
-    <div className={`mailpoet_notice notice inline notice-${noticeType}`} style={{ marginTop: '1em' }}>
+    <div className={`mailpoet_notice notice inline notice-${noticeType}`}>
       <p>{noticeMessage}</p>
       {additionalInfo ? (<p><i>{additionalInfo}</i></p>) : null}
     </div>
@@ -38,7 +38,7 @@ function renderCronSection(data) {
     <div>
       <h4>{MailPoet.I18n.t('systemStatusCronTitle')}</h4>
       <p>
-        <a href={url} target="_blank" rel="noopener noreferrer">{url}</a>
+        <a className="mailpoet-text-link" href={url} target="_blank" rel="noopener noreferrer">{url}</a>
       </p>
       {renderStatusMessage(status, error, 'https://kb.mailpoet.com/article/231-sending-does-not-work', '5a0257ac2c7d3a272c0d7ad6', additionalInfo)}
     </div>

assets/js/src/help/your_privacy.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
+import Button from 'common/button/button';
 
 function YourPrivacy() {
   return (
@@ -8,7 +9,9 @@ function YourPrivacy() {
       <p>{MailPoet.I18n.t('yourPrivacyContent2')}</p>
       <p>{MailPoet.I18n.t('yourPrivacyContent3')}</p>
 
-      <a target="_blank" rel="noreferrer noopener" href="https://www.mailpoet.com/privacy-notice/" className="button button-primary">{MailPoet.I18n.t('yourPrivacyButton')}</a>
+      <Button dimension="small" target="_blank" rel="noreferrer noopener" href="https://www.mailpoet.com/privacy-notice/">
+        {MailPoet.I18n.t('yourPrivacyButton')}
+      </Button>
     </>
   );
 }