Use native "VS Code Tag" instead of custom span

Author: shati-patel

extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx

@@ -8,7 +8,11 @@ import { calculateModeledPercentage } from "../../data-extensions-editor/shared/
 import { percentFormatter } from "./formatters";
 import { Codicon } from "../common";
 import { Mode } from "../../data-extensions-editor/shared/mode";
-import { VSCodeButton, VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
+import {
+  VSCodeButton,
+  VSCodeDivider,
+  VSCodeTag,
+} from "@vscode/webview-ui-toolkit/react";
 
 const LibraryContainer = styled.div`
   background-color: var(--vscode-peekViewResult-background);
@@ -53,13 +57,6 @@ const ModeledPercentage = styled.span`
   color: var(--vscode-descriptionForeground);
 `;
 
-const UnsavedLabel = styled.span`
-  text-transform: uppercase;
-  background-color: var(--vscode-input-background);
-  padding: 0.2em 0.4em;
-  border-radius: 0.2em;
-`;
-
 const TitleButton = styled(VSCodeButton)`
   background-color: transparent;
 
@@ -142,7 +139,7 @@ export const LibraryRow = ({
           <ModeledPercentage>
             {percentFormatter.format(modeledPercentage / 100)} modeled
           </ModeledPercentage>
-          {hasUnsavedChanges ? <UnsavedLabel>UNSAVED</UnsavedLabel> : null}
+          {hasUnsavedChanges ? <VSCodeTag>UNSAVED</VSCodeTag> : null}
         </NameContainer>
         <TitleButton onClick={handleModelWithAI}>
           <Codicon name="lightbulb-autofix" label="Model with AI" />