feat: better theme compatibility

src/editors/TestGenerationPanel.ts

@@ -176,6 +176,18 @@
         'index.css',
       ),
     );
+    // The CSS file to provide VSCode native icons
+    const codiconsUri = webview.asWebviewUri(
+      Uri.joinPath(
+        extensionUri,
+        'webview-ui',
+        'test-generation',
+        'node_modules',
+        '@vscode/codicons',
+        'dist',
+        'codicon.css',
+      ),
+    );
     // The JS file from the React build output
     const scriptUri = webview.asWebviewUri(
       Uri.joinPath(
@@ -204,6 +216,8 @@
             content="style-src ${webview.cspSource}; script-src 'nonce-${nonce}';"
           />
           <link rel="stylesheet" type="text/css" href="${stylesUri}" />
+          <link rel="stylesheet" type="text/css" href="${codiconsUri}" />
+
           <title>Test Generation</title>
 
           <script nonce="${nonce}">
@@ -235,7 +249,7 @@
    */
   private _setWebviewMessageListener(webview: Webview) {
     webview.onDidReceiveMessage(
       async (message: any) => {
         switch (message.action) {
           case 'ready':
             this._msgQueue.ready();
@@ -543,7 +557,7 @@
 }
 
 class MessageQueue {
   private _messages: any[];
   private _ready: boolean;
   private _webview: Webview;
 
@@ -553,7 +567,7 @@
     this._webview = webview;
   }
 
   enqueue(msg: any) {
     if (!this._ready) {
       this._messages.push(msg);
       return;

src/sidebars/connect.ts

@@ -5,6 +5,7 @@
 import * as toast from '../toast';
 import { errMsg } from '../error';
 import { isValidRegion } from '../types';
+import { Uri } from 'vscode';
 
 export class ConnectViewProvider implements vscode.WebviewViewProvider {
   public static readonly viewType = 'scriptiq-connect';
@@ -30,6 +31,17 @@
     };
 
     const nonce = getNonce();
+    // The CSS file from the React build output
+    const stylesUri = webviewView.webview.asWebviewUri(
+      Uri.joinPath(
+        this._extensionUri,
+        'webview-ui',
+        'connect',
+        'build',
+        'assets',
+        'index.css',
+      ),
+    );
     const scriptUri = webviewView.webview.asWebviewUri(
       vscode.Uri.joinPath(
         this._extensionUri,
@@ -64,6 +76,7 @@
             content="width=device-width, initial-scale=1.0"
           />
 
+          <link rel="stylesheet" type="text/css" href="${stylesUri}" />
           <title>Connect</title>
           <script nonce="${nonce}">
             window.creds = '${JSON.stringify(creds)}';
@@ -76,7 +89,7 @@
       </html>
     `;
 
     webviewView.webview.onDidReceiveMessage(async (msg: any) => {
       switch (msg.action) {
         case 'save-credentials': {
           await this.saveCredentials(