From adc4da1fa36cc9c30ea36e25de1a6cefcce0bc97 Mon Sep 17 00:00:00 2001
From: aaronvg <aaron@boundaryml.com>
Date: Mon, 8 Jul 2024 10:12:40 -0700
Subject: [PATCH] fix env vars button color (#762)

---
 typescript/playground-common/src/shared/Selectors.tsx  | 10 +++++-----
 .../playground-common/src/shared/SettingsDialog.tsx    |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/typescript/playground-common/src/shared/Selectors.tsx b/typescript/playground-common/src/shared/Selectors.tsx
index 447ae8101..4d7bbe37d 100644
--- a/typescript/playground-common/src/shared/Selectors.tsx
+++ b/typescript/playground-common/src/shared/Selectors.tsx
@@ -75,7 +75,7 @@ const TestDropdown: React.FC = () => {
 
   return (
     <div className='flex flex-col-reverse items-start gap-0.5'>
-      <span className='pl-2 text-xs text-muted-foreground flex flex-row flex-wrap items-center gap-1'>
+      <span className='flex flex-row flex-wrap items-center gap-1 pl-2 text-xs text-muted-foreground'>
         Test
         {selected && <JumpToTestCase />}
       </span>
@@ -128,7 +128,7 @@ const JumpToFunction: React.FC = () => {
         source_file: selected.span.file_path,
         value: `${selected.span.file_path.split('/').pop() ?? '<file>.baml'}:${selected.span.start_line + 1}`,
       }}
-      className='text-xs text-muted-foreground decoration-0 py-0'
+      className='py-0 text-xs text-muted-foreground decoration-0'
     />
   )
 }
@@ -156,7 +156,7 @@ const JumpToTestCase: React.FC = () => {
 export const ViewSelector: React.FC = () => {
   return (
     <div className='flex flex-row justify-between'>
-      <div className='flex flex-row gap-4 px-2 py-1 items-center'>
+      <div className='flex flex-row items-center gap-4 px-2 py-1'>
         <FunctionDropdown />
         <div>
           <ChevronRight className='w-4 h-4' />
@@ -168,13 +168,13 @@ export const ViewSelector: React.FC = () => {
           <DialogTrigger asChild>
             <Button
               variant={'ghost'}
-              className='flex flex-row items-center px-2 py-1 text-sm whitespace-pre-wrap bg-indigo-600 hover:bg-indigo-500 h-fit gap-x-2 text-vscode-button-foreground mr-2'
+              className='flex flex-row items-center px-2 py-1 mr-2 text-sm text-white whitespace-pre-wrap bg-indigo-600 hover:bg-indigo-500 h-fit gap-x-2'
             >
               <Compass size={16} strokeWidth={2} />
               <span className='whitespace-nowrap'>Docs</span>
             </Button>
           </DialogTrigger>
-          <DialogContent className='fullWidth min-w-full h-full border-zinc-900 bg-zinc-900'>
+          <DialogContent className='h-full min-w-full fullWidth border-zinc-900 bg-zinc-900'>
             <Snippets />
           </DialogContent>
         </Dialog>
diff --git a/typescript/playground-common/src/shared/SettingsDialog.tsx b/typescript/playground-common/src/shared/SettingsDialog.tsx
index beef5b68e..7eec05bb1 100644
--- a/typescript/playground-common/src/shared/SettingsDialog.tsx
+++ b/typescript/playground-common/src/shared/SettingsDialog.tsx
@@ -181,7 +181,7 @@ export const ShowSettingsButton: React.FC<{ iconClassName: string }> = ({ iconCl
 
   const button = (
     <Button
-      className='relative px-2 py-1 bg-transparent h-fit text-vscode-button-foreground hover:bg-vscode-button-hoverBackground'
+      className='relative px-2 py-1 bg-transparent h-fit text-vscode-editor-foreground hover:text-vscode-button-foreground hover:bg-vscode-button-hoverBackground'
       onClick={() => setShowSettings(true)}
     >
       <SettingsIcon className='w-4' /> Env Vars