fix(ui): set the color of popover in Chat side panel properly (#3646)

* fix(ui): set the color of popover in Chat side panel properly * update * update * update
TabbyML · Jan 6, 2025 · 2b21bf2 · 2b21bf2
1 parent d8e9807
commit 2b21bf2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/ee/tabby-ui/app/chat/page.css b/ee/tabby-ui/app/chat/page.css
@@ -1,7 +1,7 @@
 /* Theming webview content: https://code.visualstudio.com/api/extension-guides/webview#theming-webview-content */
 
 html {
-  font-size: var(--vscode-font-size, var(--intellij-font-size));
+  font-size: var(--vscode-font-size);
 }
 
 .client ::-webkit-scrollbar {
@@ -17,16 +17,14 @@ html {
 
   --primary: var(--vscode-minimap-infoHighlight);
   --primary-foreground: var(--vscode-button-foreground);
+
+  --popover: var(--vscode-editorSuggestWidget-background);
+  --popover-foreground: var(--vscode-editorSuggestWidget-foreground);
+
+  --accent: var(--vscode-editorSuggestWidget-selectedBackground);
+  --accent-foreground: var(--vscode-editorSuggestWidget-selectedForeground)
 }
 
 .client-vscode .editor-bg {
   background-color: hsl(var(--vscode-sideBar-background))
 }
-
-.client-intellij body {
-  --background: var(--intellij-editor-background);
-  --foreground: var(--intellij-editor-foreground);
-  --border: var(--intellij-editor-border);
-
-  background-color: hsl(var(--intellij-editor-background)) !important;
-}
diff --git a/ee/tabby-ui/components/chat/chat-panel.tsx b/ee/tabby-ui/components/chat/chat-panel.tsx
@@ -254,7 +254,7 @@ function ChatPanelRenderer(
                     ease: 'easeInOut',
                     duration: 0.1
                   }}
-                  exit={{ opacity: 0, scale: 0.9, y: 5 }}
+                  exit={{ opacity: 0, scale: 0.9, y: -5 }}
                 >
                   <Badge
                     variant="outline"
@@ -277,7 +277,7 @@ function ChatPanelRenderer(
                     <Button
                       size="icon"
                       variant="ghost"
-                      className="h-7 w-7 shrink-0 rounded-l-none"
+                      className="h-7 w-7 shrink-0 rounded-l-none hover:bg-muted/50"
                       onClick={e => {
                         updateEnableActiveSelection(!enableActiveSelection)
                       }}
@@ -299,7 +299,7 @@ function ChatPanelRenderer(
                       ease: 'easeInOut',
                       duration: 0.1
                     }}
-                    exit={{ opacity: 0, scale: 0.9, y: 5 }}
+                    exit={{ opacity: 0, scale: 0.9, y: -5 }}
                     layout
                   >
                     <Badge
@@ -310,7 +310,7 @@ function ChatPanelRenderer(
                       <Button
                         size="icon"
                         variant="ghost"
-                        className="h-7 w-7 shrink-0 rounded-l-none"
+                        className="h-7 w-7 shrink-0 rounded-l-none hover:bg-muted/50"
                         onClick={removeRelevantContext.bind(null, idx)}
                       >
                         <IconRemove />

diff --git a/ee/tabby-ui/components/chat/repo-select.tsx b/ee/tabby-ui/components/chat/repo-select.tsx
@@ -126,7 +126,7 @@ export function RepoSelect({
               type="button"
               size="icon"
               variant="ghost"
-              className="h-7 w-7 shrink-0 rounded-l-none bg-background"
+              className="h-7 w-7 shrink-0 rounded-l-none bg-background hover:bg-muted/50"
               onClick={e => {
                 e.stopPropagation()
                 onChange(undefined)
@@ -160,6 +160,7 @@ export function RepoSelect({
                         setOpen(false)
                       }}
                       title={repo.sourceName}
+                      className="cursor-pointer"
                     >
                       <IconCheck
                         className={cn(