1+ import { type Interpolation , type Theme } from "@emotion/react" ;
12import Button from "@mui/material/Button" ;
2- import { makeStyles } from "@mui/styles" ;
33import Table from "@mui/material/Table" ;
44import TableBody from "@mui/material/TableBody" ;
55import TableCell from "@mui/material/TableCell" ;
66import TableContainer from "@mui/material/TableContainer" ;
77import TableHead from "@mui/material/TableHead" ;
88import TableRow from "@mui/material/TableRow" ;
99import AddIcon from "@mui/icons-material/AddOutlined" ;
10- import { FC } from "react" ;
10+ import { type FC } from "react" ;
1111import { useNavigate , Link as RouterLink } from "react-router-dom" ;
1212import { createDayString } from "utils/createDayString" ;
1313import {
@@ -35,7 +35,7 @@ import {
3535} from "components/HelpTooltip/HelpTooltip" ;
3636import { EmptyTemplates } from "./EmptyTemplates" ;
3737import { useClickableTableRow } from "hooks/useClickableTableRow" ;
38- import { Template , TemplateExample } from "api/typesGenerated" ;
38+ import type { Template , TemplateExample } from "api/typesGenerated" ;
3939import { combineClasses } from "utils/combineClasses" ;
4040import { colors } from "theme/colors" ;
4141import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined" ;
@@ -80,17 +80,17 @@ const TemplateRow: FC<{ template: Template }> = ({ template }) => {
8080const templatePageLink = `/templates/${ template . name } ;
8181const hasIcon = template . icon && template . icon !== "" ;
8282const navigate = useNavigate ( ) ;
83- const styles = useStyles ( ) ;
8483
85- const { className :clickableClassName , ...clickableRow } =
86- useClickableTableRow ( { onClick :( ) => navigate ( templatePageLink ) } ) ;
84+ const { css :clickableCss , ...clickableRow } = useClickableTableRow ( {
85+ onClick :( ) => navigate ( templatePageLink ) ,
86+ } ) ;
8787
8888return (
8989< TableRow
9090key = { template . id }
9191data-testid = { `template-${ template . id } }
9292{ ...clickableRow }
93- className = { combineClasses ( [ clickableClassName , styles . tableRow ] ) }
93+ css = { [ clickableCss , styles . tableRow ] }
9494>
9595< TableCell >
9696< AvatarData
@@ -106,22 +106,23 @@ const TemplateRow: FC<{ template: Template }> = ({ template }) => {
106106/>
107107</ TableCell >
108108
109- < TableCell className = { styles . secondary } >
109+ < TableCell css = { styles . secondary } >
110110{ Language . developerCount ( template . active_user_count ) }
111111</ TableCell >
112112
113- < TableCell className = { styles . secondary } >
113+ < TableCell css = { styles . secondary } >
114114{ formatTemplateBuildTime ( template . build_time_stats . start . P50 ) }
115115</ TableCell >
116116
117- < TableCell data-chromatic = "ignore" className = { styles . secondary } >
117+ < TableCell data-chromatic = "ignore" css = { styles . secondary } >
118118{ createDayString ( template . updated_at ) }
119119</ TableCell >
120120
121- < TableCell className = { styles . actionCell } >
121+ < TableCell css = { styles . actionCell } >
122122< Button
123123size = "small"
124- className = { styles . actionButton }
124+ css = { styles . actionButton }
125+ className = "actionButton"
125126startIcon = { < ArrowForwardOutlined /> }
126127title = { `Create a workspace using the${ template . display_name } }
127128onClick = { ( e ) => {
@@ -247,7 +248,7 @@ const TableLoader = () => {
247248) ;
248249} ;
249250
250- const useStyles = makeStyles ( ( theme ) => ( {
251+ const styles = {
251252templateIconWrapper :{
252253// Same size then the avatar component
253254width :36 ,
@@ -261,20 +262,20 @@ const useStyles = makeStyles((theme) => ({
261262actionCell :{
262263whiteSpace :"nowrap" ,
263264} ,
264- secondary :{
265+ secondary :( theme ) => ( {
265266color :theme . palette . text . secondary ,
266- } ,
267- tableRow :{
268- "&:hover$ actionButton" :{
267+ } ) ,
268+ tableRow :( theme ) => ( {
269+ "&:hover. actionButton" :{
269270color :theme . palette . text . primary ,
270271borderColor :colors . gray [ 11 ] ,
271272"&:hover" :{
272273borderColor :theme . palette . text . primary ,
273274} ,
274275} ,
275- } ,
276- actionButton :{
276+ } ) ,
277+ actionButton :( theme ) => ( {
277278color :theme . palette . text . secondary ,
278279transition :"none" ,
279- } ,
280- } ) ) ;
280+ } ) ,
281+ } satisfies Record < string , Interpolation < Theme > > ;