3 files changed, 37 insertions, 14 deletions
diff --git a/components/Tweaks/BehaviorPanel.tsx b/components/Tweaks/BehaviorPanel.tsx
index 8edb986..5d61730 100644
--- a/components/Tweaks/BehaviorPanel.tsx
+++ b/components/Tweaks/BehaviorPanel.tsx
@@ -10,6 +10,8 @@ import {
   StackDivider,
   VStack,
   Text,
+  Box,
+  Switch,
 } from '@chakra-ui/react'
 import React from 'react'
 import { initialBehavior, initialMouse } from '../config'
@@ -34,6 +36,26 @@ export const BehaviorPanel = (props: BehaviorPanelProps) => {
       color="gray.800"
     >
       <Flex alignItems="center" justifyContent="space-between">
+        <Text>Preview node</Text>
+        <Menu isLazy placement="right">
+          <MenuButton as={Button} rightIcon={<ChevronDownIcon />} colorScheme="" color="black">
+            <Text>
+              {mouse.preview ? mouse.preview[0]!.toUpperCase() + mouse.preview!.slice(1) : 'Never'}
+            </Text>
+          </MenuButton>
+          <Portal>
+            {' '}
+            <MenuList bgColor="gray.200" zIndex="popover">
+              <MenuItem onClick={() => setMouse({ ...mouse, preview: '' })}>Never</MenuItem>
+              <MenuItem onClick={() => setMouse({ ...mouse, preview: 'click' })}>Click</MenuItem>
+              <MenuItem onClick={() => setMouse({ ...mouse, preview: 'double' })}>
+                Double Click
+              </MenuItem>
+            </MenuList>
+          </Portal>
+        </Menu>
+      </Flex>
+      <Flex alignItems="center" justifyContent="space-between">
         <Flex>
           <Text>Expand Node</Text>
           <InfoTooltip infoText="View only the node and its direct neighbors" />
diff --git a/components/Tweaks/SliderWithInfo.tsx b/components/Tweaks/SliderWithInfo.tsx
index f70faae..9d6903a 100644
--- a/components/Tweaks/SliderWithInfo.tsx
+++ b/components/Tweaks/SliderWithInfo.tsx
@@ -30,7 +30,7 @@ export const SliderWithInfo = ({
   const { onChange, label, infoText } = rest
   const { highlightColor } = useContext(ThemeContext)
   return (
-    <Box key={label}>
+    <Box key={label} pt={1} pb={2}>
       <Box display="flex" alignItems="flex-end">
         <Text>{label}</Text>
         {infoText && <InfoTooltip infoText={infoText} />}
diff --git a/components/Tweaks/index.tsx b/components/Tweaks/index.tsx
index c60e670..33f11ee 100644
--- a/components/Tweaks/index.tsx
+++ b/components/Tweaks/index.tsx
@@ -68,6 +68,7 @@ export const Tweaks = (props: TweakProps) => {
     tagColors,
     setTagColors,
   } = props
+
   const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false)
   const { highlightColor, setHighlightColor } = useContext(ThemeContext)
 
@@ -75,12 +76,12 @@ export const Tweaks = (props: TweakProps) => {
     <Box
       position="absolute"
       zIndex="overlay"
-      marginTop={10}
-      marginLeft={10}
+      marginTop={0}
+      marginLeft={0}
       display={showTweaks ? 'none' : 'block'}
     >
       <IconButton
-        variant="ghost"
+        variant="subtle"
         aria-label="Settings"
         icon={<SettingsIcon />}
         onClick={() => setShowTweaks(true)}
@@ -88,17 +89,17 @@ export const Tweaks = (props: TweakProps) => {
     </Box>
   ) : (
     <Box
+      position="absolute"
       bg="alt.100"
       w="xs"
-      marginTop={10}
-      marginLeft={10}
-      borderRadius="xl"
+      marginTop={2}
+      marginLeft={2}
+      borderRadius="lg"
       paddingBottom={5}
-      zIndex={300}
-      position="relative"
+      zIndex="overlay"
       boxShadow="xl"
-      maxH={0.92 * globalThis.innerHeight}
-      marginBottom={10}
+      maxH={'95vh'}
+      fontSize="sm"
     >
       <Box
         display="flex"
@@ -108,7 +109,7 @@ export const Tweaks = (props: TweakProps) => {
         paddingTop={1}
       >
         <Tooltip label={'Switch to ' + threeDim ? '2D' : '3D' + ' view'}>
-          <Button onClick={() => setThreeDim(!threeDim)} variant="ghost" zIndex="overlay">
+          <Button onClick={() => setThreeDim(!threeDim)} variant="subtle" zIndex="overlay">
             {threeDim ? '3D' : '2D'}
           </Button>
         </Tooltip>
@@ -124,7 +125,7 @@ export const Tweaks = (props: TweakProps) => {
                 setPhysics(initialPhysics)
                 setBehavior(initialBehavior)
               }}
-              variant="none"
+              variant="subtle"
               size="sm"
             />
           </Tooltip>
@@ -132,7 +133,7 @@ export const Tweaks = (props: TweakProps) => {
             size="sm"
             icon={<CloseIcon />}
             aria-label="Close Tweak Panel"
-            variant="ghost"
+            variant="subtle"
             onClick={() => setShowTweaks(false)}
           />
         </Box>