Add steps to manage sender domain view, update texts and visuals

[MAILPOET-6037]

mailpoet/assets/css/src/components-plugin/_common.scss

@@ -90,15 +90,58 @@ p.sender_email_address_warning:first-child {
   }
 }
 
+.mailpoet_manage_sender_domain_wrapper {
+  ol {
+    counter-reset: item;
+
+    li {
+      counter-increment: item;
+      list-style: none;
+      margin: 24px 0 0 16px;
+      position: relative;
+    }
+
+    li:before {
+      align-items: center;
+      border: 1px solid #007cba;
+      border-radius: 99999px;
+      color: #007cba;
+      content: counter(item);
+      display: inline-flex;
+      height: 24px;
+      justify-content: center;
+      margin-left: -44px;
+      margin-right: 16px;
+      position: absolute;
+      width: 24px;
+    }
+  }
+
+  .mailpoet_manage_sender_domain_step_header {
+    padding: 2px 0 16px;
+  }
+}
+
 .mailpoet_manage_sender_domain {
+  th,
+  td {
+    padding-left: 16px;
+  }
+
   .mailpoet_table_header {
     font-weight: 700 !important;
-    text-align: center !important; // to prevent being overwritten by widefat table classes
   }
 
   .dns_record_type_column {
     font-weight: 550 !important;
-    text-align: center !important; // to prevent being overwritten by widefat table classes
+    padding: 16px;
+    width: 70px;
+  }
+
+  .mailpoet-form-input {
+    border: 1px solid #757575;
+    border-radius: 2px;
+    width: 100%;
   }
 }
 

mailpoet/assets/js/src/common/manage-sender-domain/manage-sender-domain.tsx

@@ -1,5 +1,4 @@
 import { Button, Loader, TypographyHeading as Heading } from 'common';
-import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Grid } from 'common/grid';
 import { SenderDomainEntity } from './manage-sender-domain-types';
@@ -27,7 +26,7 @@ function ManageSenderDomain({
   const { dns, domain } = rows[0];
 
   return (
-    <div>
+    <div className="mailpoet_manage_sender_domain_wrapper">
       <Heading level={2}> {__('Manage Sender Domain ', 'mailpoet')} </Heading>
       <p>
         {__(
@@ -35,27 +34,24 @@ function ManageSenderDomain({
           'mailpoet',
         )}
       </p>
-      <p>
+
-        {createInterpolateElement(
+      <ol>
-          __(
+        <li>
-            'Please add the following DNS records to your domain’s DNS and click “Verify the DNS records”. Do note that it may take up to 24 hours for DNS changes to propagate after you make the change. <link>Read the guide</link>.',
+          <div className="mailpoet_manage_sender_domain_step_header">
-            'mailpoet',
+            <strong>
-          ),
+              {__(
-          {
+                'Please add the following DNS records to your domain’s DNS settings.',
-            link: (
+              )}{' '}
-              // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
+            </strong>
             <a
-                className="mailpoet-link"
+              href="https://kb.mailpoet.com/article/295-spf-dkim-dmarc#authenticating"
-                href="https://kb.mailpoet.com/article/188-how-to-set-up-mailpoet-sending-service#dns"
               target="_blank"
               rel="noopener noreferrer"
-              />
+            >
-            ),
+              {__('Read the guide', 'mailpoet')}
-          },
+            </a>
-        )}
+          </div>
-      </p>
+          <table className="mailpoet_manage_sender_domain widefat striped">
-
-      <table className="mailpoet_manage_sender_domain widefat fixed striped">
             <thead>
               <tr>
                 <th className="mailpoet_table_header">
@@ -98,11 +94,30 @@ function ManageSenderDomain({
               ))}
             </tbody>
           </table>
+        </li>
+        <li>
+          <div className="mailpoet_manage_sender_domain_step_header">
+            <strong>
+              {__(
+                'Once added, click the button below to authenticate your sender domain.',
+                'mailpoet',
+              )}
+            </strong>{' '}
+            {__(
+              'MailPoet would verify your DNS records to ensure it matches. Do note that it may take up to 24 hours for DNS changes to propagate after you make the change.',
+              'mailpoet',
+            )}
+          </div>
           <div className="mailpoet_manage_sender_domain_actions">
-        <Button withSpinner={loadingButton} onClick={verifyDnsButtonClicked}>
+            <Button
+              withSpinner={loadingButton}
+              onClick={verifyDnsButtonClicked}
+            >
               {__('Verify the DNS records', 'mailpoet')}
             </Button>
           </div>
+        </li>
+      </ol>
     </div>
   );
 }