1- import { ComponentProps , FC } from "react" ;
2- import { makeStyles } from "@mui/styles " ;
1+ import { type ComponentProps , type FC } from "react" ;
2+ import { useTheme } from "@emotion/react " ;
33import RefreshIcon from "@mui/icons-material/RefreshOutlined" ;
44import {
55HelpTooltipText ,
99HelpTooltipLinksGroup ,
1010HelpTooltipContext ,
1111} from "components/HelpTooltip/HelpTooltip" ;
12- import { WorkspaceAgent } from "api/typesGenerated" ;
12+ import type { WorkspaceAgent } from "api/typesGenerated" ;
1313import { Stack } from "components/Stack/Stack" ;
1414
1515type AgentOutdatedTooltipProps = ComponentProps < typeof HelpPopover > & {
@@ -28,7 +28,11 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
2828 onClose,
2929 anchorEl,
3030} ) => {
31- const styles = useStyles ( ) ;
31+ const theme = useTheme ( ) ;
32+ const versionLabelStyles = {
33+ fontWeight :600 ,
34+ color :theme . palette . text . primary ,
35+ } ;
3236
3337return (
3438< HelpPopover
@@ -50,12 +54,12 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
5054</ div >
5155
5256< Stack spacing = { 0.5 } >
53- < span className = { styles . versionLabel } > Agent version</ span >
57+ < span css = { versionLabelStyles } > Agent version</ span >
5458< span > { agent . version } </ span >
5559</ Stack >
5660
5761< Stack spacing = { 0.5 } >
58- < span className = { styles . versionLabel } > Server version</ span >
62+ < span css = { versionLabelStyles } > Server version</ span >
5963< span > { serverVersion } </ span >
6064</ Stack >
6165
@@ -73,10 +77,3 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
7377</ HelpPopover >
7478) ;
7579} ;
76-
77- const useStyles = makeStyles ( ( theme ) => ( {
78- versionLabel :{
79- fontWeight :600 ,
80- color :theme . palette . text . primary ,
81- } ,
82- } ) ) ;