MC-3610: Remove use of legacy system within slide preview

 - move main styles back to fix border radius

Author: cspruiell

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less

@@ -9,7 +9,6 @@
 
 .pagebuilder-slide {
     background-color: @color-gray98;
-    overflow: hidden;
 
     .pagebuilder-empty-slide {
         color: @color-gray65-lighten;

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js

@@ -6,15 +6,14 @@
 -->
 
 <div attr="data.main.attributes"
-     ko-style="data.main.style"
      css="data.main.css">
     <a attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css">
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden"
              css="data.desktop_image.css"
              attr="data.desktop_image.attributes"
-             ko-style="Object.assign({}, data.desktop_image.style(), {paddingLeft: 'calc(25% + ' + data.desktop_image.style().paddingLeft + ')', paddingRight: 'calc(25% + ' + data.desktop_image.style().paddingRight + ')'})">
+             ko-style="Object.assign({}, data.desktop_image.style(), data.main.style(), {paddingLeft: 'calc(25% + ' + data.desktop_image.style().paddingLeft + ')', paddingRight: 'calc(25% + ' + data.desktop_image.style().paddingRight + ')'})">
             <div class="pagebuilder-overlay"
                  attr="data.overlay.attributes"
                  ko-style="data.overlay.style"
@@ -37,7 +36,7 @@
             </div>
         </div>
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-only"
-             ko-style="data.mobile_image.style"
+             ko-style="Object.assign({}, data.mobile_image.style(), data.main.style())"
              attr="data.mobile_image.attributes"
              css="data.mobile_image.css">
             <div class="pagebuilder-overlay "

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/master.html

@@ -8,9 +8,8 @@
 <div class="pagebuilder-content-type pagebuilder-slide"
      attr="data.main.attributes"
      css="data.main.css"
-     ko-style="data.main.style"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
-    <div ko-style="Object.assign(data.desktop_image.style(), {paddingLeft: 'calc(25% + ' + data.desktop_image.style().paddingLeft + ')', paddingRight: 'calc(25% + ' + data.desktop_image.style().paddingRight + ')'})"
+    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingLeft: 'calc(25% + ' + data.desktop_image.style().paddingLeft + ')', paddingRight: 'calc(25% + ' + data.desktop_image.style().paddingRight + ')'})"
          event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
         <div class="pagebuilder-collage-overlay" ko-style="data.overlay.style()">
             <scope args="getUploader().getUiComponent()">

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html

@@ -6,14 +6,13 @@
 -->
 
 <div attr="data.main.attributes"
-     ko-style="data.main.style"
      css="data.main.css">
     <a attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css">
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden"
              attr="data.desktop_image.attributes"
-             ko-style="Object.assign({}, data.desktop_image.style(), {paddingRight: 'calc(50% + ' + data.desktop_image.style().paddingRight + ')'})"
+             ko-style="Object.assign({}, data.desktop_image.style(), data.main.style(), {paddingRight: 'calc(50% + ' + data.desktop_image.style().paddingRight + ')'})"
              css="data.desktop_image.css">
             <div class="pagebuilder-overlay"
                  attr="data.overlay.attributes"
@@ -37,7 +36,7 @@
             </div>
         </div>
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-only"
-             ko-style="data.mobile_image.style"
+             ko-style="Object.assign({}, data.mobile_image.style(), data.main.style())"
              attr="data.mobile_image.attributes"
              css="data.mobile_image.css">
             <div class="pagebuilder-overlay"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/master.html

@@ -8,9 +8,8 @@
 <div class="pagebuilder-content-type pagebuilder-slide"
      attr="data.main.attributes"
      css="data.main.css"
-     ko-style="data.main.style"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
-    <div ko-style="Object.assign(data.desktop_image.style(), {paddingRight: 'calc(50% + ' + data.desktop_image.style().paddingRight + ')'})"
+    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingRight: 'calc(50% + ' + data.desktop_image.style().paddingRight + ')'})"
          css="data.main.css"
          event="{ mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper }">
         <div class="pagebuilder-collage-overlay"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html

@@ -6,13 +6,12 @@
 -->
 
 <div attr="data.main.attributes"
-     ko-style="data.main.style"
      css="data.main.css">
     <a attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css">
         <div attr="data.desktop_image.attributes"
-             ko-style="Object.assign({}, data.desktop_image.style(), {paddingLeft: 'calc(50% + ' + data.desktop_image.style().paddingLeft + ')'})"
+             ko-style="Object.assign({}, data.desktop_image.style(), data.main.style(), {paddingLeft: 'calc(50% + ' + data.desktop_image.style().paddingLeft + ')'})"
              css="data.desktop_image.css"
              class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden">
             <div class="pagebuilder-overlay"
@@ -37,7 +36,7 @@
         </div>
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-only"
              attr="data.mobile_image.attributes"
-             ko-style="data.mobile_image.style"
+             ko-style="Object.assign({}, data.mobile_image.style(), data.main.style())"
              css="data.mobile_image.css">
             <div class="pagebuilder-overlay"
                  attr="data.overlay.attributes"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/master.html

@@ -8,9 +8,8 @@
 <div class="pagebuilder-content-type pagebuilder-slide"
      attr="data.main.attributes"
      css="data.main.css"
-     ko-style="data.main.style"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
-    <div ko-style="Object.assign(data.desktop_image.style(), {paddingLeft: 'calc(50% + ' + data.desktop_image.style().paddingLeft + ')'})"
+    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingLeft: 'calc(50% + ' + data.desktop_image.style().paddingLeft + ')'})"
          event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
         <div class="pagebuilder-collage-overlay" ko-style="data.overlay.style">
             <scope args="getUploader().getUiComponent()">

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html

@@ -6,14 +6,13 @@
 -->
 
 <div attr="data.main.attributes"
-     ko-style="data.main.style"
      css="data.main.css">
     <a attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css">
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden"
              attr="data.desktop_image.attributes"
-             ko-style="data.desktop_image.style"
+             ko-style="Object.assign(data.desktop_image.style(), data.main.style())"
              css="data.desktop_image.css">
             <div class="pagebuilder-overlay pagebuilder-poster-overlay"
                  attr="data.overlay.attributes"
@@ -38,7 +37,7 @@
         </div>
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-only"
              attr="data.mobile_image.attributes"
-             ko-style="data.mobile_image.style"
+             ko-style="Object.assign(data.mobile_image.style(), data.main.style())"
              css="data.mobile_image.css">
             <div class="pagebuilder-overlay pagebuilder-poster-overlay"
                  attr="data.overlay.attributes"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/master.html

@@ -8,10 +8,9 @@
 <div class="pagebuilder-content-type pagebuilder-slide"
      attr="data.main.attributes"
      css="data.main.css"
-     ko-style="data.main.style"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div class="pagebuilder-slide-wrapper"
-         ko-style="data.desktop_image.style"
+         ko-style="Object.assign(data.desktop_image.style(), data.main.style())"
          event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
         <div class="pagebuilder-poster-overlay"
              attr="data.overlay.attributes"