[FIX] website: matches icon apps to the app switcher

This commit makes it so that the icons of the website new-content
menu are closer to the icon of the app they are related to.

task-2329291

closes odoo/odoo#59236

X-original-commit: 4565a65e99a6dae323fd3d7ddf2010fea102bb91
Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

addons/website/static/src/img/apps_thumbs/website_slide.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" viewBox="0 0 70 70"><defs><path id="a" d="M4 0h61c4 0 5 1 5 5v60c0 4-1 5-5 5H4c-3 0-4-1-4-5V5c0-4 1-5 4-5z"/><linearGradient id="c" x1="100%" x2="0%" y1="0%" y2="100%"><stop offset="0%" stop-color="#B06161"/><stop offset="45.785%" stop-color="#984E4E"/><stop offset="100%" stop-color="#7C3838"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><path fill="#FFF" d="M33.875 44H15a2 2 0 0 1-2-2V22a2 2 0 0 1 2-2h26a2 2 0 0 1 2 2v4.865a7.499 7.499 0 0 0-4 6.635c0 1.946.74 3.718 1.956 5.051a4.099 4.099 0 0 0-.387-.021c-2.049 0-1.256-.22-3.073-2.05-3.187 1.066-6.105 4.876-6.105 5.55.625.317 1.453.973 2.484 1.97zM43 43.132c2.348-1.51 8.09-1.51 10.439 0 1.565 1.007 3.392 3.775 5.48 8.304-1.549 1.77-2.593 2.525-3.132 2.265-1.044-1.51-1.826-2.768-2.348-3.775v5.284c-3.653 1.007-7.306 1.007-10.96 0v-5.284C38.16 45.976 35.334 43.666 34 43c0-.573 0-1 1-2 .667-.667 1.667-1.333 3-2 1.768 3.761 3.434 5.139 5 4.132zm4.74.868l-1.13 4.578 1.695 2.29L50 48.578 48.87 44h-1.13zM22 51l6-7 6 7h-2l-4-5-4 5h-2zm6-31v-2 2zm19.5 21a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13z"/></g></g></svg>

addons/website/static/src/js/menu/new_content.js

@@ -48,7 +48,7 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
             $el.data('original-index', index);
             if ($el.data('module-id')) {
                 $el.appendTo($el.parent());
-                $el.find('a i, a p').addClass('text-muted');
+                $el.find('a i, a p').addClass('o_uninstalled_module');
             }
         });
 
@@ -280,8 +280,9 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
                             }
                             // change style to use spinner
                             $i.removeClass()
-                                .addClass('fa fa-spin fa-spinner fa-pulse');
-                            $p.removeClass('text-muted')
+                                .addClass('fa fa-spin fa-spinner fa-pulse')
+                                .css('background-image', 'none');
+                            $p.removeClass('o_uninstalled_module')
                                 .text(_.str.sprintf(self.newContentText.installPleaseWait, name));
                             $el.fadeTo(1000, 1);
                         });

addons/website/static/src/scss/website.ui.scss

@@ -357,6 +357,16 @@ body .modal {
         opacity: 0;
         animation: fadeInDownSmall 1s forwards;
 
+        .o_uninstalled_module {
+            filter: brightness(70%) contrast(60%);
+
+        }
+
+        .module_icon {
+            display: block;
+            margin: auto;
+        }
+
         a {
             display: block;
             font-size: 34px;

addons/website/views/website_navbar_templates.xml

@@ -126,7 +126,7 @@
                                              t-att-data-module-shortdesc="mod.shortdesc"
                                              class="col-md-4 mb8 o_new_content_element">
                                             <a href="#" data-action="new_event">
-                                                <i class="fa fa-glass"/>
+                                                <i class="fa fa-ticket"/>
                                                 <p>Event</p>
                                             </a>
                                         </div>
@@ -166,7 +166,8 @@
                                              t-att-data-module-shortdesc="mod.shortdesc"
                                              class="col-md-4 mb8 o_new_content_element">
                                             <a href="#" data-action="new_slide_channel">
-                                                <i class="fa fa-graduation-cap"></i>
+                                                <i class="fa module_icon" style="background-image: url('/website/static/src/img/apps_thumbs/website_slide.svg');
+                                                    background-repeat: no-repeat; background-position: center;"/>
                                                 <p>Course</p>
                                             </a>
                                         </div>
@@ -176,7 +177,7 @@
                                              t-att-data-module-shortdesc="mod.shortdesc"
                                              class="col-md-4 mb8 o_new_content_element o_new_content_element_once">
                                             <a href="#" data-url="/livechat" data-action="new_channel">
-                                                <i class="fa fa-hashtag"/>
+                                                <i class="fa fa-comments"/>
                                                 <p>Livechat Widget</p>
                                             </a>
                                         </div>