scss adjustment

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

@@ -143,22 +143,22 @@ 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 grw-grid-edit-prevew-bg-color border my-4 p-3">
+      <div className="row 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 bg-white">
+          <div className="mobile-preview d-block px-3 py-2">
             {this.renderGridPreview(!isXsSelected)}
           </div>
         </div>
         <div className="col-lg-3">
           <h4 className="d-block mt-2">{t('tablet')}</h4>
-          <div className="tablet-preview d-block px-3 py-2 bg-white">
+          <div className="tablet-preview d-block px-3 py-2">
             {this.renderGridPreview(isMdSelected)}
           </div>
         </div>
         <div className="col-lg-4">
           <h4 className="d-block mt-2">{t('desktop')}</h4>
-          <div className="desktop-preview d-block px-3 py-2 bg-white">
+          <div className="desktop-preview d-block px-3 py-2">
             {this.renderGridPreview(false)}
           </div>
         </div>

src/client/styles/scss/_on-edit.scss

@@ -334,52 +334,58 @@ body.on-edit {
 */
 
 .grw-grid-edit-modal {
-  .desktop-preview,
-  .tablet-preview,
-  .mobile-preview {
-    .row {
-      height: 140px;
-      margin: 0px;
+  .grid-edit-preview {
+    background: $gray-100;
+
+    .desktop-preview,
+    .tablet-preview,
+    .mobile-preview {
+      .row {
+        height: 140px;
+        margin: 0px;
+      }
+      background: white;
     }
-  }
-  .desktop-preview {
-    .row {
-      div {
-        padding: 0px;
-        background-color: $info;
+    .desktop-preview {
+      .row {
+        div {
+          padding: 0px;
+          background-color: $info;
+        }
       }
     }
-  }
 
-  .tablet-preview {
-    .row {
-      div {
-        padding: 0px;
-        background-color: $purple;
+    .tablet-preview {
+      .row {
+        div {
+          padding: 0px;
+          background-color: $purple;
+        }
       }
     }
-  }
 
-  .mobile-preview {
-    width: 75%;
-    .row {
-      div {
-        padding: 0px;
-        background-color: $pink;
+    .mobile-preview {
+      width: 75%;
+      .row {
+        div {
+          padding: 0px;
+          background-color: $pink;
+        }
       }
     }
-  }
 
-  .grid-division-menu {
-    width: 60vw;
-    @include media-breakpoint-down(lg) {
-      width: 80vw;
+    .grid-division-menu {
+      width: 60vw;
+      @include media-breakpoint-down(lg) {
+        width: 80vw;
+      }
     }
   }
 }
 
-.grw-grid-edit-prevew-bg-color {
-  background: $gray-100;
-  // border: $gray-200;
-  // border-color: red;
-}
+// .grw-grid-edit-prevew-bg-color {
+//   background: $gray-100;
+//   .bg-color-for-device-preview {
+//     background: white;
+//   }
+// }