[MWPW-156739] Adding preview buttons icon and CTA bar spacing tweak (#…

…174)

ecc/blocks/form-handler/form-handler.css

@@ -170,6 +170,9 @@
 
 .form-handler .form-handler-ctas-panel a {
   font-size: var(--type-body-s-size);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .form-handler .side-menu ul li a {
@@ -350,7 +353,6 @@
 .form-handler .form-handler-ctas-panel .form-handler-panel-wrapper > div {
   display: flex;
   align-items: center;
-  gap: 14px;
 }
 
 .form-handler .form-handler-ctas-panel .form-handler-backward-wrapper .back-btn {
@@ -367,8 +369,21 @@
 }
 
 .form-handler .form-handler-ctas-panel .form-handler-forward-wrapper > div:first-of-type {
-  padding-right: 16px;
-  border-right: 2px solid var(--color-black);
+  padding-right: 64px;
+  border-right: 1px solid var(--color-black);
+  margin-right: 104px;
+}
+
+.form-handler .form-handler-ctas-panel .form-handler-forward-wrapper .action-area:first-child {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.form-handler .form-handler-ctas-panel .form-handler-forward-wrapper .action-area:last-child {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
 .form-handler .form-handler-ctas-panel a.disabled,
@@ -385,7 +400,7 @@
 
 .form-handler .form-handler-ctas-panel a.next-button:hover {
   filter: invert();
-}
+} 
 
 .form-handler .form-handler-ctas-panel a.fill {
   background-color: var(--color-gray-200);
@@ -396,14 +411,18 @@
   min-height: 21px;
   padding: 7px 18px 8px;
   border: 2px solid var(--color-white);
-  display: inline-block;
 }
 
 .form-handler .form-handler-ctas-panel a.fill:hover {
   text-decoration: none;
   filter: invert();
 }
 
+.form-handler .form-handler-ctas-panel a.preview-btns svg {
+  height: 20px;
+  width: 28px;
+}
+
 .form-handler .form-handler-ctas-panel .form-handler-panel-wrapper .con-button.outline {
   color: var(--color-white);
   border-color: var(--color-white);

ecc/blocks/form-handler/form-handler.js

@@ -473,6 +473,7 @@ function initFormCtas(props) {
   const forwardWrapper = createTag('div', { class: 'form-handler-forward-wrapper' }, '', { parent: panelWrapper });
 
   forwardActionsWrappers.forEach((w) => {
+    w.classList.add('action-area');
     forwardWrapper.append(w);
   });
 
@@ -512,7 +513,9 @@ function initFormCtas(props) {
         if (ctaUrl.hash === '#next') {
           cta.classList.add('next-button');
           const [nextStateText, finalStateText, doneStateText, republishStateText] = cta.textContent.split('||');
+
           cta.textContent = nextStateText;
+          cta.append(getIcon('chev-right-white'));
           cta.dataset.nextStateText = nextStateText;
           cta.dataset.finalStateText = finalStateText;
           cta.dataset.doneStateText = doneStateText;
@@ -527,6 +530,7 @@ function initFormCtas(props) {
             cta.prepend(getIcon('golden-rocket'));
           } else {
             cta.textContent = nextStateText;
+            cta.append(getIcon('chev-right-white'));
           }
         }
 

ecc/scripts/scripts.js

@@ -31,6 +31,7 @@ function convertEccIcon(n) {
   const eccIcons = [
     'ecc-content',
     'ecc-star-wire',
+    'ecc-webpage',
   ];
 
   const iconRegex = /@@(.*?)@@/g;