style: viewcode scrollbar color

gpustack · Oct 25, 2024 · efe4cc7 · efe4cc7
1 parent abdc78e
commit efe4cc7
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 13 deletions.
diff --git a/src/components/highlight-code/code-viewer.tsx b/src/components/highlight-code/code-viewer.tsx
@@ -74,7 +74,10 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
     >
       <code
         style={{ minHeight: height }}
-        className={highlightedCode.className}
+        className={classNames(highlightedCode.className, {
+          dark: props.theme === 'dark',
+          light: props.theme === 'light'
+        })}
         dangerouslySetInnerHTML={{
           __html: highlightedCode.value
         }}

diff --git a/src/components/highlight-code/styles/index.less b/src/components/highlight-code/styles/index.less
@@ -20,10 +20,21 @@
       background-color: transparent;
     }
 
-    &:hover {
-      &::-webkit-scrollbar-thumb {
-        background-color: var(--color-scrollbar-thumb);
-        border-radius: 4px;
+    &.light {
+      &:hover {
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--color-scrollbar-thumb);
+          border-radius: 4px;
+        }
+      }
+    }
+
+    &.dark {
+      &:hover {
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--scrollbar-handle-light-bg);
+          border-radius: 4px;
+        }
       }
     }
   }

diff --git a/src/global.less b/src/global.less
@@ -15,6 +15,7 @@ html {
   --color-scrollbar-thumb: rgba(193, 193, 193, 80%);
   --scrollbar-size: 6px;
   --scrollbar-handle-bg: rgba(0, 0, 0, 44%);
+  --scrollbar-handle-light-bg: rgba(255, 255, 255, 44%);
   --scrollbar-handle-hover-bg: rgba(0, 0, 0, 55%);
   --color-editor-dark: #282c34;
   --color-editor-light: #fafafa;

diff --git a/src/pages/playground/components/message-input.tsx b/src/pages/playground/components/message-input.tsx
@@ -162,9 +162,14 @@ const MessageInput: React.FC<MessageInputProps> = ({
     setOpen(true);
   };
 
-  const handleAddMessage = () => {
+  const handleAddMessage = (e?: any) => {
+    e?.preventDefault();
     addMessage?.({ ...message });
     resetMessage();
+    setFocused(true);
+    setTimeout(() => {
+      inputRef.current?.focus?.();
+    }, 100);
   };
 
   const getPasteContent = useCallback(

diff --git a/src/pages/playground/components/view-code-modal.tsx b/src/pages/playground/components/view-code-modal.tsx
@@ -136,13 +136,20 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
               }
             }}
           >
-            <HighlightCode
-              height={380}
-              theme="dark"
-              code={codeValue}
-              lang={lang}
-              copyable={false}
-            ></HighlightCode>
+            <div
+              style={{
+                paddingRight: 2,
+                paddingBottom: 2
+              }}
+            >
+              <HighlightCode
+                height={380}
+                theme="dark"
+                code={codeValue}
+                lang={lang}
+                copyable={false}
+              ></HighlightCode>
+            </div>
           </EditorWrap>
           <div
             style={{ marginTop: 10, display: 'flex', alignItems: 'baseline' }}