Settings updates

wandb · Dec 23, 2024 · acdaf0f · acdaf0f
1 parent 1b77d8f
commit acdaf0f
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 23 deletions.
diff --git a/...gePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/FunctionEditor.tsx b/...gePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/FunctionEditor.tsx
@@ -72,10 +72,9 @@ export const FunctionEditor: React.FC<FunctionEditorProps> = ({
       sx={{
         display: 'flex',
         flexDirection: 'column',
-        gap: '8px',
-        pb: '4px',
+        gap: '4px',
       }}>
-      <Box sx={{display: 'flex', gap: '8px', alignItems: 'center'}}>
+      <Box sx={{display: 'flex', gap: '4px', fontSize: '14px', alignItems: 'center'}}>
         Functions
         {!LLM_MAX_TOKENS[playgroundState.model]?.supports_function_calling && (
           <Tooltip title="This model does not support functions">

diff --git a/...nelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/PlaygroundSettings.tsx b/...nelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/PlaygroundSettings.tsx
@@ -59,7 +59,7 @@ export const PlaygroundSettings: React.FC<PlaygroundSettingsProps> = ({
               sx={{
                 display: 'flex',
                 flexDirection: 'column',
-                gap: '4px',
+                gap: '16px',
                 mt: 2,
               }}>
               <ResponseFormatEditor
@@ -158,13 +158,7 @@ export const PlaygroundSettings: React.FC<PlaygroundSettingsProps> = ({
                   width: '100%',
                   display: 'flex',
                   alignItems: 'center',
-                  justifyContent: 'space-between',
                 }}>
-                <label
-                  className="cursor-pointer"
-                  htmlFor="trackWithWeaveSwitch">
-                  Track this LLM call with Weave
-                </label>
                 <Switch.Root
                   id="trackWithWeaveSwitch"
                   size="small"
@@ -181,6 +175,11 @@ export const PlaygroundSettings: React.FC<PlaygroundSettingsProps> = ({
                     checked={playgroundStates[idx].trackLLMCall}
                   />
                 </Switch.Root>
+                <label
+                  className="ml-[8px] cursor-pointer text-[14px]"
+                  htmlFor="trackWithWeaveSwitch">
+                  Track this LLM call with Weave
+                </label>
               </Box>
             </Box>
           </Tabs.Content>

diff --git a/...PanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/PlaygroundSlider.tsx b/...PanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/PlaygroundSlider.tsx
@@ -3,6 +3,7 @@ import {TextField} from '@mui/material';
 import Slider from '@mui/material/Slider';
 import {styled} from '@mui/material/styles';
 import {
+  MOON_200,
   MOON_250,
   MOON_350,
   TEAL_500,
@@ -93,13 +94,14 @@ export const PlaygroundSlider = ({
   }, [props.value, props.min, props.max, setValue]);
 
   return (
-    <Box sx={{lineHeight: '20px'}}>
+    <Box sx={{lineHeight: '14px'}}>
       <Box
         sx={{
           display: 'flex',
+          alignItems: 'center',
           justifyContent: 'space-between',
         }}>
-        <span>{props.label}</span>
+        <span style={{fontSize: '14px'}}>{props.label}</span>
         <TextField
           value={
             editing !== null
@@ -120,9 +122,13 @@ export const PlaygroundSlider = ({
             width: 50,
             '& input': {
               fontFamily: 'Source Sans Pro',
-              fontSize: '16px',
-              padding: 0,
+              fontSize: '14px',
+              padding: '0 2px',
               textAlign: 'right',
+              borderRadius: '4px',
+              '&:hover': {
+                backgroundColor: MOON_200,
+              },
             },
           }}
         />

diff --git a/...lComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/ResponseFormatEditor.tsx b/...lComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/ResponseFormatEditor.tsx
@@ -27,10 +27,9 @@ export const ResponseFormatEditor: React.FC<ResponseFormatEditorProps> = ({
       sx={{
         display: 'flex',
         flexDirection: 'column',
-        gap: '8px',
-        pb: '4px',
+        gap: '4px',
       }}>
-      <span>Response format</span>
+      <span style={{fontSize: '14px'}}>Response format</span>
       <Select
         value={options.find(opt => opt.value === responseFormat)}
         onChange={option => {

diff --git a/...nelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/StopSequenceEditor.tsx b/...nelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/StopSequenceEditor.tsx
@@ -33,11 +33,10 @@ export const StopSequenceEditor: React.FC<StopSequenceEditorProps> = ({
       sx={{
         display: 'flex',
         flexDirection: 'column',
-        gap: '8px',
-        width: '100%',
-        pb: '4px',
+        gap: '4px',
+        width: '100%'
       }}>
-      <span>Stop sequences</span>
+      <span style={{fontSize: '14px'}}>Stop sequences</span>
       <Box
         sx={{
           display: 'flex',
@@ -74,7 +73,6 @@ export const StopSequenceEditor: React.FC<StopSequenceEditorProps> = ({
           }}
           sx={{
             fontFamily: 'Source Sans Pro',
-            fontSize: '16px',
             '& .MuiInputBase-root': {
               border: 'none',
               '&:before, &:after': {
@@ -87,7 +85,6 @@ export const StopSequenceEditor: React.FC<StopSequenceEditorProps> = ({
             '& .MuiInputBase-input': {
               padding: '8px',
               fontFamily: 'Source Sans Pro',
-              fontSize: '16px',
             },
           }}
         />