Update bg and fg color of recommended label #36650

src/vs/workbench/parts/extensions/browser/extensionsList.ts

@@ -23,6 +23,7 @@ import { EventType } from 'vs/base/common/events';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IExtensionService } from 'vs/platform/extensions/common/extensions';
 import { IExtensionTipsService } from 'vs/platform/extensionManagement/common/extensionManagement';
+import { localize } from 'vs/nls';
 
 export interface ITemplateData {
 	root: HTMLElement;
@@ -70,7 +71,8 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		const headerContainer = append(details, $('.header-container'));
 		const header = append(headerContainer, $('.header'));
 		const name = append(header, $('span.name'));
-		const subText = append(header, $('span.version'));
+		const subTextContainer = append(header, $('span.subtext-container'));
+		const subText = append(subTextContainer, $('span.subtext'));
 		const installCount = append(header, $('span.install-count'));
 		const ratings = append(header, $('span.ratings'));
 		const description = append(details, $('.description.ellipsis'));
@@ -153,12 +155,15 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 
 		data.subText.textContent = isInstalled ? extension.version : '';
 		data.root.setAttribute('aria-label', extension.displayName);
+		removeClass(data.subText, 'recommended');
 
 		const extRecommendations = this.extensionTipsService.getAllRecommendationsWithReason();
 		if (extRecommendations[extension.id.toLowerCase()] && !isInstalled) {
 			data.root.setAttribute('aria-label', extension.displayName + '. ' + extRecommendations[extension.id]);
 			if (this.showRecommendedLabel) {
-				data.subText.textContent = 'Recommended';
+				data.subText.textContent = localize('recommended', "Recommended");
+				addClass(data.subText, 'recommended');
+				data.subText.title = extRecommendations[extension.id.toLowerCase()];
 			}
 		}
 

src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css

@@ -116,7 +116,7 @@
 	overflow: hidden;
 }
 
-.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .version {
+.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .subtext-container {
 	opacity: 0.85;
 	font-size: 80%;
 	padding-left: 6px;
@@ -124,6 +124,14 @@
 	min-width: fit-content;
 }
 
+.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .subtext-container > span.subtext.recommended {
+	color: white;
+	background-color: green;
+	border: solid 1px green;
+	border-radius: 10px;
+	padding: 0 5px;
+}
+
 .extensions-viewlet > .extensions .extension > .details > .header-container > .header > .install-count:not(:empty) {
 	font-size: 80%;
 	margin: 0 6px;