Unify logic into LightTooltip

client/components/Parts/Tooltips/Light.tsx

@@ -1,13 +1,21 @@
 import { styled } from '@mui/material/styles'
 import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip'
 
-export default styled(({ className, ...props }: TooltipProps) => (
-  <Tooltip {...props} classes={{ popper: className }} TransitionProps={{ timeout: 0 }} />
-))(({ theme }) => ({
+interface AllTooltipProps extends TooltipProps {
+  type?: string
+}
+
+export default styled(({ className, ...props }: AllTooltipProps) => (
+  <Tooltip arrow {...props} classes={{ popper: className }} TransitionProps={{ timeout: 0 }} placement="bottom" />
+))(({ theme, type }) => ({
   [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: theme.palette.common.white,
-    color: 'rgba(0, 0, 0, 0.87)',
+    backgroundColor: type == 'fileMenu' ? theme.palette.OKFNCoolGray.main : theme.palette.common.white,
+    color: type == 'fileMenu' ? theme.palette.common.white : 'rgba(0, 0, 0, 0.87)',
     boxShadow: theme.shadows[1],
     fontSize: 16,
+    maxWidth: type == 'fileMenu' ? 600: null
+  },
+  [`& .${tooltipClasses.arrow}`]: {
+    color: theme.palette.OKFNCoolGray.main,
   },
 }))

client/components/Parts/Trees/File.tsx

@@ -10,7 +10,7 @@ import * as types from '../../../types'
 import { useTheme } from '@mui/material/styles'
 import openFolderIcon from '../../../assets/open_folder_icon.svg'
 import closedFolderIcon from '../../../assets/closed_folder_icon.svg'
-import FileMenuTooltip from '../Tooltips/FileMenu'
+import LightTooltip from '../Tooltips/Light'
 
 export interface FileTreeProps {
   files: types.IFile[]
@@ -136,7 +136,7 @@ function TreeItemIcon(props: { nodeId: string; item: types.IFileTreeItem }) {
   // const fontWeight = props.item.type === 'package' ? 'bold' : 'normal'
 
   return (
-    <FileMenuTooltip title={props.item.label}>
+    <LightTooltip title={props.item.label} type="fileMenu">
       <Box
         sx={{
           py: 1,
@@ -155,7 +155,7 @@ function TreeItemIcon(props: { nodeId: string; item: types.IFileTreeItem }) {
           borderRadius: '50%',}}>{" "}</div>
         <span style={{ whiteSpace: 'nowrap', fontWeight }}>{props.item.label}</span>
       </Box>
-    </FileMenuTooltip>
+    </LightTooltip>
   )
 }