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 */} - - - - - - + + + {children} 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} - + ); }