Created vscode themed styling to replace several webview-ui-toolkit e…

…lements (#1222)
Azure · Feb 7, 2025 · a261e0a · a261e0a
1 parent 34ddf5d
commit a261e0a
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 14 deletions.
diff --git a/webview-ui/src/Kaito/Kaito.tsx b/webview-ui/src/Kaito/Kaito.tsx
@@ -1,4 +1,4 @@
-import { VSCodeButton, VSCodeProgressRing, VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { InitialState, ProgressEventType } from "../../../src/webview-contract/webviewDefinitions/kaito";
 import { useStateManagement } from "../utilities/state";
 import styles from "./Kaito.module.css";
@@ -27,7 +27,7 @@ export function Kaito(initialState: InitialState) {
         <>
             <div className={styles.container}>
                 <h2>Kubernetes AI Toolchain Operator (KAITO) - {state.clusterName}</h2>
-                <VSCodeDivider />
+                <hr />
                 <div className={styles.subHeader}>
                     Using KAITO, the workflow of onboarding and deploying large AI inference models on your cluster is
                     largely simplified. KAITO manages large model files using container images and hosts them in the
@@ -105,9 +105,9 @@ export function Kaito(initialState: InitialState) {
                             <p className={styles.thin}>You can now create a workspace by clicking the button below.</p>
                             <div>
                                 {" "}
-                                <VSCodeButton className={styles.generateButton} onClick={onClickGenerateWorkspace}>
+                                <button className={styles.generateButton} onClick={onClickGenerateWorkspace}>
                                     Generate Workspace
-                                </VSCodeButton>
+                                </button>
                             </div>
                         </div>
                     )}

diff --git a/webview-ui/src/KaitoManage/KaitoManage.tsx b/webview-ui/src/KaitoManage/KaitoManage.tsx
@@ -2,7 +2,7 @@ import { useStateManagement } from "../utilities/state";
 import styles from "./KaitoManage.module.css";
 import { stateUpdater, vscode } from "./state";
 import { InitialState } from "../../../src/webview-contract/webviewDefinitions/kaitoManage";
-import { VSCodeDivider, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { generateKaitoYAML } from "../KaitoModels/KaitoModels";
 import { useEffect } from "react";
 import { convertMinutesToFormattedAge } from "../KaitoModels/KaitoModels";
@@ -39,7 +39,7 @@ export function KaitoManage(initialState: InitialState) {
     return (
         <>
             <h2 className={styles.mainTitle}>Manage KAITO Deployments ({state.clusterName})</h2>
-            <VSCodeDivider />
+            <hr />
             <p>
                 Review the deployment status and perform operations on models in your cluster. If no clusters are shown,
                 you must first deploy a model.

diff --git a/webview-ui/src/KaitoModels/KaitoModels.tsx b/webview-ui/src/KaitoModels/KaitoModels.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import styles from "./KaitoModels.module.css";
 import kaitoSupporterModel from "../../../resources/kaitollmconfig/kaitollmconfig.json";
-import { VSCodeDivider, VSCodeLink, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { stateUpdater, vscode } from "./state";
 import { useStateManagement } from "../utilities/state";
 import { ArrowIcon } from "../icons/ArrowIcon";
@@ -282,18 +282,19 @@ export function KaitoModels(initialState: InitialState) {
                 {selectedModel !== null && <div className={styles.sidePanel}></div>}
                 <div className={styles.mainDiv}>
                     <h2>Create a KAITO Workspace ({state.clusterName})</h2>
-                    <VSCodeDivider />
+                    <hr />
                     <div className={styles.subHeader}>
                         To get your model up and running, you can either create a CRD file with &quot;Generate CRD&quot;
                         which you can then deploy using kubectl apply -f filename.yml, or to deploy a model with default
                         settings, just click &quot;Deploy Workspace&quot;. This will deploy a workspace with default
                         settings. Learn more about deploying KAITO workspaces{" "}
-                        <VSCodeLink
+                        <a
+                            rel="noreferrer"
                             target="_blank"
                             href="https://github.com/Azure/kaito?tab=readme-ov-file#quick-start"
                         >
                             here.
-                        </VSCodeLink>
+                        </a>
                         <br />
                     </div>
 

diff --git a/webview-ui/src/KaitoTest/KaitoTest.tsx b/webview-ui/src/KaitoTest/KaitoTest.tsx
@@ -1,7 +1,6 @@
 import { InitialState } from "../../../src/webview-contract/webviewDefinitions/kaitoTest";
 import { vscode, stateUpdater } from "./state";
 import { useStateManagement } from "../utilities/state";
-import { VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
 import { useState } from "react";
 import styles from "./KaitoTest.module.css";
 
@@ -51,7 +50,7 @@ export function KaitoTest(initialState: InitialState) {
                 Experiment with AI outputs by fine-tuning parameters. Discover how each adjustment influences the
                 model&apos;s response.
             </p>
-            <VSCodeDivider />
+            <hr />
             <div className={styles.mainGrid}>
                 <div className={styles.formDiv}>
                     <div className={styles.formDivGrid}>
@@ -173,7 +172,7 @@ export function KaitoTest(initialState: InitialState) {
                 {state.output !== "" && (
                     <div className={styles.outputDiv}>
                         <p className={styles.outputHeader}>Output</p>
-                        <VSCodeDivider className={styles.endDivider} />
+                        <hr className={styles.endDivider} />
                         <p className={styles.output}>{state.output}</p>
                     </div>
                 )}

diff --git a/webview-ui/src/main.css b/webview-ui/src/main.css
@@ -16,10 +16,13 @@ body {
 a,
 a code {
     color: var(--vscode-textLink-foreground);
+    font-size: var(--vscode-font-size);
+    text-decoration: none;
 }
 
 a:hover {
     color: var(--vscode-textLink-activeForeground);
+    text-decoration: underline;
 }
 
 a:focus,
@@ -28,9 +31,56 @@ select:focus,
 textarea:focus {
     outline: -webkit-focus-ring-color solid 1px;
     outline-offset: -1px;
+    outline-color: var(--vscode-focusBorder);
+}
+
+button {
+    padding: 4.6px 11.5px 4.6px 11.5px;
+    border: 1px solid var(--vscode-button-border);
+    background-color: var(--vscode-button-background);
+    color: var(--vscode-button-foreground);
+    font-family: inherit;
+    border-radius: 2px;
 }
 
-code {
+button:hover {
+    background-color: var(--vscode-button-hoverBackground);
+    border-color: var(--vscode-button-hoverBorder);
+    cursor: pointer;
+}
+
+button:focus {
+    outline: 1px solid var(--vscode-focusBorder);
+    outline-offset: 2px;
+}
+
+button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    background-color: var(--vscode-button-hoverBackground);
+}
+
+.secondary-button {
+    padding: 4.6px 11.5px 4.6px 11.5px;
+    border: 1px solid var(--vscode-button-secondaryBorder);
+    background-color: var(--vscode-button-secondaryBackground);
+    color: var(--vscode-button-secondaryForeground);
+    border-radius: 2px;
+}
+
+.secondary-button:hover {
+    background-color: var(--vscode-button-secondaryHoverBackground);
+    border-color: var(--vscode-button-secondaryHoverBorder);
+    cursor: pointer;
+}
+
+.secondary-button:hover:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    background-color: var(--vscode-button-hoverBackground);
+}
+
+.secondary-button code {
     color: var(--vscode-textPreformat-foreground);
 }
 
@@ -39,6 +89,34 @@ blockquote {
     border-color: var(--vscode-textBlockQuote-border);
 }
 
+hr {
+    border: none;
+    border-top: 1px solid var(--vscode-settings-dropdownListBorder);
+    margin: 4px 0 4px 0;
+}
+
+input,
+input[type="text"] {
+    height: calc(var(--input-height) * 1px);
+    color: var(--input-foreground);
+    background-color: var(--input-background);
+    border: 1px solid var(--input-border);
+    padding: 0 9px;
+    box-sizing: border-box;
+    border-radius: 2px;
+    font-family: inherit;
+}
+
+option:hover {
+    color: var(--vscode-list-focusForeground);
+    cursor: pointer;
+    background-color: var(--vscode-list-activeSelectionBackground);
+}
+
+option:focus {
+    background-color: var(--vscode-list-activeSelectionBackground);
+}
+
 kbd {
     color: var(--vscode-editor-foreground);
     border-radius: 3px;