From 4acc6f9e4156d624faccb604b08290521f84558d Mon Sep 17 00:00:00 2001
From: shati-patel <42641846+shati-patel@users.noreply.github.com>
Date: Thu, 6 Jul 2023 16:30:50 +0100
Subject: [PATCH 1/2] Use native "VS Code Tag" instead of custom span

---
 .../view/data-extensions-editor/LibraryRow.tsx    | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
index a07fbec524f..1046d095627 100644
--- a/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
+++ b/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" />

From 2b13645b6fc81d1c3657f6eec9aff297dbbc1b0d Mon Sep 17 00:00:00 2001
From: shati-patel <42641846+shati-patel@users.noreply.github.com>
Date: Thu, 6 Jul 2023 16:32:34 +0100
Subject: [PATCH 2/2] Move "Save" button slightly to the left

---
 .../ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
index 1046d095627..798415afe48 100644
--- a/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
+++ b/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
@@ -71,6 +71,7 @@ const ButtonsContainer = styled.div`
   gap: 0.4em;
   justify-content: right;
   margin-bottom: 1rem;
+  margin-right: 1rem;
 `;
 
 type Props = {