11import Box from "@material-ui/core/Box"
2- import { makeStyles , Theme } from "@material-ui/core/styles"
2+ import { fade , makeStyles , Theme } from "@material-ui/core/styles"
33import Table from "@material-ui/core/Table"
44import TableBody from "@material-ui/core/TableBody"
55import TableCell from "@material-ui/core/TableCell"
66import TableHead from "@material-ui/core/TableHead"
77import TableRow from "@material-ui/core/TableRow"
8+ import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
89import useTheme from "@material-ui/styles/useTheme"
910import { FC } from "react"
1011import { useNavigate } from "react-router-dom"
@@ -77,7 +78,10 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
7778</ span >
7879</ TableCell >
7980< TableCell >
80- < span style = { { color :status . color } } > { status . status } </ span >
81+ < div className = { styles . statusCell } >
82+ < span style = { { color :status . color } } > { status . status } </ span >
83+ < KeyboardArrowRight className = { styles . arrowRight } />
84+ </ div >
8185</ TableCell >
8286</ TableRow >
8387)
@@ -102,11 +106,24 @@ const useStyles = makeStyles((theme) => ({
102106cursor :"pointer" ,
103107
104108"&:hover td" :{
105- backgroundColor :theme . palette . background . default ,
109+ backgroundColor :fade ( theme . palette . primary . light , 0.1 ) ,
106110} ,
107111
108112"&:focus" :{
109113outline :`1px solid${ theme . palette . secondary . dark } ,
110114} ,
115+
116+ "& .MuiTableCell-root:last-child" :{
117+ paddingRight :theme . spacing ( 2 ) ,
118+ } ,
119+ } ,
120+ arrowRight :{
121+ color :fade ( theme . palette . primary . contrastText , 0.7 ) ,
122+ width :20 ,
123+ height :20 ,
124+ } ,
125+ statusCell :{
126+ display :"flex" ,
127+ justifyContent :"space-between" ,
111128} ,
112129} ) )