diff --git a/context/app/static/js/components/detailPage/visualization/VisualizationDownloadButton/VisualizationDownloadButton.tsx b/context/app/static/js/components/detailPage/visualization/VisualizationDownloadButton/VisualizationDownloadButton.tsx
index 6634be0796..71ac9c67ea 100644
--- a/context/app/static/js/components/detailPage/visualization/VisualizationDownloadButton/VisualizationDownloadButton.tsx
+++ b/context/app/static/js/components/detailPage/visualization/VisualizationDownloadButton/VisualizationDownloadButton.tsx
@@ -6,8 +6,7 @@ import SvgIcon from '@mui/material/SvgIcon';
import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntityPageEvent';
import { useSnackbarActions } from 'js/shared-styles/snackbars';
import postAndDownloadFile from 'js/helpers/postAndDownloadFile';
-import { WhiteBackgroundIconButton } from 'js/shared-styles/buttons';
-import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips';
+import { WhiteBackgroundIconTooltipButton } from 'js/shared-styles/buttons';
const tooltip = 'Download Jupyter Notebook';
@@ -32,16 +31,14 @@ function VisualizationDownloadButton({ uuid, hasNotebook }: VisualizationDownloa
});
}, [uuid, toastError, trackEntityPageEvent]);
- if (!uuid ?? !hasNotebook) {
+ if (!uuid || !hasNotebook) {
return null;
}
return (
-
-
-
-
-
+
+
+
);
}
diff --git a/context/app/static/js/components/detailPage/visualization/VisualizationWorkspaceButton/VisualizationWorkspaceButton.tsx b/context/app/static/js/components/detailPage/visualization/VisualizationWorkspaceButton/VisualizationWorkspaceButton.tsx
index cecaaf7cba..dde0ef9f18 100644
--- a/context/app/static/js/components/detailPage/visualization/VisualizationWorkspaceButton/VisualizationWorkspaceButton.tsx
+++ b/context/app/static/js/components/detailPage/visualization/VisualizationWorkspaceButton/VisualizationWorkspaceButton.tsx
@@ -5,8 +5,7 @@ import SvgIcon from '@mui/icons-material/Download';
import { WorkspacesIcon } from 'js/shared-styles/icons';
import NewWorkspaceDialog from 'js/components/workspaces/NewWorkspaceDialog';
import { useCreateWorkspaceForm } from 'js/components/workspaces/NewWorkspaceDialog/useCreateWorkspaceForm';
-import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips';
-import { WhiteBackgroundIconButton } from 'js/shared-styles/buttons';
+import { WhiteBackgroundIconTooltipButton } from 'js/shared-styles/buttons';
import { useAppContext } from 'js/components/Contexts';
const tooltip = 'Launch New Workspace';
@@ -38,11 +37,9 @@ function VisualizationWorkspaceButton({
return (
<>
-
- setDialogIsOpen(true)}>
-
-
-
+ setDialogIsOpen(true)}>
+
+
>
);
}
diff --git a/context/app/static/js/shared-styles/buttons/index.tsx b/context/app/static/js/shared-styles/buttons/index.tsx
index d4bf653931..92942d91d4 100644
--- a/context/app/static/js/shared-styles/buttons/index.tsx
+++ b/context/app/static/js/shared-styles/buttons/index.tsx
@@ -3,6 +3,7 @@ import { Theme, styled } from '@mui/material/styles';
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
import ToggleButton from '@mui/material/ToggleButton';
import Button from '@mui/material/Button';
+import { TooltipIconButton } from 'js/shared-styles/buttons/TooltipButton';
import { SecondaryBackgroundTooltip } from '../tooltips';
import IconDropdownMenuButton from '../dropdowns/IconDropdownMenuButton';
@@ -36,6 +37,12 @@ const WhiteBackgroundIconDropdownMenuButton = styled(IconDropdownMenuButton)(({
'& svg': svgStyles,
}));
+const WhiteBackgroundIconTooltipButton = styled(TooltipIconButton)(({ theme }) => ({
+ ...whiteBackgroundCSS,
+ ...border(theme),
+ '& svg': svgStyles,
+}));
+
const WhiteBackgroundToggleButton = styled(ToggleButton)({
...whiteBackgroundCSS,
border: 0,
@@ -75,6 +82,7 @@ export default TooltipToggleButton;
export {
WhiteBackgroundIconButton,
WhiteBackgroundIconDropdownMenuButton,
+ WhiteBackgroundIconTooltipButton,
TooltipToggleButton,
iconButtonHeight,
WhiteTextButton,
diff --git a/context/app/static/js/shared-styles/dropdowns/IconDropdownMenu/IconDropdownMenu.tsx b/context/app/static/js/shared-styles/dropdowns/IconDropdownMenu/IconDropdownMenu.tsx
index b132d131e7..4967321dab 100644
--- a/context/app/static/js/shared-styles/dropdowns/IconDropdownMenu/IconDropdownMenu.tsx
+++ b/context/app/static/js/shared-styles/dropdowns/IconDropdownMenu/IconDropdownMenu.tsx
@@ -9,7 +9,7 @@ import { WhiteBackgroundIconDropdownMenuButton } from 'js/shared-styles/buttons'
import withDropdownMenuProvider from 'js/shared-styles/dropdowns/DropdownMenuProvider/withDropdownMenuProvider';
import DropdownMenu from 'js/shared-styles/dropdowns/DropdownMenu';
-import { StyledSecondaryBackgroundTooltip, StyledSvgIcon, StyledTypography } from './style';
+import { StyledSvgIcon, StyledTypography } from './style';
interface IconDropdownMenuItemProps {
children: string;
@@ -37,14 +37,9 @@ interface IconDropdownMenuProps {
function IconDropdownMenu({ tooltip, icon, children }: PropsWithChildren) {
return (
<>
-
- {/* Span is needed here for tooltip to appear without clicking */}
-
-
-
-
-
-
+
+
+
diff --git a/context/app/static/js/shared-styles/dropdowns/IconDropdownMenuButton/IconDropdownMenuButton.tsx b/context/app/static/js/shared-styles/dropdowns/IconDropdownMenuButton/IconDropdownMenuButton.tsx
index 0159208970..751586cd28 100644
--- a/context/app/static/js/shared-styles/dropdowns/IconDropdownMenuButton/IconDropdownMenuButton.tsx
+++ b/context/app/static/js/shared-styles/dropdowns/IconDropdownMenuButton/IconDropdownMenuButton.tsx
@@ -1,18 +1,20 @@
import React from 'react';
-import IconButton from '@mui/material/IconButton';
import { useDropdownMenuStore } from 'js/shared-styles/dropdowns/DropdownMenuProvider';
+import { WhiteBackgroundIconTooltipButton } from 'js/shared-styles/buttons';
interface IconDropdownMenuButtonProps {
children: React.ReactNode;
menuID: string;
+ tooltip: string;
}
-function IconDropdownMenuButton({ children, menuID, ...rest }: IconDropdownMenuButtonProps) {
+function IconDropdownMenuButton({ children, menuID, tooltip, ...rest }: IconDropdownMenuButtonProps) {
const { menuRef, menuIsOpen, openMenu } = useDropdownMenuStore();
return (
-
{children}
-
+
);
}