Update Components List Styles (#8254)

[arman-boyakhchyan]

No description provided.

[Copilot]

Pull request overview

This pull request updates the ComponentList application to support dynamic framework-specific styling based on the user's framework preference stored in localStorage. The changes enable the component list page to display framework-appropriate link colors and theme-aware background colors.

• Adds JavaScript to dynamically apply framework class to body element
• Introduces CSS rules for theme-aware background colors using light-dark() function
• Defines framework-specific link colors for jQuery, Angular, Vue, and React

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

File	Description
applications/ComponentList/index.js	Adds framework class from localStorage to body element for dynamic styling
applications/ComponentList/index.css	Adds base body styles with light-dark theme support and framework-specific link color rules

[Copilot]

The code directly adds the value from localStorage to classList without any validation or null checking. If the localStorage key does not exist, getItem returns null, which could cause classList.add to add the string "null" as a class name. Consider adding a guard to check if the value exists before adding it to the classList.

Suggested change

	document.body.classList.add(localStorage.getItem('dx-devextreme-site-framework'));
	const frameworkClass = localStorage.getItem('dx-devextreme-site-framework');
	if (frameworkClass) {
	document.body.classList.add(frameworkClass);
	}

[Copilot]

The code adds an untrusted value from localStorage directly to the classList without sanitization. While the CSS only defines specific framework classes (jQuery, Angular, Vue, React), a malicious value could inject arbitrary class names. Consider validating the value against an allowlist of expected framework names before adding it to classList.

Suggested change

	document.body.classList.add(localStorage.getItem('dx-devextreme-site-framework'));
	var framework = localStorage.getItem('dx-devextreme-site-framework');
	var allowedFrameworks = ['jquery', 'angular', 'vue', 'react'];
	if (framework && allowedFrameworks.indexOf(framework) !== -1) {
	document.body.classList.add(framework);
	}