[IMP] theme_notes: update the theme

This commit updates the theme to improve the design with new colors, new
pictures and new snippet customizations.

task-2590454

X-original-commit: 352692754c
Part-of: odoo/design-themes#501

theme_notes/static/description/index.html

@@ -7,7 +7,7 @@
         first projects on the web. Just drag & drop the new building blocks
         you need to easily build your layout. All layouts are made of sections,
         that you can easily combine to fit your specific project.</p>
-    <img src="Notes_description.png" class="img-fluid d-block mx-auto"/>
+    <img src="notes_description.jpg" class="img-fluid d-block mx-auto"/>
     <hr>
 
     <h2 class="text-muted">Notes Customization Tool</h2>

theme_notes/static/src/js/tour.js

@@ -1,10 +1,9 @@
-odoo.define("theme_notes.tour.notes", function (require) {
-"use strict";
+/** @odoo-module */
+
+import wTourUtils from 'website.tour_utils';
 
 const core = require("web.core");
 const _t = core._t;
-const wTourUtils = require("website.tour_utils");
-var tour = require("web_tour.tour");
 
 const snippets = [
     {
@@ -12,8 +11,16 @@ const snippets = [
         name: 'Carousel',
     },
     {
-        id: 's_image_text',
-        name: 'Image - Text',
+        id: 's_masonry_block',
+        name: 'Masonry',
+    },
+    {
+        id: 's_text_image',
+        name: 'Text - Image',
+    },
+    {
+        id: 's_product_catalog',
+        name: 'Pricelist',
     },
     {
         id: 's_media_list',
@@ -27,12 +34,14 @@ const snippets = [
 
 wTourUtils.registerThemeHomepageTour("notes_tour", [
     wTourUtils.dragNDrop(snippets[0]),
-    wTourUtils.clickOnText(snippets[0], 'h2'),
+    wTourUtils.clickOnText(snippets[0], 'h1'),
     wTourUtils.goBackToBlocks(),
     wTourUtils.dragNDrop(snippets[1]),
     wTourUtils.dragNDrop(snippets[2]),
-    wTourUtils.dragNDrop(snippets[3]),
-    wTourUtils.clickOnSnippet(snippets[3]),
+    wTourUtils.clickOnSnippet(snippets[2]),
     wTourUtils.changeOption('ContainerWidth', 'we-button-group.o_we_user_value_widget', _t('width')),
+    wTourUtils.goBackToBlocks(),
+    wTourUtils.dragNDrop(snippets[3]),
+    wTourUtils.dragNDrop(snippets[4]),
+    wTourUtils.dragNDrop(snippets[5]),
 ]);
-});

theme_notes/static/src/scss/bootstrap_overridden.scss

@@ -12,3 +12,7 @@ $box-shadow-lg:               0 0 .3125rem rgba(0,0,0,.25) !default;
 // Breadcrumbs
 
 $breadcrumb-bg:                     o-color('white') !default;
+
+// Headings font weight
+
+$headings-font-weight: $o-theme-headings-font-weight !default;

theme_notes/static/src/scss/primary_variables.scss

@@ -54,13 +54,15 @@ $o-theme-color-palettes: map-merge($o-theme-color-palettes,
 // Fonts
 //------------------------------------------------------------------------------
 
-$o-theme-h1-font-size-multiplier: (40 / 16);
-$o-theme-h2-font-size-multiplier: (32 / 16);
+$o-theme-h1-font-size-multiplier: (62 / 16);
+$o-theme-h2-font-size-multiplier: (36 / 16);
 $o-theme-h3-font-size-multiplier: (28 / 16);
 $o-theme-h4-font-size-multiplier: (24 / 16);
 $o-theme-h5-font-size-multiplier: (20 / 16);
 $o-theme-h6-font-size-multiplier: 1;
 
+$o-theme-headings-font-weight: 700;
+
 $o-theme-font-configs: (
     'Cuprum': (
         'family': ('Cuprum', sans-serif),
@@ -105,6 +107,10 @@ $o-theme-font-configs: (
         'family': ('Lobster', cursive),
         'url': 'Lobster:300,300i,400,400i,700,700i',
     ),
+    'Montserrat': (
+        'family': ('Montserrat', sans-serif),
+        'url': 'Montserrat:300,300i,400,400i,700,700i',
+    ),
 );
 
 //------------------------------------------------------------------------------
@@ -114,18 +120,16 @@ $o-theme-font-configs: (
 $o-website-values-palettes: (
     (
         'color-palettes-name': 'notes-1',
-        'header-font-size': 1.25rem,
+        'header-font-size': 1rem,
         'logo-height': 3rem,
         'fixed-logo-height': 3rem,
         'font': 'Oxygen',
-        'headings-font': 'Lobster',
-        'navbar-font': 'Lobster',
-        'buttons-font': 'Lobster',
+        'headings-font': 'Montserrat',
+        'navbar-font': 'Montserrat',
+        'buttons-font': 'Montserrat',
         'link-underline': 'never',
-        'header-template': 'hamburger-full',
+        'header-template': 'template_header_default',
         'footer-template': 'descriptive',
-        'hamburger-position': 'right',
-        'hamburger-type': 'off-canvas',
     ),
 );
 
@@ -168,6 +172,14 @@ $o-theme-color-palettes-compatibility-indexes: (
 // Shapes
 //------------------------------------------------------------------------------
 
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/10', (1: 5, 2: 5));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/13_001', (1: 5));
+$o-bg-shapes: add-footer-shape-colors-mapping('web_editor', 'Wavy/13_001', (1: 'footer'));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/25', (1: 5, 2: 5));
+$o-bg-shapes: add-extra-shape-colors-mapping('web_editor', 'Wavy/25', 'second', (1: 2, 2: 2));
+$o-bg-shapes: add-extra-shape-colors-mapping('web_editor', 'Wavy/25', 'third', (1: 3, 2: 3));
 $o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/04', (5: 4));
-$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/01', (2: 5));
-$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/01_001', (2: 5));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/01', (2: 2));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/01_001', (2: 2));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Floats/08', (5: 4));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Floats/12', (5: 4));