[IMP] website: improve onboarding flow

- Improve the website tour (typo, tip positions, etc) and added new
  steps to publish a new page
- Make close button of 'Mobile Preview' more visible
- Fix the overflow for long menu names in menu editor dialog
- Change the menu string from 'Affix Top Menu' to 'Fixed Top Menu'
- Change theme customization dialog's title to 'Customize Theme'
  from 'Customize this theme'
- Improve strings for Google Analytics

task-1895287

closes odoo/odoo#28199

6 files changed, 42 insertions, 14 deletions

diff --git a/addons/website/static/src/js/backend/dashboard.js b/addons/website/static/src/js/backend/dashboard.js
index 1cf4ef94c71..0ec306c10f7 100644
--- a/addons/website/static/src/js/backend/dashboard.js
+++ b/addons/website/static/src/js/backend/dashboard.js
@@ -85,7 +85,7 @@ var Dashboard = AbstractAction.extend({
         var self = this;
         var dialog = new Dialog(this, {
             size: 'medium',
-            title: _t('Google Analytics'),
+            title: _t('Connect Google Analytics'),
             $content: QWeb.render('website.ga_dialog_content', {
                 ga_key: this.dashboards_data.visits.ga_client_id,
                 ga_analytics_key: this.dashboards_data.visits.ga_analytics_key,
diff --git a/addons/website/static/src/js/tours/banner.js b/addons/website/static/src/js/tours/banner.js
index 8cd65066baf..1d3951b06c1 100644
--- a/addons/website/static/src/js/tours/banner.js
+++ b/addons/website/static/src/js/tours/banner.js
@@ -23,27 +23,26 @@ tour.register("banner", {
 }, {
     trigger: "#wrapwrap .s_cover h1",
     content: _t("<b>Click on a text</b> to start editing it. <i>It's that easy to edit your content!</i>"),
-    position: "left",
-    width: 150,
+    position: "bottom",
     run: "text",
 }, {
     trigger: ".oe_overlay_options .oe_options",
     extra_trigger: "#wrapwrap .s_cover h1:not(:containsExact(\"Catchy Headline\"))",
-    content: _t("Customize any block through this menu. Try to change the background of the banner."),
-    position: "bottom",
+    content: _t("Customize any block through this menu. Try to change the background color of this block."),
+    position: "top",
 }, {
-    trigger: "#snippet_structure .oe_snippet:eq(6) .oe_snippet_thumbnail",
+    trigger: "#snippet_structure .oe_snippet:eq(3) .oe_snippet_thumbnail",
     content: _t("Drag another block in your page, below the cover."),
     position: "bottom",
     run: "drag_and_drop #wrap",
 }, {
     trigger: "button[data-action=save]",
     extra_trigger: ".oe_overlay_options .oe_options",
-    content: _t("Publish your page by clicking on the <b>Save</b> button."),
+    content: _t("Click the <b>Save</b> button."),
     position: "bottom",
 }, {
     trigger: "a[data-action=show-mobile-preview]",
-    content: _t("Good Job! You created your first page. Let's check how this page looks like on <b>mobile devices</b>."),
+    content: _t("Good Job! You have designed your homepage. Let's check how this page looks like on <b>mobile devices</b>."),
     position: "bottom",
 }, {
     trigger: ".modal-dialog:has(#mobile-viewport) button[data-dismiss=modal]",
@@ -51,7 +50,33 @@ tour.register("banner", {
     position: "right",
 }, {
     trigger: "#new-content-menu > a",
-    content: _t("<p><b>That's it.</b> Your homepage is live.</p><p>Continue adding more pages to your site or edit this page to make it even more awesome.</p>"),
+    content: _t("<p><b>Your homepage is live.</b></p><p>Let's add a new page for your site.</p>"),
+    position: "bottom",
+},  {
+    trigger: "a[data-action=new_page]",
+    content: _t("<p><b>Click here</b> to create a new page.</p>"),
+    position: "bottom",
+}, {
+    trigger: ".modal-dialog #editor_new_page input[type=text]",
+    content: _t("<p>Enter a title for the page.</p>"),
+    position: "bottom",
+}, {
+    trigger: ".modal-footer button.btn-primary.btn-continue",
+    content: _t("Click on <b>Continue</b> to create the page."),
+    position: "bottom",
+}, {
+    trigger: "#snippet_structure .oe_snippet:eq(3) .oe_snippet_thumbnail",
+    content: _t("Drag the block and drop it in your new page."),
+    position: "bottom",
+    run: "drag_and_drop #wrap",
+}, {
+    trigger: "button[data-action=save]",
+    extra_trigger: ".oe_overlay_options .oe_options",
+    content: _t("Click the <b>Save</b> button."),
+    position: "bottom",
+}, {
+    trigger: ".js_publish_management .js_publish_btn",
+    content: _t("<b>That's it!</b><p>Your page is all set to go live. Click the <b>Publish</b> button to publish it on the website.</p>"),
     position: "bottom",
 }]);
 });
diff --git a/addons/website/static/src/js/widgets/theme.js b/addons/website/static/src/js/widgets/theme.js
index 7646f4002a0..46a3ddcccf3 100644
--- a/addons/website/static/src/js/widgets/theme.js
+++ b/addons/website/static/src/js/widgets/theme.js
@@ -29,7 +29,7 @@ var ThemeCustomizeDialog = Dialog.extend({
     init: function (parent, options) {
         options = options || {};
         this._super(parent, _.extend({
-            title: _t("Customize this theme"),
+            title: _t("Customize Theme"),
             buttons: [],
         }, options));
 
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index d9554a20a1c..6865a8b7e79 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -143,6 +143,9 @@ body .modal {
                             margin-left: $grid-gutter-width/2;
                         }
                     }
+                    .close {
+                        color: $o-we-color-light;
+                    }
                 }
 
                 .modal-body {
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index 2fa06435922..0b613ac20d6 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -37,7 +37,7 @@
                         </div>
                         <div class="o_buttons text-center">
                             <h3>There is no data currently available.</h3>
-                            <button class="btn btn-primary js_link_analytics_settings d-block mx-auto mb8">Link my Analytics Account</button>
+                            <button class="btn btn-primary js_link_analytics_settings d-block mx-auto mb8">Connect Google Analytics</button>
                         </div>
                     </div>
                 </div>
diff --git a/addons/website/static/src/xml/website.contentMenu.xml b/addons/website/static/src/xml/website.contentMenu.xml
index abcd94d5764..6bcb2a09a7e 100644
--- a/addons/website/static/src/xml/website.contentMenu.xml
+++ b/addons/website/static/src/xml/website.contentMenu.xml
@@ -6,11 +6,11 @@
             <div class="input-group-prepend">
                 <span class="input-group-text fa fa-bars" role="img" aria-label="Dropdown menu" title="Dropdown menu"/>
             </div>
-            <span class="form-control">
-                <span class="js_menu_label">
+            <span class="form-control d-flex align-items-center">
+                <span class="js_menu_label o_text_overflow flex-grow-1">
                     <t t-esc="submenu.name"/>
                 </span>
-                <i t-if="submenu.is_homepage" class="float-right fa fa-home" style="margin-top: 3px" role="img" aria-label="Home" title="Home"/>
+                <i t-if="submenu.is_homepage" class="fa fa-home ml-3" role="img" aria-label="Home" title="Home"/>
             </span>
             <span class="input-group-append">
                 <button type="button" class="btn btn-primary js_edit_menu fa fa-pencil-square-o" aria-label="Edit menu" title="Edit menu"/>