N°2847 Recolor svg illustrations with itop's primary color

css/backoffice/base/_base.scss

@@ -20,6 +20,8 @@ $ibo-hyperlink-color: $ibo-color-primary-500 !default;
 $ibo-hyperlink-color--on-hover: $ibo-color-primary-600 !default;
 $ibo-hyperlink-color--on-active: $ibo-color-primary-700 !default;
 
+$ibo-svg-illustration--fill: $ibo-color-primary-500 !default;
+
 :root{
 	--ibo-hyperlink-color: #{$ibo-hyperlink-color};
 	--ibo-hyperlink-color--on-hover: #{$ibo-hyperlink-color--on-hover};
@@ -51,4 +53,8 @@ a{
 	&:active{
 		color: var(--ibo-hyperlink-color--on-active);
 	}
+}
+
+.ibo-svg-illustration--container>svg *[fill="#6c63ff"]{
+	fill: $ibo-svg-illustration--fill;
 }

css/backoffice/components/_global-search.scss

@@ -51,6 +51,7 @@ $ibo-global-search--compartment-element-image--width: 20px !default;
 
 $ibo-global-search--compartment--placeholder-image--margin-top: 24px !default;
 $ibo-global-search--compartment--placeholder-image--margin-bottom: 16px !default;
+$ibo-global-search--compartment--placeholder-image--margin-y: auto !default;
 $ibo-global-search--compartment--placeholder-image--width: 66% !default;
 
 $ibo-global-search--compartment--placeholder-hint--padding-x: 8px !default;
@@ -187,10 +188,12 @@ $ibo-global-search--compartment--placeholder-hint--text-color: $ibo-color-grey-7
 	display: flex;
 	flex-direction: column;
 }
-.ibo-global-search--compartment--placeholder-image{
+.ibo-global-search--compartment--placeholder-image>svg{
 	width: $ibo-global-search--compartment--placeholder-image--width;
-	margin-top: $ibo-global-search--compartment--placeholder-image--margin-top;
-	margin-bottom: $ibo-global-search--compartment--placeholder-image--margin-bottom;
+	height: inherit;
+	margin: $ibo-global-search--compartment--placeholder-image--margin-top $ibo-global-search--compartment--placeholder-image--margin-y $ibo-global-search--compartment--placeholder-image--margin-bottom $ibo-global-search--compartment--placeholder-image--margin-y;
+	display: flex;
+
 }
 .ibo-global-search--compartment--placeholder-hint{
 	text-align: justify;

css/backoffice/components/_newsroom-menu.scss

@@ -82,7 +82,9 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga
 .ibo-popover-menu--item--no-message{
   text-align: center;
 }
-.ibo-popover-menu--item--no-message--image{
-  display: block;
-  padding: 5px;
+.ibo-popover-menu--item--no-message--image>svg{
+  display: flex;
+  width: 100%;
+  height: inherit;
+  margin: 10px 0px;
 }

css/backoffice/components/_quick-create.scss

@@ -55,6 +55,7 @@ $ibo-quick-create--compartment-element-image--width: 20px !default;
 
 $ibo-quick-create--compartment--placeholder-image--margin-top: 24px !default;
 $ibo-quick-create--compartment--placeholder-image--margin-bottom: 16px !default;
+$ibo-quick-create--compartment--placeholder-image--margin-x: auto !default;
 $ibo-quick-create--compartment--placeholder-image--width: 66% !default;
 
 $ibo-quick-create--compartment--placeholder-hint--padding-x: 8px !default;
@@ -210,10 +211,11 @@ $ibo-quick-create--compartment--placeholder-hint--text-color: $ibo-color-grey-70
 	display: flex;
 	flex-direction: column;
 }
-.ibo-quick-create--compartment--placeholder-image{
+.ibo-quick-create--compartment--placeholder-image>svg{
 	width: $ibo-quick-create--compartment--placeholder-image--width;
-	margin-top: $ibo-quick-create--compartment--placeholder-image--margin-top;
-	margin-bottom: $ibo-quick-create--compartment--placeholder-image--margin-bottom;
+	height: inherit;
+	margin: $ibo-quick-create--compartment--placeholder-image--margin-top $ibo-quick-create--compartment--placeholder-image--margin-x $ibo-quick-create--compartment--placeholder-image--margin-bottom $ibo-quick-create--compartment--placeholder-image--margin-x;
+	display: flex;
 }
 .ibo-quick-create--compartment--placeholder-hint{
 	text-align: justify;

js/newsroom_menu.js

@@ -195,7 +195,8 @@ $(function()
 		},
 		_buildNoMessageItem: function()
 		{
-			return '<div class="ibo-popover-menu--item ibo-popover-menu--item--no-message">' + this.options.labels.no_message + '<img class="ibo-popover-menu--item--no-message--image" src="../images/illustrations/undraw_empty.svg" alt="TODO"/></div>';
+			return '<div class="ibo-popover-menu--item ibo-popover-menu--item--no-message">' + this.options.labels.no_message + 
+				'<div class="ibo-popover-menu--item--no-message--image ibo-svg-illustration--container">' + this.options.no_message_icon + '</div></div>';
 		},
 		_buildSingleShowAllMessagesItem: function()
 		{

sources/application/UI/Component/PopoverMenu/NewsroomMenu/NewsroomMenuFactory.php

@@ -82,6 +82,7 @@ class NewsroomMenuFactory
 		$sPlaceholderImageUrl= 'far fa-envelope';
 		$aParams = array(
 			'image_icon' => $sImageUrl,
+			'no_message_icon' => file_get_contents(APPROOT.'images/illustrations/undraw_empty.svg'),
 			'placeholder_image_icon' => $sPlaceholderImageUrl,
 			'cache_uuid' => 'itop-newsroom-'.UserRights::GetUserId().'-'.md5(APPROOT),
 			'providers' => $aProviderParams,

templates/components/global-search/layout.html.twig

@@ -9,7 +9,7 @@
 				<span>{{ 'UI:Component:GlobalSearch:Recents:Title'|dict_s }}</span>
 			</div>
 			<div class="ibo-global-search--compartment-content" data-role="ibo-global-search--compartment-content">
-				{% if oUIBlock.GetLastQueries()|length > 0 %}
+				{% if oUIBlock.GetLastQueries()|length > 12 %}
 					{% for aQuery in oUIBlock.GetLastQueries() %}
 						<a href="#" class="ibo-global-search--compartment-element" data-role="ibo-global-search--compartment-element" data-query-raw="{{ aQuery.query }}" title="{{ aQuery.query }}">
 							{% if aQuery.icon_url is defined %}
@@ -20,7 +20,9 @@
 					{% endfor %}
 				{% else %}
 					<div class="ibo-global-search--compartment--placeholder">
-						<img class="ibo-global-search--compartment--placeholder-image" src="{{ aPage.sAbsoluteUrlAppRoot }}images/illustrations/global-search-empty-history.svg" />
+						<div class="ibo-global-search--compartment--placeholder-image ibo-svg-illustration--container">
+							 {{ source("illustrations/global-search-empty-history.svg") }}
+						</div>
 						<div class="ibo-global-search--compartment--placeholder-hint">{{ 'UI:Component:GlobalSearch:LastQueries:NoQuery:Placeholder'|dict_s }}</div>
 					</div>
 				{% endif %}

templates/components/quick-create/layout.html.twig

@@ -26,7 +26,10 @@
 					{% endfor %}
 				{% else %}
 					<div class="ibo-quick-create--compartment--placeholder">
-						<img class="ibo-quick-create--compartment--placeholder-image" src="{{ aPage.sAbsoluteUrlAppRoot }}images/illustrations/quick-create-empty-history.svg" />
+						<div class="ibo-quick-create--compartment--placeholder-image ibo-svg-illustration--container">
+						{{ source("illustrations/quick-create-empty-history.svg") }}
+						</div>
+
 						<div class="ibo-quick-create--compartment--placeholder-hint">{{ 'UI:Component:QuickCreate:LastClasses:NoClass:Placeholder'|dict_s }}</div>
 					</div>
 				{% endif %}