Color and align linked issue icons

Wraps the issue state icon in a .section-icon span and adds two new
state classes (.issue-open, .issue-closed) coloured with the existing
--vscode-issues-open and --vscode-issues-closed tokens that this
extension contributes. Matches the colouring convention already used
for reviewer state icons (.section-icon.approved). The .section-icon
container also provides flex centering and 3px padding, which fixes
the icon-vs-link spacing in the row.

Author: mohamedamara1

webviews/common/common.css

@@ -286,6 +286,14 @@ body img.avatar {
 	fill: var(--vscode-issues-open);
 }
 
+.section-icon.issue-open svg path {
+	fill: var(--vscode-issues-open);
+}
+
+.section-icon.issue-closed svg path {
+	fill: var(--vscode-issues-closed);
+}
+
 .reviewer-icons {
 	display: flex;
 	gap: 4px;

webviews/components/sidebar.tsx

@@ -595,9 +595,12 @@ function ConvertToDraft() {
 }
 
 function IssueItem({ issue }: { issue: IssueReference }) {
+	const isOpen = issue.state === GithubItemStateEnum.Open;
 	return (
 		<div className="avatar-with-author">
-			{issue.state === GithubItemStateEnum.Open ? issueIcon : issueClosedIcon}
+			<span className={`section-icon ${isOpen ? 'issue-open' : 'issue-closed'}`}>
+				{isOpen ? issueIcon : issueClosedIcon}
+			</span>
 			<a href={issue.url} title={issue.url}>#{issue.number} {issue.title}</a>
 		</div>
 	);