From 8ca644252e2d3a1f836735454c1f936529a7914e Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Wed, 23 Aug 2023 14:36:00 +0200
Subject: [PATCH] [IMP] website, web_editor: redesign the drop zone

This commit adapts the drop zone to maintain consistency with the style
of web editor.

task-3368793

Part-of: odoo/odoo#132653
---
 .../web_editor/static/src/scss/wysiwyg_snippets.scss  | 11 +++++++----
 addons/website/static/src/scss/website.edit_mode.scss | 11 ++++++-----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index a8ce082015f..1f0813f963a 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -2050,19 +2050,22 @@ we-select.o_we_border_preview_aligned_select {
 // DROPZONES
 @keyframes dropZoneInsert {
     to {
-        background-color: rgba($o-brand-odoo, 0.3);
+        box-shadow: inset 0 0 $o-we-dropzone-size 0 rgba($o-we-handles-accent-color, .5);
     }
 }
 
 .oe_drop_zone {
-    background-color: rgba($o-brand-odoo, 0.15);
+    background: rgba(lighten($o-we-handles-accent-color, 50%), .95);
     animation: dropZoneInsert 1s linear 0s infinite alternate;
 
     &.oe_insert {
         position: relative;
-        z-index: $o-we-overlay-zindex;
         width: 100%;
-        border: 2px dashed $o-we-border-color;
+        border-radius: $border-radius-lg;
+        outline: $o-we-dropzone-border-width dashed $o-we-handles-accent-color;
+        outline-offset: -$o-we-dropzone-border-width;
+        backdrop-filter: blur(2px);
+        z-index: $o-we-overlay-zindex;
     }
 }
 
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index fe72f699d41..4ca6463e586 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -1,8 +1,11 @@
 $-editor-messages-margin-x: 2%;
 %o-editor-messages {
-    border: 2px dashed #999999;
+    background: rgba(lighten($o-we-handles-accent-color, 50%), .95);
     text-align: center;
-    color: white;
+    color: $o-we-handles-accent-color;
+    outline: $o-we-dropzone-border-width dashed $o-we-handles-accent-color;
+    outline-offset: -$o-we-dropzone-border-width;
+    backdrop-filter: blur(2px);
 
     &:before {
         content: attr(data-editor-message);
@@ -87,7 +90,6 @@ $-editor-messages-margin-x: 2%;
         > .oe_drop_zone.oe_insert:not(.oe_vertical) {
             @extend %o-editor-messages;
             height: auto;
-            text-shadow: -1px -1px 0 $o-brand-odoo, 1px -1px 0 $o-brand-odoo, -1px 1px 0 $o-brand-odoo, 1px 1px 0 $o-brand-odoo;
 
             // Empty editable element during drag & drop
             &:only-child {
@@ -111,13 +113,12 @@ $-editor-messages-margin-x: 2%;
             @extend %o-editor-messages;
             padding: 112px 0px;
             margin: 20px $-editor-messages-margin-x;
-            color: #999999;
+            border-radius: $border-radius-lg;
         }
 
         // Exception 2: empty wrap during drag & drop (override of base case)
         &#wrap > .oe_drop_zone.oe_insert:not(.oe_vertical):only-child {
             padding: 112px 0px;
-            color: #999999;
             text-shadow: none;
         }