mirror of
https://github.com/voideditor/void
synced 2026-05-24 09:58:23 +00:00
updated styles
This commit is contained in:
w1gs
parent
2be5a2d13a
commit
da5bb4b68e
4 changed files with 68 additions and 18 deletions
|
|
@ -74,7 +74,7 @@
|
|||
"activitybar": [
|
||||
{
|
||||
"id": "voidViewContainer",
|
||||
"title": "My Extension",
|
||||
"title": "Chat",
|
||||
"icon": "$(hubot)"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
@ -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: [],
|
||||
}
|
||||
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: [],
|
||||
};
|
||||
Loading…
Reference in a new issue