From da5bb4b68eb45a743eadef1645fb09d3841f138f Mon Sep 17 00:00:00 2001
From: w1gs <root@w1gs.dev>
Date: Sat, 21 Sep 2024 07:27:19 -0400
Subject: [PATCH] updated styles

---
 extensions/void/package.json            |  2 +-
 extensions/void/src/sidebar/Sidebar.tsx | 20 +++++++--------
 extensions/void/src/sidebar/styles.css  | 34 ++++++++++++++++++++++++-
 extensions/void/tailwind.config.js      | 30 +++++++++++++++++-----
 4 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/extensions/void/package.json b/extensions/void/package.json
index 4e66383d..137f5b83 100644
--- a/extensions/void/package.json
+++ b/extensions/void/package.json
@@ -74,7 +74,7 @@
       "activitybar": [
         {
           "id": "voidViewContainer",
-          "title": "My Extension",
+          "title": "Chat",
           "icon": "$(hubot)"
         }
       ]
diff --git a/extensions/void/src/sidebar/Sidebar.tsx b/extensions/void/src/sidebar/Sidebar.tsx
index d4c35d1b..151f50cb 100644
--- a/extensions/void/src/sidebar/Sidebar.tsx
+++ b/extensions/void/src/sidebar/Sidebar.tsx
@@ -96,12 +96,12 @@ const FilesSelector = ({
 const IncludedFiles = ({ files }: { files: vscode.Uri[] }) => {
 	return (
 		files.length !== 0 && (
-			<div className="text-xs my-2">
+			<div className="my-2">
 				{files.map((filename, i) => (
 					<div key={i} className="flex">
 						<button
 							type="button"
-							className="pointer-events-none"
+							className="btn btn-secondary pointer-events-none"
 							onClick={() => {
 								// TODO redirect to the document filename.fsPath, when add this remove pointer-events-none
 							}}
@@ -147,7 +147,7 @@ const ChatBubble = ({ chatMessage }: { chatMessage: ChatMessage }) => {
 	return (
 		<div className={`mb-4 ${role === "user" ? "text-right" : "text-left"}`}>
 			<div
-				className={`inline-block p-2 rounded-lg ${role === "user" ? "bg-blue-500 text-white" : "bg-gray-200 text-black"
+				className={`inline-block p-2 rounded-lg space-y-2 ${role === "user" ? "bg-vscode-input-bg text-vscode-input-fg" : ""
 					} max-w-full`}
 			>
 				{chatbubbleContents}
@@ -360,10 +360,10 @@ const Sidebar = () => {
 	return (
 		<>
 			<div
-				className={`flex flex-col h-full w-full relative ${isDisabled ? 'no-select' : ''}`}
+				className={`flex flex-col h-screen w-full ${isDisabled ? 'no-select' : ''}`}
 
 			>
-				<div className="flex-grow overflow-y-auto overflow-x-hidden p-4">
+				<div className="overflow-y-auto overflow-x-hidden space-y-4">
 					{/* previous messages */}
 					{chatMessageHistory.map((message, i) => (
 						<ChatBubble key={i} chatMessage={message} />
@@ -378,7 +378,7 @@ const Sidebar = () => {
 					/>
 				</div>
 				{/* chatbar */}
-				<div className="py-4 border-t">
+				<div className="shrink-0 py-4">
 					{/* selection */}
 					<div className="text-left">
 						{/* selected files */}
@@ -401,7 +401,7 @@ const Sidebar = () => {
 					</div>
 					<form
 						ref={formRef}
-						className="flex flex-row items-center rounded-md p-2 border border-gray-400 bg-[rgb(20,20,20)]"
+						className="flex flex-row items-center rounded-md p-2 input"
 						onKeyDown={(e) => {
 							if (e.key === "Enter" && !e.shiftKey) onSubmit(e);
 						}}
@@ -417,7 +417,7 @@ const Sidebar = () => {
 							onChange={(e) => {
 								setInstructions(e.target.value);
 							}}
-							className="w-full p-2 leading-tight resize-none max-h-[50vh] overflow-hidden text-gray-100 rounded-md bg-[rgb(20,20,20)]"
+							className="w-full p-2 leading-tight resize-none max-h-[50vh] overflow-hidden bg-transparent border-none !outline-none"
 							style={{ outline: "0px solid" }}
 							placeholder="Ctrl+L to select"
 							rows={1}
@@ -431,14 +431,14 @@ const Sidebar = () => {
 						{isLoading ? (
 							<button
 								onClick={onStop}
-								className="bg-gray-400 text-white p-2 rounded-r-lg max-h-10"
+								className="btn btn-primary rounded-r-lg max-h-10 p-2"
 								type="button"
 							>
 								Stop
 							</button>
 						) : (
 							<button
-								className="cursor-pointer hover:bg-gray-700 bg-gray-600 text-white font-bold size-8 flex justify-center items-center rounded-full p-2 max-h-10"
+								className="btn btn-primary font-bold size-8 flex justify-center items-center rounded-full p-2 max-h-10"
 								disabled={!instructions}
 								type="submit"
 							>
diff --git a/extensions/void/src/sidebar/styles.css b/extensions/void/src/sidebar/styles.css
index d5fc7bc9..456c973d 100644
--- a/extensions/void/src/sidebar/styles.css
+++ b/extensions/void/src/sidebar/styles.css
@@ -2,8 +2,40 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+    font-size: var(--vscode-font-size);
+}
+
+.btn {
+    @apply cursor-pointer transition-colors;
+
+    &.btn-primary {
+        @apply bg-vscode-button-bg text-vscode-button-fg;
+
+        &:not(:disabled) {
+            @apply hover:bg-vscode-button-hoverBg;
+        }
+    }
+
+    &.btn-secondary {
+        @apply bg-vscode-button-secondary-bg text-vscode-button-secondary-fg;
+
+        &:not(:disabled) {
+            @apply hover:bg-vscode-button-secondary-hoverBg;
+        }
+    }
+
+    &:disabled {
+        @apply opacity-75 cursor-not-allowed;
+    }
+}
+
+.input {
+    @apply bg-vscode-input-bg text-vscode-input-fg border-vscode-input-border;
+}
+
 .no-select {
     user-select: none;
 	pointer-events: none;
 	filter: blur(3px)
-}
+}
\ No newline at end of file
diff --git a/extensions/void/tailwind.config.js b/extensions/void/tailwind.config.js
index 29fc6047..fcf081b6 100644
--- a/extensions/void/tailwind.config.js
+++ b/extensions/void/tailwind.config.js
@@ -1,8 +1,26 @@
 /** @type {import('tailwindcss').Config} */
+
+// inject user's vscode theme colors: https://code.visualstudio.com/api/extension-guides/webview#theming-webview-content
 module.exports = {
-    content: ["./src/sidebar/**/*.{html,js,ts,jsx,tsx}"],
-    theme: {
-        extend: {},
-    },
-    plugins: [],
-}
\ No newline at end of file
+	content: ["./src/sidebar/**/*.{html,js,ts,jsx,tsx}"],
+	theme: {
+		extend: {
+			colors: {
+				vscode: {
+					'editor-bg': "var(--vscode-editor-background)",
+					'editor-fg': "var(--vscode-editor-foreground)",
+					'input-bg': "var(--vscode-input-background)",
+					'input-fg': "var(--vscode-input-foreground)",
+					'input-border': "var(--vscode-input-border)",
+					'button-fg': "var(--vscode-button-foreground)",
+					'button-bg': "var(--vscode-button-background)",
+					'button-hoverBg': "var(--vscode-button-hoverBackground)",
+					'button-secondary-fg': "var(--vscode-button-secondaryForeground)",
+					'button-secondary-bg': "var(--vscode-button-secondaryBackground)",
+					'button-secondary-hoverBg': "var(--vscode-button-secondaryHoverBackground)",
+				},
+			},
+		},
+	},
+	plugins: [],
+};
\ No newline at end of file