11import type { Workspace } from "api/typesGenerated" ;
22import { Pill } from "components/Pill/Pill" ;
3- import { FC , PropsWithChildren } from "react" ;
4- import { makeStyles } from "@mui/styles" ;
5- import { combineClasses } from "utils/combineClasses" ;
3+ import { type FC , type PropsWithChildren } from "react" ;
64import { ChooseOne , Cond } from "components/Conditionals/ChooseOne" ;
75import { DormantDeletionText } from "components/WorkspaceDeletion" ;
86import { getDisplayWorkspaceStatus } from "utils/workspace" ;
9- import Tooltip , { TooltipProps , tooltipClasses } from "@mui/material/Tooltip" ;
7+ import Tooltip , {
8+ type TooltipProps ,
9+ tooltipClasses ,
10+ } from "@mui/material/Tooltip" ;
1011import { styled } from "@mui/material/styles" ;
1112import Box from "@mui/material/Box" ;
1213import ErrorOutline from "@mui/icons-material/ErrorOutline" ;
14+ import { type Interpolation , type Theme } from "@emotion/react" ;
1315
1416export type WorkspaceStatusBadgeProps = {
1517workspace :Workspace ;
@@ -56,7 +58,6 @@ export const WorkspaceStatusBadge: FC<
5658export const WorkspaceStatusText :FC <
5759PropsWithChildren < WorkspaceStatusBadgeProps >
5860> = ( { workspace, className} ) => {
59- const styles = useStyles ( ) ;
6061const { text, type} = getDisplayWorkspaceStatus (
6162workspace . latest_build . status ,
6263) ;
@@ -71,11 +72,8 @@ export const WorkspaceStatusText: FC<
7172< span
7273role = "status"
7374data-testid = "build-status"
74- className = { combineClasses ( [
75- className ,
76- styles . root ,
77- styles [ `type-${ type } ] ,
78- ] ) }
75+ className = { className }
76+ css = { [ styles . root , styles [ `type-${ type } ] ] }
7977>
8078{ text }
8179</ span >
@@ -95,27 +93,22 @@ const FailureTooltip = styled(({ className, ...props }: TooltipProps) => (
9593} ,
9694} ) ) ;
9795
98- const useStyles = makeStyles ( ( theme ) => ( {
96+ const styles = {
9997root :{ fontWeight :600 } ,
100- "type-error" :{
98+
99+ "type-error" :( theme ) => ( {
101100color :theme . palette . error . light ,
102- } ,
103- "type-warning" :{
101+ } ) ,
102+ "type-warning" :( theme ) => ( {
104103color :theme . palette . warning . light ,
105- } ,
106- "type-success" :{
104+ } ) ,
105+ "type-success" :( theme ) => ( {
107106color :theme . palette . success . light ,
108- } ,
109- "type-info" :{
107+ } ) ,
108+ "type-info" :( theme ) => ( {
110109color :theme . palette . info . light ,
111- } ,
112- "type-undefined" :{
110+ } ) ,
111+ "type-undefined" :( theme ) => ( {
113112color :theme . palette . text . secondary ,
114- } ,
115- "type-primary" :{
116- color :theme . palette . text . primary ,
117- } ,
118- "type-secondary" :{
119- color :theme . palette . text . secondary ,
120- } ,
121- } ) ) ;
113+ } ) ,
114+ } satisfies Record < string , Interpolation < Theme > > ;