diff --git a/mailpoet/assets/css/src/components-plugin/_common.scss b/mailpoet/assets/css/src/components-plugin/_common.scss index 6c1827e11a..f3a600cd73 100644 --- a/mailpoet/assets/css/src/components-plugin/_common.scss +++ b/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%; } } diff --git a/mailpoet/assets/js/src/common/manage-sender-domain/manage-sender-domain.tsx b/mailpoet/assets/js/src/common/manage-sender-domain/manage-sender-domain.tsx index 006f7c5553..afe7ab1a90 100644 --- a/mailpoet/assets/js/src/common/manage-sender-domain/manage-sender-domain.tsx +++ b/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 ( -
+
{__('Manage Sender Domain ', 'mailpoet')}

{__( @@ -35,74 +34,90 @@ function ManageSenderDomain({ 'mailpoet', )}

-

- {createInterpolateElement( - __( - '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. Read the guide.', - 'mailpoet', - ), - { - link: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label - - ), - }, - )} -

- - - - - - - - - - {dns.map((dnsRecord, index) => ( - - - - - - ))} - -
- {' '} - {__('Type', 'mailpoet')}{' '} - - {' '} - {__('Host', 'mailpoet')}{' '} - - {' '} - {__('Value', 'mailpoet')}{' '} -
{dnsRecord.type} - - - - - -
-
- -
+
    +
  1. +
    + + {__( + 'Please add the following DNS records to your domain’s DNS settings.', + )}{' '} + + + {__('Read the guide', 'mailpoet')} + +
    + + + + + + + + + + {dns.map((dnsRecord, index) => ( + + + + + + ))} + +
    + {' '} + {__('Type', 'mailpoet')}{' '} + + {' '} + {__('Host', 'mailpoet')}{' '} + + {' '} + {__('Value', 'mailpoet')}{' '} +
    {dnsRecord.type} + + + + + +
    +
  2. +
  3. +
    + + {__( + 'Once added, click the button below to authenticate your sender domain.', + 'mailpoet', + )} + {' '} + {__( + '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', + )} +
    +
    + +
    +
  4. +
); }