Merge branch 'imprv/gw4818-preview-design-new' into imprv/gw4862-apply-differnt-colors-to-each-col

src/client/js/components/PageEditor/GridEditModal.jsx

@@ -143,7 +143,7 @@ class GridEditModal extends React.Component {
     const isMdSelected = this.state.responsiveSize === BootstrapGrid.ResponsiveSize.MD_SIZE;
     const isXsSelected = this.state.responsiveSize === BootstrapGrid.ResponsiveSize.XS_SIZE;
     return (
-      <div className="row grid-edit-preview border my-4 p-3">
+      <div className="row grw-grid-edit-preview border my-4 p-3">
         <div className="col-lg-2">
           <h4 className="d-block mt-2">{t('phone')}</h4>
           <div className="mobile-preview d-block px-3 py-2">

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -307,7 +307,7 @@ ul.pagination {
 /*
  * GROWI Grid Edit Modal
  */
-.grid-edit-preview {
+.grw-grid-edit-preview {
   background: $gray-900;
 }
 

src/client/styles/scss/theme/_apply-colors-light.scss

@@ -215,7 +215,7 @@ $border-color: $border-color-global;
  * GROWI Grid Edit Modal
  */
 
-.grid-edit-preview {
+.grw-grid-edit-preview {
   background: $gray-100;
 }
 

src/client/styles/scss/theme/_apply-colors.scss

@@ -438,7 +438,7 @@ body.on-edit {
 /*
  * GROWI Grid Edit Modal
  */
-.grid-edit-preview {
+.grw-grid-edit-preview {
   .desktop-preview,
   .tablet-preview,
   .mobile-preview {