1+ import { type Interpolation , type Theme } from "@emotion/react" ;
12import { BuildAvatar } from "components/BuildAvatar/BuildAvatar" ;
2- import { FC } from "react" ;
3+ import { type FC } from "react" ;
34import { ProvisionerJobLog , WorkspaceBuild } from "api/typesGenerated" ;
45import { Loader } from "components/Loader/Loader" ;
56import { Stack } from "components/Stack/Stack" ;
67import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs" ;
7- import { makeStyles } from "@mui/styles" ;
88import {
99FullWidthPageHeader ,
1010PageHeaderTitle ,
@@ -48,8 +48,6 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
4848 builds,
4949 activeBuildNumber,
5050} ) => {
51- const styles = useStyles ( ) ;
52-
5351if ( ! build ) {
5452return < Loader /> ;
5553}
@@ -65,9 +63,9 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
6563</ div >
6664</ Stack >
6765
68- < Stats aria-label = "Build details" className = { styles . stats } >
66+ < Stats aria-label = "Build details" css = { styles . stats } >
6967< StatsItem
70- className = { styles . statsItem }
68+ css = { styles . statsItem }
7169label = "Workspace"
7270value = {
7371< Link
@@ -78,22 +76,22 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
7876}
7977/>
8078< StatsItem
81- className = { styles . statsItem }
79+ css = { styles . statsItem }
8280label = "Template version"
8381value = { build . template_version_name }
8482/>
8583< StatsItem
86- className = { styles . statsItem }
84+ css = { styles . statsItem }
8785label = "Duration"
8886value = { displayWorkspaceBuildDuration ( build ) }
8987/>
9088< StatsItem
91- className = { styles . statsItem }
89+ css = { styles . statsItem }
9290label = "Started at"
9391value = { new Date ( build . created_at ) . toLocaleString ( ) }
9492/>
9593< StatsItem
96- className = { styles . statsItem }
94+ css = { styles . statsItem }
9795label = "Action"
9896value = {
9997< Box component = "span" sx = { { textTransform :"capitalize" } } >
@@ -240,8 +238,8 @@ const BuildSidebarItemSkeleton = () => {
240238) ;
241239} ;
242240
243- const useStyles = makeStyles ( ( theme ) => ( {
244- stats :{
241+ const styles = {
242+ stats :( theme ) => ( {
245243padding :0 ,
246244border :0 ,
247245gap :theme . spacing ( 6 ) ,
@@ -254,7 +252,7 @@ const useStyles = makeStyles((theme) => ({
254252alignItems :"flex-start" ,
255253gap :theme . spacing ( 1 ) ,
256254} ,
257- } ,
255+ } ) ,
258256
259257statsItem :{
260258flexDirection :"column" ,
@@ -266,4 +264,4 @@ const useStyles = makeStyles((theme) => ({
266264fontWeight :500 ,
267265} ,
268266} ,
269- } ) ) ;
267+ } satisfies Record < string , Interpolation < Theme > > ;