style changes for panel placeholder (move and resize) effect

public/sass/_variables.dark.scss

@@ -383,3 +383,6 @@ $panel-editor-viz-item-bg: $black;
 $panel-editor-tabs-line-color: #e3e3e3;
 $panel-editor-viz-item-bg-hover: darken($blue, 47%);
 $panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
+
+$panel-grid-placeholder-bg: darken($blue, 47%);
+$panel-grid-placeholder-shadow: 0 0 4px $blue;

public/sass/_variables.light.scss

@@ -393,3 +393,6 @@ $panel-editor-viz-item-bg: $white;
 $panel-editor-tabs-line-color: $dark-5;
 $panel-editor-viz-item-bg-hover: lighten($blue, 62%);
 $panel-editor-viz-item-bg-hover-active: lighten($orange, 34%);
+
+$panel-grid-placeholder-bg: lighten($blue, 62%);
+$panel-grid-placeholder-shadow: 0 0 4px $blue-light;

public/sass/components/_dashboard_grid.scss

@@ -57,6 +57,13 @@
   }
 }
 
+.react-grid-item.react-grid-placeholder {
+  box-shadow: $panel-grid-placeholder-shadow;
+  background: $panel-grid-placeholder-bg;
+  z-index: 0;
+  opacity: unset;
+}
+
 .theme-dark {
   .react-grid-item > .react-resizable-handle::after {
     border-right: 2px solid $gray-1;

public/sass/components/_panel_editor.scss

@@ -265,10 +265,9 @@
   height: 44px;
 
   &:hover {
-    background: $card-background-hover;
-    box-shadow: $panel-editor-viz-item-shadow-hover;
     background: $panel-editor-viz-item-bg-hover;
     border: $panel-editor-viz-item-border-hover;
+    box-shadow: $panel-editor-viz-item-shadow-hover;
   }
 
   &--selected {