[MBO-662][MBO-663][MBO-668][MBO-670]feat: ✨ design button and customization title and description recommended modules modal

ps_mbo.php

@@ -469,7 +469,7 @@ public function hookDisplayDashboardTop()
             'shouldAttachRecommendedModulesAfterContent' => $this->shouldAttachRecommendedModulesAfterContent(),
             'shouldAttachRecommendedModulesButton' => $this->shouldAttachRecommendedModulesButton(),
             'shouldUseLegacyTheme' => $this->isAdminLegacyContext(),
-            'recommendedModulesTitleTranslated' => $this->trans('Recommended Modules and Services'),
+            'recommendedModulesTitleTranslated' => $this->getRecommandedModulesButtonTitle(),
             'recommendedModulesCloseTranslated' => $this->trans('Close', [], 'Admin.Actions'),
             'recommendedModulesUrl' => $recommendedModulesUrl,
         ]);
@@ -505,6 +505,42 @@ private function shouldAttachRecommendedModulesAfterContent()
         return in_array(Tools::getValue('controller'), static::TABS_WITH_RECOMMENDED_MODULES_AFTER_CONTENT, true);
     }
 
+    /**
+     * Customize title button recommended modules
+     *
+     * @return string
+     */
+    private function getRecommandedModulesButtonTitle()
+    {
+        switch (Tools::getValue('controller')) {
+            case 'AdminInvoices':
+            case 'AdminDeliverySlip':
+            case 'AdminSlip':
+            case 'AdminOrders':
+                $title = $this->trans('Boost sales', [], 'Modules.Mbo.Recommendedmodulesandservices');
+                break;
+            case 'AdminSpecificPriceRule':
+            case 'AdminManufacturers':
+            case 'AdminAttributesGroups':
+            case 'AdminCartRules':
+            case 'AdminProducts':
+                $title = $this->trans('Optimize product catalog', [], 'Modules.Mbo.Recommendedmodulesandservices');
+                break;
+            case 'AdminStats':
+                $title = $this->trans('Improve data strategy', [], 'Modules.Mbo.Recommendedmodulesandservices');
+                break;
+            case 'AdminCustomerThreads':
+            case 'AdminCustomers':
+                $title = $this->trans('Improve customer experience', [], 'Modules.Mbo.Recommendedmodulesandservices');
+                break;
+            default:
+                $title = $this->trans('Recommended modules', [], 'Modules.Mbo.Recommendedmodulesandservices');
+                break;
+        }
+
+        return $title;
+    }
+
     /**
      * Indicates if the recommended modules button should be attached in this page
      *

views/css/recommended-modules.css

@@ -153,6 +153,27 @@
   margin-top: 15px;
 }
 
+.bootstrap .page-head .toolbarBox .btn-toolbar .toolbar_btn.mbo-modules-recommended-button {
+  color: #fff;
+  background-color: #6c868e;
+  border-color: #6c868e;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  display: flex;
+  align-items: center;
+}
+.bootstrap .page-head .toolbarBox .btn-toolbar .toolbar_btn.mbo-modules-recommended-button i {
+  display: inline-block;
+  color: #fff;
+  margin-right: 5px;
+}
+
+.bootstrap .page-head .toolbarBox .btn-toolbar .toolbar_btn.mbo-modules-recommended-button:hover {
+  color: #fff;
+  background-color: #b7ced3;
+  border-color: #b7ced3;
+}
+
 @media (min-width: 768px) {
   #content.bootstrap #modules_list_container .modal-dialog {
     width: 680px;

views/js/recommended-modules.js

@@ -180,15 +180,16 @@ var mbo = {};
     if (config.shouldUseLegacyTheme) {
       $markup = $(
         '<li id="recommended-modules-button-container">\n' +
-        '  <a id="' + buttonId + '" class="toolbar_btn pointer" href="' + config.recommendedModulesUrl + '" title="' + label + '">\n' +
-        '    <i class="process-icon-modules-list"></i>\n' +
+        '  <a id="' + buttonId + '" class="toolbar_btn pointer mbo-modules-recommended-button " href="' + config.recommendedModulesUrl + '" title="' + label + '">\n' +
+        '    <i class="material-icons mi-extension">extension</i>\n' +
         '    <div>' + label + '</div>\n' +
         '  </a>\n' +
         '</li>'
       );
     } else {
       $markup = $(
-        '<a class="btn btn-outline-secondary" id="' + buttonId + '" href="' + config.recommendedModulesUrl + '" title="' + label + '">\n' +
+        '<a class="btn btn-secondary" id="' + buttonId + '" href="' + config.recommendedModulesUrl + '" title="' + label + '">' +
+        '<i class="material-icons">extension</i>\n' +
         label +
         '</a>'
       );